diff options
Diffstat (limited to 'styles.css')
| -rw-r--r-- | styles.css | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..efd78c4 --- /dev/null +++ b/styles.css @@ -0,0 +1,233 @@ +/* Dark Theme */ +@import "dark.css"; + +/* Globals */ +* { + font-family: sans-serif; +} + +html, body { + margin: 0; + padding: 0; +} + +#copyright { + float: right; + vertical-align: middle; + display: inline-block; + position: fixed; + top: 8px; + opacity: .5; + right: 32px; +} + +/* Loader */ +#loading { + position: fixed; + top: 0; + right: 0; + left: 0; + bottom: 0; + z-index: 999999; + background: #222; + color: white; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + +} + +.progress { + position: fixed; + left: 35%; + top: 65%; + height: 5px; + z-index: 99999999; + background-color: rgba(255, 255, 255, .25); + right: 35%; + border-radius: 1000px; +} + +.bar { + background-color: rgba(255, 255, 255, .25); + width: 0%; + height: 5px; + border-radius: 1000px; +} + +.percent { + position: absolute; + display: inline-block; + top: 3px; + left: 48%; +} + +/* Tabs */ +#tabs { + background: whitesmoke; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; + width: 100vw; +} + +#tabs img { + width: 36px; + vertical-align: middle; + filter: invert(0); + transition: width 200ms, filter 200ms; +} + +#tabs .tab { + border-bottom: 1px solid; + border-bottom-color: transparent; + text-align: center; + margin: 8px 8px 0; + padding-bottom: 8px; + cursor: pointer; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + transition: border-bottom-color 200ms; +} + +#tabs .tab.tab-active img { + width: 48px; +} + +#tabs .tab.tab-active { + border-bottom-color: black; +} + +#panes, .pane { + position: fixed; + top: 98px; + left: 0; + right: 0; + bottom: 0; +} + +.pane { + display: none; +} + +/* IFrame */ +.loader { + background: rgba(255, 255, 255, .75); + top: 98px; + bottom: 0; + position: fixed; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: 999999; + cursor: wait; +} + +.loader img { + height: 96px; + width: 96px; +} + +.frame { + border: none; + width: 100%; + height: 100%; +} + +/* Home */ +.home-grid { + display: grid; + grid-template-columns: 96px 1fr; + grid-column-gap: 10px; +} + +.home-grid > * { + display: flex; + align-items: center; +} + +/* Bootstrap Fixes */ +.dropdown-item { + cursor: pointer; +} + +.list-group { + margin-bottom: 10px !important; +} + +/* Responsiveness */ +@media (max-width: 550px) { + #copyright { + display: none; + } +} + +#explore { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + position: fixed; + inset: 0; +} + +#explore-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; +} + +#explore-grid.admin { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; +} + +@media (max-width: 800px) { + #explore-grid { + display: grid; + grid-template-columns: 1fr 1fr; + } + + #explore-grid.admin { + grid-template-columns: 1fr 1fr 1fr; + } +} + +.explore-btn { + color: white; + border-radius: 5px; + padding: 10px; + text-decoration: none; +} + +.explore-btn:hover { + background: rgba(255, 255, 255, .25); + box-shadow: 1px 5px 12px rgba(255, 255, 255, .25); +} + +.explore-btn:active, .explore-btn:focus { + background: rgba(255, 255, 255, .5); + box-shadow: 1px 5px 12px rgba(255, 255, 255, .5); +} + +@media (prefers-color-scheme: light) { + .explore-btn { + color: black; + } + + .explore-btn:hover { + background: rgba(0, 0, 0, 0.25); + box-shadow: 1px 5px 12px rgba(0, 0, 0, 0.25); + } + + .explore-btn:active, .explore-btn:focus { + background: rgba(0, 0, 0, .5); + box-shadow: 1px 5px 12px rgba(0, 0, 0, .5); + } + + #data-loader-img { + filter: none !important; + } +}
\ No newline at end of file |