diff options
Diffstat (limited to 'web/share/css/main.css')
-rw-r--r-- | web/share/css/main.css | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/web/share/css/main.css b/web/share/css/main.css new file mode 100644 index 00000000..f5f0db75 --- /dev/null +++ b/web/share/css/main.css @@ -0,0 +1,179 @@ +body { + margin: 0; + overflow: hidden; + color: var(--cs-page-default-fg); + background-color: var(--cs-page-default-bg); + font-family: sans-serif !important; +} +body.body-no-select { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + touch-action: manipulation; +} + +a { + color: var(--cs-page-default-fg); +} + +hr { + border: none; + border-top: var(--border-default-thin); +} + +p.text { + text-align: justify; +} +p:not(:first-child).text { + margin-top: 0; +} +p:last-child.text { + margin-bottom: 0; +} + +div.code { + white-space: nowrap; + overflow-x: auto; + font-family: monospace; + border-radius: 4px; + color: var(--cs-code-default-fg); + background-color: var(--cs-code-default-bg); + padding: 10px; +} +div.code::-webkit-scrollbar { + width: 8px; + height: 8px; +} +div.code::-webkit-scrollbar-thumb { + border-radius: 4px; + background: var(--cs-scroll-default-bg); +} + +div.code span.code-comment { + color: var(--cs-code-comment-fg); +} + +img.svg-gray { + -webkit-filter: invert(0.7); + filter: invert(0.7); + vertical-align: middle; +} + +button, select { + box-shadow: none; + border: none; + border-radius: 4px; + color: var(--cs-control-default-fg); + background-color: var(--cs-control-default-bg); + display: block; + width: 100%; + height: 30px; + font-size: 16px; + outline: none; + cursor: pointer; +} +@media (hover: hover), (min--moz-device-pixel-ratio: 0) { + /* If we have a mouse cursor */ + button:enabled:hover, select:enabled:hover { + color: var(--cs-control-hovered-fg); + background-color: var(--cs-control-hovered-bg) !important; + } + button:active, select:active { + color: var(--cs-control-pressed-fg) !important; + } + select:enabled:hover { + background-image: url("../svg/select-arrow-intensive.svg") !important; + } +} +@media (hover: none) { + /* If we DON'T have a mouse cursor */ + button:active, select:active { + color: var(--cs-control-hovered-fg); + background-color: var(--cs-control-hovered-bg); + } +} +button:disabled, select:disabled { + color: var(--cs-control-disabled-fg); + 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(--cs-control-intensive-fg) !important; + background-color: var(--cs-bg-control-intensive) !important; + background-image: url("../svg/select-arrow-intensive.svg") !important; +} + +input[type=text], input[type=password] { + overflow-x: auto; + font-family: monospace; + border: thin; + border-radius: 4px; + color: var(--cs-code-default-fg); + background-color: var(--cs-code-default-bg); + padding: 2px; +} + +@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) { + button, select, input[type=text], input[type=password] { + height: 45px !important; + } +} + +div.buttons-row { + margin: 0; + padding: 0; + font-size: 0; +} + +.row50 { + display: inline-block; + width: 50%; +} +.row25 { + display: inline-block; + width: 25%; +} +.row16 { + display: inline-block; + width: 16.66% +} +.row50:not(:first-child), .row25:not(:first-child), .row16:not(:first-child) { + border-left: var(--border-control-thin); +} + +ul.footer { + list-style-type: none; + bottom: 0; + position: fixed; + width: 100%; + padding: 0; + font-size: 0.7em; + color: var(--cs-page-obscure-fg); + 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(--cs-page-obscure-fg); +} |