some fixes and additions
This commit is contained in:
Sam Hewitt
parent
03f0ed663d
commit
30cdb220a1
|
|
@ -1,3 +1,12 @@
|
|||
/**********************
|
||||
* DE-Specific Styles *
|
||||
**********************/
|
||||
|
||||
@import 'apps/budgie';
|
||||
@import 'apps/gnome';
|
||||
@import 'apps/pantheon';
|
||||
@import 'apps/unity';
|
||||
|
||||
/***********************
|
||||
* App-Specific Styles *
|
||||
***********************/
|
||||
|
|
@ -5,9 +14,6 @@
|
|||
@import 'apps/archive-manager';
|
||||
@import 'apps/birdie';
|
||||
@import 'apps/geary';
|
||||
@import 'apps/gnome';
|
||||
@import 'apps/pantheon';
|
||||
@import 'apps/lightdm';
|
||||
@import 'apps/midori';
|
||||
@import 'apps/pantheon';
|
||||
@import 'apps/unity';
|
||||
@import 'apps/vocal';
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
// When color definition differs for dark and light variant
|
||||
// it gets @if ed depending on $variant
|
||||
|
||||
|
||||
// Main definitions
|
||||
$base_color: if($variant == 'light', #ffffff, #636E73);
|
||||
$bg_color: if($variant == 'light', #f7f7f7, #4F585C);
|
||||
$fg_color: if($variant == 'light', #666666, #A1A8AB);
|
||||
|
|
@ -9,6 +9,14 @@ $text_color: if($variant == 'light', $fg_color, $fg_color);
|
|||
$headerbar_bg_color: if($variant == 'light', #636E73, #3B4245);
|
||||
$headerbar_fg_color: if($variant == 'light', #ffffff, transparentize(#ffffff, 0.2));
|
||||
|
||||
// Primary colors
|
||||
$red: #f34235;
|
||||
$orange: #fe9700;
|
||||
$yellow: #feea3a;
|
||||
$green: #1ea362;
|
||||
$blue: #2095f2;
|
||||
$purple: #9b26af;
|
||||
|
||||
$selected_fg_color: #ffffff;
|
||||
$selected_bg_color: if($variant == 'light', lighten(#347D9F, 10%), darken(#9fb0b9,20%));
|
||||
$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 10%), darken($selected_bg_color, 30%));
|
||||
|
|
@ -30,12 +38,9 @@ $scrollbar_slider_color: mix($fg_color, $bg_color, 60%);
|
|||
$scrollbar_slider_hover_color: mix($fg_color, $bg_color, 80%);
|
||||
$scrollbar_slider_active_color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));
|
||||
|
||||
$warning_color: #fec006;
|
||||
$error_color: #f34235;
|
||||
$info_color: #2095f2;
|
||||
$question_color: #4ab3e4;
|
||||
$success_color: if($variant == 'light', #dbdee0, darken(#dbdee0,10%));
|
||||
$destructive_color: if($variant == 'light', #DC322F, darken(#DC322F,10%));
|
||||
$success_color: if($variant == 'light', $green, darken($green,10%));
|
||||
$destructive_color: if($variant == 'light', $red, darken($red,10%));
|
||||
$suggested_color: if($variant == 'light', $selected_bg_color, darken($selected_bg_color,10%));
|
||||
|
||||
$osd_fg_color: #A1A8AB;
|
||||
$osd_text_color: white;
|
||||
|
|
@ -52,6 +57,18 @@ $shadow_color: transparentize(black, 0.9);
|
|||
|
||||
$drop_target_color: #4e9a06;
|
||||
|
||||
// Infobar colors
|
||||
$warning_color: $yellow;
|
||||
$error_color: $red;
|
||||
$info_color: $blue;
|
||||
$question_color: $green;
|
||||
|
||||
// Panel colors
|
||||
$panel_bg_color: darken($headerbar_bg_color, 10%);
|
||||
$backdrop_panel_color: darken($panel_bg_color,10%);
|
||||
$panel_fg_color: $headerbar_fg_color;
|
||||
$backdrop_panel_fg_color: darken($panel_fg_color,10%);
|
||||
|
||||
// Insensitive state colors
|
||||
$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
|
||||
$insensitive_bg_color: mix($bg_color, $base_color, 60%);
|
||||
|
|
|
|||
|
|
@ -48,45 +48,4 @@ $button_transition: all 200ms $ease-out-quad;
|
|||
// -gtk-outline-radius: 2px;
|
||||
|
||||
-gtk-secondary-caret-color: $selected_bg_color
|
||||
}
|
||||
|
||||
@import 'widgets/action-bars';
|
||||
@import 'widgets/app-notifications';
|
||||
@import 'widgets/base-states';
|
||||
@import 'widgets/buttons';
|
||||
@import 'widgets/calendar';
|
||||
@import 'widgets/checks-radios';
|
||||
@import 'widgets/color-chooser';
|
||||
@import 'widgets/comboboxes';
|
||||
@import 'widgets/dialogs';
|
||||
@import 'widgets/entries';
|
||||
@import 'widgets/expanders';
|
||||
@import 'widgets/file-chooser';
|
||||
@import 'widgets/floating-bar';
|
||||
@import 'widgets/frames';
|
||||
@import 'widgets/granite';
|
||||
@import 'widgets/header-bars';
|
||||
@import 'widgets/infobars';
|
||||
@import 'widgets/level-bars';
|
||||
@import 'widgets/links';
|
||||
@import 'widgets/lists';
|
||||
@import 'widgets/menus';
|
||||
@import 'widgets/misc';
|
||||
@import 'widgets/notebooks';
|
||||
@import 'widgets/paned';
|
||||
@import 'widgets/pathbars';
|
||||
@import 'widgets/popovers';
|
||||
@import 'widgets/print-dialog';
|
||||
@import 'widgets/progress-bars';
|
||||
@import 'widgets/scales';
|
||||
@import 'widgets/scrollbars';
|
||||
@import 'widgets/sidebar';
|
||||
@import 'widgets/source-list';
|
||||
@import 'widgets/spinbuttons';
|
||||
@import 'widgets/spinner';
|
||||
@import 'widgets/switches';
|
||||
@import 'widgets/toolbars';
|
||||
@import 'widgets/tooltips';
|
||||
@import 'widgets/touch-copy-paste';
|
||||
@import 'widgets/treeviews';
|
||||
@import 'widgets/windows';
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
/***********
|
||||
* Widgets *
|
||||
***********/
|
||||
|
||||
@import 'widgets/action-bars';
|
||||
@import 'widgets/app-notifications';
|
||||
@import 'widgets/base-states';
|
||||
@import 'widgets/buttons';
|
||||
@import 'widgets/calendar';
|
||||
@import 'widgets/checks-radios';
|
||||
@import 'widgets/color-chooser';
|
||||
@import 'widgets/comboboxes';
|
||||
@import 'widgets/dialogs';
|
||||
@import 'widgets/entries';
|
||||
@import 'widgets/expanders';
|
||||
@import 'widgets/file-chooser';
|
||||
@import 'widgets/floating-bar';
|
||||
@import 'widgets/frames';
|
||||
@import 'widgets/granite';
|
||||
@import 'widgets/header-bars';
|
||||
@import 'widgets/infobars';
|
||||
@import 'widgets/level-bars';
|
||||
@import 'widgets/links';
|
||||
@import 'widgets/lists';
|
||||
@import 'widgets/menus';
|
||||
@import 'widgets/misc';
|
||||
@import 'widgets/notebooks';
|
||||
@import 'widgets/paned';
|
||||
@import 'widgets/pathbars';
|
||||
@import 'widgets/popovers';
|
||||
@import 'widgets/print-dialog';
|
||||
@import 'widgets/progress-bars';
|
||||
@import 'widgets/scales';
|
||||
@import 'widgets/scrollbars';
|
||||
@import 'widgets/sidebar';
|
||||
@import 'widgets/spinbuttons';
|
||||
@import 'widgets/spinner';
|
||||
@import 'widgets/switches';
|
||||
@import 'widgets/toolbars';
|
||||
@import 'widgets/tooltips';
|
||||
@import 'widgets/touch-copy-paste';
|
||||
@import 'widgets/treeviews';
|
||||
@import 'widgets/windows';
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/**********
|
||||
* Budgie *
|
||||
**********/
|
||||
|
||||
.budgie-panel {
|
||||
background-color: transparentize(black, 0.2);
|
||||
transition: 100ms ease-in;
|
||||
font:bold;
|
||||
color: white;
|
||||
|
||||
.top {
|
||||
border-bottom: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
|
||||
.left {
|
||||
border-right: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
|
||||
.right {
|
||||
border-left: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.max-budgie-panel {
|
||||
background-color: transparentize(black, 0.0);
|
||||
transition: 100ms ease-in;
|
||||
font:bold;
|
||||
color: white;
|
||||
|
||||
.top {
|
||||
border-bottom: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
|
||||
.bottom {
|
||||
border-top: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
|
||||
.left {
|
||||
border-right: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
|
||||
.right {
|
||||
border-left: 1px solid transparentize(white, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.budgie-panel .message-area {
|
||||
}
|
||||
|
||||
.budgie-panel .max-message-area {
|
||||
}
|
||||
|
||||
.budgie-panel .launcher,
|
||||
PanelToplevel .launcher {
|
||||
}
|
||||
.budgie-panel .launcher:hover,
|
||||
PanelToplevel .launcher:hover {
|
||||
}
|
||||
.budgie-panel .launcher:active,
|
||||
PanelToplevel .launcher:active {
|
||||
}
|
||||
|
||||
/* Top launchers */
|
||||
.top .launcher:hover {
|
||||
}
|
||||
.top .launcher:active {
|
||||
}
|
||||
|
||||
/* Left hand side launchers */
|
||||
.left .launcher:hover {
|
||||
}
|
||||
.left .launcher:active {
|
||||
}
|
||||
|
||||
/* Right hand side launchers */
|
||||
.right .launcher:hover {
|
||||
}
|
||||
.right .launcher:active {
|
||||
}
|
||||
|
||||
.panel-applet {
|
||||
}
|
||||
|
||||
.budgie-panel .menu-icon,
|
||||
.budgie-panel .menu-icon:active,
|
||||
.budgie-panel .menu-icon:hover {
|
||||
}
|
||||
|
||||
.notification .priority.low {
|
||||
background-color: $info_color;
|
||||
}
|
||||
.notification .priority.high {
|
||||
background-color: $warning_color;
|
||||
}
|
||||
.notification .priority.critical {
|
||||
background-color: $error_color;
|
||||
}
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
/***********
|
||||
* LightDm *
|
||||
***********/
|
||||
|
||||
// the panel widget at the top
|
||||
#panel_window {
|
||||
background-color: $panel_bg_color;
|
||||
color: $panel_fg_color;
|
||||
font: bold;
|
||||
box-shadow: inset 0 -1px darken($panel_bg_color, 7%);
|
||||
|
||||
// the menubars/menus of the panel, i.e. indicators
|
||||
.menubar,
|
||||
.menubar > .menuitem
|
||||
menubar,
|
||||
menubar > menuitem {
|
||||
background-color: transparent;
|
||||
color: $panel_fg_color;
|
||||
font: bold;
|
||||
}
|
||||
|
||||
.menubar .menuitem:insensitive,
|
||||
menubar menuitem:disabled {
|
||||
color: transparentize($panel_fg_color, 0.5);
|
||||
|
||||
GtkLabel { color: inherit; }
|
||||
label { color: inherit; }
|
||||
}
|
||||
.menubar .menu > .menuitem,
|
||||
menubar menu > menuitem { font: normal; }
|
||||
}
|
||||
|
||||
// the login window
|
||||
#login_window,
|
||||
#shutdown_dialog,
|
||||
#restart_dialog {
|
||||
font: normal;
|
||||
border-style: none;
|
||||
background-color: transparent;
|
||||
color: $fg_color;
|
||||
}
|
||||
|
||||
// the top half of the login-window, in GtkDialog terms, the content
|
||||
#content_frame {
|
||||
padding-bottom: 14px;
|
||||
background-color: $bg_color;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
border: solid transparentize(black, 0.9);
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
#content_frame button {
|
||||
@include button(normal);
|
||||
|
||||
&:hover { @include button(hover); }
|
||||
&:active, &:checked { @include button(active); }
|
||||
&:disabled { @include button(insensitive); }
|
||||
}
|
||||
|
||||
// the lower half of the login-window, in GtkDialog terms the buttonbox or action area
|
||||
#buttonbox_frame {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 0px;
|
||||
border-style: none;
|
||||
background-color: if($variant=='light', $osd_bg_color, $headerbar_bg_color);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border: solid transparentize(black, 0.9);
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
#buttonbox_frame button{
|
||||
@include button(osd);
|
||||
|
||||
&:hover { @include button(osd-hover); }
|
||||
&:active, &:checked { @include button(osd-active); }
|
||||
&:disabled { @include button(osd-insensitive); }
|
||||
}
|
||||
|
||||
#login_window #user_combobox {
|
||||
color: $fg_color;
|
||||
font: 13px;
|
||||
|
||||
.menu,
|
||||
menu { font: normal; }
|
||||
}
|
||||
|
||||
// the user's avatar box
|
||||
#user_image {
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
// the shutdown button
|
||||
#shutdown_button.button {
|
||||
@include button(suggested_destructive, $destructive_color);
|
||||
|
||||
&:hover { @include button(suggested_destructive, lighten($destructive_color, 10%)); }
|
||||
&:active, &:checked { @include button(suggested_destructive, darken($destructive_color, 10%)); }
|
||||
}
|
||||
|
||||
// the restart button
|
||||
#restart_button.button {
|
||||
@include button(suggested_destructive, $suggested_color);
|
||||
|
||||
&:hover { @include button(suggested_destructive, lighten($suggested_color, 10%)); }
|
||||
&:active, &:checked { @include button(suggested_destructive, darken($suggested_color, 10%)); }
|
||||
}
|
||||
|
||||
// the warning, in case a wrong password is entered or something else goes wrong according to PAM
|
||||
#greeter_infobar {
|
||||
border-bottom-width: 0;
|
||||
font: bold;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -19,9 +19,8 @@
|
|||
$variant: 'dark';
|
||||
|
||||
@import 'colors';
|
||||
@import 'colors-public';
|
||||
@import 'drawing';
|
||||
@import 'common';
|
||||
@import 'colors-public';
|
||||
|
||||
|
||||
@import 'widgets';
|
||||
@import 'apps';
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -19,8 +19,8 @@
|
|||
$variant: 'light';
|
||||
|
||||
@import 'colors';
|
||||
@import 'colors-public';
|
||||
@import 'drawing';
|
||||
@import 'common';
|
||||
@import 'colors-public';
|
||||
|
||||
@import 'widgets';
|
||||
@import 'apps';
|
||||
|
|
@ -61,4 +61,119 @@ GraniteWidgetsWelcome {
|
|||
.h1,.h3 {
|
||||
color: transparentize($fg_color, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/**************
|
||||
* Source List *
|
||||
***************/
|
||||
|
||||
.source-list {
|
||||
-GtkTreeView-horizontal-separator: 1px;
|
||||
-GtkTreeView-vertical-separator: 6px;
|
||||
|
||||
background-color: $bg_color;
|
||||
border: solid $borders_color;
|
||||
color: $fg_color;
|
||||
border-right-width: 1px;
|
||||
|
||||
&:backdrop {}
|
||||
|
||||
.category-expander {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-image: none;
|
||||
background-color: transparentize(black, 0.6);
|
||||
color: $bg_color;
|
||||
border-radius: 10px;
|
||||
padding: 0 6px;
|
||||
margin: 0 3px;
|
||||
border-width: 0;
|
||||
|
||||
&:selected:backdrop,
|
||||
&:selected:hover:backdrop {
|
||||
background-color: transparentize(black, 0.8);
|
||||
color: shade ($bg_color, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
row,
|
||||
.list-row {
|
||||
border:none;
|
||||
padding: 0;
|
||||
|
||||
> GtkLabel,
|
||||
> label {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**************
|
||||
* Storage Bar *
|
||||
**************/
|
||||
.storage-bar {
|
||||
|
||||
.trough {
|
||||
border: none;
|
||||
box-shadow:0 1px 0 0 $bottom_highlight;
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.fill-block {
|
||||
background-color: $yellow;
|
||||
border:none;
|
||||
box-shadow: inset 0 1px 0 0 transparentize(black, 0.9), inset 0 -1px 0 0 transparentize(black, 0.9);
|
||||
|
||||
transition: all 200ms ease-in-out;
|
||||
|
||||
padding: 8px 6px;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-left-width: 1px;
|
||||
box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
|
||||
inset 1px 0 0 transparentize(black, 0.9),
|
||||
inset 0 -1px 0 0 transparentize(black, 0.9);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
box-shadow: inset 0 1px 0 0 transparentize(black, 0.9),
|
||||
inset -1px 0 0 transparentize(black, 0.9),
|
||||
inset 0 -1px 0 0 transparentize(black, 0.9);
|
||||
}
|
||||
|
||||
&.empty-block {
|
||||
background-color: $base_color;
|
||||
}
|
||||
|
||||
&.app {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
&.audio {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
&.photo {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&.video {
|
||||
background-color: $purple;
|
||||
}
|
||||
|
||||
.legend {
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/**************
|
||||
* Source List *
|
||||
***************/
|
||||
|
||||
.source-list {
|
||||
-GtkTreeView-horizontal-separator: 1px;
|
||||
-GtkTreeView-vertical-separator: 6px;
|
||||
|
||||
background-color: $bg_color;
|
||||
border: solid $borders_color;
|
||||
color: $fg_color;
|
||||
border-right-width: 1px;
|
||||
|
||||
&:backdrop {}
|
||||
|
||||
.category-expander {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-image: none;
|
||||
background-color: transparentize(black, 0.6);
|
||||
color: $bg_color;
|
||||
border-radius: 10px;
|
||||
padding: 0 6px;
|
||||
margin: 0 3px;
|
||||
border-width: 0;
|
||||
|
||||
&:selected:backdrop,
|
||||
&:selected:hover:backdrop {
|
||||
background-color: transparentize(black, 0.8);
|
||||
color: shade ($bg_color, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
row,
|
||||
.list-row {
|
||||
border:none;
|
||||
padding: 0;
|
||||
|
||||
> GtkLabel,
|
||||
> label {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue