From 15a07ecb178f3c4e229128b38b5bbc352eae3430 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Fri, 18 Dec 2020 22:35:46 +0800 Subject: [PATCH] update --- parse-sass.sh | 5 + src/main/gnome-shell/gnome-shell-dark-alt.css | 10 +- .../gnome-shell-dark-solid-alt.css | 10 +- .../gnome-shell/gnome-shell-dark-solid.css | 10 +- src/main/gnome-shell/gnome-shell-dark.css | 10 +- .../gnome-shell/gnome-shell-light-alt.css | 10 +- .../gnome-shell-light-solid-alt.css | 10 +- .../gnome-shell/gnome-shell-light-solid.css | 10 +- src/main/gnome-shell/gnome-shell-light.css | 10 +- src/other/dash-to-dock/_dash-to-dock.scss | 173 +++++++++++ src/other/dash-to-dock/stylesheet-dark.css | 38 +-- src/other/dash-to-dock/stylesheet-dark.scss | 8 + src/other/dash-to-dock/stylesheet.css | 38 +-- src/other/dash-to-dock/stylesheet.scss | 8 + src/sass/gnome-shell/_extensions.scss | 286 +----------------- .../gnome-shell/extensions/_dash-to-dock.scss | 195 ++++++++++++ src/sass/gnome-shell/extensions/_misc.scss | 87 ++++++ 17 files changed, 536 insertions(+), 382 deletions(-) create mode 100644 src/other/dash-to-dock/_dash-to-dock.scss create mode 100644 src/other/dash-to-dock/stylesheet-dark.scss create mode 100644 src/other/dash-to-dock/stylesheet.scss create mode 100644 src/sass/gnome-shell/extensions/_dash-to-dock.scss create mode 100644 src/sass/gnome-shell/extensions/_misc.scss diff --git a/parse-sass.sh b/parse-sass.sh index 94ef4c1..135a366 100755 --- a/parse-sass.sh +++ b/parse-sass.sh @@ -49,3 +49,8 @@ for color in "${_COLOR_VARIANTS[@]}"; do done done done + +sassc $SASSC_OPT src/other/dash-to-dock/stylesheet.{scss,css} +echo "==> Generating dash-to-dock stylesheet.css..." +sassc $SASSC_OPT src/other/dash-to-dock/stylesheet-dark.{scss,css} +echo "==> Generating dash-to-dock stylesheet-dark.css..." diff --git a/src/main/gnome-shell/gnome-shell-dark-alt.css b/src/main/gnome-shell/gnome-shell-dark-alt.css index dd26463..dacad81 100644 --- a/src/main/gnome-shell/gnome-shell-dark-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-alt.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(16, 16, 16, 0.25); } diff --git a/src/main/gnome-shell/gnome-shell-dark-solid-alt.css b/src/main/gnome-shell/gnome-shell-dark-solid-alt.css index 27d3ee1..eb262eb 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid-alt.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(16, 16, 16, 0.25); } diff --git a/src/main/gnome-shell/gnome-shell-dark-solid.css b/src/main/gnome-shell/gnome-shell-dark-solid.css index 27d3ee1..eb262eb 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(16, 16, 16, 0.25); } diff --git a/src/main/gnome-shell/gnome-shell-dark.css b/src/main/gnome-shell/gnome-shell-dark.css index dd26463..dacad81 100644 --- a/src/main/gnome-shell/gnome-shell-dark.css +++ b/src/main/gnome-shell/gnome-shell-dark.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(16, 16, 16, 0.25); } diff --git a/src/main/gnome-shell/gnome-shell-light-alt.css b/src/main/gnome-shell/gnome-shell-light-alt.css index b47ed38..36955a9 100644 --- a/src/main/gnome-shell/gnome-shell-light-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-alt.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(241, 241, 241, 0.15); } diff --git a/src/main/gnome-shell/gnome-shell-light-solid-alt.css b/src/main/gnome-shell/gnome-shell-light-solid-alt.css index 4432e71..4f2d31e 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-solid-alt.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(241, 241, 241, 0.15); } diff --git a/src/main/gnome-shell/gnome-shell-light-solid.css b/src/main/gnome-shell/gnome-shell-light-solid.css index 4432e71..4f2d31e 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid.css +++ b/src/main/gnome-shell/gnome-shell-light-solid.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(241, 241, 241, 0.15); } diff --git a/src/main/gnome-shell/gnome-shell-light.css b/src/main/gnome-shell/gnome-shell-light.css index dd9c63e..02f9ea3 100644 --- a/src/main/gnome-shell/gnome-shell-light.css +++ b/src/main/gnome-shell/gnome-shell-light.css @@ -3914,7 +3914,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -3932,7 +3932,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -3950,7 +3950,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -3968,7 +3968,7 @@ StWidget.focused .app-well-app-running-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -3993,7 +3993,7 @@ StWidget.focused .app-well-app-running-dot { padding-bottom: 0; } -#dashtodockContainer #dash { +#dashtodockContainer.dashtodock #dash { background-color: rgba(241, 241, 241, 0.15); } diff --git a/src/other/dash-to-dock/_dash-to-dock.scss b/src/other/dash-to-dock/_dash-to-dock.scss new file mode 100644 index 0000000..c6e49c6 --- /dev/null +++ b/src/other/dash-to-dock/_dash-to-dock.scss @@ -0,0 +1,173 @@ +// Dash to Dock + +$dash_panel_bg: if($variant == 'light', rgba(#f1f1f1, 0.15), rgba(#101010, 0.25)); +$dash_panel_fg: if($variant == 'light', black, white); +$dash_radius: 18px; + +// Scrollview style +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + +#dashtodockContainer { + background-color: transparent; + + .number-overlay { + color: $light_fg_color; + background-color: rgba(black, 0.75); + text-align: center; + } + + .notification-badge { + color: $light_fg_color; + background-color: $primary_color; + box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.25); + border-radius: 1000px; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; + } + + &.dashtodock #dash, + &.dashtodock:overview #dash, + &.extended #dash, + &.extended:overview #dash { + border: 1px solid if($variant == 'light', rgba(black, 0.03), rgba(black, 0.35)); + } + + &.straight-corner #dash, + &.shrink.straight-corner #dash { + border-radius: 0; + margin: 0; + } + + @each $_dock, $_radius, $_shadow in (top, $dash_radius, 0 -1px), + (bottom, $dash_radius, 0 1px), + (left, $dash_radius, -1px 0), + (right, $dash_radius, 1px 0) { + &.#{$_dock}.dashtodock #dash, + &.#{$_dock}.dashtodock:overview #dash { + border-radius: #{$_radius}; + margin-#{$_dock}: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(white, 0.05); + } + + &.#{$_dock}.shrink #dash { + border-#{$_dock}-width: 0; + } + + &.#{$_dock}.extended #dash, + &.#{$_dock}.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset #{$_shadow} rgba(white, 0.05); + } + } + + &.extended.top, + &.extended.bottom { + #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; + } + } + + &.extended.right, + &.extended.left { + #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; + } + } + + &.dashtodock #dash { background: $dash_panel_bg; } + + &.opaque #dash { // solid-mode + background: $dash_panel_bg; + } + + &.transparent #dash { // translucent-mode + background: $dash_panel_bg; // does not work + } + + &:overview #dash { // overview-mode #1 + background: $light_divider_color; + } + + &.opaque:overview, + &.transparent:overview { // overview-mode #2 + #dash { + background-color: transparent !important; + box-shadow: none !important; + } + } + + &.extended:overview, // overview-mode #3 + &.opaque.extended:overview, + &.transparent.extended:overview { + #dash { + background-color: $dash_panel_bg; + } + } + + &.running-dots, + &.dashtodock { + .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; + } + } + + &.shrink, + &.dashtodock { + .dash-item-container > StButton { + padding: 1px 2px; + } + } + + .app-well-app, + .show-apps { + .overview-icon { + padding: 8px; + background-size: contain; + } + } + + &.extended, + &.extended:overview { + .app-well-app, + .show-apps { + .overview-icon { + border-radius: $bt_radius; + } + } + } + + .metro .overview-icon { + border-radius: 0; + } +} + +.dashtodock-app-well-preview-menu-item { + padding: 1em 1em 0.5em 1em; +} + +#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal { + width: 1px; + height: auto; + border-right-width: 1px; + margin: 32px 0; +} diff --git a/src/other/dash-to-dock/stylesheet-dark.css b/src/other/dash-to-dock/stylesheet-dark.css index d27e2ab..436ea17 100644 --- a/src/other/dash-to-dock/stylesheet-dark.css +++ b/src/other/dash-to-dock/stylesheet-dark.css @@ -12,10 +12,6 @@ background-color: transparent; } -#dashtodockContainer .app-well-app-running-dot { - background-color: white; -} - #dashtodockContainer .number-overlay { color: white; background-color: rgba(0, 0, 0, 0.75); @@ -49,7 +45,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -67,7 +63,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -85,7 +81,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -103,7 +99,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -128,36 +124,20 @@ padding-bottom: 0; } -#dashtodockContainer #dash { - background-color: rgba(16, 16, 16, 0.25); -} - -#dashtodockContainer #dash .app-well-app-running-dot { - background-color: rgba(255, 255, 255, 0.85); -} - -#dashtodockContainer #dash StWidget.focused .app-well-app-running-dot { - background-color: #0860f2; +#dashtodockContainer.dashtodock #dash { + background: rgba(16, 16, 16, 0.25); } #dashtodockContainer.opaque #dash { - background-color: rgba(16, 16, 16, 0.25); + background: rgba(16, 16, 16, 0.25); } #dashtodockContainer.transparent #dash { - background-color: rgba(16, 16, 16, 0.25); + background: rgba(16, 16, 16, 0.25); } #dashtodockContainer:overview #dash { - background-color: rgba(255, 255, 255, 0.15); -} - -#dashtodockContainer:overview #dash .app-well-app-running-dot { - background-color: rgba(255, 255, 255, 0.85); -} - -#dashtodockContainer:overview #dash StWidget.focused .app-well-app-running-dot { - background-color: #0860f2; + background: rgba(255, 255, 255, 0.15); } #dashtodockContainer.opaque:overview #dash, #dashtodockContainer.transparent:overview #dash { diff --git a/src/other/dash-to-dock/stylesheet-dark.scss b/src/other/dash-to-dock/stylesheet-dark.scss new file mode 100644 index 0000000..2883a81 --- /dev/null +++ b/src/other/dash-to-dock/stylesheet-dark.scss @@ -0,0 +1,8 @@ +$variant: 'dark'; +$laptop: 'false'; +$trans: 'true'; +$black: 'false'; + +@import '../../sass/colors'; +@import '../../sass/variables'; +@import '_dash-to-dock.scss'; diff --git a/src/other/dash-to-dock/stylesheet.css b/src/other/dash-to-dock/stylesheet.css index 877d733..1eb01cf 100644 --- a/src/other/dash-to-dock/stylesheet.css +++ b/src/other/dash-to-dock/stylesheet.css @@ -12,10 +12,6 @@ background-color: transparent; } -#dashtodockContainer .app-well-app-running-dot { - background-color: black; -} - #dashtodockContainer .number-overlay { color: white; background-color: rgba(0, 0, 0, 0.75); @@ -49,7 +45,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { +#dashtodockContainer.top.shrink #dash { border-top-width: 0; } @@ -67,7 +63,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { +#dashtodockContainer.bottom.shrink #dash { border-bottom-width: 0; } @@ -85,7 +81,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { +#dashtodockContainer.left.shrink #dash { border-left-width: 0; } @@ -103,7 +99,7 @@ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { +#dashtodockContainer.right.shrink #dash { border-right-width: 0; } @@ -128,36 +124,20 @@ padding-bottom: 0; } -#dashtodockContainer #dash { - background-color: rgba(241, 241, 241, 0.15); -} - -#dashtodockContainer #dash .app-well-app-running-dot { - background-color: rgba(0, 0, 0, 0.85); -} - -#dashtodockContainer #dash StWidget.focused .app-well-app-running-dot { - background-color: #0860f2; +#dashtodockContainer.dashtodock #dash { + background: rgba(241, 241, 241, 0.15); } #dashtodockContainer.opaque #dash { - background-color: rgba(241, 241, 241, 0.15); + background: rgba(241, 241, 241, 0.15); } #dashtodockContainer.transparent #dash { - background-color: rgba(241, 241, 241, 0.15); + background: rgba(241, 241, 241, 0.15); } #dashtodockContainer:overview #dash { - background-color: rgba(255, 255, 255, 0.15); -} - -#dashtodockContainer:overview #dash .app-well-app-running-dot { - background-color: rgba(255, 255, 255, 0.85); -} - -#dashtodockContainer:overview #dash StWidget.focused .app-well-app-running-dot { - background-color: #0860f2; + background: rgba(255, 255, 255, 0.15); } #dashtodockContainer.opaque:overview #dash, #dashtodockContainer.transparent:overview #dash { diff --git a/src/other/dash-to-dock/stylesheet.scss b/src/other/dash-to-dock/stylesheet.scss new file mode 100644 index 0000000..ddcd122 --- /dev/null +++ b/src/other/dash-to-dock/stylesheet.scss @@ -0,0 +1,8 @@ +$variant: 'light'; +$laptop: 'false'; +$trans: 'true'; +$black: 'false'; + +@import '../../sass/colors'; +@import '../../sass/variables'; +@import '_dash-to-dock.scss'; diff --git a/src/sass/gnome-shell/_extensions.scss b/src/sass/gnome-shell/_extensions.scss index 39cc227..e225b70 100644 --- a/src/sass/gnome-shell/_extensions.scss +++ b/src/sass/gnome-shell/_extensions.scss @@ -1,284 +1,2 @@ -// Dash to Dock - -$dash_panel_bg: if($variant == 'light', rgba(#f1f1f1, 0.15), rgba(#101010, 0.25)); -$dash_panel_fg: if($variant == 'light', black, white); -$dash_radius: 18px; - -// Scrollview style -.bottom #dashtodockDashScrollview, -.top #dashtodockDashScrollview { - -st-hfade-offset: 24px; -} - -.left #dashtodockDashScrollview, -.right #dashtodockDashScrollview { - -st-vfade-offset: 24px; -} - -#dashtodockContainer { - background-color: transparent; - - .app-well-app-running-dot { - background-color: $dash_panel_fg; - } - - .number-overlay { - color: $light_fg_color; - background-color: rgba(black, 0.75); - text-align: center; - } - - .notification-badge { - color: $light_fg_color; - background-color: $primary_color; - box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.25); - border-radius: 1000px; - margin: 2px; - padding: 0.2em; - font-weight: bold; - text-align: center; - } - - &.dashtodock #dash, - &.dashtodock:overview #dash, - &.extended #dash, - &.extended:overview #dash { - border: 1px solid if($variant == 'light', rgba(black, 0.03), rgba(black, 0.35)); - } - - &.straight-corner #dash, - &.shrink.straight-corner #dash { - border-radius: 0; - margin: 0; - } - - @each $_dock, $_radius, $_shadow in (top, $dash_radius, 0 -1px), - (bottom, $dash_radius, 0 1px), - (left, $dash_radius, -1px 0), - (right, $dash_radius, 1px 0) { - &.#{$_dock}.dashtodock #dash, - &.#{$_dock}.dashtodock:overview #dash { - border-radius: #{$_radius}; - margin-#{$_dock}: 6px; - padding: 3px; - box-shadow: inset 0 0 0 1px rgba(white, 0.05); - } - - &.#{$_dock}.shrink #dash, - &.#{$_dock}.dashtodock #dash { - border-#{$_dock}-width: 0; - } - - &.#{$_dock}.extended #dash, - &.#{$_dock}.extended:overview #dash { - margin: 0; - padding: 0; - border-radius: 0; - box-shadow: inset #{$_shadow} rgba(white, 0.05); - } - } - - &.extended.top, - &.extended.bottom { - #dash { - border-left: 0; - border-right: 0; - padding-top: 0; - padding-bottom: 0; - } - } - - &.extended.right, - &.extended.left { - #dash { - border-top: 0; - border-bottom: 0; - padding-top: 0; - padding-bottom: 0; - } - } - - #dash { // default-mode - background-color: $dash_panel_bg; - - .app-well-app-running-dot { - background-color: rgba($dash_panel_fg, 0.85); - } - - StWidget.focused .app-well-app-running-dot { - background-color: $primary_color; - } - } - - &.opaque #dash { // solid-mode - background-color: $dash_panel_bg; - } - - &.transparent #dash { // translucent-mode - background-color: $dash_panel_bg; // does not work - } - - &:overview #dash { // overview-mode #1 - background-color: $light_divider_color; - - .app-well-app-running-dot { - background-color: $light_alt_fg_color; - } - - StWidget.focused .app-well-app-running-dot { - background-color: $primary_color; - } - } - - &.opaque:overview, - &.transparent:overview { // overview-mode #2 - #dash { - background-color: transparent !important; - box-shadow: none !important; - } - } - - &.extended:overview, // overview-mode #3 - &.opaque.extended:overview, - &.transparent.extended:overview { - #dash { - background-color: $dash_panel_bg; - } - } - - &.running-dots, - &.dashtodock { - .dash-item-container > StButton { - transition-duration: 250ms; - background-size: contain; - } - } - - &.shrink, - &.dashtodock { - .dash-item-container > StButton { - padding: 1px 2px; - } - } - - .app-well-app, - .show-apps { - .overview-icon { - padding: 8px; - background-size: contain; - } - } - - &.extended, - &.extended:overview { - .app-well-app, - .show-apps { - .overview-icon { - border-radius: $bt_radius; - } - } - } - - .metro .overview-icon { - border-radius: 0; - } -} - -.dashtodock-app-well-preview-menu-item { - padding: 1em 1em 0.5em 1em; -} - -#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal { - width: 1px; - height: auto; - border-right-width: 1px; - margin: 32px 0; -} - - -// Simple Dock - -#dash:desktop { - background-color: $dash_panel_bg; -} - -// OpenWeather Extension - -.openweather { - &-button, - &-button-action, - &-menu-button-container, - &-button-box { - border: 1px solid transparent; - } - - &-provider { - // generic text buttons are allocated with y-expand-ed - padding: 0 16px; - font-weight: 500; - @include button(flat-normal); - &:hover { @include button(flat-hover); } - &:focus { @include button(flat-focus); } - &:active { @include button(flat-active); } - &:insensitive { @include button(flat-disabled); } - } - - &-current { - &-icon, - &-summary, - &-summarybox { - background: none; - color: $fg_color; - } - - &-databox-values { - background: none; - color: $hint_fg_color; - } - - &-databox-captions { - background: none; - color: $hint_fg_color; - } - } - - &-forecast { - &-icon, - &-summary { - background: none; - color: $alt_fg_color; - } - - &-day, - &-temperature { - background: none; - color: $hint_fg_color; - } - } - - &-sunrise-icon, - &-sunset-icon, - &-build-icon { color: $alt_fg_color; } -} - -// GPaste - -.popup-menu { - .search-entry { - color: $fg_color; - selection-background-color: $primary_color; - selected-color: $light_fg_color; - @include entry(normal); - - &:focus { - @include entry(focus); - color: $fg_color; - } - - .search-entry-icon { color: $hint_fg_color; } - - &:hover, &:focus { - .search-entry-icon { color: $fg_color; } - } - } -} +@import 'extensions/dash-to-dock'; +@import 'extensions/misc'; diff --git a/src/sass/gnome-shell/extensions/_dash-to-dock.scss b/src/sass/gnome-shell/extensions/_dash-to-dock.scss new file mode 100644 index 0000000..393540a --- /dev/null +++ b/src/sass/gnome-shell/extensions/_dash-to-dock.scss @@ -0,0 +1,195 @@ +// Dash to Dock + +$dash_panel_bg: if($variant == 'light', rgba(#f1f1f1, 0.15), rgba(#101010, 0.25)); +$dash_panel_fg: if($variant == 'light', black, white); +$dash_radius: 18px; + +// Scrollview style +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + +#dashtodockContainer { + background-color: transparent; + + .app-well-app-running-dot { + background-color: $dash_panel_fg; + } + + .number-overlay { + color: $light_fg_color; + background-color: rgba(black, 0.75); + text-align: center; + } + + .notification-badge { + color: $light_fg_color; + background-color: $primary_color; + box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.25); + border-radius: 1000px; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; + } + + &.dashtodock #dash, + &.dashtodock:overview #dash, + &.extended #dash, + &.extended:overview #dash { + border: 1px solid if($variant == 'light', rgba(black, 0.03), rgba(black, 0.35)); + } + + &.straight-corner #dash, + &.shrink.straight-corner #dash { + border-radius: 0; + margin: 0; + } + + @each $_dock, $_radius, $_shadow in (top, $dash_radius, 0 -1px), + (bottom, $dash_radius, 0 1px), + (left, $dash_radius, -1px 0), + (right, $dash_radius, 1px 0) { + &.#{$_dock}.dashtodock #dash, + &.#{$_dock}.dashtodock:overview #dash { + border-radius: #{$_radius}; + margin-#{$_dock}: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(white, 0.05); + } + + &.#{$_dock}.shrink #dash { + border-#{$_dock}-width: 0; + } + + &.#{$_dock}.extended #dash, + &.#{$_dock}.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset #{$_shadow} rgba(white, 0.05); + } + } + + &.extended.top, + &.extended.bottom { + #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; + } + } + + &.extended.right, + &.extended.left { + #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; + } + } + + &.dashtodock #dash { background-color: $dash_panel_bg; } + + #dash { // default-mode + .app-well-app-running-dot { + background-color: rgba($dash_panel_fg, 0.85); + } + + StWidget.focused .app-well-app-running-dot { + background-color: $primary_color; + } + } + + &.opaque #dash { // solid-mode + background-color: $dash_panel_bg; + } + + &.transparent #dash { // translucent-mode + background-color: $dash_panel_bg; // does not work + } + + &:overview #dash { // overview-mode #1 + background-color: $light_divider_color; + + .app-well-app-running-dot { + background-color: $light_alt_fg_color; + } + + StWidget.focused .app-well-app-running-dot { + background-color: $primary_color; + } + } + + &.opaque:overview, + &.transparent:overview { // overview-mode #2 + #dash { + background-color: transparent !important; + box-shadow: none !important; + } + } + + &.extended:overview, // overview-mode #3 + &.opaque.extended:overview, + &.transparent.extended:overview { + #dash { + background-color: $dash_panel_bg; + } + } + + &.running-dots, + &.dashtodock { + .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; + } + } + + &.shrink, + &.dashtodock { + .dash-item-container > StButton { + padding: 1px 2px; + } + } + + .app-well-app, + .show-apps { + .overview-icon { + padding: 8px; + background-size: contain; + } + } + + &.extended, + &.extended:overview { + .app-well-app, + .show-apps { + .overview-icon { + border-radius: $bt_radius; + } + } + } + + .metro .overview-icon { + border-radius: 0; + } +} + +.dashtodock-app-well-preview-menu-item { + padding: 1em 1em 0.5em 1em; +} + +#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal { + width: 1px; + height: auto; + border-right-width: 1px; + margin: 32px 0; +} diff --git a/src/sass/gnome-shell/extensions/_misc.scss b/src/sass/gnome-shell/extensions/_misc.scss new file mode 100644 index 0000000..98684c8 --- /dev/null +++ b/src/sass/gnome-shell/extensions/_misc.scss @@ -0,0 +1,87 @@ + +// Simple Dock + +#dash:desktop { + background-color: $dash_panel_bg; +} + +// OpenWeather Extension + +.openweather { + &-button, + &-button-action, + &-menu-button-container, + &-button-box { + border: 1px solid transparent; + } + + &-provider { + // generic text buttons are allocated with y-expand-ed + padding: 0 16px; + font-weight: 500; + @include button(flat-normal); + &:hover { @include button(flat-hover); } + &:focus { @include button(flat-focus); } + &:active { @include button(flat-active); } + &:insensitive { @include button(flat-disabled); } + } + + &-current { + &-icon, + &-summary, + &-summarybox { + background: none; + color: $fg_color; + } + + &-databox-values { + background: none; + color: $hint_fg_color; + } + + &-databox-captions { + background: none; + color: $hint_fg_color; + } + } + + &-forecast { + &-icon, + &-summary { + background: none; + color: $alt_fg_color; + } + + &-day, + &-temperature { + background: none; + color: $hint_fg_color; + } + } + + &-sunrise-icon, + &-sunset-icon, + &-build-icon { color: $alt_fg_color; } +} + +// GPaste + +.popup-menu { + .search-entry { + color: $fg_color; + selection-background-color: $primary_color; + selected-color: $light_fg_color; + @include entry(normal); + + &:focus { + @include entry(focus); + color: $fg_color; + } + + .search-entry-icon { color: $hint_fg_color; } + + &:hover, &:focus { + .search-entry-icon { color: $fg_color; } + } + } +}