summaryrefslogtreecommitdiff
path: root/webcards/styles/input.css
diff options
context:
space:
mode:
Diffstat (limited to 'webcards/styles/input.css')
-rw-r--r--webcards/styles/input.css203
1 files changed, 166 insertions, 37 deletions
diff --git a/webcards/styles/input.css b/webcards/styles/input.css
index 16a5385..0553fc2 100644
--- a/webcards/styles/input.css
+++ b/webcards/styles/input.css
@@ -2,7 +2,7 @@
/* All input */
-input
+input, select
{
-webkit-appearance: none;
-moz-appearance: none;
@@ -11,7 +11,8 @@ input
margin: 5px;
display: block;
- z-index: 1;
+
+ box-sizing: border-box;
}
/* Button input */
@@ -19,14 +20,13 @@ input
input[type=button], input[type=submit], button
{
padding: 10px;
- box-sizing: border-box;
border: none;
border-radius: 5px;
- color: white;
- background-color: #0084ff;
-
+ background-color: var(--input-bg-button);
+ color: var(--input-color-button);
+
font-size: medium;
transition-duration: 0.2s;
@@ -36,33 +36,34 @@ input[type=button], input[type=submit], button
input[type=button]:hover, input[type=submit]:hover, button:hover
{
- background-color: #3ea2ff;
+ background-color: var(--input-bg-button-hover);
}
input[type=button]:active, input[type=submit]:active, button:active
{
- background-color: #0056a7;
+ background-color: var(--input-bg-button-active);
}
/* Text, date, number, and time input */
input[type=text], input[type=date], input[type=time], input[type="number"]
{
- border: 2px solid #555;
+ border: 2px solid var(--input-border-text);
border-radius: 3px;
padding: 5px;
- background-color: white;
+ background-color: var(--input-bg-text);
+ color: var(--input-color-text);
font-size: 1em;
}
input[type=text]:hover, input[type=date]:hover, input[type=time]:hover, input[type="number"]:hover
{
- border-color: black;
+ border-color: var(--input-border-text-hover);
}
input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus
{
- border-color: #0084ff;
+ border-color: var(--input-border-text-active);
}
/* Radial input */
@@ -72,12 +73,12 @@ input[type=radio]
width: 20px;
height: 20px;
- border: 3px solid black;
+ border: 3px solid var(--input-border-bool);
border-radius: 50%;
transition-duration: 0.2s;
- background-color: white;
+ background-color: var(--input-bg-bool);
cursor: pointer;
@@ -91,18 +92,20 @@ input[type=radio]:checked, input[type=radio]:hover{
input[type=radio]:checked
{
- background-color: black;
- border-color: #0084ff;
+ background-color: var(--input-bg-bool-true);
+ border-color: var(--input-border-bool-true);
}
input[type=radio]:hover
{
- border-color: #3ea2ff;
+ background-color: var(--input-bg-bool-hover);
+ border-color: var(--input-border-bool-hover);
}
input[type=radio]:active
{
- border-color: black;
+ background-color: var(--input-bg-bool-active);
+ border-color: var(--input-border-bool-active);
}
/* Checkbox input */
@@ -119,13 +122,13 @@ input[type=checkbox]
width: 20px;
height: 20px;
- border: 3px solid black;
+ border: 3px solid var(--input-border-bool);
border-radius: 2px;
transition-duration: 0.2s;
- background-color: white;
+ background-color: var(--input-bg-bool);
cursor: pointer;
}
@@ -133,22 +136,25 @@ input[type=checkbox]
input[type=checkbox]:checked
{
border-width: 10px;
- border-color: #0084ff;
+ background-color: var(--input-border-bool-true);
+ border-color: var(--input-border-bool-true);
}
input[type=checkbox]:hover
{
- border-color: #3ea2ff;
+ background-color: var(--input-bg-bool-hover);
+ border-color: var(--input-border-bool-hover);
}
input[type=checkbox]:active
{
- border-color: black;
+ background-color: var(--input-bg-bool-active);
+ border-color: var(--input-border-bool-active);
}
input[type=checkbox]::after
{
- height: 16px;
+ height: 15px;
width: 10px;
box-sizing: border-box;
@@ -157,7 +163,7 @@ input[type=checkbox]::after
display: block;
- border-color: black;
+ border-color: var(--input-bg-bool-true);
border-style: solid;
border-width: 0px 0px 0px 0px;
@@ -201,13 +207,68 @@ input[type=file]
display: none;
}
+/* Custom select */
+
+div.input-select
+{
+ font-size: 1em;
+
+ display: block;
+ position: absolute;
+
+}
+
+div.input-select > div
+{
+ display: none;
+ pointer-events: none;
+}
+
+div.input-select > div[selected=true]
+{
+ display: block;
+}
+
+div.input-container:focus > div.input-select
+{
+ pointer-events: all;
+
+ transform: translate(0, 2em);
+
+ border: 2px solid var(--input-border-select-active);
+ background-color: var(--input-bg-select-active);
+}
+
+div.input-container:focus > div.input-select > div
+{
+ pointer-events: all;
+ display: block;
+ padding: 5px;
+ width: 6em;
+}
+
+div.input-container:focus > div.input-select > div:hover
+{
+ background-color: var(--input-bg-select-hover);
+ color: var(--input-color-select-hover);
+}
+
+div.input-container:focus > div.input-select > div[selected=true]:after
+{
+ font-family: "IcoFont";
+ content: '\eed8';
+ font-size: medium;
+}
+
/* Input container */
-div.input-container {
+*.input-container {
margin: 5px;
padding: 5px;
border-radius: 3px;
+
+ display: inline-block;
}
/* Color container */
@@ -216,8 +277,8 @@ div.input-container[type=color]
{
text-align: center;
- background-color: #0084ff;
- color: white;
+ background-color: var(--input-bg-button);
+ color: var(--input-color-button);
transition-duration: 0.2s;
@@ -237,20 +298,20 @@ div.input-container[type=color]::after
div.input-container[type=color]:hover
{
- background-color: #3ea2ff;
+ background-color: var(--input-bg-button-hover);
}
div.input-container[type=color]:active
{
- background-color: #0056a7;
+ background-color: var(--input-bg-button-active);
}
/* File input container */
div.input-container[type=file]
{
- background-color: #0084ff;
- color: white;
+ background-color: var(--input-bg-button);
+ color: var(--input-color-button);
transition-duration: 0.2s;
@@ -264,12 +325,12 @@ div.input-container[type=file]
div.input-container[type=file]:hover
{
- background-color: #3ea2ff;
+ background-color: var(--input-bg-button-hover);
}
div.input-container[type=file]:active
{
- background-color: #0056a7;
+ background-color: var(--input-bg-button-active);
}
div.input-container[type=file]::after
@@ -283,14 +344,82 @@ div.input-container[type=file]::after
/* Radio input container */
-div.input-container[type=radio]::before {
+div.input-container[type=radio]::before
+{
display: block;
- content: 'Radio';
+ content: 'Select one';
+ transition-duration: 0.2s;
}
div.input-container[type=radio]
{
- background-color: rgba(255, 255, 255, 0.3);
+ background-color: var(--input-bg-multi);
+}
+
+div.input-container[type=radio]:hover
+{
+ background-color: var(--input-bg-multi);
+}
+
+/* Select input container */
+
+div.input-container[type=select]
+{
+ border: 2px solid var(--input-border-select);
+ background-color: var(--input-bg-select);
+ min-height: 1em;
+ width: 7em;
+
+ color: var(--input-color-select);
+
+ cursor: pointer;
+
+ overflow: hidden;
+
+ display: inline-block;
+
+ text-align: left;
+}
+
+div.input-container[type=select]:hover
+{
+ border-color: var(--input-border-select-hover);
+ background-color: var(--input-bg-select-hover);
+
+ color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus
+{
+ border-color: var(--input-border-select-active);
+ background-color: var(--input-bg-select-active);
+
+ color: var(--input-color-select-active);
+
+ overflow: visible;
+}
+
+div.input-container[type=select]:after
+{
+ font-family: "IcoFont";
+ font-size: medium;
+ content: '\eab2';
+ display: block;
+ height: 100%;
+ width: 100%;
+ color: var(--input-color-select);
+ text-align: right;
+}
+
+div.input-container[type=select]:after:hover
+{
+ color: var(--input-color-select-hover);
+}
+
+div.input-container[type=select]:focus::after
+{
+ content: '\eab9';
+ color: var(--input-color-select-active);
}
/* End Input CSS */ \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-09-19 21:31:01 +0000