diff options
| -rw-r--r-- | styles/input.css | 461 |
1 files changed, 0 insertions, 461 deletions
diff --git a/styles/input.css b/styles/input.css deleted file mode 100644 index 0b56982..0000000 --- a/styles/input.css +++ /dev/null @@ -1,461 +0,0 @@ -/* Begin Input CSS */ - -/* All input */ - -input, select -{ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - margin: 5px; - - display: block; - - box-sizing: border-box; -} - -/* Button input */ - -input[type=button], input[type=submit], button, a -{ - padding: 10px; - - border: none; - border-radius: 5px; - - background-color: var(--input-bg-button); - color: var(--input-color-button); - - font-size: medium; - - transition-duration: 0.2s; - - cursor: pointer; -} - -input[type=button]:hover, input[type=submit]:hover, button:hover, a:hover -{ - background-color: var(--input-bg-button-hover); -} - -input[type=button]:active, input[type=submit]:active, button:active, a:active -{ - 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 var(--input-border-text); - border-radius: 3px; - padding: 5px; - 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: var(--input-border-text-hover); -} - -input[type=text]:focus, input[type=date]:focus, input[type=time]:focus, input[type="number"]:focus -{ - border-color: var(--input-border-text-active); -} - -/* Radial input */ - -input[type=radio] -{ - width: 20px; - height: 20px; - - border: 3px solid var(--input-border-bool); - border-radius: 50%; - - transition-duration: 0.2s; - - background-color: var(--input-bg-bool); - - cursor: pointer; - - display: inline-block; - vertical-align: middle; -} - -input[type=radio]:checked, input[type=radio]:hover{ - border-width: 6px; -} - -input[type=radio]:checked -{ - background-color: var(--input-bg-bool-true); - border-color: var(--input-border-bool-true); -} - -input[type=radio]:hover -{ - background-color: var(--input-bg-bool-hover); - border-color: var(--input-border-bool-hover); -} - -input[type=radio]:active -{ - background-color: var(--input-bg-bool-active); - border-color: var(--input-border-bool-active); -} - -/* Checkbox input */ - -input[type=checkbox] -{ - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - display: inline-block; - vertical-align: middle; - - width: 20px; - height: 20px; - - border: 3px solid var(--input-border-bool); - - border-radius: 2px; - - transition-duration: 0.2s; - - background-color: var(--input-bg-bool); - - cursor: pointer; -} - -input[type=checkbox]:checked -{ - border-width: 10px; - background-color: var(--input-border-bool-true); - border-color: var(--input-border-bool-true); -} - -input[type=checkbox]:hover -{ - background-color: var(--input-bg-bool-hover); - border-color: var(--input-border-bool-hover); -} - -input[type=checkbox]:active -{ - background-color: var(--input-bg-bool-active); - border-color: var(--input-border-bool-active); -} - -input[type=checkbox]::after -{ - height: 15px; - width: 10px; - - box-sizing: border-box; - - position: relative; - - display: block; - - border-color: var(--input-bg-bool-true); - border-style: solid; - border-width: 0px 0px 0px 0px; - - top: calc(50% - 10px); - left: calc(50% - 5px); - - transform-origin: center; - transform: rotate(45deg); - - content: ''; -} - -input[type=checkbox]:checked::after -{ - border-width: 0px 3px 3px 0px; -} - -/* Color input */ - -input[type=color] -{ - display: inline-block; - - vertical-align: middle; - - height: 20px; - width: 20px; - - margin: 0; - padding: 0; - - border: 0; - - cursor: pointer; -} - -/* File input */ - -input[type=file] -{ - display: none; -} - -/* Custom select */ - -div.input-select -{ - font-size: 1em; - - display: block; - position: absolute; - z-index: 0; - - pointer-events: none; - - overflow-y: auto; - overflow-x: hidden; - - max-height: 8em; - - border-radius: 3px; -} - -div.input-select > div -{ - display: none; - pointer-events: none; -} - -div.input-select > div[selected=true] -{ - display: block; -} - -div.input-container:focus > div.input-select -{ - transform: translate(0, 2em); - - pointer-events: all; - z-index: 1; - - 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 */ - -*.input-container { - margin: 5px; - padding: 5px; - - border-radius: 3px; - - display: inline-block; -} - -/* Color container */ - -div.input-container[type=color] -{ - text-align: center; - - background-color: var(--input-bg-button); - color: var(--input-color-button); - - transition-duration: 0.2s; - - cursor: pointer; - - width: max-content; -} - -div.input-container[type=color]::after -{ - display: inline; - - vertical-align: middle; - - content: ' Pick a color'; -} - -div.input-container[type=color]:hover -{ - background-color: var(--input-bg-button-hover); -} - -div.input-container[type=color]:active -{ - background-color: var(--input-bg-button-active); -} - -/* File input container */ - -div.input-container[type=file] -{ - background-color: var(--input-bg-button); - color: var(--input-color-button); - - transition-duration: 0.2s; - - cursor: pointer; - - text-align: center; - - width: max-content; - height: max-content; -} - -div.input-container[type=file]:hover -{ - background-color: var(--input-bg-button-hover); -} - -div.input-container[type=file]:active -{ - background-color: var(--input-bg-button-active); -} - -div.input-container[type=file]::after -{ - display: inline; - - vertical-align: middle; - - content: attr(data-files); -} - -/* Radio input container */ - -div.input-container[type=radio]::before -{ - display: block; - content: attr(data-prompt) ":"; - transition-duration: 0.2s; -} - -div.input-container[type=radio] -{ - 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: 1.25em; - min-width: 8em; - width: calc(100% - 2em); - - color: var(--input-color-select); - - cursor: pointer; - - 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); -} - -/* Input Title Wrapper */ - -div.input-title-wrapper::before -{ - color: var(--main-color); - content: attr(data-title); - display: block; -} - -div.input-title-wrapper -{ - background-color: var(--main-bg); - box-shadow: var(--gui-shadow-game) 3px 3px 2px; - border-radius: 5px; - margin: 10px; - padding: 5px; -} - -div.input-title-wrapper[type=checkbox] -{ - cursor: pointer; -} - -div.input-title-wrapper[type=checkbox] > input -{ - pointer-events: none; -} - - -/* End Input CSS */
\ No newline at end of file |