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_bg_color: $dark_bg_color;
|
||||||
$menubar_fg_color: $dark_fg_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_bg: $dark_bg_color;
|
||||||
$osd_fg: $dark_fg_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