diff --git a/src/public/stylesheets/theme-next-dark.css b/src/public/stylesheets/theme-next-dark.css index 66d76fd33..f37145962 100644 --- a/src/public/stylesheets/theme-next-dark.css +++ b/src/public/stylesheets/theme-next-dark.css @@ -127,13 +127,22 @@ --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15); --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); - --launcher-pane-background-color: #1a1a1a; - --launcher-pane-horizontal-background-color: #282828; - --launcher-pane-horizontal-border-color: rgb(22, 22, 22); - --launcher-pane-text-color: #909090; - --launcher-pane-button-hover-color: #ffffff; - --launcher-pane-button-hover-background: #ffffff1c; - --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); + /* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */ + --launcher-pane-background-color: unset; + --launcher-pane-text-color: unset; + + --launcher-pane-vert-background-color: #1a1a1a; + --launcher-pane-vert-text-color: #909090; + --launcher-pane-vert-button-hover-color: #ffffff; + --launcher-pane-vert-button-hover-background: #ffffff1c; + --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); + + --launcher-pane-horiz-border-color: rgb(22, 22, 22); + --launcher-pane-horiz-background-color: #282828; + --launcher-pane-horiz-text-color: #909090; + --launcher-pane-horiz-button-hover-color: #ffffff; + --launcher-pane-horiz-button-hover-background: #ffffff1c; + --launcher-pane-horiz-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2); --protected-session-active-icon-color: #8edd8e; --sync-status-error-pulse-color: #f47871; diff --git a/src/public/stylesheets/theme-next-light.css b/src/public/stylesheets/theme-next-light.css index 8c26932f9..670ecf98c 100644 --- a/src/public/stylesheets/theme-next-light.css +++ b/src/public/stylesheets/theme-next-light.css @@ -121,13 +121,21 @@ --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15); --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); - --launcher-pane-background-color: #e8e8e8; - --launcher-pane-horizontal-background-color: #fafafa; - --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.1); - --launcher-pane-text-color: #000000bd; - --launcher-pane-button-hover-color: black; - --launcher-pane-button-hover-background: white; - --launcher-pane-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075); + /* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */ + --launcher-pane-background-color: unset; + --launcher-pane-text-color: unset; + + --launcher-pane-vert-background-color: #e8e8e8; + --launcher-pane-vert-text-color: #000000bd; + --launcher-pane-vert-button-hover-color: black; + --launcher-pane-vert-button-hover-background: white; + --launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075); + + --launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.1); + --launcher-pane-horiz-background-color: #fafafa; + --launcher-pane-horiz-button-hover-color: black; + --launcher-pane-horiz-button-hover-background: white; + --launcher-pane-horiz-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075); --protected-session-active-icon-color: #16b516; --sync-status-error-pulse-color: #ff5528; diff --git a/src/public/stylesheets/theme-next/base.css b/src/public/stylesheets/theme-next/base.css index 55443a5fd..5914b9e43 100644 --- a/src/public/stylesheets/theme-next/base.css +++ b/src/public/stylesheets/theme-next/base.css @@ -26,11 +26,15 @@ --left-pane-item-selected-shadow-size: 2px; - --launcher-pane-size: 58px; - --launcher-pane-horizontal-size: 54px; - --launcher-pane-horizontal-icon-size: 20px; - --launcher-pane-button-margin: 6px; - --launcher-pane-button-gap: 3px; + --launcher-pane-vert-size: 58px; + --launcher-pane-vert-icon-size: 150%; + --launcher-pane-vert-button-margin: 6px; + --launcher-pane-vert-button-gap: 3px; + + --launcher-pane-horiz-size: 54px; + --launcher-pane-horiz-icon-size: 20px; + --launcher-pane-horiz-button-margin: 6px; + --launcher-pane-horiz-button-gap: 3px; --tree-actions-toolbar-horizontal-margin: 8px; --tree-actions-toolbar-vertical-margin: 8px; diff --git a/src/public/stylesheets/theme-next/shell.css b/src/public/stylesheets/theme-next/shell.css index a3f8992c8..52a8d99a5 100644 --- a/src/public/stylesheets/theme-next/shell.css +++ b/src/public/stylesheets/theme-next/shell.css @@ -26,9 +26,7 @@ body { } body.layout-horizontal { - --launcher-pane-background-color: var(--launcher-pane-horizontal-background-color); - --launcher-pane-size: var(--launcher-pane-horizontal-size); - --active-tab-background-color: var(--launcher-pane-background-color); + --active-tab-background-color: var(--launcher-pane-horiz-background-color); --active-tab-hover-background-color: var(--active-tab-background-color); --new-tab-button-background: transparent; --tab-bar-height: 44px; @@ -42,16 +40,19 @@ body.mobile { /* #region Mica */ body.background-effects.platform-win32 { - --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15); - --launcher-pane-background-color: rgba(255, 255, 255, 0.7); --tab-background-color: transparent; --new-tab-button-background: transparent; - --active-tab-background-color: var(--launcher-pane-background-color); + --active-tab-background-color: var(--launcher-pane-background-color); /* TODO: fix */ --background-material: tabbed; } +body.background-effects.platform-win32 #launcher-pane { + --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.15); + --launcher-pane-background-color: rgba(255, 255, 255, 0.7); +} + @media (prefers-color-scheme: dark) { - body.background-effects.platform-win32 { + body.background-effects.platform-win32 #launcher-pane { --launcher-pane-horizontal-border-color: rgba(0, 0, 0, 0.5); --launcher-pane-background-color: rgba(255, 255, 255, 0.09); } @@ -59,11 +60,14 @@ body.background-effects.platform-win32 { body.background-effects.platform-win32.layout-vertical { --left-pane-background-color: transparent; - --launcher-pane-background-color: rgba(255, 255, 255, 0.055); --left-pane-item-hover-background: rgba(127, 127, 127, 0.05); --background-material: mica; } +body.background-effects.platform-win32.layout-vertical #launcher-pane { + --launcher-pane-background-color: rgba(255, 255, 255, 0.055); +} + body.background-effects.platform-win32, body.background-effects.platform-win32 #root-widget, body.background-effects.platform-win32 #launcher-pane .launcher-button { @@ -141,18 +145,42 @@ body.layout-horizontal > .horizontal { } #launcher-pane.vertical { + --launcher-pane-border-color: unset; + --launcher-pane-background-color: var(--launcher-pane-vert-background-color); + --launcher-pane-text-color: var(--launcher-pane-vert-text-color); + --launcher-pane-button-hover-color: var(--launcher-pane-vert-button-hover-color); + --launcher-pane-button-hover-background: var(--launcher-pane-vert-button-hover-background); + --launcher-pane-button-hover-shadow: var(--launcher-pane-vert-button-hover-shadow); + + --launcher-pane-size: var(--launcher-pane-vert-size); + --launcher-pane-icon-size: var(--launcher-pane-vert-icon-size); + --launcher-pane-button-margin: var(--launcher-pane-vert-button-margin); + --launcher-pane-button-gap: var(--launcher-pane-vert-button-gap); + width: var(--launcher-pane-size) !important; padding-bottom: var(--launcher-pane-button-gap); } #launcher-pane.horizontal { + --launcher-pane-border-color: var(--launcher-pane-horiz-border-color); + --launcher-pane-background-color: var(--launcher-pane-horiz-background-color); + --launcher-pane-text-color: var(--launcher-pane-horiz-text-color); + --launcher-pane-button-hover-color: var(--launcher-pane-horiz-button-hover-color); + --launcher-pane-button-hover-background: var(--launcher-pane-horiz-button-hover-background); + --launcher-pane-button-hover-shadow: var(--launcher-pane-horiz-button-hover-shadow); + + --launcher-pane-size: var(--launcher-pane-horiz-size); + --launcher-pane-icon-size: var(--launcher-pane-horiz-icon-size); + --launcher-pane-button-margin: var(--launcher-pane-horiz-button-margin); + --launcher-pane-button-gap: var(--launcher-pane-horiz-button-gap); + height: var(--launcher-pane-size) !important; align-items: center; } @media (max-width: 991px) { #mobile-bottom-bar { - background: var(--launcher-pane-background-color); + background: var(--launcher-pane-horiz-background-color); } body.mobile #launcher-pane { @@ -163,7 +191,7 @@ body.layout-horizontal > .horizontal { @media (min-width: 992px) { #launcher-pane.horizontal { border-top: unset; - border-bottom: 1px solid var(--launcher-pane-horizontal-border-color); + border-bottom: 1px solid var(--launcher-pane-horiz-border-color); } } @@ -213,6 +241,10 @@ body.layout-horizontal > .horizontal { align-items: center; } +#launcher-pane .launcher-button { + font-size: var(--launcher-pane-icon-size) !important; +} + #launcher-pane.vertical .spacer { width: var(--launcher-pane-size); } @@ -253,10 +285,6 @@ body.layout-horizontal > .horizontal { animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite; } -#launcher-pane.horizontal .launcher-button { - font-size: var(--launcher-pane-horizontal-icon-size); -} - #launcher-pane .global-menu-button { --hover-item-background-color: transparent; } @@ -711,7 +739,7 @@ body.layout-horizontal .tab-row-container .note-tab[active]:before { top: var(--tab-height); right: calc(100% - 1px); height: 1px; - border-bottom: 1px solid var(--launcher-pane-horizontal-border-color); + border-bottom: 1px solid var(--launcher-pane-horiz-border-color); } body.layout-horizontal .tab-row-container .note-tab[active]:after { @@ -723,7 +751,7 @@ body.layout-horizontal .tab-row-container .note-tab[active]:after { right: 0; width: 100vw; height: 1px; - border-bottom: 1px solid var(--launcher-pane-horizontal-border-color); + border-bottom: 1px solid var(--launcher-pane-horiz-border-color); } /* #endregion */ @@ -757,7 +785,7 @@ body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-lay } #root-widget.horizontal-layout .tab-row-widget .note-tab[active] .note-tab-wrapper { - border: 1px solid var(--launcher-pane-horizontal-border-color); + border: 1px solid var(--launcher-pane-horiz-border-color); border-bottom-color: transparent; }