From e317bfdab7abd27a285b680a17d3c1a2c749c90b Mon Sep 17 00:00:00 2001 From: Carlos Soriano Date: Thu, 19 Feb 2015 21:51:38 +0100 Subject: [PATCH] theme: Use gnome-shell-sass as a submodule The sass sources now live in a project in GNOME, so they can be used in multiple projects like gnome-shell-extensions. Because of that, add gnome-shell-sass as a submodule of gnome-shell and remove the sass sources from the theme directory. --- .gitmodules | 3 + autogen.sh | 2 +- data/theme/HACKING | 3 + data/theme/_colors.scss | 44 - data/theme/_common.scss | 1808 --------------------- data/theme/_drawing.scss | 219 --- data/theme/_high-contrast-colors.scss | 41 - data/theme/gnome-shell-high-contrast.scss | 6 +- data/theme/gnome-shell-sass | 1 + data/theme/gnome-shell.scss | 6 +- 10 files changed, 14 insertions(+), 2119 deletions(-) create mode 100644 data/theme/HACKING delete mode 100644 data/theme/_colors.scss delete mode 100644 data/theme/_common.scss delete mode 100644 data/theme/_drawing.scss delete mode 100644 data/theme/_high-contrast-colors.scss create mode 160000 data/theme/gnome-shell-sass diff --git a/.gitmodules b/.gitmodules index c830da08a..5bc5d3439 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,6 @@ [submodule "src/gvc"] path = src/gvc url = git://git.gnome.org/libgnome-volume-control +[submodule "data/theme/gnome-shell-sass"] + path = data/theme/gnome-shell-sass + url = https://git.gnome.org/browse/gnome-shell-sass diff --git a/autogen.sh b/autogen.sh index 89ba6f592..e552005a6 100755 --- a/autogen.sh +++ b/autogen.sh @@ -14,7 +14,7 @@ PKG_NAME="gnome-shell" } # Fetch submodules if needed -if test ! -f src/gvc/Makefile.am; +if test ! -f src/gvc/Makefile.am || test ! -f data/theme/gnome-shell-sass/COPYING; then echo "+ Setting up submodules" git submodule init diff --git a/data/theme/HACKING b/data/theme/HACKING new file mode 100644 index 000000000..739dfee9b --- /dev/null +++ b/data/theme/HACKING @@ -0,0 +1,3 @@ +To generate the css files, from the project directory: + +sass --sourcemap=none --update . diff --git a/data/theme/_colors.scss b/data/theme/_colors.scss deleted file mode 100644 index d1fa4b6fc..000000000 --- a/data/theme/_colors.scss +++ /dev/null @@ -1,44 +0,0 @@ -// When color definition differs for dark and light variant, -// it gets @if ed depending on $variant - - -$base_color: if($variant =='light', #ffffff, #292929); -$bg_color: if($variant =='light', #ededed, #393f3f); -$fg_color: if($variant =='light', #2e3436, #eeeeec); - -$selected_fg_color: #ffffff; -$selected_bg_color: if($variant == 'light', #4a90d9, darken(#4a90d9,20%)); -$selected_borders_color: if($variant=='light', darken($selected_bg_color, 30%), - darken($selected_bg_color, 20%)); -$borders_color: if($variant =='light', darken($bg_color,30%), darken($bg_color,12%)); -$borders_edge: if($variant =='light', white, transparentize($fg_color, 0.9)); -$link_color: if($variant == 'light', darken($selected_bg_color,10%), - lighten($selected_bg_color,20%)); -$link_visited_color: if($variant == 'light', darken($selected_bg_color,20%), - lighten($selected_bg_color,10%)); -$top_hilight: $borders_edge; - -$warning_color: #f57900; -$error_color: #cc0000; -$success_color: if($variant =='light', #73d216, darken(#73d216,10%)); -$destructive_color: if($variant =='light', #ef2929, darken(#ef2929,10%)); - -$osd_fg_color: #eeeeec; -$osd_bg_color: #2e3436; -$osd_borders_color: transparentize(black, 0.3); -$osd_outer_borders_color: transparentize(white, 0.9); - -$tooltip_borders_color: $osd_outer_borders_color; - -//insensitive state derived colors -$insensitive_fg_color: mix($fg_color, $bg_color, 50%); -$insensitive_bg_color: mix($bg_color, $base_color, 60%); -$insensitive_borders_color: $borders_color; - -//colors for the backdrop state, derived from the main colors. -$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%)); -$backdrop_bg_color: $bg_color; -$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); -$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%)); -$backdrop_borders_color: mix($borders_color, $bg_color, 90%); -$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); diff --git a/data/theme/_common.scss b/data/theme/_common.scss deleted file mode 100644 index f56e27208..000000000 --- a/data/theme/_common.scss +++ /dev/null @@ -1,1808 +0,0 @@ -//This is the RIGHT PLACE to edit the stylesheet - -//let's start by telling people not to edit the generated CSS: -$cakeisalie: "This stylesheet is generated, DO NOT EDIT"; -/* #{$cakeisalie} */ - -$panel-corner-radius: 6px; - -/* Copyright 2009, Red Hat, Inc. - * - * Portions adapted from Mx's data/style/default.css - * Copyright 2009 Intel Corporation - * - * This program is free software; you can redistribute it and/or modify it - * under the terms and conditions of the GNU Lesser General Public License, - * version 2.1, as published by the Free Software Foundation. - * - * This program is distributed in the hope it will be useful, but WITHOUT ANY - * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS - * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for - * more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin St - Fifth Floor, Boston, MA 02110-1301 USA. - */ - - -/* GLOBALS */ -$font-size: 11; -$font-family: Cantarell, Sans-Serif; -$_bubble_bg_color: opacify($osd_bg_color,0.25); -$_bubble_fg_color: $osd_fg_color; -$_bubble_borders_color: transparentize($osd_fg_color,0.8); - -stage { - font-family: $font-family; - @include fontsize($font-size); - color: $fg_color; -} - -/* WIDGETS */ - -/* Buttons */ -.button { - border-radius: 3px; - border-width: 1px; - padding: 4px 32px; - @include button(normal); - &:focus { @include button(focus); } - &:insensitive { @include button(insensitive); } - &:active { @include button(active); } -} - -/* Entries */ -StEntry { - border-radius: 3px; - padding: 4px; - border-width: 1px; - color: $fg_color; - @include entry(normal); - //&:hover { @include entry(hover);} - &:focus { @include entry(focus,$fc:transparentize($fg_color,0.5));} - &:insensitive { @include entry(insensitive);} - selection-background-color: $selected_bg_color; - selected-color: $selected_fg_color; -} - - -/* Scrollbars */ - -StScrollBar { - padding: 0; - &.vfade { -st-vfade-offset: 68px; } - &.hfade { -st-hfade-offset: 68px; } - - StScrollView & { - min-width: 14px; - min-height: 14px; - } - - StBin#trough { - border-radius: 0; - background-color: transparent; - } - - StButton#vhandle, StButton#hhandle { - border-radius: 8px; - background-color: $bg_color; - //border: 3px solid transparent; //would be nice to margin or at least to transparent - margin: 3px; - &:hover { background-color: lighten($bg_color,10%); } - &:active { background-color: $selected_bg_color; } - } -} - -/* Slider */ - -.slider { - height: 1em; - -slider-height: 0.3em; - -slider-background-color: $insensitive_bg_color; //background of the trough - -slider-border-color: $borders_color; //trough border color - -slider-active-background-color: $selected_bg_color; //active trough fill - -slider-active-border-color: darken($selected_bg_color,10%); //active trough border - -slider-border-width: 1px; - -slider-handle-radius: 6px; -} - -/* Check Boxes */ - -.check-box { - StBoxLayout { spacing: .8em; } - StBin { - width: 24px; - height: 22px; - background-image: url("checkbox-off.svg"); - } - &:focus Stbin { background-image: url("checkbox-off-focused.svg"); } - &:checked Stbin { background-image: url("checkbox.svg"); } - &:focus:checked Stbin { background-image: url("checkbox-focused.svg"); } -} - -/* Switches */ -.toggle-switch { - width: 65px; - height: 22px; - background-size: contain; -} - - @each $v in us, intl { - .toggle-switch-#{$v} { - background-image: url("toggle-off-#{$v}.svg"); - &:checked { background-image: url("toggle-on-#{$v}.svg"); } - } - } - -/* links */ -.shell-link { - color: $link_color; - &:hover { color: lighten($link_color,10%); } -} - -/* Modal Dialogs */ - -.headline { font-size: 110%; } -.lightbox { background-color: black; } -.flashspot { background-color: white; } - -.modal-dialog { - border-radius: 5px; - color: $osd_fg_color; - background-color: transparentize(darken($osd_bg_color,10%),0.05); - border: 3px solid transparentize($osd_fg_color,0.5); - padding: 24px; - - .run-dialog-entry { width: 20em; margin-bottom: 6px; } - .run-dialog-error-box { - padding-top: 16px; - spacing: 6px; - } - .run-dialog-button-box { padding-top: 1em; } - .run-dialog-label { - font-size: fontsize($font-size + 1.1); - font-weight: bold; - color: darken($osd_fg_color,10%); - padding-bottom: .4em; - } - -} - .button-dialog-button-box { - spacing: 18px; - padding-top: 48px; - } - - .show-processes-dialog-subject, - .mount-question-dialog-subject, - .end-session-dialog-subject { //this should be a generic header class - font-size: fontsize($font-size * 1.3); - } - -/* End Session Dialog */ -.end-session-dialog { - spacing: 42px; - border: 3px solid $_bubble_borders_color; -} - - .end-session-dialog-list { - padding-top: 20px; - } - - .end-session-dialog-layout { - padding-left: 17px; - &:rtl { padding-right: 17px; } - } - - .end-session-dialog-description { - width: 28em; - padding-bottom: 10px; - &:rtl { - text-align: right; - } - } - - .end-session-dialog-warning { - width: 28em; - color: $warning_color; - padding-top: 6px; - &:rtl { - text-align: right; - } - } - - .end-session-dialog-logout-icon { - //border: 2px solid #8b8b8b; - border-radius: 5px; - width: 48px; - height: 48px; - background-size: contain; - } - - .end-session-dialog-shutdown-icon { - color: $fg_color; - width: 48px; - height: 48px; - } - - .end-session-dialog-inhibitor-layout { - spacing: 16px; - max-height: 200px; - padding-right: 65px; - padding-left: 65px; - } - - .end-session-dialog-session-list, - .end-session-dialog-app-list { - spacing: 1em; - } - - .end-session-dialog-list-header { - font-weight: bold; - &:rtl { text-align: right; } - } - - .end-session-dialog-app-list-item, - .end-session-dialog-session-list-item { - spacing: 1em; - } - - .end-session-dialog-app-list-item-name, - .end-session-dialog-session-list-item-name { - font-weight: bold; - } - - .end-session-dialog-app-list-item-description { - color: darken($fg_color,5%); - font-size: 10pt; - } - -/* ShellMountOperation Dialogs */ -.shell-mount-operation-icon { icon-size: 48px; } - - .show-processes-dialog, - .mount-question-dialog { - spacing: 24px; - } - - .show-processes-dialog-subject, - .mount-question-dialog-subject { - padding-top: 10px; - padding-left: 17px; - padding-bottom: 6px; - } - - .mount-question-dialog-subject { - max-width: 500px; - } - - .show-processes-dialog-subject:rtl, - .mount-question-dialog-subject:rtl { - padding-left: 0px; - padding-right: 17px; - } - - .show-processes-dialog-description, - .mount-question-dialog-description { - padding-left: 17px; - width: 28em; - } - - .show-processes-dialog-description:rtl, - .mount-question-dialog-description:rtl { - padding-right: 17px; - } - - .show-processes-dialog-app-list { - max-height: 200px; - padding-top: 24px; - padding-left: 49px; - padding-right: 32px; - } - - .show-processes-dialog-app-list:rtl { - padding-right: 49px; - padding-left: 32px; - } - - .show-processes-dialog-app-list-item { - color: darken($fg_color,10%); - &:hover { color: $fg_color; } - &:ltr { padding-right: 1em; } - &:rtl { padding-left: 1em; } - } - - .show-processes-dialog-app-list-item-icon { - &:ltr { padding-right: 17px; } - &:rtl { padding-left: 17px; } - } - - .show-processes-dialog-app-list-item-name { - font-size: 10pt; - } - - -/* Password or Authentication Dialog */ - -.prompt-dialog { - //this is the width of the entire modal popup - width: 500px; - border: 3px solid $_bubble_borders_color; -} - - .prompt-dialog-main-layout { - spacing: 24px; - padding: 10px; - } - - .prompt-dialog-message-layout { - spacing: 16px; - } - - .prompt-dialog-headline { - font-weight: bold; - color: darken($fg_color,30%); - } - - .prompt-dialog-description:rtl { - text-align: right; - } - - .prompt-dialog-password-box { - spacing: 1em; - padding-bottom: 1em; - } - - .prompt-dialog-error-label { - font-size: 10pt; - color: $error_color; - padding-bottom: 8px; - } - - .prompt-dialog-info-label { - font-size: 10pt; - padding-bottom: 8px; - } - - .hidden { - color: rgba(0,0,0,0); - } - - .prompt-dialog-null-label { - font-size: 10pt; - padding-bottom: 8px; - } - - -/* Polkit Dialog */ - -.polkit-dialog-user-layout { - padding-left: 10px; - spacing: 10px; - &:rtl { - padding-left: 0px; - padding-right: 10px; - } -} - - .polkit-dialog-user-root-label { - color: $warning_color; - } - - .polkit-dialog-user-icon { - border-radius: 5px; - background-size: contain; - width: 48px; - height: 48px; - } - -/* Network Agent Dialog */ - -.network-dialog-secret-table { - spacing-rows: 15px; - spacing-columns: 1em; -} - -.keyring-dialog-control-table { - spacing-rows: 15px; - spacing-columns: 1em; -} - -/* Popvers/Menus */ - -.popup-menu { - min-width: 200px; - - .popup-menu-arrow { } //defined globally in the TOP BAR - .popup-sub-menu { - background-color: darken($bg_color,2%); - box-shadow: inset 0 -1px 0px lighten($borders_color,5%); - } - - .popup-menu-content { padding: 1em 0em; } - .popup-menu-item { - spacing: 12px; - - &:ltr { padding: .4em 1.75em .4em 0em; } - &:rtl { padding: .4em 0em .4em 1.75em; } - &:checked { - background-color: darken($bg_color,2%); - box-shadow: inset 0 1px 0px lighten($borders_color,5%); - font-weight: bold; - } - &:hover { background-color: $selected_bg_color; color: $selected_fg_color; } - &:active { background-color: darken($selected_bg_color,5%); color: $selected_fg_color; } - &:insensitive { background-color: transparentize($bg_color,.5); } - } - - .active { - background-color: $selected_bg_color; - } - - .popup-inactive-menu-item { //all icons and other graphical elements - color: $fg_color; - - &:insensitive { color: transparentize($fg_color,0.5); } - } - //.popup-status-menu-item { font-weight: normal; color: pink; } //dunno what that is - &.panel-menu { - -boxpointer-gap: 4px; - margin-bottom: 1.75em; - } -} - - - - .popup-menu-ornament { - text-align: right; - width: 1em; - } - .popup-menu-boxpointer, - .candidate-popup-boxpointer { - -arrow-border-radius: 3px; - -arrow-background-color: $bg_color; - -arrow-border-width: 1px; - -arrow-border-color: $borders_color; - -arrow-base: 24px; - -arrow-rise: 11px; - -arrow-box-shadow: 0 1px 3px black; //dreaming. bug #689995 - } - - .popup-separator-menu-item { - //-margin-horizontal: 24px; - height: 1px; //not really the whole box - margin: 6px 64px; - background-color: transparent; - border-color: lighten($borders_color,10%); - border-bottom-width: 1px; - border-bottom-style: solid; - } - - -// Background menu -.background-menu { -boxpointer-gap: 4px; -arrow-rise: 0px; } - -/* fallback menu -- odd thing for styling App menu when apparently not running under shell. Light Adwaita styled - app menu inside the main app window itself rather than the top bar -*/ - - -/* OSD */ -.osd-window { - text-align: center; - font-weight: bold; - spacing: 1em; - - .level { - height: 0.6em; - border-radius: 0.3em; - background-color: transparentize(darken($osd_bg_color,15%),0.5); - color: $osd_fg_color; - } -} - -/* App Switcher */ -.switcher-popup { - padding: 8px; - spacing: 16px; -} - -.osd-window, -.switcher-list { - @extend %osd-panel; -} - - .switcher-list-item-container { spacing: 8px; } - - .switcher-list .item-box { - padding: 8px; - border-radius: 4px; - } - - .switcher-list .item-box:outlined { - padding: 6px; - border: 2px solid darken($borders_color,10%); - } - - .switcher-list .item-box:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - - .switcher-list .thumbnail-box { - padding: 2px; - spacing: 4px; - } - - .switcher-list .thumbnail { - width: 256px; - } - - .switcher-list .separator { - width: 1px; - background: $borders_color; - } - - .switcher-arrow { - border-color: rgba(0,0,0,0); - color: $borders_color; - } - - .switcher-arrow:highlighted { - color: $fg_color; - } - - .input-source-switcher-symbol { - font-size: 34pt; - width: 96px; - height: 96px; - } - -/* Workspace Switcher */ -.workspace-switcher-group { padding: 12px; } - - .workspace-switcher-container { - @extend %osd-panel; - } - - .workspace-switcher { - background: transparent; - border: 0px; - border-radius: 0px; - padding: 0px; - spacing: 8px; - } - - .ws-switcher-active-up, .ws-switcher-active-down { - height: 50px; - background-color: $selected_bg_color; - color: $selected_fg_color; - //background-image: url("ws-switch-arrow-up.png"); - background-size: 32px; - border-radius: 8px; - } - - .ws-switcher-box { - height: 50px; - border: 1px solid transparentize($osd_fg_color,0.9); - background: transparent; - border-radius: 8px; - } - -%osd-panel { - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; - border: 1px solid $_bubble_borders_color; - border-radius: 12px; - padding: 12px; -} - -/* Tiled window previews */ -.tile-preview { - background-color: transparentize($selected_bg_color,0.5); - border: 1px solid $selected_bg_color; -} - - .tile-preview-left.on-primary { - border-radius: $panel-corner-radius $panel-corner-radius 0 0 0; - } - - .tile-preview-right.on-primary { - border-radius: 0 $panel-corner-radius 0 0; - } - - .tile-preview-left.tile-preview-right.on-primary { - border-radius: $panel-corner-radius $panel-corner-radius 0 0; - } - -/* TOP BAR */ - -#panel { - background-color: black; - font-weight: bold; - height: 1.86em; - - &.unlock-screen, - &.login-screen, - &.lock-screen { - background-color: transparent; - } - - #panelLeft, #panelCenter { // spacing between activities<>app menu and such - spacing: 4px; - } - - .panel-corner { - -panel-corner-radius: $panel-corner-radius; - -panel-corner-background-color: black; - -panel-corner-border-width: 2px; - -panel-corner-border-color: transparent; - - &:active, &:overview, &:focus { - -panel-corner-border-color: lighten($selected_bg_color,5%); - } - - &.lock-screen, &.login-screen, &unlock-screen { - -panel-corner-radius: 0; - -panel-corner-background-color: transparent; - -panel-corner-border-color: transparent; - } - } - - .panel-button { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: #ccc; - transition-duration: 100ms; - - .app-menu-icon { - -st-icon-style: symbolic; - } - - &:hover { - color: lighten($fg_color, 10%); - } - - &:active, &:overview, &:focus, &:checked { - // Trick due to St limitations. It needs a background to draw - // a box-shadow - background-color: rgba(0, 0, 0, 0.01); - box-shadow: inset 0 -2px 0px lighten($selected_bg_color,5%); - color: lighten($fg_color,10%); - - & > .system-status-icon { icon-shadow: black 0 2px 2px; } - } - - .system-status-icon { icon-size: 1.09em; padding: 0 5px; } - .unlock-screen &, - .login-screen &, - .lock-screen & { - color: lighten($fg_color, 10%); - &:focus, &:hover, &:active { color: lighten($fg_color, 10%); } - } - } - - .panel-status-indicators-box, - .panel-status-menu-box { - spacing: 2px; - } - - .screencast-indicator { color: $warning_color; } -} - - // calendar popover - .calendar { - padding: .4em 1.75em .8em 1.75em; - margin-bottom: 2em; - } - - .datemenu-date-label { //topmost date label - padding: .4em 1.7em; - text-align: center; - color: $fg_color; - font-weight: bold; - font-size: 110%; - } - - .calendar-vertical-separator { - width: .3em; - -stipple-width: 1px; - -stipple-color: $_bubble_borders_color; - } - - .calendar-month-label { - color: darken($fg_color,5%); - font-weight: bold; - padding: 8px 0; - &:focus {} - } - - .pager-button { - color: white; - background-color: transparent; - width: 32px; - background-position: center; - border-radius: 4px; - &:hover, &:focus { background-color: transparentize($fg_color,0.95); } - &:active { background-color: transparentize($bg_color,0.95); } - } - - .calendar-change-month-back { //arrow back - background-image: url("calendar-arrow-left.svg"); - &:rtl { background-image: url("calendar-arrow-right.svg"); } - } - .calendar-change-month-forward { //arrow foreward - background-image: url("calendar-arrow-right.svg"); - &:rtl { background-image: url("calendar-arrow-left.svg"); } - } - - .calendar-day-base { - font-size: 80%; - text-align: center; - width: 2.4em; height: 2.4em; - padding: 0.1em; - margin: 2px; - border-radius: 1.4em; - &:hover,&:focus { background-color: lighten($bg_color,5%); } - &:active { - color: lighten($selected_fg_color,5%); - background-color: $selected_bg_color; - border-color: transparent; //avoid jumparound due to today - } - &.calendar-day-heading { //day of week heading - color: darken($fg_color,40%); - margin-top: 1em; - font-size: 70%; - } - } - .calendar-day { //border collapse hack - see calendar.js - border-width: 0; - } - .calendar-day-top { border-top-width: 1px; } - .calendar-day-left { border-left-width: 1px; } - .calendar-work-day { - - } - .calendar-nonwork-day { - color: $insensitive_fg_color; - } - .calendar-today { - font-weight: bold; - //color: lighten($fg_color,10%); - //background-color: darken($bg_color,5%); - border: 1px solid transparentize($borders_color,0.5); - } - .calendar-day-with-events { - color: darken($fg_color,5%); - font-weight: bold; - } - .calendar-other-month-day { - color: transparentize($fg_color,0.85); - opacity: 0.5; - } - - .events-table { //right hand side - width: 15em; - spacing-columns: 1em; - padding: 0 1.4em; - &:ltr { padding-right: 1.9em; } - &:rtl { padding-left: 1.9em; } - } - .events-day-header { - font-weight: bold; - color: darken($fg_color,10%); - padding-left: 0; - padding-top: 1.2em; - &:first-child { padding-top: 0; } - } - .events-day-dayname { - color: darken($fg_color,10%); - text-align: left; - min-width: 20px; - &:rtl { text-align: right; } - .events-day-time { - text-align: right; - &:rtl { text-align: left; } - } - .events-day-task { - color: darken($fg_color,10%); - &:ltr { padding-left: 8px; } - &:rtl { padding-right: 8px; } - } - } - - - // a little unstructured mess: - - .system-switch-user-submenu-icon { - icon-size: 24px; - border: 1px solid transparentize($fg_color,0.6); - } - - #appMenu { - spinner-image: url("process-working.svg"); - spacing: 4px; - - .label-shadow { color: transparent; } - } - - .aggregate-menu { - width: 360px; - .popup-menu-icon { padding: 0 4px; } - } - - .system-menu-action { - color: $fg_color; - border-radius: 32px; /* wish we could do 50% */ - padding: 13px; - border: 1px solid lighten($borders_color,5%); - - &:hover, &:focus { - color: $selected_fg_color; - background-color: $selected_bg_color; - border: none; - padding: 14px; - } - &:active { background-color: darken($selected_bg_color,5%); color: $selected_fg_color; } - - & > StIcon { icon-size: 16px; } - } - -//Activities Ripples -.ripple-box { - width: 52px; - height: 52px; - background-image: url("corner-ripple-ltr.png"); - background-size: contain; -} - -.ripple-box:rtl { - background-image: url("corner-ripple-rtl.png"); -} - -// not really top bar only -.popup-menu-arrow { width: 16px; height: 16px; } -.popup-menu-icon { icon-size: 1.09em; } - -//close buttons - -.window-close, .notification-close { - background-image: url("close-window.svg"); - background-size: 32px; - height: 32px; - width: 32px; -} - .window-close { - -shell-close-overlap: 16px; - &:rtl { -st-background-image-shadow: 2px 2px 6px rgba(0,0,0,0.5); } - } - .notification-close { - -shell-close-overlap-x: 14px; - -shell-close-overlap-y: -12px; - - &:rtl { -shell-close-overlap-x: -14px; } - } - -/* NETWORK DIALOGS */ - -.nm-dialog { - max-height: 500px; - min-height: 450px; - min-width: 470px; -} - - .nm-dialog-content { - spacing: 20px; - } - - .nm-dialog-header-hbox { - spacing: 10px; - } - - .nm-dialog-airplane-box { - spacing: 12px; - } - - .nm-dialog-airplane-headline { - font-weight: bold; - text-align: center; - } - - .nm-dialog-airplane-text { - color: $fg_color; - } - - .nm-dialog-header-icon { - icon-size: 32px; - } - - .nm-dialog-scroll-view { - border: 2px solid $borders_color; - } - - .nm-dialog-header { - font-weight: bold; - } - - .nm-dialog-item { - font-size: 110%; - border-bottom: 1px solid $borders_color; - padding: 12px; - spacing: 20px; - } - - .nm-dialog-item:selected { - background-color: $selected_bg_color; - color: $selected_fg_color; - } - - .nm-dialog-icons { - spacing: .5em; - } - - .nm-dialog-icon { - icon-size: 16px; - } - - .no-networks-label { - color: #999999; - } - - .no-networks-box { - spacing: 12px; - } - -/* OVERVIEW */ - -#overview { - spacing: 24px; // - -} - .window-picker { //container around window thumbnails - -horizontal-spacing: 32px; - -vertical-spacing: 32px; - padding-left: 32px; - padding-right: 32px; - padding-bottom: 48px; - - &.external-monitor { padding: 32px; } - } - - .window-clone-border { - border: 4px solid $selected_bg_color; - border-radius: 4px; - // For window decorations with round corners we can't match - // the exact shape when the window is scaled. So apply a shadow - // to fix that case - box-shadow: inset 0px 0px 0px 1px $selected_bg_color; - } - .window-caption { - spacing: 25px; - color: $osd_fg_color; - background-color: transparentize($osd_bg_color,0.3); - border-radius: 8px; - padding: 4px 12px; - -shell-caption-spacing: 12px; - &:hover { background-color: $selected_bg_color; color: $selected_fg_color; } - } - - .messages-indicator { color: transparentize($osd_fg_color,.2); height: 32px; } - .messages-indicator-contents { spacing: 12px; padding-bottom: 12px; } - - //search entry - .search-entry { - width: 320px; - padding: 7px 9px; - border-radius: 6px; - &:focus { - padding: 6px 8px; - border-width: 2px; - } - - .search-entry-icon { icon-size: 1em; padding: 0 4px; color: transparentize($fg_color,.3); } - - &:hover, &:focus { - .search-entry-icon { color: $fg_color; } - } - } - - //search results - - #searchResultsBin { - max-width: 1000px; - } - - #searchResultsContent { - padding-left: 20px; - padding-right: 20px; - spacing: 16px; - } - - .search-section { spacing: 16px; } // This should be equal to #searchResultsContent spacing - .search-section-content { spacing: 32px; } // This is the space between the provider icon and the results container - .search-statustext { // "no results" - @extend %status_text; - } - .list-search-results { spacing: 3px; } - - .search-section-separator { - -gradient-height: 1px; - -gradient-start: rgba(255,255,255,0); - -gradient-end: rgba(255,255,255,0.1); - -margin-horizontal: 1.5em; - height: 1px; - } - - .list-search-result-content { spacing: 12px; padding: 12px; } - .list-search-result-title { font-size: 1.5em; color: darken($osd_fg_color,5%); } - .list-search-result-description { color: darken($osd_fg_color,15%); } - .search-provider-icon { padding: 15px; } - .search-provider-icon-more { - width: 16px; - height: 16px; - background-image: url("more-results.svg"); - } - - - /* DASHBOARD */ - - #dash { - font-size: 9pt; - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; - padding: 4px 0; - border: 1px solid rgba(128, 128, 128, 0.4); - border-left: 0px; - border-radius: 0px 9px 9px 0px; - - &:rtl { - border-radius: 9px 0 0 9px; - } - - .placeholder { - background-image: url("dash-placeholder.svg"); - background-size: contain; - height: 24px; - } - - .empty-dash-drop-target { - width: 24px; - height: 24px; - } - - } - - .dash-item-container > StWidget { - padding: 4px 8px; - } - - .dash-label { //osd tooltip - border-radius: 7px; - padding: 4px 12px; - color: $osd_fg_color; - background-color: transparentize($osd_bg_color,0.3); - text-align: center; - -x-offset: 8px; - } - - /* App Vault/Grid */ - .icon-grid { - spacing: 30px; - -shell-grid-horizontal-item-size: 136px; - -shell-grid-vertical-item-size: 136px; - - .overview-icon { icon-size: 96px; } - } - //.app-display { spacing: 20px; } - - .app-view-controls { //favorties | all toggle container - padding-bottom: 32px; - } - .app-view-control { //favorties | all toggle button - padding: 4px 32px; - &:checked { @include button(active); } - &:first-child { - border-right-width: 0; - border-radius: 3px 0 0 3px; - } - &:last-child { - border-radius: 0 3px 3px 0; - } - } - - //Icon tile - .search-provider-icon, - .list-search-result { - @extend %icon_tile; - &:active, &:checked { background-color: transparentize(darken($osd_bg_color,10%),.1); } - &:focus, &:selected, &:hover { - background-color: transparentize($osd_fg_color,.9); - transition-duration: 200ms; - } - } - .app-well-app, - .app-well-app.app-folder, - .show-apps, - .grid-search-result { - & .overview-icon { - @extend %icon_tile; - } - &:active .overview-icon, - &:checked .overview-icon { - background-color: transparentize(darken($osd_bg_color,10%),.1); - box-shadow: inset 0 1px 2px $osd_borders_color; - } - &:hover .overview-icon, - &:focus .overview-icon, - &:selected .overview-icon { - background-color: transparentize($osd_fg_color,.9); - transition-duration: 0ms; - border-image: none; - background-image: none; - } - - } - - .app-well-app-running-dot { //running apps indicator - width: 10px; height: 3px; - background-color: $selected_bg_color; - margin-bottom: 2px; - } - - %icon_tile { - color: $osd_fg_color; - border-radius: 4px; - padding: 6px; - border: 1px solid transparent; - transition-duration: 100ms; - text-align: center; - } - - .app-well-app.app-folder > .overview-icon { - background-color: transparentize($osd_bg_color,.6); - } - - .show-apps:checked .show-apps-icon, - .show-apps:focus .show-apps-icon { - color: white; - transition-duration: 100ms; - } - - - // Collections - .app-folder-popup { //expanded collection - -arrow-border-radius: 8px; - -arrow-background-color: transparentize($osd_bg_color,0.7); - -arrow-base: 24px; - -arrow-rise: 11px; - } - .app-folder-popup-bin { padding: 5px; } - .app-folder-icon { - padding: 5px; - spacing-rows: 5px; - spacing-columns: 5px; - } - - .page-indicator { - padding: 15px 20px; - - .page-indicator-icon { - width: 18px; - height: 18px; - background-image: url(page-indicator-inactive.svg); - } - - &:hover .page-indicator-icon { background-image: url(page-indicator-hover.svg); } - &:active .page-indicator-icon { background-image: url(page-indicator-active.svg); } - &:checked .page-indicator-icon, - &:checked:active { background-image: url(page-indicator-checked.svg); } - } - - .no-frequent-applications-label { @extend %status_text; } - - .app-well-app > .overview-icon.overview-icon-with-label, - .grid-search-result .overview-icon.overview-icon-with-label { - padding: 10px 8px 5px 8px; - spacing: 4px; - } - - // Workspace pager - .workspace-thumbnails { //container ala dash - @extend %overview-panel; - visible-width: 32px; //amount visible before hover - spacing: 11px; - padding: 8px; - border-radius: 9px 0 0 9px; - //border-width: 1px 0 1px 1px; //fixme: can't have non unoform borders :( - &:rtl { border-radius: 0 9px 9px 0;} - } - .workspace-thumbnail-indicator { - border: 4px solid $selected_bg_color; - padding: 1px; - } - - //Some hacks I don't even - .search-display > StBoxLayout, - .all-apps, - .frequent-apps > StBoxLayout { - // horizontal padding to make sure scrollbars or dash don't overlap content - padding: 0px 88px 10px 88px; - } - -%overview-panel { - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; - border: 1px solid $_bubble_borders_color; -} - -%status_text { - font-size: 2em; - font-weight: bold; - color: $fg_color; -} - -/* NOTIFICATIONS & MESSAGE TRAY */ - -#message-tray { - background: darken($osd_bg_color,10%) url("noise-texture.png"); - background-repeat: repeat; - height: 72px; - box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); - padding: 4px; - .message-tray-summary { height: 72px; } - - .message-tray-menu-button { - StIcon { - padding: 0 20px; - color: $fg_color; - icon-size: 24px; - opacity: 1; - } - &:hover StIcon { color: lighten($fg_color, 15%); } - &:active StIcon { color: lighten($selected_bg_color, 10%); } - } - .no-messages-label { color: darken($fg_color,10%); } -} - .url-highlighter { link-color: $selected_bg_color; } - - // Banners - .notification { - font-size: 11pt; - width: 34em; - border-radius: 6px 6px 0 0; - color: $_bubble_fg_color; - background-color: $_bubble_bg_color; - border: 1px solid $borders_color; - border-bottom-width: 0; - //box-shadow: 0 1px 4px black; - spacing-rows: 4px; - padding: 8px 8px 4px 8px; - spacing-columns: 10px; - &.multi-line-notification { padding-bottom: 8px; } - } - .notification-unexpanded { - // We want to force the actor at a specific size, irrespective - // of its minimum and preferred size, so we override both - min-height: 36px; - height: 36px; - } - // We use row-span = 2 for the image cell, which prevents its height preferences to be - // taken into account during allocation, so its height ends up being limited by the height - // of the content in the other rows. To avoid showing a stretched image, we set the minimum - // height of the table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159 - .notification-with-image { - min-height: 159px; - } - .notification-body { spacing: 5px; } - .notification-actions { - paddinf-top: 18px; - spacing: 6px; - } - //Message tray items - .summary-source { - border-radius: 0; - -st-natural-width: 60px; //FIXME left aligned rather than centered - padding: 9px; - transition-duration: 100ms; - } - .summary-source-button { - &:hover .summary-source, - &:selected .summary-source, - &:focus .summary-source { background-color: lighten($osd_bg_color,2%); } - } - .summary-source-counter { - font-size: 10pt; - font-weight: bold; - height: 1.6em; width: 1.6em; - -shell-counter-overlap-x: 3px; - -shell-counter-overlap-y: 3px; - background-color: $selected_bg_color; - color: $selected_fg_color; - border: 2px solid $osd_fg_color; - box-shadow: 0 2px 2px rgba(0,0,0,0.5); - border-radius: 0.9em; // should be 0.8 but whatever; wish I could do 50%; - } - - //Message tray popovers - .summary-boxpointer { - -arrow-border-radius: 15px; - -arrow-background-color: $_bubble_bg_color; - -arrow-base: 36px; - -arrow-rise: 18px; - color: $fg_color; - -boxpointer-gap: 4px; - .notification { - border-radius: 9px; - border-width: 0; //temporary workaround for border brokenness - background-color: transparent !important; - padding-bottom: 12px; - } - #summary-right-click-menu { - padding-top: 12px; - padding-bottom: 12px; - } - } - .summary-notification-stack-scrollview { - max-height: 24em; - padding-top: 8px; - padding-bottom: 8px; - &:ltr { padding-right: 8px; } - &:rtl { padding-left: 8px; } - } - .notification-scrollview { - max-height: 18em; - -st-vfade-offset: 24px; - &:ltr > StScrollBar { padding-left: 6px; } - &:rtl > StScrollBar { padding-right: 6px; } - } - .notification-button { - //-st-natural-width: 140px; - height: 24px; - } - .notification-icon-button { - border-radius: 5px; - padding: 5px; - height: 24px; width: 24px; - &:focus { } - & > StIcon { icons-size: 16px; width: 16px; height: 16px; padding: 2px; } - } - .secondary-icon { icon-size: 1.09em; } - - //chat bubbles - .chat-log-message { color: darken($fg_color,10%); } - .chat-empty-line { font-size: 4px; } - .chat-received { - padding-left: 4px; - &:rtl { padding-left: 0px; padding-right: 4px; } - } - .chat-sent { - padding-left: 18pt; - color: darken($fg_color, 15%); - &:rtl { padding-left: 0; padding-right: 18pt; } - } - .chat-meta-message { - padding-left: 4px; - font-size: 9pt; - font-weight: bold; - color: darken($fg_color,20%); - &:rtl { padding-left: 0; padding-right: 4px; } - } - .chat-notification-scrollview { max-height: 22em; } - .subscription-message { font-style: italic; } - - //hotplug - .hotplug-transient-box { - spacing: 6px; - padding: 2px 72px 2px 12px; - } - .hotplug-notification-item { - padding: 2px 10px; - &:focus { padding: 1px 71px 1px 11px; } - } - - .hotplug-notification-item-icon { - icon-size: 24px; - padding: 2px 5px; - } - - .hotplug-resident-box { spacing: 8px; } - - .hotplug-resident-mount { - spacing: 8px; - border-radius: 4px; - &:hover { background-color: transparentize($bg_color,0.7); } - } - - .hotplug-resident-mount-label { - color: inherit; - padding-left: 6px; - } - - .hotplug-resident-mount-icon { - icon-size: 24px; - padding-left: 6px; - } - - .hotplug-resident-eject-icon { - icon-size: 16px; - } - - .hotplug-resident-eject-button { - padding: 7px; - border-radius: 5px; - color: pink; - } - -/* Eeeky things */ - -//magnifier - -.magnifier-zoom-region { - border: 2px solid $selected_bg_color; - &.full-screen { border-width: 0; } -} - -//Keyboard -/* On-screen Keyboard */ - -#keyboard { - background-color: transparentize($osd_bg_color, 0.3); -} - - .keyboard-layout { - spacing: 10px; - padding: 10px; - } - - .keyboard-row { - spacing: 15px; - } - - .keyboard-key { - @include button(normal); - min-height: 2em; - min-width: 2em; - font-size: 14pt; - font-weight: bold; - border-radius: 5px; - border: 1px solid $borders-color; - color: white; - &:focus { @include button(focus); } - &:hover,&:checked { @include button(hover); } - &:active { @include button(active);} - &:grayed { //FIXME - background-color: $osd_bg_color; - color: $osd_fg_color; - border-color: $osd_borders_color; - } - } - - .keyboard-subkeys { //long press on a key popup - color: white; - padding: 5px; - -arrow-border-radius: 10px; - -arrow-background-color: transparentize($osd_bg_color, 0.3); - -arrow-border-width: 2px; - -arrow-border-color: $_bubble_borders_color; - -arrow-base: 20px; - -arrow-rise: 10px; - -boxpointer-gap: 5px; - } - -// IBus Candidate Popup - -.candidate-popup-content { - padding: 0.5em; - spacing: 0.3em; -} - - .candidate-index { - padding: 0 0.5em 0 0; - color: darken($fg_color,10%); - } - - .candidate-box { - padding: 0.3em 0.5em 0.3em 0.5em; - border-radius: 4px; - &:selected,&:hover { background-color: $selected_bg_color; color: $selected_fg_color; } - } - - .candidate-page-button-box { - height: 2em; - width: 80px; - .vertical & { padding-top: 0.5em; } - .horizontal & { padding-left: 0.5em; } - } - - .candidate-page-button-previous { border-radius: 4px 0px 0px 4px; } - .candidate-page-button-next { border-radius: 0px 4px 4px 0px; } - .candidate-page-button-icon { icon-size: 1em; } - -/* Auth Dialogs & Screen Shield */ - -.framed-user-icon { - background-size: contain; - border: 2px solid $borders_color; - border-radius: 3px; - &:hover { - border-color: lighten($borders_color,30%); - } -} - -// LOGIN DIALOG - -.login-dialog-banner-view { - padding-top: 24px; - max-width: 23em; -} - -.login-dialog { - //reset - border: none; - background-color: transparent; - - .modal-dialog-button-box { spacing: 3px; } - .modal-dialog-button { - padding: 3px 18px; - &:default { - @include button(normal,$c:$selected_bg_color); - &:hover,&:focus { @include button(hover,$c:$selected_bg_color); } - &:active { @include button(active,$c:$selected_bg_color); } - &:insensitive { @include button(insensitive); } - - } - } - -} - - .login-dialog-logo-bin { padding: 24px 0px; } - .login-dialog-banner { color: darken($osd_fg_color,10%); } - .login-dialog-button-box { spacing: 5px; } - .login-dialog-message-warning { color: $warning_color; } - .login-dialog-message-hint { padding-top: 0; padding-bottom: 20px; } - .login-dialog-user-selection-box { - padding: 100px 0px; - .login-dialog-not-listed-label { - padding-left: 2px; - .login-dialog-not-listed-button:focus &, - .login-dialog-not-listed-button:hover & { - color: $osd_fg_color; - } - } - } - .login-dialog-not-listed-label { - font-size: 90%; - font-weight: bold; - color: darken($osd_fg_color,30%); - padding-top: 1em; - } - - .login-dialog-user-list-view { -st-vfade-offset: 1em; } - .login-dialog-user-list { - spacing: 12px; - padding: .2em; - width: 23em; - &:expanded .login-dialog-user-list-item:focus { background-color: $selected_bg_color; color: $selected_fg_color; } - &:expanded .login-dialog-user-list-item:logged-in { border-right: 2px solid $selected_bg_color; } - } - .login-dialog-user-list-item { - border-radius: 5px; - padding: .2em; - color: darken($osd_fg_color,30%); - &:ltr { padding-right: 1em; } - &:rtl { padding-left: 1em; } - &:hover { background-color: $selected_bg_color; color: $selected_fg_color; } - .login-dialog-timed-login-indicator { - height: 2px; - //background-color: rgba(0,0,0,0.0); - background-color: transparent; - } - &:focus .login-dialog-timed-login-indicator { background-color: $osd_bg_color; } - } - - .login-dialog-username, - .user-widget-label { - color: $osd_fg_color; - font-size: 120%; - font-weight: bold; - text-align: left; - padding-left: 15px; - } - .user-widget-label { - &:ltr { padding-left: 18px; } - &:rtl { padding-right: 18px; } - } - - .login-dialog-prompt-layout { - padding-top: 24px; - padding-bottom: 12px; - spacing: 8px; - width: 23em; - } - - .login-dialog-prompt-label { - color: darken($osd_fg_color, 20%); - font-size: 110%; - padding-top: 1em; - } - - .login-dialog-session-list-button StIcon { - icon-size: 1.25em; - } - - .login-dialog-session-list-button { - color: darken($osd_fg_color,30%); - &:hover,&:focus { color: $osd_fg_color; } - &:active { color: darken($osd_fg_color, 50%); } - } - -//SCREEN SHIELD - -.screen-shield-arrows { - padding-bottom: 3em; -} - -.screen-shield-arrows Gjs_Arrow { - color: white; - width: 80px; - height: 48px; - -arrow-thickness: 12px; - -arrow-shadow: 0 1px 1px rgba(0,0,0,0.4); -} - -.screen-shield-clock { - color: white; - text-shadow: 0px 1px 2px rgba(0,0,0,0.6); - font-weight: bold; - text-align: center; - padding-bottom: 1.5em; -} - -.screen-shield-clock-time { - font-size: 72pt; - text-shadow: 0px 2px 2px rgba(0,0,0,0.4); -} - -.screen-shield-clock-date { font-size: 28pt; } - -.screen-shield-notifications-container { - spacing: 6px; - width: 30em; - background-color: transparent; - max-height: 500px; - .summary-notification-stack-scrollview { - padding-top: 0; - padding-bottom: 0; - } - - .notification, - .screen-shield-notification-source { - padding: 12px 6px; - border: 1px solid $_bubble_borders_color; - background-color: transparentize($osd_bg_color,0.5); - color: $_bubble_fg_color; - border-radius: 4px; - } - .notification { margin-right: 15px; } //compensate for space allocated to the scrollbar -} - - -.screen-shield-notification-label { - font-weight: bold; - padding: 0px 0px 0px 12px; -} - -.screen-shield-notification-count-text { padding: 0px 0px 0px 12px; } - -#panel.lock-screen { background-color: transparentize($_bubble_bg_color, 0.5); } - -.screen-shield-background { //just the shadow, really - background: black; - box-shadow: 0px 2px 4px transparentize(black,0.6); -} - -#lockDialogGroup { - background: #2e3436 url(noise-texture.png); - background-repeat: repeat; -} - -#screenShieldNotifications { - StButton#vhandle, StButton#hhandle { - background-color: transparentize($bg_color,0.7); - &:hover, &:focus { background-color: transparentize($bg_color,0.5); } - &:active { background-color: transparentize($selected_bg_color,0.5); } - } -} - - -// Looking Glass -#LookingGlassDialog { - background-color: rgba(0,0,0,0.80); - spacing: 4px; - padding: 4px; - border: 2px solid grey; - border-radius: 4px; - & > #Toolbar { - border: 1px solid grey; - border-radius: 4px; - } - .labels { spacing: 4px; } - .notebook-tab { - -natural-hpadding: 12px; - -minimum-hpadding: 6px; - font-weight: bold; - color: #ccc; - transition-duration: 100ms; - padding-left: .3em; - padding-right: .3em; - &:hover { - color: white; - text-shadow: black 0px 2px 2px; - } - &:selected { - border-bottom-width: 2px; - border-color: lighten($selected_bg_color,5%); - color: white; - text-shadow: black 0px 2px 2px; - } - } - StBoxLayout#EvalBox { padding: 4px; spacing: 4px; } - StBoxLayout#ResultsArea { spacing: 4px; } -} - - .lg-dialog { - StEntry { - selection-background-color: #bbbbbb; - selected-color: #333333; - } - .shell-link { - color: #999999; - &:hover { color: #dddddd; } - } - } - - .lg-completions-text { - font-size: .9em; - font-style: italic; - } - - .lg-obj-inspector-title { - spacing: 4px; - } - - .lg-obj-inspector-button { - border: 1px solid gray; - padding: 4px; - border-radius: 4px; - &:hover { border: 1px solid #ffffff; } - } - - #lookingGlassExtensions { padding: 4px; } - - .lg-extensions-list { - padding: 4px; - spacing: 6px; - } - - .lg-extension { - border: 1px solid #6f6f6f; - border-radius: 4px; - padding: 4px; - } - - .lg-extension-name { - font-weight: bold; - } - - .lg-extension-meta { - spacing: 6px; - } - - #LookingGlassPropertyInspector { - background: rgba(0, 0, 0, 0.8); - border: 2px solid grey; - border-radius: 4px; - padding: 6px; - } diff --git a/data/theme/_drawing.scss b/data/theme/_drawing.scss deleted file mode 100644 index 28335ea06..000000000 --- a/data/theme/_drawing.scss +++ /dev/null @@ -1,219 +0,0 @@ -// Drawing mixins - -// generic drawing of more complex things - -@function _widget_edge($c:$borders_edge) { -// outer highlight "used" on most widgets - @return 0 1px $c; -} - -// provide font size in rem, with px fallback -@mixin fontsize($size: 24, $base: 16) { - font-size: round($size) + pt; - //font-size: ($size / $base) * 1rem; -} - -@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { -// -// Helper function to stack up to 4 box-shadows; -// - @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } - @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } - @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } - @else { box-shadow: $shadow1; } -} - -// entries - -@mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { -// -// Entries drawing function -// -// $t: entry type -// $fc: focus color -// $edge: set to none to not draw the bottom edge or specify a color to not -// use the default one -// -// possible $t values: -// normal, focus, insensitive -// - $_inner_shadows: inset 0 2px 4px transparentize(black, 0.6); - - @if $t==normal { - background-color: $base_color; - border-color: $borders_color; - @include _shadows($_inner_shadows); - - } - @if $t==focus { - @include _shadows($_inner_shadows); - border-color: if($fc==$selected_bg_color, - $selected_borders_color, - darken($fc,35%)); - } - @if $t==hover { } - @if $t==insensitive { - color: $insensitive_fg_color; - border-color: $insensitive_bg_color; - box-shadow: none; - } -} - -// buttons - -@function _border_color ($c) { @return darken($c,25%); } // colored buttons want - // the border form the - // base color - -@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) { -// -// calculate the color of text shadows -// -// $tc is the text color -// $bg is the background color -// - $_lbg: lightness($bg)/100%; - @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); } - @else { @return transparentize(black,$_lbg*0.8); } -} - -@function _button_hilight_color($c) { -// -// calculate the right top hilight color for buttons -// -// $c: base color; -// - @if lightness($c)>90% { @return white; } - @else if lightness($c)>80% { @return transparentize(white, 0.3); } - @else if lightness($c)>50% { @return transparentize(white, 0.5); } - @else if lightness($c)>40% { @return transparentize(white, 0.7); } - @else { @return transparentize(white, 0.9); } -} - -@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { -// -// helper function for the text emboss effect -// -// $tc is the optional text color, not the shadow color -// -// TODO: this functions needs a way to deal with special cases -// - - $_shadow: _text_shadow_color($tc, $bg); - - @if lightness($tc)<50% { - text-shadow: 0 1px $_shadow; - icon-shadow: 0 1px $_shadow; - } - @else { - text-shadow: 0 -1px $_shadow; - icon-shadow: 0 -1px $_shadow; - } -} - -@mixin button($t, $c:$osd_bg_color, $tc:$fg_color, $edge: $borders_edge) { -// -// Button drawing function -// -// $t: button type, -// $c: base button color for colored* types -// $tc: optional text color for colored* types -// $edge: set to none to not draw the bottom edge or specify a color to not -// use the default one -// -// possible $t values: -// normal, hover, active, insensitive, insensitive-active, -// backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, -// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated -// - - $_hilight_color: _button_hilight_color($c); - $_button_edge: if($edge == none, none, _widget_edge($edge)); - $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); - - - @if $t==normal { - // - // normal button - // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5), - $osd_bg_color); - - color: $osd_fg_color; - background-color: $_bg; - border-color: $osd_borders_color; - box-shadow: inset 0 1px lighten($osd_bg_color,10%); - text-shadow: 0 1px black; - icon-shadow: 0 1px black; - } - @if $t==focus { - // - // focused button - // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.5), - $osd_bg_color); - - color: $osd_fg_color; - border-color: $selected_bg_color; - box-shadow: inset 0 1px lighten($osd_bg_color,10%); - text-shadow: 0 1px black; - icon-shadow: 0 1px black; - } - - @else if $t==hover { - // - // active osd button - // - $_bg: if($c!=$osd_bg_color, transparentize($c, 0.3), - lighten($osd_bg_color,10%)); - - color: white; - border-color: $osd_borders_color; - background-color: $_bg; - box-shadow: inset 0 1px lighten($osd_bg_color,20%); - text-shadow: 0 1px black; - icon-shadow: 0 1px black; - - } - @else if $t==active { - // - // active osd button - // - $_bg: if($c!=$bg_color, $c, $osd_borders_color); - - color: white; - border-color: $osd_borders_color; - background-color: darken($_bg,5%); - box-shadow: none; - text-shadow: none; - icon-shadow: none; - } - @else if $t==insensitive { - // - // insensitive osd button - // - $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3); - - color: $insensitive_fg_color; - border-color: $osd_borders_color; - background-color: $_bg; - box-shadow: none; - text-shadow: none; - icon-shadow: none; - } - @else if $t==undecorated { - // - // reset - // - border-color: transparent; - background-color: transparent; - background-image: none; - - @include _shadows(inset 0 1px transparentize(white,1), - $_blank_edge); - - text-shadow: none; - icon-shadow: none; - } -} - diff --git a/data/theme/_high-contrast-colors.scss b/data/theme/_high-contrast-colors.scss deleted file mode 100644 index af1e52f0c..000000000 --- a/data/theme/_high-contrast-colors.scss +++ /dev/null @@ -1,41 +0,0 @@ -// When color definition differs for dark and light variant, -// it gets @if ed depending on $variant - - -$base_color: #222; -$bg_color: #000; -$fg_color: #fff; - -$selected_fg_color: #ffffff; -$selected_bg_color: darken(#4a90d9,20%); -$selected_borders_color: darken($selected_bg_color, 20%); -$borders_color: darken($bg_color,12%); -$borders_edge: transparentize($fg_color, 0.9); -$link_color: lighten($selected_bg_color,20%); -$link_visited_color: lighten($selected_bg_color,10%); -$top_hilight: $borders_edge; - -$warning_color: #f57900; -$error_color: #cc0000; -$success_color: darken(#73d216,10%); -$destructive_color: darken(#ef2929,10%); - -$osd_fg_color: #eeeeec; -$osd_bg_color: #2e3436; -$osd_borders_color: transparentize(black, 0.3); -$osd_outer_borders_color: transparentize(white, 0.9); - -$tooltip_borders_color: $osd_outer_borders_color; - -//insensitive state derived colors -$insensitive_fg_color: mix($fg_color, $bg_color, 50%); -$insensitive_bg_color: mix($bg_color, $base_color, 60%); -$insensitive_borders_color: $borders_color; - -//colors for the backdrop state, derived from the main colors. -$backdrop_base_color: lighten($base_color,1%); -$backdrop_bg_color: $bg_color; -$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%); -$backdrop_insensitive_color: lighten($backdrop_bg_color,15%); -$backdrop_borders_color: mix($borders_color, $bg_color, 90%); -$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%); diff --git a/data/theme/gnome-shell-high-contrast.scss b/data/theme/gnome-shell-high-contrast.scss index 91a3197d7..349dfb601 100644 --- a/data/theme/gnome-shell-high-contrast.scss +++ b/data/theme/gnome-shell-high-contrast.scss @@ -1,6 +1,6 @@ -@import "_high-contrast-colors"; //use gtk colors -@import "_drawing"; -@import "_common"; +@import "gnome-shell-sass/_high-contrast-colors"; //use gtk colors +@import "gnome-shell-sass/_drawing"; +@import "gnome-shell-sass/_common"; //force symbolic icons stage { diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass new file mode 160000 index 000000000..f9e45c152 --- /dev/null +++ b/data/theme/gnome-shell-sass @@ -0,0 +1 @@ +Subproject commit f9e45c152f56b086baac34f111c837287b7b1806 diff --git a/data/theme/gnome-shell.scss b/data/theme/gnome-shell.scss index 6e75827de..3def5896c 100644 --- a/data/theme/gnome-shell.scss +++ b/data/theme/gnome-shell.scss @@ -1,5 +1,5 @@ $variant: 'dark'; -@import "_colors"; //use gtk colors -@import "_drawing"; -@import "_common"; +@import "gnome-shell-sass/_colors"; //use gtk colors +@import "gnome-shell-sass/_drawing"; +@import "gnome-shell-sass/_common";