Skip to content

Instantly share code, notes, and snippets.

@mmore500
Created Nov 26, 2017
Embed
What would you like to do?
/usr/share/themes/elementary/gtk-3.0/apps.css
/*
* Copyright (c) 2011-2016 elementary LLC. (http://launchpad.net/egtk)
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public
* License as published by the Free Software Foundation; either
* version 2 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* General Public License for more details.
*
* You should have received a copy of the GNU General Public
* License along with this program; if not, write to the
* Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
* Boston, MA 02110-1301 USA.
*
* Authored by: Daniel Foré <daniel@elementary.io>
*/
/***********
* Epiphany *
***********/
.incognito.titlebar {
background-image:
-gtk-icontheme(
"user-not-tracked-symbolic"
),
linear-gradient(
shade (
@colorPrimary,
1.04
),
shade (
@colorPrimary,
0.88
)
);
background-size: 64px 64px, 100% 100%;
background-position: 100px, 0, 0 0;
background-repeat: no-repeat, no-repeat;
color: @text_shadow_color;
}
.incognito.titlebar:backdrop {
background-image:
-gtk-icontheme(
"user-not-tracked-symbolic"
),
linear-gradient(
shade (
@colorPrimary,
1.08
),
shade (
@colorPrimary,
0.98
)
);
}
/********
* Files *
********/
.pathbar:focus {
box-shadow:
inset 0 0 0 1px alpha (@colorAccent, 0.23),
0 1px 0 alpha (@bg_highlight_color, 0.3);
border-color: alpha (@colorAccent, 0.8);
}
.pathbar:active {
background-image: none;
background-color: transparent;
border-color: alpha (@colorAccent, 0.8);
box-shadow: inset 0 0 0 1px alpha (@colorAccent, 0.23);
}
.pathbar image,
.pathbar.image {
color: @internal_element_color;
}
.pathbar image:hover,
.pathbar.image:hover {
color: @internal_element_prelight;
}
dialog entry.pathbar,
GtkFileChooserDialog .entry.pathbar {
background-image:
linear-gradient(
to bottom,
shade (
@base_color,
0.93
),
shade (
@base_color,
0.97
)
);
border-color: @border_color;
box-shadow:
inset 0 1px 0 0 alpha (@inset_dark_color, 0.7),
inset 0 0 0 1px alpha (@inset_dark_color, 0.3),
0 1px 0 0 alpha (shade (@colorPrimary, 1.4), 0.5);
}
dialog entry.pathbar:focus,
GtkFileChooserDialog .entry.pathbar:focus {
border-color: alpha (@colorAccent, 0.8);
box-shadow:
inset 0 0 0 1px alpha (@colorAccent, 0.23),
0 1px 0 0 alpha (shade (@colorPrimary, 1.4), 0.5);
}
/*******
* Gala *
*******/
.gala-notification {
border: none;
border-radius: 4px;
background-color: transparent;
background-image:
linear-gradient(
to bottom,
@bg_color,
@bg_color 80%,
shade (
@bg_color,
0.94
)
);
box-shadow:
inset 0 0 0 1px alpha (@bg_highlight_color, 0.1),
inset 0 1px 0 0 alpha (@bg_highlight_color, 0.9),
inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.3),
0 0 0 1px alpha (#000, 0.2),
0 3px 6px alpha (#000, 0.16),
0 5px 5px -3px alpha (#000, 0.4);
}
.gala-notification .title,
.gala-notification .label {
color: @text_color;
}
.gala-notification GtkImage {
color: alpha (@text_color, 0.8);
}
.gala-button {
padding: 3px;
color: #fff;
border: none;
border-radius: 100px;
background-image:
linear-gradient(
to bottom,
#7e7e7e,
#3e3e3e
);
box-shadow:
inset 0 0 0 1px alpha (#fff, 0.02),
inset 0 1px 0 0 alpha (#fff, 0.07),
inset 0 -1px 0 0 alpha (#fff, 0.01),
0 0 0 1px alpha (#000, 0.4),
0 3px 6px alpha (#000, 0.16),
0 3px 6px alpha (#000, 0.23);
text-shadow: 0 1px 1px alpha (#000, 0.6);
}
/********
* Geary *
********/
ConversationListView {
-GtkWidget-focus-line-width: 1px;
-GtkTreeView-grid-line-width: 0;
}
ConversationListView.view.cell {
border-style: solid;
border-width: 0 0 1px;
border-color: alpha (#000, 0.2);
}
ConversationListView.view.cell:selected:focus {
border-style: solid;
border-width: 0 0 1px;
border-color: shade (@colorAccent, 0.8);
}
/**********
* Greeter *
**********/
.greeter .avatar {
border-color: alpha (#000, 0.25);
box-shadow:
inset 0 0 0 1px alpha (#fff, 0.05),
inset 0 1px 0 0 alpha (#fff, 0.45),
inset 0 -1px 0 0 alpha (#fff, 0.15),
0 1px 2px alpha (#000, 0.15),
0 2px 6px alpha (#000, 0.1);
}
.greeter .entry,
.greeter .entry:focus {
border-radius: 3.5px;
padding: 6px 3px;
background-image:
linear-gradient(
to bottom,
shade (
@base_color,
0.93
),
@base_color
);
border-color: alpha (@border_color, 0.75);
box-shadow:
inset 0 1px 1px 0 alpha (#000, 0.2),
0 1px 0 alpha (#fff, 0.15);
}
.greeter .button.flat,
.greeter .h2,
.greeter .time {
color: #fff;
text-shadow:
0 0 2px alpha (#000, 0.3),
0 1px 2px alpha (#000, 0.6);
icon-shadow:
0 0 2px alpha (#000, 0.3),
0 1px 2px alpha (#000, 0.6);
}
.greeter .h2 {
font-size: 24px;
}
.greeter .time {
font-size: 72px;
font-family: Raleway;
font-weight: 100;
}
.greeter .pm {
font-size: 48px;
}
.greeter .button.text-button.suggested-action {
padding: 6px 32px;
border-radius: 3.5px;
border-color: rgba(0, 0, 0, 0.1);
box-shadow:
inset 0 0 0 1px alpha (#fff, 0.05),
inset 0 1px 0 0 alpha (#fff, 0.45),
inset 0 -1px 0 0 alpha (#fff, 0.15),
0 1px 0 0 alpha (#fff, 0.15);
}
.greeter .button.text-button.suggested-action:active {
box-shadow:
inset 0 0 0 1px alpha (#000, 0.05),
0 1px 0 0 alpha (#fff, 0.15);
}
/*********
* Panel *
********/
.panel {
background-color: transparent;
transition: all 100ms ease-in-out;
}
.panel.maximized {
background-color: alpha(#fff, 0.0);
}
.panel.translucent {
background-color: alpha(#fff, 0.0);
}
.menubar.panel,
menubar.panel,
.panel menubar,
.panel .menubar {
box-shadow: none;
border: none;
}
.composited-indicator > revealer label,
.composited-indicator > revealer image,
.composited-indicator > GtkRevealer {
color: #fff;
font-weight: bold;
text-shadow:
0 0 2px alpha (#000, 0.3),
0 1px 2px alpha (#000, 0.6);
icon-shadow:
0 0 2px alpha (#000, 0.3),
0 1px 2px alpha (#000, 0.6);
transition: all 200ms ease-in-out;
}
.composited-indicator .keyboard {
background-color: #fff;
border-radius: 2px;
box-shadow:
0 0 2px alpha (#000, 0.3),
0 1px 2px alpha (#000, 0.6);
color: #333;
font-weight: 600;
padding: 0 3px;
text-shadow: none;
}
.panel.color-light .composited-indicator > revealer label,
.panel.color-light .composited-indicator > revealer image,
.panel.color-light .composited-indicator > GtkRevealer {
color: alpha (#000, 0.65);
text-shadow:
0 0 2px alpha (#fff, 0.3),
0 1px 0 alpha (#fff, 0.25);
icon-shadow:
0 0 2px alpha (#fff, 0.3),
0 1px 0 alpha (#fff, 0.25);
}
.panel.color-light .composited-indicator .keyboard {
background-color: alpha (#000, 0.65);
box-shadow:
0 0 2px alpha (#fff, 0.3),
0 1px 0 alpha (#fff, 0.25);
color: #fff;
text-shadow: none;
}
.panel .popover {
box-shadow:
inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.5),
0 3px 4px alpha (#000, 0.15),
0 3px 3px -3px alpha (#000, 0.35);
}
/**********
* Photos *
*********/
.checkerboard-layout {
background-color: #383e41;
background-image:
linear-gradient(
45deg,
alpha (
#000,
0.1
) 25%,
transparent 25%,
transparent 75%,
alpha (
#000,
0.1
) 75%,
alpha (
#000,
0.1
)
),
linear-gradient(
45deg,
alpha (
#000,
0.1
) 25%,
transparent 25%,
transparent 75%,
alpha (
#000,
0.1
) 75%,
alpha (
#000,
0.1
)
);
background-size: 24px 24px;
background-position: 0 0, 12px 12px;
}
.checkboard-layout .item {
background-color: #eee;
}
/***************
* Switchboard *
**************/
.hotcorner-display {
border-radius: 2px;
icon-shadow:
0 3px 4px alpha (#000, 0.2),
0 2px 2px alpha (#000, 0.3);
}
.login .entry {
border-radius: 3.5px;
padding: 6px;
background-image:
linear-gradient(
to bottom,
shade (
@base_color,
0.93
),
@base_color
);
}
.login .entry *:selected {
background-color: shade (@base_color, 0.8);
color: @text_color;
}
.login .entry *:selected:focus {
background-color: alpha (@colorAccent, 0.9);
color: @selected_fg_color;
text-shadow: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment