diff --git a/scss/desktop-horizon-fixes.scss b/scss/desktop-horizon-fixes.scss index 5172516..92d63d1 100644 --- a/scss/desktop-horizon-fixes.scss +++ b/scss/desktop-horizon-fixes.scss @@ -3,6 +3,7 @@ .topic-list-header { position: relative; top: 0; + z-index: 2; } .topic-author-avatar-data { @@ -28,18 +29,29 @@ } .topic-list-header { + position: relative; + margin-bottom: 0.35rem; + tr { border: none; } .topic-list-data { - padding: 0; + padding: 0.25rem 0; + color: var(--primary-600); + font-size: var(--font-down-2); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + background: transparent; &:not(.default) { display: none; } &.default { + border-radius: var(--d-border-radius); + .bulk-select, span:not(.bulk-select-topics, .d-button-label) { display: none; @@ -50,16 +62,22 @@ // bulk select .bulk-select-topics { position: absolute; - right: 0; - background: var(--secondary); - border-radius: 0 0 0 var(--d-border-radius); + right: 0.25rem; + top: 50%; + transform: translateY(-50%); + background: color-mix(in srgb, var(--d-content-background) 88%, white 12%); + border: 1px solid var(--primary-200); + border-radius: 999px; + box-shadow: 0 6px 18px -12px rgb(10 18 35 / 35%); display: flex; gap: 0.5rem; - margin: 0.5rem; + margin: 0; + padding: 0.25rem; button { white-space: nowrap; margin: 0; + border-radius: 999px; } } } diff --git a/scss/self.scss b/scss/self.scss new file mode 100644 index 0000000..ef37800 --- /dev/null +++ b/scss/self.scss @@ -0,0 +1,35 @@ +@use "lib/viewport"; + +#main-outlet { + @if $home_bg_image != "" { + background-image: url($home_bg_image); + background-size: cover; + background-position: center; + } +} + +.container.list-container{ + position: relative; +} + +.container.list-container::before{ + position: absolute; + content: ""; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + background-color: #fff9; + border-radius: var(--d-border-radius); + backdrop-filter: blur(10px); +} + +.list-controls{ + border-radius: var(--d-border-radius); +} + +#list-area{ + background-color: unset !important; +} diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss index 2232b5f..1170f0b 100644 --- a/scss/topic-cards.scss +++ b/scss/topic-cards.scss @@ -68,7 +68,7 @@ .topic-list-body .topic-list-item { position: relative; - background: var(--d-content-background); + background: linear-gradient(45deg, var(--d-sidebar-active-background), #ffffff63); box-shadow: 0 10px 30px -18px rgb(10 18 35 / 38%), 0 6px 16px -10px var(--topic-card-shadow); @@ -155,11 +155,10 @@ &:hover { .discourse-no-touch & { - background: var(--d-content-background); - box-shadow: - 0 16px 34px -18px rgb(10 18 35 / 52%), - 0 8px 20px -10px var(--topic-card-shadow); + background: var(--d-sidebar-active-background); + box-shadow: 4px 5px 3px 1px #0003, 0 8px 20px -10px var(--topic-card-shadow); transform: translateY(-1px); + border-left: 5px solid var(--d-button-danger-icon-color); } } @@ -764,33 +763,3 @@ body.user-messages-page { display: inline-flex; position: relative; } - -#main-outlet { - @if $home_bg_image != "" { - background-image: url($home_bg_image); - background-size: cover; - background-position: center; - } -} - -.container.list-container{ - position: relative; -} - -.container.list-container::before{ - position: absolute; - content: ""; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - background-color: #fff9; - border-radius: var(--d-border-radius); - backdrop-filter: blur(10px); -} - -#list-area{ - background-color: unset !important; -}