Style GNOME apps
Satyajit Sahoo
parent
585d4e491d
commit
4f7284529c
|
|
@ -1,2 +1,2 @@
|
|||
|
||||
@import url("dist/widgets.css");
|
||||
@import url("dist/gtk.css");
|
||||
|
|
|
|||
|
|
@ -42,6 +42,9 @@ $menu_fg_color: $dark_fg_color;
|
|||
$menubar_bg_color: $dark_bg_color;
|
||||
$menubar_fg_color: $dark_fg_color;
|
||||
|
||||
$panel_bg_color: $dark_bg_color;
|
||||
$panel_fg_color: $dark_fg_color;
|
||||
|
||||
$osd_bg: $dark_bg_color;
|
||||
$osd_fg: $dark_fg_color;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,350 @@
|
|||
/***********************
|
||||
! Fallback mode panel *
|
||||
************************/
|
||||
|
||||
@include exports("panel") {
|
||||
%panel {
|
||||
@include linear-gradient($panel_bg_color);
|
||||
|
||||
color: $panel_fg_color;
|
||||
}
|
||||
|
||||
PanelWidget, PanelApplet, PanelToplevel {
|
||||
@extend %panel;
|
||||
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
PanelApplet {
|
||||
border: none;
|
||||
|
||||
.button {
|
||||
-GtkButton-inner-border: 2;
|
||||
|
||||
border-width: 0 1px;
|
||||
border-radius: 0;
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: $panel_fg_color;
|
||||
|
||||
&:hover, &:prelight {
|
||||
@include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.11));
|
||||
|
||||
border-color: mix($panel_bg_color, $panel_fg_color, 0.11);
|
||||
color: shade($panel_fg_color, 1.08);
|
||||
}
|
||||
|
||||
&:active, &:checked {
|
||||
@include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.21), to top);
|
||||
|
||||
border-color: mix($panel_bg_color, $panel_fg_color, 0.21);
|
||||
color: shade($panel_fg_color, 1.08);
|
||||
|
||||
&:prelight {
|
||||
@include linear-gradient(mix($panel_bg_color, $panel_fg_color, 0.31), to top);
|
||||
|
||||
border-color: mix($panel_bg_color, $panel_fg_color, 0.31);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
PanelSeparator {
|
||||
@extend %panel;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
PanelApplet > GtkMenuBar.menubar, PanelMenuBar.menubar, .gnome-panel-menu-bar {
|
||||
&.menuitem {
|
||||
@extend %panel;
|
||||
|
||||
border: none;
|
||||
|
||||
-PanelMenuBar-icon-visible: true;
|
||||
}
|
||||
}
|
||||
|
||||
PanelAppletFrame {
|
||||
@extend %panel;
|
||||
|
||||
border: none;
|
||||
}
|
||||
|
||||
WnckPager, WnckTasklist { @extend %panel; }
|
||||
}
|
||||
|
||||
|
||||
/************
|
||||
! Nautilus *
|
||||
*************/
|
||||
|
||||
@include exports("nautilus") {
|
||||
.nautilus-desktop.nautilus-canvas-item {
|
||||
color: white;
|
||||
text-shadow: 1px 1px black;
|
||||
|
||||
&:active { color: $fg_color; }
|
||||
|
||||
&:selected { color: $selected_fg_color; }
|
||||
|
||||
&:active, &:prelight, &:selected { text-shadow: none; }
|
||||
}
|
||||
|
||||
NautilusWindow {
|
||||
.toolbar {
|
||||
border-width: 0 0 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($toolbar_bg_color, 0.8);
|
||||
}
|
||||
|
||||
.sidebar .frame { border: none; }
|
||||
|
||||
> GtkGrid > .pane-separator {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
|
||||
&, &:hover {
|
||||
border-color: shade($bg_color, 0.8);
|
||||
background-color: $bg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
NautilusNotebook {
|
||||
&.notebook {
|
||||
border-right-width: 0;
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.frame { border: none; }
|
||||
}
|
||||
|
||||
NautilusQueryEditor {
|
||||
.search-bar.toolbar {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding-top: $spacing - 1px;
|
||||
padding-bottom: $spacing - 2px;
|
||||
border-width: 1px 0 0 0;
|
||||
border-style: solid;
|
||||
border-color: $toolbar_bg_color;
|
||||
background-color: shade($toolbar_bg_color, 0.9);
|
||||
|
||||
&:nth-child(2) { border-color: shade($toolbar_bg_color, 0.8); }
|
||||
|
||||
&.search-bar {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
&, &.search-bar {
|
||||
&:only-child {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: shade($toolbar_bg_color, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*********
|
||||
! Gedit *
|
||||
**********/
|
||||
|
||||
@include exports("gedit") {
|
||||
GeditWindow .pane-separator {
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
|
||||
&, &:hover {
|
||||
border-color: shade($bg_color, 0.8);
|
||||
background-color: $bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.gedit-document-panel {
|
||||
background-color: $bg_color;
|
||||
color: mix($fg_color, $bg_color, 0.1);
|
||||
|
||||
.list-row {
|
||||
padding: $spacing;
|
||||
|
||||
.button {
|
||||
padding: 1px;
|
||||
border-radius: $roundness;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-width: 1px;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
color: transparent;
|
||||
icon-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.prelight-row .button {
|
||||
border-color: alpha(black, 0.1);
|
||||
color: alpha(white, 0.8);
|
||||
|
||||
&:active {
|
||||
border-color: alpha(black, 0.2);
|
||||
background-color: alpha(black, 0.08);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
list-row, .prelight-row {
|
||||
.button:hover {
|
||||
border-color: alpha(black, 0.1);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gedit-document-panel-group-row {
|
||||
&, &:hover {
|
||||
border-top: 1px solid shade($bg_color, 0.9);
|
||||
background-color: $bg_color;
|
||||
}
|
||||
}
|
||||
|
||||
.gedit-document-panel-document-row {
|
||||
&:hover { background-color: shade($bg_color, 1.05); }
|
||||
|
||||
&:selected {
|
||||
&, &:hover {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gedit-document-panel-dragged-row {
|
||||
border: 1px solid alpha(black, 0.1);
|
||||
background-color: alpha(black, 0.5);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.gedit-document-panel-placeholder-row {
|
||||
border: none;
|
||||
background-color: alpha(black, 0.08);
|
||||
transition: all 200ms ease-in;
|
||||
}
|
||||
|
||||
GeditStatusbar { border-top: 1px solid shade($bg_color, 0.8); }
|
||||
|
||||
GeditStatusbar GeditSmallButton, GeditStatusMenuButton {
|
||||
text-shadow: none;
|
||||
|
||||
.button {
|
||||
border-style: solid;
|
||||
border-width: 0 1px;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
padding: 1px 6px 2px 4px;
|
||||
|
||||
&:hover, &:active, &:active:hover { border-color: shade($bg_color, 0.8); }
|
||||
|
||||
&:active {
|
||||
background-color: shade($bg_color, 0.95);
|
||||
color: $fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GeditViewFrame .gedit-search-slider {
|
||||
padding: $spacing;
|
||||
border-radius: 0 0 $roundness $roundness;
|
||||
border-width: 0 1px 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: shade($base_color, 0.8);
|
||||
background-color: $base_color;
|
||||
|
||||
.not-found {
|
||||
background-color: $error_bg_color;
|
||||
background-image: none;
|
||||
color: $error_fg_color;
|
||||
|
||||
&:selected {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
GeditFileBrowserWidget .toolbar {
|
||||
padding: $spacing / 2;
|
||||
border-top: none;
|
||||
background-color: $bg_color;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.gedit-search-entry-occurrences-tag {
|
||||
margin: $spacing / 2;
|
||||
padding: $spacing / 2;
|
||||
color: mix($text_color, $base_color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***************
|
||||
! Font-viewer *
|
||||
****************/
|
||||
|
||||
@include exports("fontviewer") {
|
||||
SushiFontWidget {
|
||||
padding: $spacing ($spacing * 2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Gucharmap *
|
||||
**************/
|
||||
|
||||
@include exports("charmap") {
|
||||
GucharmapChartable {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
|
||||
&:focus, &:hover, &:active, &:selected {
|
||||
background-color: $selected_bg_color;
|
||||
color: $selected_fg_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*************
|
||||
! Evolution *
|
||||
**************/
|
||||
|
||||
@include exports("evolution") {
|
||||
EPreviewPane .entry {
|
||||
background-color: $base_color;
|
||||
color: $text_color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
* Gnome Bluetooth *
|
||||
********************/
|
||||
|
||||
@include exports("gnome-bluetooth") {
|
||||
GtkEntry.entry.pin-entry {
|
||||
font: regular 50;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
GtkLabel.pin-label { font: regular 50; }
|
||||
}
|
||||
Loading…
Reference in New Issue