diff options
Diffstat (limited to 'common/cinnamon/sass/_common.scss')
-rw-r--r-- | common/cinnamon/sass/_common.scss | 185 |
1 files changed, 154 insertions, 31 deletions
diff --git a/common/cinnamon/sass/_common.scss b/common/cinnamon/sass/_common.scss index 30ffa1f..5a3f27d 100644 --- a/common/cinnamon/sass/_common.scss +++ b/common/cinnamon/sass/_common.scss @@ -33,7 +33,10 @@ stage { min-height: 20px; padding: 5px 32px; transition-duration: 0; - border-radius: 2px; + + &, &:focus, &:hover, &:hover:focus, &:active, &:active:focus, &:insensitive { + border-radius: 2px; + } @include button(normal); @@ -119,7 +122,7 @@ StScrollBar { } StButton#vhandle, StButton#hhandle { - border-radius: 4px; + border-radius: 2px; background-color: mix($fg_color, $bg_color, 40%); border: 0px solid; margin: 0px; @@ -130,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 @@ -252,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; @@ -264,12 +278,6 @@ StScrollBar { padding: 4px; StBin#trough, StBin#vhandle { border-width: 0; } } - - &-menu-item:open { - background: none; - box-shadow: none; - border-image: url("#{$asset_path}/menu/submenu-open.svg") 9 9 9 9; - } } .popup-menu-content { padding: 1em 0em 1em 0em; } @@ -441,7 +449,7 @@ StScrollBar { .expo-workspaces-name-entry, .expo-workspaces-name-entry#selected { - spacing: 25px; + height: 15px; border-radius: 2px; font-size: 9pt; padding: 5px 8px; @@ -479,7 +487,7 @@ StScrollBar { //&-controls { visible-height: 32px; } &-thumbnails { - spacing: 14px; + spacing: 26px; &-background, &-background:rtl { padding: 8px; } } @@ -488,11 +496,15 @@ StScrollBar { background-image: url("common-assets/misc/add-workspace.svg"); height: 200px; width: 35px; - transition-duration: 200; + transition-duration: 100; &:hover { background-image: url("common-assets/misc/add-workspace-hover.svg"); - transition-duration: 200; + transition-duration: 100; + } + &:active { + background-image: url("common-assets/misc/add-workspace-active.svg"); + transition-duration: 100; } } &-overview-background-shade { background-color: rgba(0,0,0,0.5); } @@ -605,35 +617,35 @@ StScrollBar { //arrow back .calendar-change-month-back { - background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); + background-image: url("common-assets/misc/calendar-arrow-left.svg"); - &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } - &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } + &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } &:rtl { - background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); + background-image: url("common-assets/misc/calendar-arrow-right.svg"); - &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } - &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } + &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } } } //arrow forward .calendar-change-month-forward { - background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); + background-image: url("common-assets/misc/calendar-arrow-right.svg"); - &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-right-hover.svg"); } + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-right-hover.svg"); } - &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-right.svg"); } + &:active { background-image: url("common-assets/misc/calendar-arrow-right.svg"); } &:rtl { - background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); + background-image: url("common-assets/misc/calendar-arrow-left.svg"); - &:focus, &:hover { background-image: url("#{$asset_path}/misc/calendar-arrow-left-hover.svg"); } + &:focus, &:hover { background-image: url("common-assets/misc/calendar-arrow-left-hover.svg"); } - &:active { background-image: url("#{$asset_path}/misc/calendar-arrow-left.svg"); } + &:active { background-image: url("common-assets/misc/calendar-arrow-left.svg"); } } } @@ -712,7 +724,10 @@ StScrollBar { color: $fg_color; border-image: url("#{$asset_path}/misc/message.svg") 9 9 9 9; - .notification-button, .notification-icon-button { @extend %button; } + .notification-button, .notification-icon-button { + @extend %button; + padding: 5px; + } StEntry { @extend %entry; } } @@ -742,7 +757,10 @@ StScrollBar { color: $osd_fg_color; } - &-button, &-icon-button { @extend %osd_button; } + &-button, &-icon-button { + @extend %osd_button; + padding: 5px; + } &-icon-button > StIcon { icon-size: 36px; } @@ -765,6 +783,10 @@ StScrollBar { border-radius: 3px; padding: 20px; + > StBoxLayout { + padding: 4px; + } + &-item-container { spacing: 8px; } .item-box { @@ -779,7 +801,7 @@ StScrollBar { &:selected { color: $selected_fg_color; background-color: $selected_bg_color; - border: 1px solid $selected_bg_color; + border: 0px solid $selected_bg_color; } } @@ -1049,7 +1071,7 @@ StScrollBar { padding: 10px; border: 1px solid rgba(0,0,0,0); - &:hover { @include button(hover); } + &:hover { @extend %button:hover; } } &-places { @@ -1077,7 +1099,7 @@ StScrollBar { &-selected { padding: 7px; - @include button(hover); + @extend %button:hover; &:highlighted { font-weight: bold; } } @@ -1092,7 +1114,7 @@ StScrollBar { &-selected { padding: 7px; - @include button(hover); + @extend %button:hover; } &-hover { background-color: red; @@ -1290,6 +1312,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) // @@ -1298,6 +1384,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; @@ -1310,6 +1402,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) // |