Overall improvements, updated pages

This commit is contained in:
2023-11-20 00:58:47 +03:00
parent 099b876032
commit a39ad3b464
18 changed files with 249 additions and 80 deletions
+1 -1
View File
@@ -6,7 +6,7 @@
@counter-style enjoy {
system: fixed;
symbols: "\2728" "\1F4A1" "\1F4D5" "\1F30D" "\2615" "\26C4";
symbols: "\2728" "\1F4A1" "\1F4BE" "\1F3A5" "\1F4D5" "\1F30D" "\2615" "\26C4";
suffix: " ";
}
+32 -22
View File
@@ -15563,13 +15563,23 @@ textarea.form-control-lg {
}
.page-enter-active, .page-leave-active {
transition: all 0.4s;
transition: all 0.15s;
}
.page-enter-from, .page-leave-to {
opacity: 0;
filter: blur(1em);
}
.expand-enter-active,
.expand-leave-active {
transition-property: opacity, height;
}
.expand-enter,
.expand-leave-to {
opacity: 0;
}
@counter-style do {
system: fixed;
symbols: "💻" "📌" "👻" "📷";
@@ -15577,7 +15587,7 @@ textarea.form-control-lg {
}
@counter-style enjoy {
system: fixed;
symbols: "✨" "💡" "📕" "🌍" "☕" "⛄";
symbols: "✨" "💡" "💾" "🎥" "📕" "🌍" "☕" "⛄";
suffix: " ";
}
.list-style-type-none {
@@ -15610,6 +15620,8 @@ body {
background-size: cover;
background-repeat: no-repeat;
image-rendering: pixelated;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: white;
font-family: "Lato", sans-serif;
font-size: 18px;
@@ -15646,6 +15658,10 @@ body {
font-family: "Alexandria", sans-serif;
}
.smooth-glide {
transition: height 0.4s linear;
}
.background {
background-color: rgba(0, 0, 0, 0.5);
}
@@ -15680,31 +15696,25 @@ body {
background: radial-gradient(circle at left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}
@property --scrollbar {
syntax: "<color>";
inherits: true;
initial-value: rgba(255, 255, 255, 0.15);
#pogger {
transition: min-height 0.5s linear;
}
.scrollbar {
min-height: 128px;
transition: --scrollbar 0.15s ease;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
}
.scrollbar:hover {
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
--scrollbar: rgba(255, 255, 255, 0.3);
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.2);
}
.scrollbar::-webkit-scrollbar {
width: 8px;
}
.scrollbar::-webkit-scrollbar-track {
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.2);
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: var(--scrollbar);
background-color: rgba(255, 255, 255, 0.15);
}
@media (prefers-color-scheme: light) {
@@ -15712,14 +15722,14 @@ body {
color: black;
}
.scrollbar {
scrollbar-color: rgba(0, 0, 0, 0.15) rgba(255, 255, 255, 0.3);
}
.scrollbar:hover {
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
--scrollbar: rgba(0, 0, 0, 0.3);
scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
}
.scrollbar::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.2);
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.2);
}
.background {
background-color: rgba(255, 255, 255, 0.8);
@@ -15746,13 +15756,13 @@ body {
}
.dimensions {
width: 80%;
min-height: auto;
min-height: fit-content;
max-height: 90%;
}
.fade-mask {
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0));
}
.rounded-card {
.rounded-1 {
border-radius: 1em;
}
.display-xs-none {
File diff suppressed because one or more lines are too long
+21 -23
View File
@@ -43,9 +43,12 @@ body {
background-repeat: no-repeat;
image-rendering: pixelated;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: white;
font-family: 'Lato', sans-serif;
font-size: 18px;
height: 100%;
@@ -83,6 +86,10 @@ body {
font-family: 'Alexandria', sans-serif;
}
.smooth-glide {
transition: height 0.4s linear;
}
// Query-overridable classes.
.background {
background-color: rgba(0, 0, 0, 0.5);
@@ -131,24 +138,15 @@ body {
);
}
@property --scrollbar {
syntax: '<color>';
inherits: true;
initial-value: rgba(255, 255, 255, 0.15);
#pogger {
transition: min-height 0.5s linear;
}
.scrollbar {
min-height: 128px;
transition: --scrollbar 0.15s ease;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
&:hover {
scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
--scrollbar: rgba(255, 255, 255, 0.3);
}
scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.2);
&::-webkit-scrollbar {
width: 8px;
@@ -156,12 +154,12 @@ body {
&::-webkit-scrollbar-track {
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.3);
background-color: rgba(0, 0, 0, 0.2);
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: var(--scrollbar);
background-color: rgba(255, 255, 255, 0.15);
}
}
@@ -171,16 +169,16 @@ body {
}
.scrollbar {
scrollbar-color: rgba(0, 0, 0, 0.15) rgba(255, 255, 255, 0.3);
&:hover {
scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
--scrollbar: rgba(0, 0, 0, 0.3);
}
scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.2);
&::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.2);
}
&::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: rgba(0, 0, 0, 0.2);
}
}
.background {
@@ -223,7 +221,7 @@ body {
.dimensions {
width: 80%;
min-height: auto;
min-height: fit-content;
max-height: 90%;
}
@@ -232,7 +230,7 @@ body {
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
}
.rounded-card {
.rounded-1 {
border-radius: 1em;
}
+11 -1
View File
@@ -1,7 +1,7 @@
.page {
&-enter-active,
&-leave-active {
transition: all 0.4s;
transition: all 0.15s;
}
&-enter-from,
@@ -10,3 +10,13 @@
filter: blur(1em);
}
}
.expand-enter-active,
.expand-leave-active {
transition-property: opacity, height;
}
.expand-enter,
.expand-leave-to {
opacity: 0;
}