From 61db2611151bb7db1ed4aafa078211481e16d3d9 Mon Sep 17 00:00:00 2001 From: Send_Nukez Date: Thu, 18 Nov 2021 02:44:15 +0100 Subject: [PATCH] refactor styles a bit --- src/styles/Colors.scss | 7 ++++--- src/styles/ConfigMenu.scss | 21 ++++++++++++--------- src/styles/ContextMenu.scss | 9 +++++++-- src/styles/Inputs.scss | 4 ++-- src/styles/Markdown.scss | 12 +++++++++++- src/styles/Util.scss | 4 ++++ src/styles/main.scss | 21 ++++++++------------- 7 files changed, 48 insertions(+), 30 deletions(-) create mode 100644 src/styles/Util.scss diff --git a/src/styles/Colors.scss b/src/styles/Colors.scss index 138f53e..e948dc9 100644 --- a/src/styles/Colors.scss +++ b/src/styles/Colors.scss @@ -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)); } } diff --git a/src/styles/ConfigMenu.scss b/src/styles/ConfigMenu.scss index ede6c99..a5b8f95 100644 --- a/src/styles/ConfigMenu.scss +++ b/src/styles/ConfigMenu.scss @@ -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); - } } } } diff --git a/src/styles/ContextMenu.scss b/src/styles/ContextMenu.scss index 86fa8b3..2ba5b47 100644 --- a/src/styles/ContextMenu.scss +++ b/src/styles/ContextMenu.scss @@ -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, diff --git a/src/styles/Inputs.scss b/src/styles/Inputs.scss index 61045a8..2a0bed7 100644 --- a/src/styles/Inputs.scss +++ b/src/styles/Inputs.scss @@ -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)); } } diff --git a/src/styles/Markdown.scss b/src/styles/Markdown.scss index 347dcce..4ea8133 100644 --- a/src/styles/Markdown.scss +++ b/src/styles/Markdown.scss @@ -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); } } diff --git a/src/styles/Util.scss b/src/styles/Util.scss new file mode 100644 index 0000000..711ac19 --- /dev/null +++ b/src/styles/Util.scss @@ -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)); +} diff --git a/src/styles/main.scss b/src/styles/main.scss index be736e8..d2e8ec3 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -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; }