diff options
Diffstat (limited to 'web/css/main.css')
| -rw-r--r-- | web/css/main.css | 204 |
1 files changed, 204 insertions, 0 deletions
diff --git a/web/css/main.css b/web/css/main.css new file mode 100644 index 00000000..0dd07fc2 --- /dev/null +++ b/web/css/main.css @@ -0,0 +1,204 @@ +body { + margin: 0; + overflow: hidden; + color: var(--fg-color-normal); + background-color: var(--bg-color-normal); + font-family: sans-serif !important; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + touch-action: manipulation; +} + +a { + text-decoration: underline dotted; + color: var(--fg-color-normal); +} +@media (hover: hover), (min--moz-device-pixel-ratio: 0) { + a:hover { + text-decoration: underline; + } +} + +hr { + border: none; + border-top: var(--normal-border); +} + +button, select { + box-shadow: none; + border: none; + color: var(--fg-color-normal); + background-color: var(--bg-color-normal); + display: block; + width: 100%; + height: 30px; + font-size: 16px; + outline: none; + cursor: pointer; +} +@media (hover: hover), (min--moz-device-pixel-ratio: 0) { + button:enabled:hover, select:enabled:hover { + color: var(--fg-color-intensive); + background-color: var(--bg-color-dark) !important; + } + button:active, select:active { + color: var(--fg-color-selected) !important; + } + select:enabled:hover { + background-image: url("../svg/select-arrow-intensive.svg") !important; + } +} +@media (hover: none) { + button:active, select:active { + color: var(--fg-color-intensive); + background-color: var(--bg-color-dark); + } +} +button:disabled, select:disabled { + color: var(--fg-color-inactive); + cursor: default; +} + +select { + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + background-image: url("../svg/select-arrow-normal.svg"); + background-position: center right; + background-repeat: no-repeat; +} +select:disabled { + background-image: url("../svg/select-arrow-inactive.svg") !important; +} +select:active { + color: var(--fg-color-intensive) !important; + background-color: var(--bg-color-dark) !important; + background-image: url("../svg/select-arrow-intensive.svg") !important; +} + +.row50 { + display: inline-block; + width: 50%; +} +.row25 { + display: inline-block; + width: 25%; +} +.row50:not(:first-child), .row25:not(:first-child) { + border-left: var(--dark-border); +} + +img#logo { + -webkit-filter: invert(0.7); + filter: invert(0.7); + vertical-align: middle; + padding-left: 16px; +} + +ul#ctl { + box-shadow: var(--small-shadow); + list-style-type: none; + margin: 0; + padding: 0; + background-color: var(--bg-color-ctl); + position: fixed; + top: 0; + width: 100%; + height: 50px; + z-index: 2147483646; +} +ul#ctl li.ctl-logo { + line-height: 50px; + margin-top: -2px; + float: left; +} +ul#ctl li.ctl-right-actions { + float: right; +} +ul#ctl img { + vertical-align: middle; + margin-right: 10px; + height: 20px; +} +ul#ctl li a.ctl-item { + line-height: 50px; + outline: none; + cursor: pointer; + border-left: var(--black-border); + display: inline-block; + color: var(--fg-color-normal); + padding-left: 16px; + padding-right: 16px; + text-decoration: none; +} +ul#ctl li a.ctl-item:hover:not(.active) { + background-color: var(--bg-color-hovered); +} +ul#ctl li a.ctl-item-selected { + box-shadow: 0 5px 0 var(--border-color-intensive) inset; + background-color: var(--bg-color-selected) !important; +} +div.ctl-dropdown-content { + visibility: hidden; + overflow: hidden; + white-space: nowrap; + border: var(--intensive-border); + border-top: var(--dark-border); + border-radius: 0 0 8px 8px; + position: absolute; + background-color: var(--bg-color-ctl); + min-width: 180px; + box-shadow: var(--big-shadow); + z-index: 2147483645; +} +div.ctl-dropdown-content button, select { + text-align: left; + padding: 0 16px; +} +div.ctl-dropdown-content div.buttons-row { + margin: 0; + padding: 0; + font-size: 0; +} +div.ctl-dropdown-content hr { + margin: 0; + display: block; + height: 0px; + padding: 0; + border: none; + border-top: var(--dark-border); +} +div.ctl-dropdown-content-buttons { + background-color: var(--bg-color-normal); +} +div.ctl-dropdown-content-text { + margin: 10px 15px 10px 15px; + font-size: 14px; +} + +ul#footer { + list-style-type: none; + bottom: 0; + position: fixed; + width: 100%; + padding: 0; + font-size: 0.7em; + color: var(--fg-color-inactive); + z-index: -10; +} +ul#footer li { + padding: 0 10px; +} +ul#footer li.footer-left { + float: left; +} +ul#footer li.footer-right { + float: right; +} +ul#footer li a { + color: var(--fg-color-inactive); +} |