From c7162d42a0a76d51f05d6c4cc554796138d2f763 Mon Sep 17 00:00:00 2001 From: vinceliuice Date: Fri, 18 Dec 2020 21:14:14 +0800 Subject: [PATCH] update --- src/main/gnome-shell/gnome-shell-dark-alt.css | 150 +++++++++++++++--- .../gnome-shell-dark-solid-alt.css | 150 +++++++++++++++--- .../gnome-shell/gnome-shell-dark-solid.css | 150 +++++++++++++++--- src/main/gnome-shell/gnome-shell-dark.css | 150 +++++++++++++++--- .../gnome-shell/gnome-shell-light-alt.css | 150 +++++++++++++++--- .../gnome-shell-light-solid-alt.css | 150 +++++++++++++++--- .../gnome-shell/gnome-shell-light-solid.css | 150 +++++++++++++++--- src/main/gnome-shell/gnome-shell-light.css | 150 +++++++++++++++--- src/other/dash-to-dock/stylesheet-dark.css | 150 +++++++++++++++--- src/other/dash-to-dock/stylesheet.css | 150 +++++++++++++++--- src/sass/gnome-shell/_extensions.scss | 131 ++++++++++++--- 11 files changed, 1432 insertions(+), 199 deletions(-) diff --git a/src/main/gnome-shell/gnome-shell-dark-alt.css b/src/main/gnome-shell/gnome-shell-dark-alt.css index f75058d..3421a2d 100644 --- a/src/main/gnome-shell/gnome-shell-dark-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-alt.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: white; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.35); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(16, 16, 16, 0.25); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.35); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(16, 16, 16, 0.25); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { 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 33acdd9..f67d860 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid-alt.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: white; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.35); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(16, 16, 16, 0.25); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.35); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(16, 16, 16, 0.25); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { 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 33acdd9..f67d860 100644 --- a/src/main/gnome-shell/gnome-shell-dark-solid.css +++ b/src/main/gnome-shell/gnome-shell-dark-solid.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: white; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.35); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(16, 16, 16, 0.25); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.35); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(16, 16, 16, 0.25); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { 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 f75058d..3421a2d 100644 --- a/src/main/gnome-shell/gnome-shell-dark.css +++ b/src/main/gnome-shell/gnome-shell-dark.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: white; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.35); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(16, 16, 16, 0.25); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.35); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(16, 16, 16, 0.25); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { 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 09151e4..b5da640 100644 --- a/src/main/gnome-shell/gnome-shell-light-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-alt.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: black; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.03); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(241, 241, 241, 0.15); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.03); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(241, 241, 241, 0.15); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { 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 7d98430..e516b32 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid-alt.css +++ b/src/main/gnome-shell/gnome-shell-light-solid-alt.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: black; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.03); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(241, 241, 241, 0.15); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.03); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(241, 241, 241, 0.15); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { 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 7d98430..e516b32 100644 --- a/src/main/gnome-shell/gnome-shell-light-solid.css +++ b/src/main/gnome-shell/gnome-shell-light-solid.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: black; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.03); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(241, 241, 241, 0.15); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.03); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(241, 241, 241, 0.15); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { 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 33924d4..cd4f0bb 100644 --- a/src/main/gnome-shell/gnome-shell-light.css +++ b/src/main/gnome-shell/gnome-shell-light.css @@ -3863,52 +3863,136 @@ StWidget.focused .app-well-app-running-dot { box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.15); } +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: black; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.03); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(241, 241, 241, 0.15); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.03); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -3948,12 +4032,42 @@ StWidget.focused .app-well-app-running-dot { background-color: rgba(241, 241, 241, 0.15); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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; +} + #dash:desktop { background-color: rgba(241, 241, 241, 0.15); } diff --git a/src/other/dash-to-dock/stylesheet-dark.css b/src/other/dash-to-dock/stylesheet-dark.css index e3acafd..08a1764 100644 --- a/src/other/dash-to-dock/stylesheet-dark.css +++ b/src/other/dash-to-dock/stylesheet-dark.css @@ -1,49 +1,133 @@ +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: white; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.35); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(16, 16, 16, 0.25); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.35); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -83,8 +167,38 @@ background-color: rgba(16, 16, 16, 0.25); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } + +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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.css b/src/other/dash-to-dock/stylesheet.css index b13aeab..6b489b9 100644 --- a/src/other/dash-to-dock/stylesheet.css +++ b/src/other/dash-to-dock/stylesheet.css @@ -1,49 +1,133 @@ +.bottom #dashtodockDashScrollview, +.top #dashtodockDashScrollview { + -st-hfade-offset: 24px; +} + +.left #dashtodockDashScrollview, +.right #dashtodockDashScrollview { + -st-vfade-offset: 24px; +} + #dashtodockContainer { - background: transparent; + background-color: transparent; } #dashtodockContainer .app-well-app-running-dot { background-color: black; } -#dashtodockContainer #dash, #dashtodockContainer:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { - padding: 0; - border: none; +#dashtodockContainer .number-overlay { + color: white; + background-color: rgba(0, 0, 0, 0.75); + text-align: center; +} + +#dashtodockContainer .notification-badge { + color: white; + background-color: #0860f2; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; +} + +#dashtodockContainer.dashtodock #dash, #dashtodockContainer.dashtodock:overview #dash, #dashtodockContainer.extended #dash, #dashtodockContainer.extended:overview #dash { + border: 1px solid rgba(0, 0, 0, 0.03); +} + +#dashtodockContainer.straight-corner #dash, #dashtodockContainer.shrink.straight-corner #dash { + border-radius: 0; margin: 0; } -#dashtodockContainer.top #dash, #dashtodockContainer.top:overview #dash, #dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { - margin-top: 4px; +#dashtodockContainer.top.dashtodock #dash, #dashtodockContainer.top.dashtodock:overview #dash { border-radius: 18px; + margin-top: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.bottom #dash, #dashtodockContainer.bottom:overview #dash, #dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { - margin-bottom: 4px; +#dashtodockContainer.top.shrink #dash, #dashtodockContainer.top.dashtodock #dash { + border-top-width: 0; +} + +#dashtodockContainer.top.extended #dash, #dashtodockContainer.top.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 -1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.bottom.dashtodock #dash, #dashtodockContainer.bottom.dashtodock:overview #dash { border-radius: 18px; + margin-bottom: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.left #dash, #dashtodockContainer.left:overview #dash, #dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { - margin-left: 4px; +#dashtodockContainer.bottom.shrink #dash, #dashtodockContainer.bottom.dashtodock #dash { + border-bottom-width: 0; +} + +#dashtodockContainer.bottom.extended #dash, #dashtodockContainer.bottom.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 0 1px rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.left.dashtodock #dash, #dashtodockContainer.left.dashtodock:overview #dash { border-radius: 18px; + margin-left: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.right #dash, #dashtodockContainer.right:overview #dash, #dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { - margin-right: 4px; +#dashtodockContainer.left.shrink #dash, #dashtodockContainer.left.dashtodock #dash { + border-left-width: 0; +} + +#dashtodockContainer.left.extended #dash, #dashtodockContainer.left.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset -1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.right.dashtodock #dash, #dashtodockContainer.right.dashtodock:overview #dash { border-radius: 18px; + margin-right: 6px; + padding: 3px; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } -#dashtodockContainer.top #dash, #dashtodockContainer.bottom #dash { - padding: 0 0; +#dashtodockContainer.right.shrink #dash, #dashtodockContainer.right.dashtodock #dash { + border-right-width: 0; } -#dashtodockContainer.left #dash, #dashtodockContainer.right #dash { - padding: 0 0; +#dashtodockContainer.right.extended #dash, #dashtodockContainer.right.extended:overview #dash { + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset 1px 0 rgba(255, 255, 255, 0.05); +} + +#dashtodockContainer.extended.top #dash, #dashtodockContainer.extended.bottom #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; +} + +#dashtodockContainer.extended.right #dash, #dashtodockContainer.extended.left #dash { + border-top: 0; + border-bottom: 0; + padding-top: 0; + padding-bottom: 0; } #dashtodockContainer #dash { background-color: rgba(241, 241, 241, 0.15); - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); - border: 1px solid rgba(0, 0, 0, 0.03); } #dashtodockContainer #dash .app-well-app-running-dot { @@ -83,8 +167,38 @@ background-color: rgba(241, 241, 241, 0.15); } +#dashtodockContainer.running-dots .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + transition-duration: 250ms; + background-size: contain; +} + +#dashtodockContainer.shrink .dash-item-container > StButton, #dashtodockContainer.dashtodock .dash-item-container > StButton { + padding: 1px 2px; +} + #dashtodockContainer .app-well-app .overview-icon, #dashtodockContainer .show-apps .overview-icon { padding: 8px; background-size: contain; } + +#dashtodockContainer.extended .app-well-app .overview-icon, +#dashtodockContainer.extended .show-apps .overview-icon, #dashtodockContainer.extended:overview .app-well-app .overview-icon, +#dashtodockContainer.extended:overview .show-apps .overview-icon { + border-radius: 6px; +} + +#dashtodockContainer .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.scss b/src/sass/gnome-shell/_extensions.scss index ce5d65a..90593cf 100644 --- a/src/sass/gnome-shell/_extensions.scss +++ b/src/sass/gnome-shell/_extensions.scss @@ -4,47 +4,100 @@ $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: transparent; + background-color: transparent; .app-well-app-running-dot { background-color: $dash_panel_fg; } - #dash, - &:overview #dash, + .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; + margin: 2px; + padding: 0.2em; + font-weight: bold; + text-align: center; + } + + &.dashtodock #dash, + &.dashtodock:overview #dash, &.extended #dash, &.extended:overview #dash { - padding: 0; - border: none; + 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 in (top, $dash_radius), - (bottom, $dash_radius), - (left, $dash_radius), - (right, $dash_radius) { - &.#{$_dock} #dash, - &.#{$_dock}:overview #dash, + @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-#{$_dock}: $container_padding; - border-radius: #{$_radius}; + margin: 0; + padding: 0; + border-radius: 0; + box-shadow: inset #{$_shadow} rgba(white, 0.05); } } - &.top, &.bottom { - #dash { padding: 0 0; } + &.extended.top, + &.extended.bottom { + #dash { + border-left: 0; + border-right: 0; + padding-top: 0; + padding-bottom: 0; + } } - &.left, &.right { - #dash { padding: 0 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; - box-shadow: inset 0 0 0 1px rgba(white, 0.05); - border: 1px solid if($variant == 'light', rgba(black, 0.03), rgba(black, 0.35)); .app-well-app-running-dot { background-color: rgba($dash_panel_fg, 0.85); @@ -91,6 +144,21 @@ $dash_radius: 18px; } } + &.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 { @@ -98,6 +166,31 @@ $dash_radius: 18px; 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; }