From 5e6758028c193959d08cf033b0868c09b1938cf0 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 16 Nov 2015 00:31:57 +0100 Subject: add Cinnamon 2.8 support --- common/cinnamon/cinnamon-dark.css | 99 +++++++++++++++++- common/cinnamon/cinnamon.css | 99 +++++++++++++++++- .../cinnamon/common-assets/misc/sound-overlay.svg | 68 ++++++++++++ common/cinnamon/sass/_common.scss | 114 ++++++++++++++++++++- 4 files changed, 377 insertions(+), 3 deletions(-) create mode 100644 common/cinnamon/common-assets/misc/sound-overlay.svg diff --git a/common/cinnamon/cinnamon-dark.css b/common/cinnamon/cinnamon-dark.css index 536965e..fdaf2d5 100644 --- a/common/cinnamon/cinnamon-dark.css +++ b/common/cinnamon/cinnamon-dark.css @@ -149,7 +149,15 @@ StScrollBar { StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #5294E2; } -.popup-slider-menu-item { +.separator { + -gradient-height: 1px; + -gradient-start: transparent; + -gradient-end: transparent; + -margin-horizontal: 1.5em; + height: 1em; } + +.popup-slider-menu-item, +.slider { -slider-height: 4px; -slider-background-color: #2b2e39; -slider-border-color: transparent; @@ -239,6 +247,8 @@ StScrollBar { min-width: 200px; color: #D3DAE3; border-image: url("dark-assets/menu/menu.svg") 9 9 9 9; } + .popup-menu-arrow { + icon-size: 16px; } .popup-menu .popup-sub-menu { background-gradient-direction: none; box-shadow: none; @@ -1075,10 +1085,71 @@ StScrollBar { .sound-playback-control { padding: 5px 10px 10px 10px; } +.sound-player { + padding: 0 4px; } + .sound-player > StBoxLayout:first-child { + padding: 5px 10px 12px 10px; + spacing: 0.5em; } + .sound-player > StBoxLayout:first-child StButton:small { + width: 16px; + height: 8px; + padding: 1px; } + .sound-player > StBoxLayout:first-child StButton:small StIcon { + icon-size: 12px; } + .sound-player-generic-coverart { + background: rgba(0, 0, 0, 0.2); } + .sound-player-overlay { + width: 290px; + height: 70px; + padding: 15px; + spacing: 0.5em; + background: rgba(42, 45, 55, 0.85); + border: 0px solid rgba(31, 33, 40, 0.95); + border-bottom: 1px; + color: #BAC3CF; } + .sound-player-overlay StButton { + width: 22px; + height: 13px; + padding: 5px; + color: #BAC3CF; + border-radius: 2px; + border: 1px solid rgba(53, 57, 69, 0); } + .sound-player-overlay StButton StIcon { + icon-size: 16px; } + .sound-player-overlay StButton:hover { + text-shadow: 0 1px rgba(64, 69, 82, 0); + color: #BAC3CF; + border: 1px solid rgba(26, 28, 34, 0.35); + background-color: rgba(119, 127, 151, 0.45); } + .sound-player-overlay StButton:active { + text-shadow: 0 1px rgba(64, 69, 82, 0); + color: #ffffff; + background-color: #5294E2; + border: 1px solid #5294E2; + box-shadow: inset 0 2px 4px #5294E2; } + .sound-player-overlay StBoxLayout { + padding-top: 2px; } + .sound-player .slider { + height: 0.5em; + padding: 0; + border: none; + -slider-height: 0.5em; + -slider-background-color: #2d303b; + -slider-border-color: transparent; + -slider-active-background-color: #5294E2; + -slider-active-border-color: transparent; + -slider-border-width: 0px; + -slider-handle-radius: 0px; } + #workspaceSwitcher { spacing: 0px; padding: 3px; } +/* Controls the styling when using the "Simple buttons" option */ +.workspace-switcher { + padding-left: 3px; + padding-right: 3px; } + .workspace-button { width: 20px; height: 10px; @@ -1091,6 +1162,32 @@ StScrollBar { .workspace-button:hover { color: rgba(82, 148, 226, 0.5); } +/* Controls the style when using the "Visual representation" option */ +.workspace-graph { + padding: 3px; + spacing: 3px; } + +.workspace-graph .workspace { + border: 1px solid rgba(0, 0, 0, 0.4); + background-gradient-direction: none; + background-color: rgba(0, 0, 0, 0.2); } + +.workspace-graph .workspace:active { + border: 1px solid #5294E2; + background-gradient-direction: none; } + +.workspace-graph .workspace .windows { + -active-window-background: rgba(76, 82, 99, 0.95); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: rgba(76, 82, 99, 0.95); + -inactive-window-border: rgba(0, 0, 0, 0.8); } + +.workspace-graph .workspace:active .windows { + -active-window-background: rgba(87, 93, 113, 0.95); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: rgba(54, 58, 70, 0.95); + -inactive-window-border: rgba(0, 0, 0, 0.8); } + #panel-launchers-box { padding-left: 7px; } diff --git a/common/cinnamon/cinnamon.css b/common/cinnamon/cinnamon.css index a8576ca..f63389d 100644 --- a/common/cinnamon/cinnamon.css +++ b/common/cinnamon/cinnamon.css @@ -149,7 +149,15 @@ StScrollBar { StScrollBar StButton#vhandle:active, StScrollBar StButton#hhandle:active { background-color: #5294E2; } -.popup-slider-menu-item { +.separator { + -gradient-height: 1px; + -gradient-start: transparent; + -gradient-end: transparent; + -margin-horizontal: 1.5em; + height: 1em; } + +.popup-slider-menu-item, +.slider { -slider-height: 4px; -slider-background-color: #cfd6e6; -slider-border-color: transparent; @@ -239,6 +247,8 @@ StScrollBar { min-width: 200px; color: #5c616c; border-image: url("light-assets/menu/menu.svg") 9 9 9 9; } + .popup-menu-arrow { + icon-size: 16px; } .popup-menu .popup-sub-menu { background-gradient-direction: none; box-shadow: none; @@ -1075,10 +1085,71 @@ StScrollBar { .sound-playback-control { padding: 5px 10px 10px 10px; } +.sound-player { + padding: 0 4px; } + .sound-player > StBoxLayout:first-child { + padding: 5px 10px 12px 10px; + spacing: 0.5em; } + .sound-player > StBoxLayout:first-child StButton:small { + width: 16px; + height: 8px; + padding: 1px; } + .sound-player > StBoxLayout:first-child StButton:small StIcon { + icon-size: 12px; } + .sound-player-generic-coverart { + background: rgba(0, 0, 0, 0.2); } + .sound-player-overlay { + width: 290px; + height: 70px; + padding: 15px; + spacing: 0.5em; + background: rgba(42, 45, 55, 0.85); + border: 0px solid rgba(31, 33, 40, 0.95); + border-bottom: 1px; + color: #BAC3CF; } + .sound-player-overlay StButton { + width: 22px; + height: 13px; + padding: 5px; + color: #BAC3CF; + border-radius: 2px; + border: 1px solid rgba(53, 57, 69, 0); } + .sound-player-overlay StButton StIcon { + icon-size: 16px; } + .sound-player-overlay StButton:hover { + text-shadow: 0 1px rgba(255, 255, 255, 0); + color: #BAC3CF; + border: 1px solid rgba(26, 28, 34, 0.35); + background-color: rgba(119, 127, 151, 0.45); } + .sound-player-overlay StButton:active { + text-shadow: 0 1px rgba(255, 255, 255, 0); + color: #ffffff; + background-color: #5294E2; + border: 1px solid #5294E2; + box-shadow: inset 0 2px 4px #5294E2; } + .sound-player-overlay StBoxLayout { + padding-top: 2px; } + .sound-player .slider { + height: 0.5em; + padding: 0; + border: none; + -slider-height: 0.5em; + -slider-background-color: #cfd6e6; + -slider-border-color: transparent; + -slider-active-background-color: #5294E2; + -slider-active-border-color: transparent; + -slider-border-width: 0px; + -slider-handle-radius: 0px; } + #workspaceSwitcher { spacing: 0px; padding: 3px; } +/* Controls the styling when using the "Simple buttons" option */ +.workspace-switcher { + padding-left: 3px; + padding-right: 3px; } + .workspace-button { width: 20px; height: 10px; @@ -1091,6 +1162,32 @@ StScrollBar { .workspace-button:hover { color: rgba(82, 148, 226, 0.5); } +/* Controls the style when using the "Visual representation" option */ +.workspace-graph { + padding: 3px; + spacing: 3px; } + +.workspace-graph .workspace { + border: 1px solid rgba(0, 0, 0, 0.4); + background-gradient-direction: none; + background-color: rgba(0, 0, 0, 0.2); } + +.workspace-graph .workspace:active { + border: 1px solid #5294E2; + background-gradient-direction: none; } + +.workspace-graph .workspace .windows { + -active-window-background: rgba(76, 82, 99, 0.95); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: rgba(76, 82, 99, 0.95); + -inactive-window-border: rgba(0, 0, 0, 0.8); } + +.workspace-graph .workspace:active .windows { + -active-window-background: rgba(87, 93, 113, 0.95); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: rgba(54, 58, 70, 0.95); + -inactive-window-border: rgba(0, 0, 0, 0.8); } + #panel-launchers-box { padding-left: 7px; } diff --git a/common/cinnamon/common-assets/misc/sound-overlay.svg b/common/cinnamon/common-assets/misc/sound-overlay.svg new file mode 100644 index 0000000..ad62be0 --- /dev/null +++ b/common/cinnamon/common-assets/misc/sound-overlay.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss index 1a16835..6568dfd 100644 --- a/common/cinnamon/sass/_common.scss +++ b/common/cinnamon/sass/_common.scss @@ -133,10 +133,19 @@ StScrollBar { } } +.separator { + -gradient-height: 1px; + -gradient-start: rgba(0,0,0,0); + -gradient-end: rgba(0,0,0,0); + -margin-horizontal: 1.5em; + height: 1em; +} + // // Slider // -.popup-slider-menu-item { +.popup-slider-menu-item, +.slider { -slider-height: 4px; -slider-background-color: $button_border; //background of the trough -slider-border-color: transparentize(black, 1); //trough border color @@ -255,6 +264,8 @@ StScrollBar { color: $fg_color; border-image: url("#{$asset_path}/menu/menu.svg") 9 9 9 9; + &-arrow { icon-size: 16px; } + .popup-sub-menu { background-gradient-direction: none; box-shadow: none; @@ -1303,6 +1314,70 @@ StScrollBar { .sound-playback-control { padding: 5px 10px 10px 10px; } +// 2.8 +.sound-player { + padding: 0 4px; + + > StBoxLayout:first-child { + padding: 5px 10px 12px 10px; + spacing: 0.5em; + + StButton:small { + width: 16px; + height: 8px; + padding: 1px; + + StIcon { icon-size: 12px; } + } + } + + &-generic-coverart { + background: rgba(0,0,0,0.2); + } + + &-overlay { + width: 290px; + height: 70px; + padding: 15px; + spacing: 0.5em; + background: transparentize(darken($osd_bg_color, 5%), 0.1); + border: 0px solid darken($osd_bg_color, 10%); + border-bottom: 1px ; + color: $osd_fg_color; + + StButton { + width: 22px; + height: 13px; + padding: 5px; + color: $osd_fg_color; + border-radius: 2px; + border: 1px solid transparentize($osd_bg_color,1); + + StIcon { icon-size: 16px; } + + &:hover{ @include button(osd-hover); } + &:active { @include button(active); } + } + + StBoxLayout { + padding-top: 2px; + } + } + + .slider { + height: 0.5em; + padding: 0; + border: none; + -slider-height: 0.5em; + -slider-background-color: if($variant == 'light', $button_border, darken($bg_color, 5%)); + -slider-border-color: rgba(0,0,0,0); + -slider-active-background-color: $selected_bg_color; + -slider-active-border-color: rgba(0,0,0,0); + -slider-border-width: 0px; + -slider-handle-radius: 0px; + } +} + // // Workspace Switcher applet (workspaceSwitcher.js) // @@ -1311,6 +1386,12 @@ StScrollBar { padding: 3px; } +/* Controls the styling when using the "Simple buttons" option */ +.workspace-switcher { + padding-left: 3px; + padding-right: 3px; +} + .workspace-button { width: 20px; height: 10px; @@ -1323,6 +1404,37 @@ StScrollBar { &:hover { color: transparentize($selected_bg_color, 0.5) } } +/* Controls the style when using the "Visual representation" option */ +.workspace-graph { + padding: 3px; + spacing: 3px; +} + +.workspace-graph .workspace { + border: 1px solid transparentize(black, 0.6); + background-gradient-direction: none; + background-color: transparentize(black, 0.8); +} + +.workspace-graph .workspace:active { + border: 1px solid $selected_bg_color; + background-gradient-direction: none; +} + +.workspace-graph .workspace .windows { + -active-window-background: lighten($panel_bg, 15%); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: lighten($panel_bg, 15%); + -inactive-window-border: rgba(0, 0, 0, 0.8); +} + +.workspace-graph .workspace:active .windows { + -active-window-background: lighten($panel_bg, 20%); + -active-window-border: rgba(0, 0, 0, 0.8); + -inactive-window-background: lighten($panel_bg, 5%); + -inactive-window-border: rgba(0, 0, 0, 0.8); +} + // // Panel Launchers Applet (panelLaunchers.js) // -- cgit v1.2.3