diff options
| -rw-r--r-- | common/cinnamon/cinnamon-dark.css | 99 | ||||
| -rw-r--r-- | common/cinnamon/cinnamon.css | 99 | ||||
| -rw-r--r-- | common/cinnamon/common-assets/misc/sound-overlay.svg | 68 | ||||
| -rw-r--r-- | common/cinnamon/sass/_common.scss | 114 |
4 files changed, 377 insertions, 3 deletions
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 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<!-- Created with Inkscape (http://www.inkscape.org/) --> + +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="32" + height="32" + viewBox="0 0 32 32" + id="svg5386" + version="1.1" + inkscape:version="0.91 r13725" + sodipodi:docname="sound-overlay.svg"> + <defs + id="defs5388" /> + <sodipodi:namedview + id="base" + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1.0" + inkscape:pageopacity="0.0" + inkscape:pageshadow="2" + inkscape:zoom="16" + inkscape:cx="21.881475" + inkscape:cy="5.8350717" + inkscape:document-units="px" + inkscape:current-layer="layer1" + showgrid="true" + units="px" + inkscape:snap-bbox="true" + inkscape:bbox-paths="true" + inkscape:bbox-nodes="true" + inkscape:snap-bbox-edge-midpoints="true"> + <inkscape:grid + type="xygrid" + id="grid5954" /> + </sodipodi:namedview> + <metadata + id="metadata5391"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title /> + </cc:Work> + </rdf:RDF> + </metadata> + <g + inkscape:label="Ebene 1" + inkscape:groupmode="layer" + id="layer1" + transform="translate(0,-1020.3622)"> + <rect + style="display:inline;opacity:0.75;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" + id="rect4164" + width="22" + height="32.000019" + x="5" + y="1020.3622" /> + </g> +</svg> 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) // |
