Overall improvements, updated pages
This commit is contained in:
@@ -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
@@ -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
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user