summaryrefslogtreecommitdiff
path: root/docs/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'docs/assets/css')
-rw-r--r--docs/assets/css/css.css156
1 files changed, 100 insertions, 56 deletions
diff --git a/docs/assets/css/css.css b/docs/assets/css/css.css
index 5aa0b0b..d12b7b5 100644
--- a/docs/assets/css/css.css
+++ b/docs/assets/css/css.css
@@ -1,77 +1,104 @@
@font-face {
- font-family: nhg;
- src: url(../fonts/NHaasGroteskTXPro-55Rg.ttf);
- font-weight: normal;
- font-style: normal;
+ font-family: nhg;
+ src: url(../fonts/NHaasGroteskTXPro-55Rg.ttf);
+ font-weight: normal;
+ font-style: normal;
}
@font-face {
- font-family: nhg;
- src: url(../fonts/NHaasGroteskTXPro-56It.ttf);
- font-weight: normal;
- font-style: italic;
+ font-family: nhg;
+ src: url(../fonts/NHaasGroteskTXPro-56It.ttf);
+ font-weight: normal;
+ font-style: italic;
}
@font-face {
- font-family: nhg;
- src: url(../fonts/NHaasGroteskTXPro-75Bd.ttf);
- font-weight: bold;
- font-style: normal;
+ font-family: nhg;
+ src: url(../fonts/NHaasGroteskTXPro-75Bd.ttf);
+ font-weight: bold;
+ font-style: normal;
}
@font-face {
- font-family: nhg;
- src: url(../fonts/NHaasGroteskTXPro-76BdIt.ttf);
- font-weight: bold;
- font-style: italic;
+ font-family: nhg;
+ src: url(../fonts/NHaasGroteskTXPro-76BdIt.ttf);
+ font-weight: bold;
+ font-style: italic;
}
.desktop .m,
-.mobile .d { display: none; }
-html, body {
- margin: 0; padding: 0; width: 100%; height: 100%;
+.mobile .d {
+ display: none;
+}
+html,
+body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
font-family: nhg, sans-serif;
- color: rgba(255,255,255,0.9);
+ color: rgba(255, 255, 255, 0.9);
}
html {
- background-color: rgb(0,0,0);
- background-image: linear-gradient(rgba(20, 10, 0, 0.0), rgba(20, 10, 0, 1.0));
+ background-color: rgb(0, 0, 0);
+ background-image: linear-gradient(rgba(20, 10, 0, 0), rgba(20, 10, 0, 1));
background-attachment: fixed;
transition: background-color 1s;
}
html.day {
- background-color: rgb(80,10,60);
+ background-color: rgb(80, 10, 60);
}
html.night {
- background-color: rgb(8,10,30);
+ background-color: rgb(8, 10, 30);
}
body {
- background-color: rgba(0,0,0,0);
+ background-color: rgba(0, 0, 0, 0);
transition: background-color 1000ms, opacity 500ms;
opacity: 1;
}
body.loading {
- background-color: rgba(255,128,192,1);
+ background-color: rgba(255, 128, 192, 1);
background-color: black;
opacity: 0;
}
body.fade {
opacity: 1;
background-color: black;
- background-color: rgba(255,128,192,1);
+ background-color: rgba(255, 128, 192, 1);
+}
+::-webkit-scrollbar {
+ background-color: #000;
+ width: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #666;
+ border: solid 2px transparent;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: #666;
+ border: solid 2px transparent;
+}
+
+::-webkit-scrollbar-track {
+ border: solid 2px transparent;
}
.shards {
position: absolute;
- top: 0; left: 0;
- width: 100%; height: 100%;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
overflow: hidden;
pointer-events: none;
}
.bgs {
position: absolute;
- top: 50%; left: 50%;
+ top: 50%;
+ left: 50%;
opacity: 0.7;
transition: opacity 500ms;
perspective: 10000px;
}
.stars {
- transition: all 500ms cubic-bezier(0,0,0,1);
+ transition: all 500ms cubic-bezier(0, 0, 0, 1);
transform: translateZ(0) scaleX(1) scaleY(1);
}
.stars.fade {
@@ -82,31 +109,33 @@ body.fade {
}
.bg {
position: absolute;
- top: 0; left: 0;
+ top: 0;
+ left: 0;
transition: all 120s;
}
header {
- background-color: rgba(40,20,30,0.9);
+ background-color: rgba(40, 20, 30, 0.9);
position: absolute;
width: 100%;
bottom: 100px;
left: 0;
}
p {
- margin: 0; padding: 0;
+ margin: 0;
+ padding: 0;
line-height: 1.4;
}
p + p {
- margin-top: 14px;ß
+ margin-top: 14px;
}
a {
text-decoration: none;
- color: rgba(255,255,255,0.8);
+ color: rgba(255, 255, 255, 0.8);
transition: color 200ms;
border-bottom: 1px dotted;
}
.desktop a:hover {
- color: rgba(255,255,255,1.0);
+ color: rgba(255, 255, 255, 1);
}
img {
max-width: 100%;
@@ -120,7 +149,7 @@ img.cover {
}
.menu a.active {
border-bottom: 1px dotted;
- color: rgba(255,255,255,1.0);
+ color: rgba(255, 255, 255, 1);
}
.logo {
width: 400px;
@@ -194,7 +223,7 @@ ol li {
background-image: url(../img/pause-inv.png);
background-size: 100%;
background-position: center;
- border: 2px solid rgba(255,255,255,0.3);
+ border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
margin: 0 10px 0 10px;
}
@@ -209,7 +238,7 @@ ol li {
flex: auto;
}
.desktop .player:hover .track {
- color: rgba(255,255,255,1.0);
+ color: rgba(255, 255, 255, 1);
}
.playlist {
-webkit-overflow-scrolling: touch;
@@ -219,27 +248,31 @@ ol li {
max-width: calc(100vw - 30px);
background: black;
position: absolute;
- bottom: 160px; right: 0;
+ bottom: 160px;
+ right: 0;
margin: 0px 10px;
padding: 0px;
- height: 0; overflow: hidden;
- transition: all 0.5s cubic-bezier(0,1,1,1);
+ height: 0;
+ overflow: hidden;
+ transition: all 0.5s cubic-bezier(0, 1, 1, 1);
}
.playlist.visible {
height: 180px;
}
.playlist ul {
- margin: 0; padding: 0;
+ margin: 0;
+ padding: 0;
}
.playlist li {
- margin: 0; padding: 10px;
+ margin: 0;
+ padding: 10px;
cursor: pointer;
transition: all 0.2s;
- background: rgba(20,5,10,0.5);
+ background: rgba(20, 5, 10, 0.5);
}
.playlist li.active {
color: #000;
- background: rgba(255,255,255,0.9);
+ background: rgba(255, 255, 255, 0.9);
}
.playlistToggle {
align-self: flex-end;
@@ -248,7 +281,7 @@ ol li {
padding: 10px;
display: flex;
flex-direction: column;
- justify-content:space-between;
+ justify-content: space-between;
}
.playlistToggle div {
width: 100%;
@@ -263,10 +296,11 @@ section {
max-width: 500px;
background: black;
position: absolute;
- bottom: 160px; left: 0;
+ bottom: 160px;
+ left: 0;
margin: 10px 10px;
padding: 10px;
- background: rgba(20,5,10,0.5);
+ background: rgba(20, 5, 10, 0.5);
pointer-events: none;
opacity: 0;
transition: opacity 200ms;
@@ -279,14 +313,24 @@ section {
pointer-events: auto;
}
@keyframes fade {
- 0% { opacity: 0.6; }
- 50% { opacity: 1.0; }
- 90% { opacity: 0.7; }
-100% { opacity: 0.6; }
+ 0% {
+ opacity: 0.6;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 90% {
+ opacity: 0.7;
+ }
+ 100% {
+ opacity: 0.6;
+ }
}
@media (max-width: 700px) {
- * { box-sizing: border-box; }
+ * {
+ box-sizing: border-box;
+ }
header {
bottom: auto;
top: 0px;
@@ -331,7 +375,7 @@ section {
.player {
position: fixed;
bottom: 0;
- background: rgba(80,10,60,0.6);
+ background: rgba(80, 10, 60, 0.6);
width: 100vw;
padding: 12px 20px;
}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 21:53:43 +0000