dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-24 12:35:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor styles a bit

Browse source
This commit is contained in:
Send_Nukez 2021-11-18 02:44:15 +01:00
parent 18f0d454be
commit 61db261115
7 changed files with 48 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/styles/Colors.scss
View file

@ -45,14 +45,15 @@ $props-to-transition: ("sidebar", "main", "text", "button");
transition-property: $props;
}
// Color Function
// $light-offset is added when in light mode
// $key: the key of the color, e.g. "main"
// $alpha: tha alpha in rgba()
// $light-offset: added when in light mode
@function spiceColor($key, $alpha: 1, $light-offset: 0) {
@if $alpha == 1 {
@return var(--spice-#{$key});
} @else if $light-offset == 0 {
@return rgba(var(--spice-rgb-#{$key}), $alpha);
} @else {
@return rgba(var(--spice-rgb-#{$key}), calc($alpha + var(--is_light) * $light-offset));
@return rgba(var(--spice-rgb-#{$key}), lightOffset($alpha, $light-offset));
}
}

21
src/styles/ConfigMenu.scss
View file

@ -103,6 +103,7 @@
align-items: center;
gap: 10px;
padding: 8px 16px;
user-select: text;
&[hidden] {
display: none;
@ -128,8 +129,16 @@
border-bottom-right-radius: 0px;
}
&[invalid]::before {
border: 2px solid rgba(red, 0.8);
&[invalid] {
&::before {
border: 2px solid rgba(red, 0.8);
}
.dribbblish-config-item-input::before {
content: var(--validation-error);
margin-right: 8px;
color: rgba(red, 0.8);
}
}
&[changed] {
@ -190,7 +199,6 @@
height: min-content;
color: spiceColor("subtext");
line-height: calc(1em + 6px); // To have line gaps
line-break: anywhere;
}
.x-settings-secondColumn {
@ -200,13 +208,8 @@
}
.dribbblish-config-item-input {
display: flex;
min-width: fit-content;
&::before {
content: var(--validation-error);
margin-right: 8px;
color: rgba(red, 0.8);
}
}
}
}

9
src/styles/ContextMenu.scss
View file

@ -4,13 +4,18 @@
position: relative;
border-radius: var(--main-corner-radius);
padding: 8px;
box-shadow: 0px 0px 8px spiceColor("subtext", 0.1, 0.1);
&:not([data-depth="0"]) {
margin: -5px 0px;
}
&::before {
z-index: -1;
content: "";
position: absolute;
inset: 0px;
background-color: spiceColor("main", calc(0.75 - 0.1 * var(--is_light))) !important;
background-color: spiceColor("main", 0.75, -0.1) !important;
backdrop-filter: blur(10px);
border-radius: var(--main-corner-radius);
}
@ -24,7 +29,7 @@
&:focus,
&:active,
&[aria-expanded="true"] {
background-color: spiceColor("subtext", calc(0.1 + 0.3 * var(--is_light)));
background-color: spiceColor("subtext", 0.1, 0.3);
}
&::before,

4
src/styles/Inputs.scss
View file

@ -66,7 +66,7 @@ select {
&:active {
background-color: spiceColor("selected-row", 0.6) !important;
}
option {
background: spiceColor("main") !important;
}
@ -136,7 +136,7 @@ input {
&[type="time"] {
&::-webkit-calendar-picker-indicator {
filter: invert(calc(1 - var(--is_light)));
filter: invert(var(--is_dark));
}
}

12
src/styles/Markdown.scss
View file

@ -1,4 +1,14 @@
*[markdown] {
ol,
ul {
list-style: inside;
> li::marker {
content: "• ";
font-weight: 900;
}
}
code {
background-color: spiceColor("subtext", 0.1);
padding: 0px 5px;
@ -6,6 +16,6 @@
}
.muted {
color: spiceColor("subtext", 0.5);
color: spiceColor("subtext", 0.5, 0.2);
}
}

4
src/styles/Util.scss Normal file
View file

@ -0,0 +1,4 @@
// returns $n and adds $offset when the theme is light
@function lightOffset($n, $offset) {
@return calc($n + $offset * var(--is_light));
}

21
src/styles/main.scss
View file

@ -3,6 +3,7 @@
@return #{"invert("}$v#{")"};
}
@import "Util";
@import "Colors";
@import "Fonts";
@import "Inputs";
@ -23,28 +24,22 @@
--image-radius: 10px;
--sidebar-icons-border-radius: 50vh; // 50vh = round / pill
--song-transition-speed: 3s;
}
.os-scrollbar-handle {
background-color: spiceColor("text") !important;
border-radius: calc(var(--scrollbar-vertical-size) / 2);
}
.os-scrollbar-handle:hover {
filter: brightness(80%);
--is_dark: calc(1 - var(--is_light));
}
::-webkit-scrollbar {
width: var(--scrollbar-vertical-size);
}
.os-scrollbar-handle,
::-webkit-scrollbar-thumb {
background-color: spiceColor("text") !important;
border-radius: calc(var(--scrollbar-vertical-size) / 2);
background-color: spiceColor("sidebar") !important;
border-radius: 50vw;
}
.os-scrollbar-handle:hover,
::-webkit-scrollbar-thumb:hover {
filter: brightness(80%);
background-color: spiceColor("sidebar", 0.8) !important;
}
.main-type-mesto,
@ -1216,7 +1211,7 @@ html.right-expanded-cover.buddyfeed-visible .main-coverSlotExpanded-container {
background-position: center center;
filter: blur(15px);
border-radius: var(--main-corner-radius);
opacity: calc(0.07 + 0.03 * var(--is_light, 0));
opacity: lightOffset(0.07, 0.03);
transition: background-image var(--song-transition-speed) linear;
}