aboutsummaryrefslogtreecommitdiff
path: root/styles.css
diff options
context:
space:
mode:
Diffstat (limited to 'styles.css')
-rw-r--r--styles.css519
1 files changed, 287 insertions, 232 deletions
diff --git a/styles.css b/styles.css
index efd78c4..d0c8861 100644
--- a/styles.css
+++ b/styles.css
@@ -1,233 +1,288 @@
-/* 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;
- }
+/* Dark Theme */
+@import "dark.css";
+
+@font-face {
+ font-family: "Nunito";
+ src: url("/fonts/Nunito-VariableFont_wght.ttf");
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Nunito";
+ src: url("/fonts/Nunito-Italic-VariableFont_wght.ttf");
+ font-weight: 125 950;
+ font-stretch: 75% 125%;
+ font-style: italic;
+}
+
+* {
+ font-family: "Nunito", sans-serif !important;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+}
+
+#copyright {
+ float: right;
+ vertical-align: middle;
+ display: inline-block;
+ position: fixed;
+ top: 8px;
+ opacity: .5;
+ right: 32px;
+}
+
+#user {
+ float: right;
+ vertical-align: middle;
+ display: inline-block;
+ position: fixed;
+ top: 5px;
+ 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 {
+ text-align: center;
+ height: max-content;
+ margin-top: 32px;
+ padding-top: 25vh;
+ padding-bottom: 5vh;
+ background-color: rgba(0, 0, 0, .5);
+}
+
+#explore-outer {
+ background-image: url("/intro.jpg");
+ background-size: cover;
+ background-position: center;
+ background-attachment: fixed;
+}
+
+#explore-grid {
+ margin-left: auto;
+ margin-right: auto;
+ width: max-content;
+ display: grid;
+ grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px;
+}
+
+#explore-grid.admin {
+ grid-template-columns: 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px;
+}
+
+@media (max-width: 800px) {
+ .explore-description {
+ display: none !important;
+ }
+
+ #explore-grid {
+ display: grid;
+ grid-template-columns: 120px 120px;
+ }
+
+ #explore-grid.admin {
+ grid-template-columns: 120px 120px 120px;
+ }
+}
+
+.explore-btn {
+ color: white;
+ border-radius: 5px;
+ padding: 5px;
+ text-align: left;
+ display: block;
+ text-decoration: none;
+ border: 1px solid transparent;
+}
+
+.explore-btn:hover {
+ background: rgba(255, 255, 255, .25);
+ border: 1px solid gray;
+ backdrop-filter: blur(5px);
+}
+
+.explore-btn:active, .explore-btn:focus {
+ background: rgba(255, 255, 255, .5);
+ border: 1px solid white;
+ backdrop-filter: blur(5px);
+}
+
+.explore-btn {
+ color: white !important;
+ text-decoration: none !important;
+}
+
+.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);
+}
+
+@media (prefers-color-scheme: light) {
+ #data-loader-img {
+ filter: none !important;
+ }
+}
+
+.explore-description {
+ color: white;
+ opacity: 0;
+ display: inline-block;
+ margin-left: 5px;
+}
+
+.explore-btn:hover .explore-description, .explore-btn:focus .explore-description, .explore-btn:active .explore-description {
+ opacity: .5 !important;
} \ No newline at end of file
© Floofi Systems, Some rights reserved. Powered by cgit.