Added OSD styles
parent
dd5eb36ecf
commit
fd2a390954
|
@ -45,9 +45,8 @@
|
||||||
@define-color panel_fg_color @dark_fg_color;
|
@define-color panel_fg_color @dark_fg_color;
|
||||||
|
|
||||||
/* osd */
|
/* osd */
|
||||||
@define-color osd_base #{"" + $osd_base};
|
|
||||||
@define-color osd_fg #{"" + $osd_fg};
|
|
||||||
@define-color osd_bg #{"" + $osd_bg};
|
@define-color osd_bg #{"" + $osd_bg};
|
||||||
|
@define-color osd_fg #{"" + $osd_fg};
|
||||||
|
|
||||||
/* lightdm greeter colors */
|
/* lightdm greeter colors */
|
||||||
@define-color lightdm_bg_color #{"" + $lightdm_bg_color};
|
@define-color lightdm_bg_color #{"" + $lightdm_bg_color};
|
||||||
|
|
|
@ -42,9 +42,8 @@ $menu_fg_color: $dark_fg_color;
|
||||||
$menubar_bg_color: $dark_bg_color;
|
$menubar_bg_color: $dark_bg_color;
|
||||||
$menubar_fg_color: $dark_fg_color;
|
$menubar_fg_color: $dark_fg_color;
|
||||||
|
|
||||||
$osd_base: $dark_bg_color;
|
$osd_bg: $dark_bg_color;
|
||||||
$osd_fg: $dark_fg_color;
|
$osd_fg: $dark_fg_color;
|
||||||
$osd_bg: fade-out($dark_fg_color, 0.8);
|
|
||||||
|
|
||||||
$lightdm_bg_color: $dark_bg_color;
|
$lightdm_bg_color: $dark_bg_color;
|
||||||
$lightdm_fg_color: $dark_fg_color;
|
$lightdm_fg_color: $dark_fg_color;
|
||||||
|
|
|
@ -0,0 +1,152 @@
|
||||||
|
@import "functions";
|
||||||
|
@import "global";
|
||||||
|
@import "button";
|
||||||
|
|
||||||
|
|
||||||
|
/*******
|
||||||
|
! OSD *
|
||||||
|
********/
|
||||||
|
|
||||||
|
GtkOverlay.osd {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.osd {
|
||||||
|
&.background {
|
||||||
|
background-color: alpha($osd_bg, 0.8);
|
||||||
|
color: $osd_fg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.frame {
|
||||||
|
background-clip: border-box;
|
||||||
|
background-origin: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.button, .button { @include button($osd_bg, $osd_fg); }
|
||||||
|
|
||||||
|
|
||||||
|
&.toolbar {
|
||||||
|
-GtkToolbar-button-relief: normal;
|
||||||
|
|
||||||
|
padding: $spacing;
|
||||||
|
border-width: 1px solid border_normal($osd_bg);
|
||||||
|
border-radius: $roundness;
|
||||||
|
background-color: $osd_bg;
|
||||||
|
background-image: none;
|
||||||
|
color: $osd_fg;
|
||||||
|
|
||||||
|
.separator { color: shade($osd_bg, 0.9); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* used by gnome-settings-daemon's media-keys OSD */
|
||||||
|
&.trough { background-color: shade($osd_bg, 0.8); }
|
||||||
|
|
||||||
|
&.progressbar { background-color: $osd_fg; }
|
||||||
|
|
||||||
|
.scale {
|
||||||
|
&.slider {
|
||||||
|
background-color: shade($osd_bg, 1.08);
|
||||||
|
background-image: none;
|
||||||
|
/* we will draw the border using box shadow for now */
|
||||||
|
box-shadow: inset 1px 0 shade($osd_bg, 0.8),
|
||||||
|
inset 0 1px shade($osd_bg, 0.8),
|
||||||
|
inset -1px 0 shade($osd_bg, 0.8),
|
||||||
|
inset 0 -1px shade($osd_bg, 0.8);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: inset 1px 0 shade($osd_bg, 0.7),
|
||||||
|
inset 0 1px shade($osd_bg, 0.7),
|
||||||
|
inset -1px 0 shade($osd_bg, 0.7),
|
||||||
|
inset 0 -1px shade($osd_bg, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:insensitive {
|
||||||
|
background-color: shade($osd_bg, 0.9);
|
||||||
|
background-image: none;
|
||||||
|
box-shadow: inset 1px 0 shade($osd_bg, 0.85),
|
||||||
|
inset 0 1px shade($osd_bg, 0.85),
|
||||||
|
inset -1px 0 shade($osd_bg, 0.85),
|
||||||
|
inset 0 -1px shade($osd_bg, 0.85);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.trough {
|
||||||
|
border-color: shade($osd_bg, 0.8);
|
||||||
|
background-color: shade($osd_bg, 1.08);
|
||||||
|
background-image: none;
|
||||||
|
|
||||||
|
&.highlight {
|
||||||
|
border-color: $selected_bg_color;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:insensitive, &.highlight:insensitive {
|
||||||
|
border-color: shade($osd_bg, 0.85);
|
||||||
|
background-color: shade($osd_bg, 0.9);
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.view, .view { background-color: $osd_bg; }
|
||||||
|
|
||||||
|
.scrollbar {
|
||||||
|
.trough { background-color: $osd_bg; }
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
border: 1px solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21);
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: mix($osd_bg, $osd_fg, 0.21);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: mix(shade($osd_bg, 0.87), $osd_fg, 0.31);
|
||||||
|
background-color: mix($osd_bg, $osd_fg, 0.31);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
border-color: shade($selected_bg_color, 0.9);
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
GtkIconView.cell {
|
||||||
|
&:selected, &:selected:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 3px solid solid mix(shade($osd_bg, 0.87), $osd_fg, 0.21);
|
||||||
|
border-radius: $roundness;
|
||||||
|
outline-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* used by Documents */
|
||||||
|
.page-thumbnail {
|
||||||
|
border: 1px solid shade($osd_bg, 0.9);
|
||||||
|
/* when there's no pixbuf yet */
|
||||||
|
background-color: $osd_bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.osd GtkProgressBar, GtkProgressBar.osd {
|
||||||
|
-GtkProgressBar-xspacing: 0;
|
||||||
|
-GtkProgressBar-yspacing: 2px;
|
||||||
|
-GtkProgressBar-min-horizontal-bar-height: 2px;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
&.trough {
|
||||||
|
padding: 0;
|
||||||
|
border-style: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background-image: none;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.progressbar {
|
||||||
|
border-style: none;
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: $selected_bg_color;
|
||||||
|
background-image: none;
|
||||||
|
}
|
||||||
|
}
|
|
@ -10,6 +10,7 @@
|
||||||
@import "menu";
|
@import "menu";
|
||||||
@import "misc";
|
@import "misc";
|
||||||
@import "notebook";
|
@import "notebook";
|
||||||
|
@import "osd";
|
||||||
@import "progress";
|
@import "progress";
|
||||||
@import "scrollbar";
|
@import "scrollbar";
|
||||||
@import "sidebar";
|
@import "sidebar";
|
||||||
|
@ -65,279 +66,7 @@
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*******
|
|
||||||
* osd *
|
|
||||||
*******/
|
|
||||||
//.background.osd {
|
|
||||||
// color: $osd_fg;
|
|
||||||
// background-color: $osd_bg;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//GtkOverlay.osd {
|
|
||||||
// background-color: transparent;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.frame {
|
|
||||||
// background-clip: border-box;
|
|
||||||
// background-origin: border-box;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.button,
|
|
||||||
//.osd .button {
|
|
||||||
// padding: 4px;
|
|
||||||
// border-width: 1px;
|
|
||||||
// border-style: solid;
|
|
||||||
// border-color: shade($osd_bg, 0.8);
|
|
||||||
// border-radius: 2px;
|
|
||||||
// background-color: shade($osd_bg, 1.08);
|
|
||||||
// background-image: none;
|
|
||||||
// color: $osd_fg;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.button:prelight,
|
|
||||||
//.osd.button:hover,
|
|
||||||
//.osd .button:hover {
|
|
||||||
// border-color: shade($osd_bg, 0.7);
|
|
||||||
// background-color: shade($osd_bg, 1.10);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.button:active,
|
|
||||||
//.osd .button:active,
|
|
||||||
//.osd GtkMenuButton.button:active {
|
|
||||||
// border-color: shade($osd_bg, 0.8);
|
|
||||||
// background-color: shade($osd_bg, 0.95);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.button:active:hover,
|
|
||||||
//.osd .button:active:hover,
|
|
||||||
//.osd GtkMenuButton.button:active:hover {
|
|
||||||
// border-color: shade($osd_bg, 0.7);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.button:insensitive,
|
|
||||||
//.osd .button:insensitive {
|
|
||||||
// border-color: shade($osd_bg, 0.85);
|
|
||||||
// background-color: shade($osd_bg, 0.9);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.button:active *:insensitive,
|
|
||||||
//.osd .button:active *:insensitive {
|
|
||||||
// background-color: shade($osd_bg, 0.80);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar {
|
|
||||||
// -GtkToolbar-button-relief: normal;
|
|
||||||
//
|
|
||||||
// padding: 4px;
|
|
||||||
// border-width: 1px;
|
|
||||||
// border-style: solid;
|
|
||||||
// border-radius: 2px;
|
|
||||||
// border-color: shade($osd_bg, 0.8);
|
|
||||||
// background-color: $osd_bg;
|
|
||||||
// background-image: none;
|
|
||||||
// color: $osd_fg;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button {
|
|
||||||
// padding: 4px;
|
|
||||||
// border-width: 1px;
|
|
||||||
// border-style: solid;
|
|
||||||
// border-color: shade($osd_bg, 0.8);
|
|
||||||
// border-radius: 2px;
|
|
||||||
// background-color: shade($osd_bg, 1.08);
|
|
||||||
// background-image: none;
|
|
||||||
// color: $osd_fg;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:hover {
|
|
||||||
// border-color: shade($osd_bg, 0.7);
|
|
||||||
// background-color: shade($osd_bg, 1.10);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:active {
|
|
||||||
// border-color: shade($osd_bg, 0.8);
|
|
||||||
// background-color: shade($osd_bg, 0.95);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:active:hover {
|
|
||||||
// border-color: shade($osd_bg, 0.7);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:focus,
|
|
||||||
//.osd.toolbar .button:hover:focus,
|
|
||||||
//.osd.toolbar .button:active:focus,
|
|
||||||
//.osd.toolbar .button:active:hover:focus {
|
|
||||||
// border-color: shade($osd_bg, 0.7);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:insensitive {
|
|
||||||
// border-color: shade($osd_bg, 0.85);
|
|
||||||
// background-color: shade($osd_bg, 0.9);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:active *:insensitive {
|
|
||||||
// border-color: shade($osd_bg, 0.75);
|
|
||||||
// background-color: shade($osd_bg, 0.80);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:first-child {
|
|
||||||
// border-radius: 2px 0 0 2px;
|
|
||||||
// border-width: 1px 0 1px 1px;
|
|
||||||
// box-shadow: inset -1px 0 shade($osd_bg, 0.9);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:last-child {
|
|
||||||
// box-shadow: none;
|
|
||||||
// border-radius: 0 2px 2px 0;
|
|
||||||
// border-width: 1px 1px 1px 0;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .button:only-child,
|
|
||||||
//.osd.toolbar GtkToolButton .button,
|
|
||||||
//.osd.toolbar GtkToolButton:only-child .button,
|
|
||||||
//.osd.toolbar GtkToolButton:last-child .button,
|
|
||||||
//.osd.toolbar GtkToolButton:first-child .button {
|
|
||||||
// border-width: 1px;
|
|
||||||
// border-radius: 2px;
|
|
||||||
// border-style: solid;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.toolbar .separator {
|
|
||||||
// color: shade($osd_bg, 0.9);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
///* used by gnome-settings-daemon's media-keys OSD */
|
|
||||||
//.osd.trough {
|
|
||||||
// background-color: shade($osd_bg, 0.8);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd.progressbar {
|
|
||||||
// background-color: $osd_fg;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scale.slider {
|
|
||||||
// background-color: shade($osd_bg, 1.08);
|
|
||||||
// background-image: none;
|
|
||||||
// /* we will draw the border using box shadow for now */
|
|
||||||
// box-shadow: inset 1px 0 shade($osd_bg, 0.8),
|
|
||||||
// inset 0 1px shade($osd_bg, 0.8),
|
|
||||||
// inset -1px 0 shade($osd_bg, 0.8),
|
|
||||||
// inset 0 -1px shade($osd_bg, 0.8);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scale.slider:hover {
|
|
||||||
// box-shadow: inset 1px 0 shade($osd_bg, 0.7),
|
|
||||||
// inset 0 1px shade($osd_bg, 0.7),
|
|
||||||
// inset -1px 0 shade($osd_bg, 0.7),
|
|
||||||
// inset 0 -1px shade($osd_bg, 0.7);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scale.slider:insensitive {
|
|
||||||
// background-color: shade($osd_bg, 0.9);
|
|
||||||
// background-image: none;
|
|
||||||
// box-shadow: inset 1px 0 shade($osd_bg, 0.85),
|
|
||||||
// inset 0 1px shade($osd_bg, 0.85),
|
|
||||||
// inset -1px 0 shade($osd_bg, 0.85),
|
|
||||||
// inset 0 -1px shade($osd_bg, 0.85);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scale.trough {
|
|
||||||
// border-color: shade($osd_bg, 0.8);
|
|
||||||
// background-color: shade($osd_bg, 1.08);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scale.trough.highlight {
|
|
||||||
// border-color: $selected_bg_color;
|
|
||||||
// background-color: $selected_bg_color;
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scale.trough:insensitive,
|
|
||||||
//.osd .scale.trough.highlight:insensitive {
|
|
||||||
// border-color: shade($osd_bg, 0.85);
|
|
||||||
// background-color: shade($osd_bg, 0.9);
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd GtkProgressBar,
|
|
||||||
//GtkProgressBar.osd {
|
|
||||||
// -GtkProgressBar-xspacing: 0;
|
|
||||||
// -GtkProgressBar-yspacing: 2px;
|
|
||||||
// -GtkProgressBar-min-horizontal-bar-height: 2px;
|
|
||||||
//
|
|
||||||
// padding: 0;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd GtkProgressBar.trough,
|
|
||||||
//GtkProgressBar.osd.trough {
|
|
||||||
// padding: 0;
|
|
||||||
// border-style: none;
|
|
||||||
// border-radius: 0;
|
|
||||||
// background-image: none;
|
|
||||||
// background-color: transparent;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd GtkProgressBar.progressbar,
|
|
||||||
//GtkProgressBar.osd.progressbar {
|
|
||||||
// border-style: none;
|
|
||||||
// border-radius: 0;
|
|
||||||
// background-color: $selected_bg_color;
|
|
||||||
// background-image: none;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .view,
|
|
||||||
//.osd.view {
|
|
||||||
// background-color: $osd_base;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scrollbar.trough {
|
|
||||||
// background-color: $osd_bg;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scrollbar.slider {
|
|
||||||
// border-width: 1px;
|
|
||||||
// border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.21);
|
|
||||||
// border-radius: 0;
|
|
||||||
// background-color: mix($osd_base, $osd_fg, 0.21);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scrollbar.slider:hover {
|
|
||||||
// border-color: mix(shade($osd_base, 0.87), $osd_fg, 0.31);
|
|
||||||
// background-color: mix($osd_base, $osd_fg, 0.31);
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd .scrollbar.slider:active {
|
|
||||||
// border-color: shade($selected_bg_color, 0.9);
|
|
||||||
// background-color: $selected_bg_color;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
//.osd GtkIconView.cell:selected,
|
|
||||||
//.osd GtkIconView.cell:selected:focus {
|
|
||||||
// background-color: transparent;
|
|
||||||
// border-style: solid;
|
|
||||||
// border-radius: 2px;
|
|
||||||
// border-width: 3px;
|
|
||||||
// border-color: $osd_fg;
|
|
||||||
// outline-color: transparent;
|
|
||||||
//}
|
|
||||||
//
|
|
||||||
///* used by Documents */
|
|
||||||
//.osd .page-thumbnail {
|
|
||||||
// border-style: solid;
|
|
||||||
// border-width: 1px;
|
|
||||||
// border-color: shade($osd_bg, 0.9);
|
|
||||||
// /* when there's no pixbuf yet */
|
|
||||||
// background-color: $osd_bg;
|
|
||||||
//}
|
|
||||||
|
|
||||||
/******************************
|
/******************************
|
||||||
* destructive action buttons *
|
* destructive action buttons *
|
||||||
|
|
Loading…
Reference in New Issue