Skip to content

Commit

Permalink
Merge titlebar and headerbar code, fix transparent titlebars
Browse files Browse the repository at this point in the history
  • Loading branch information
@Elbullazul
Elbullazul committed Jul 1, 2020
1 parent 8a20cc8 commit 8cdf2ba
Showing 1 changed file with 88 additions and 94 deletions.
182 changes: 88 additions & 94 deletions gtk-3.20/gtk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,15 +223,18 @@ button {
button.flat:disabled {
border-color: transparent;
color: alpha(#000000, 0.8);
background-color: transparent; }
background-color: transparent;
box-shadow: none; }
button.flat:disabled:backdrop {
border-color: transparent;
color: alpha(#000000, 0.7);
background-color: transparent; }
background-color: transparent;
box-shadow: none; }
button.flat:backdrop {
border-color: transparent;
background-color: transparent;
color: #8C8C8C; }
color: #8C8C8C;
box-shadow: none; }

checkbutton.text-button, radiobutton.text-button {
padding: 4px;
Expand Down Expand Up @@ -668,7 +671,7 @@ image {
.caja-location-entry {
padding: 3px 5px; }

scrolledwindow viewport.frame {
scrolledwindow.frame, scrolledwindow viewport.frame {
border: none; }

arrow, combobox arrow {
Expand Down Expand Up @@ -1558,28 +1561,38 @@ colorchooser #add-color-button {
padding-left: 0;
padding-right: 0; }

headerbar, headerbar:not(.titlebar) {
headerbar {
padding: 4px 8px;
border: none;
min-height: 30px;
color: #000000;
background-color: #EDEDED; }
headerbar:backdrop, headerbar:not(.titlebar):backdrop {
border-color: shade(#EDEDED, 0.9);
background-color: #E0DEE1;
background-image: linear-gradient(to bottom, shade(#E0DEE1, 0.95), shade(#E0DEE1, 0.85));
border-bottom: 1px solid shade(#E0DEE1, 0.75); }
headerbar:backdrop {
color: #8C8C8C;
background-image: linear-gradient(to bottom, shade(#EDEDED, 1.05), shade(#EDEDED, 0.95));
border-bottom-color: shade(#EDEDED, 0.9);
background-color: #EDEDED; }
.titlebar headerbar, .titlebar headerbar:backdrop, .titlebar headerbar:not(.titlebar), .titlebar headerbar:not(.titlebar):backdrop {
background-color: transparent; }
.tiled headerbar:backdrop, .tiled headerbar, .tiled-top headerbar:backdrop, .tiled-top headerbar, .tiled-right headerbar:backdrop, .tiled-right headerbar, .tiled-bottom headerbar:backdrop, .tiled-bottom headerbar, .tiled-left headerbar:backdrop, .tiled-left headerbar, .maximized headerbar:backdrop, .maximized headerbar, .fullscreen headerbar:backdrop, .fullscreen headerbar, .tiled headerbar:not(.titlebar):backdrop, .tiled headerbar:not(.titlebar), .tiled-top headerbar:not(.titlebar):backdrop, .tiled-top headerbar:not(.titlebar), .tiled-right headerbar:not(.titlebar):backdrop, .tiled-right headerbar:not(.titlebar), .tiled-bottom headerbar:not(.titlebar):backdrop, .tiled-bottom headerbar:not(.titlebar), .tiled-left headerbar:not(.titlebar):backdrop, .tiled-left headerbar:not(.titlebar), .maximized headerbar:not(.titlebar):backdrop, .maximized headerbar:not(.titlebar), .fullscreen headerbar:not(.titlebar):backdrop, .fullscreen headerbar:not(.titlebar) {
.tiled headerbar, .tiled headerbar:backdrop, .maximized headerbar, .maximized headerbar:backdrop {
border-radius: 0; }
headerbar .title, headerbar:not(.titlebar) .title {
separator:first-child + headerbar, separator:first-child + headerbar:backdrop, headerbar:first-child, headerbar:first-child:backdrop {
border-top-left-radius: 4px; }
.maximized separator:first-child + headerbar, .tiled separator:first-child + headerbar, .maximized separator:first-child + headerbar:backdrop, .tiled separator:first-child + headerbar:backdrop, .maximized headerbar:first-child, .tiled headerbar:first-child, .maximized headerbar:first-child:backdrop, .tiled headerbar:first-child:backdrop {
border-radius: 0; }
headerbar:last-child, headerbar:last-child:backdrop {
border-top-right-radius: 4px; }
.maximized headerbar:last-child, .tiled headerbar:last-child, .maximized headerbar:last-child:backdrop, .tiled headerbar:last-child:backdrop {
border-radius: 0; }
headerbar .title {
padding-left: 12px;
padding-right: 12px;
font-weight: bold; }
headerbar .subtitle, headerbar:not(.titlebar) .subtitle {
headerbar .subtitle {
font-size: smaller;
padding-left: 12px;
padding-right: 12px;
color: alpha(currentColor, 0.7); }
headerbar button, headerbar:not(.titlebar) button {
headerbar button {
padding: 4px 8px;
border-style: solid;
border-width: 1px;
Expand All @@ -1590,36 +1603,75 @@ headerbar, headerbar:not(.titlebar) {
background-image: linear-gradient(to top, shade(#FFFFFF, 0.8), shade(#EDEDED, 1.15));
box-shadow: 0 1px alpha(white, 0.1);
-gtk-outline-radius: 4px; }
headerbar button:active, headerbar button:checked, headerbar:not(.titlebar) button:active, headerbar:not(.titlebar) button:checked {
headerbar button:active, headerbar button:checked {
color: #FFFFFF;
border-color: shade(shade(shade(#EDEDED, 0.9), 0.7), 0.8);
background-color: shade(#EDEDED, 0.5);
background-image: none;
box-shadow: inset 0 2px 3px 1px alpha(black, 0.45), inset 0 -2px 3px 1px alpha(white, 0.45), inset 0 1px shade(#EDEDED, 0.35); }
headerbar button:active:backdrop, headerbar button:checked:backdrop, headerbar:not(.titlebar) button:active:backdrop, headerbar:not(.titlebar) button:checked:backdrop {
headerbar button:active:backdrop, headerbar button:checked:backdrop {
color: #8C8C8C;
border-color: shade(#EDEDED, 0.85);
background-color: shade(#EDEDED, 0.85);
box-shadow: inset 0 2px 3px 1px alpha(black, 0.25), inset 0 1px shade(#EDEDED, 0.55); }
headerbar button:active:disabled, headerbar button:checked:disabled, headerbar:not(.titlebar) button:active:disabled, headerbar:not(.titlebar) button:checked:disabled {
headerbar button:active:disabled, headerbar button:checked:disabled {
color: mix(#000000, mix(#000000, #EDEDED, 0.75), 0.1);
border-color: mix(#000000, mix(#000000, #EDEDED, 0.95), 0.85);
background-color: shade(mix(#000000, #EDEDED, 0.95), 0.9); }
headerbar button:active:disabled:backdrop, headerbar button:checked:disabled:backdrop, headerbar:not(.titlebar) button:active:disabled:backdrop, headerbar:not(.titlebar) button:checked:disabled:backdrop {
headerbar button:active:disabled:backdrop, headerbar button:checked:disabled:backdrop {
color: mix(#000000, #EDEDED, 0.75);
border-color: shade(#EDEDED, 0.9);
background-color: shade(mix(#000000, #EDEDED, 0.98), 0.9); }
headerbar button:disabled, headerbar:not(.titlebar) button:disabled {
headerbar button:disabled {
color: mix(#000000, mix(#000000, #EDEDED, 0.75), 0.5); }
headerbar button:disabled:backdrop, headerbar:not(.titlebar) button:disabled:backdrop {
headerbar button:disabled:backdrop {
color: mix(#000000, #EDEDED, 0.75); }
headerbar button:backdrop, headerbar:not(.titlebar) button:backdrop {
headerbar button:backdrop {
color: #8C8C8C;
border-color: shade(#EDEDED, 0.9);
background-image: linear-gradient(to top, shade(shade(#FFFFFF, 0.95), 0.95), shade(#EDEDED, 1.1));
background-color: shade(#FFFFFF, 0.95); }
headerbar entry, headerbar:not(.titlebar) entry {
headerbar entry {
padding: 4px 8px; }
headerbar.titlebar, .titlebar headerbar {
border-radius: 4px 4px 0px 0px; }
headerbar .titlebutton.close, headerbar .titlebutton.maximize, headerbar .titlebutton.minimize, headerbar .titlebutton:not(separator) {
padding: 2px 2px;
border: none;
color: transparent;
box-shadow: none;
background-color: transparent;
-gtk-icon-shadow: none;
background-position: center;
background-repeat: no-repeat; }
headerbar .titlebutton.close {
background: url("assets/close-normal.png") 100% 100%; }
headerbar .titlebutton.close:hover {
background: url("assets/close-hover.png") 100% 100%; }
headerbar .titlebutton.close:active {
background: url("assets/close-active.png") 100% 100%; }
headerbar .titlebutton.close:backdrop {
background: url("assets/close-backdrop.png") 100% 100%; }
headerbar .titlebutton.minimize {
background: url("assets/minimize-normal.png") 100% 100%; }
headerbar .titlebutton.minimize:hover {
background: url("assets/minimize-hover.png") 100% 100%; }
headerbar .titlebutton.minimize:active {
background: url("assets/minimize-active.png") 100% 100%; }
headerbar .titlebutton.minimize:backdrop {
background: url("assets/minimize-backdrop.png") 100% 100%; }
headerbar .titlebutton.maximize {
background: url("assets/maximize-normal.png") 100% 100%; }
headerbar .titlebutton.maximize:hover {
background: url("assets/maximize-hover.png") 100% 100%; }
headerbar .titlebutton.maximize:active {
background: url("assets/maximize-active.png") 100% 100%; }
headerbar .titlebutton.maximize:backdrop {
background: url("assets/maximize-backdrop.png") 100% 100%; }

window.ssd .titlebar {
border-bottom: none;
min-height: 20px; }

toolbar {
padding: 4px;
Expand Down Expand Up @@ -1659,15 +1711,18 @@ toolbar {
toolbar button.flat:disabled {
border-color: transparent;
color: alpha(#000000, 0.8);
background-color: transparent; }
background-color: transparent;
box-shadow: none; }
toolbar button.flat:disabled:backdrop {
border-color: transparent;
color: alpha(#000000, 0.7);
background-color: transparent; }
background-color: transparent;
box-shadow: none; }
toolbar button.flat:backdrop {
border-color: transparent;
background-color: transparent;
color: #8C8C8C; }
color: #8C8C8C;
box-shadow: none; }
toolbar menubar {
-GtkToolbar-button-relief: normal; }

Expand Down Expand Up @@ -1974,9 +2029,13 @@ tooltip {
textview {
color: #000000;
background-color: #FFFFFF; }
textview text:selected, textview text selection, textview text:selected:focus, textview text selection:focus {
color: #FFFFFF;
background-color: #2563AE; }
textview text {
background-color: #FFFFFF; }
textview text:selected, textview text selection, textview text:selected:focus, textview text selection:focus {
color: #FFFFFF;
background-color: #2563AE; }
textview text:backdrop {
background-color: shade(#FFFFFF, 0.95); }

treeview {
-treeview-vertical-separator: 0; }
Expand Down Expand Up @@ -2504,71 +2563,6 @@ decoration {
window.background.csd.popup {
border-radius: 4px; }

.titlebar {
border-bottom: none;
border-radius: 4px 4px 0px 0px; }
.titlebar .title {
padding-left: 12px;
padding-right: 12px;
font-weight: bold; }
.titlebar .subtitle {
font-size: smaller;
padding-left: 12px;
padding-right: 12px;
color: alpha(currentColor, 0.7); }
.titlebar .titlebutton.close, .titlebar .titlebutton.maximize, .titlebar .titlebutton.minimize, .titlebar .titlebutton:not(separator) {
padding: 2px 2px;
border: none;
color: transparent;
box-shadow: none;
background-color: transparent;
-gtk-icon-shadow: none;
background-position: center;
background-repeat: no-repeat; }
.titlebar .titlebutton.close {
background: url("assets/close-normal.png") 100% 100%; }
.titlebar .titlebutton.close:hover {
background: url("assets/close-hover.png") 100% 100%; }
.titlebar .titlebutton.close:active {
background: url("assets/close-active.png") 100% 100%; }
.titlebar .titlebutton.close:backdrop {
background: url("assets/close-backdrop.png") 100% 100%; }
.titlebar .titlebutton.minimize {
background: url("assets/minimize-normal.png") 100% 100%; }
.titlebar .titlebutton.minimize:hover {
background: url("assets/minimize-hover.png") 100% 100%; }
.titlebar .titlebutton.minimize:active {
background: url("assets/minimize-active.png") 100% 100%; }
.titlebar .titlebutton.minimize:backdrop {
background: url("assets/minimize-backdrop.png") 100% 100%; }
.titlebar .titlebutton.maximize {
background: url("assets/maximize-normal.png") 100% 100%; }
.titlebar .titlebutton.maximize:hover {
background: url("assets/maximize-hover.png") 100% 100%; }
.titlebar .titlebutton.maximize:active {
background: url("assets/maximize-active.png") 100% 100%; }
.titlebar .titlebutton.maximize:backdrop {
background: url("assets/maximize-backdrop.png") 100% 100%; }
.tiled .titlebar:not(headerbar), .tiled .titlebar:backdrop:not(headerbar), .maximized .titlebar:not(headerbar), .maximized .titlebar:backdrop:not(headerbar) {
border-radius: 0; }

.titlebar, .titlebar:not(headerbar), headerbar.default-decoration, .csd headerbar.default-decoration, .default-decoration.titlebar:not(headerbar), .csd .default-decoration.titlebar:not(headerbar) {
min-height: 30px;
color: #000000;
background-color: #E0DEE1;
background-image: linear-gradient(to bottom, shade(#E0DEE1, 0.95), shade(#E0DEE1, 0.85));
border-bottom: 1px solid shade(#E0DEE1, 0.75); }
.titlebar headerbar, .titlebar:not(headerbar) headerbar, headerbar.default-decoration headerbar, .csd headerbar.default-decoration headerbar, .default-decoration.titlebar:not(headerbar) headerbar, .csd .default-decoration.titlebar:not(headerbar) headerbar {
border-bottom: none; }
.titlebar:backdrop, .titlebar:not(headerbar):backdrop, headerbar.default-decoration:backdrop, .csd headerbar.default-decoration:backdrop, .default-decoration.titlebar:not(headerbar):backdrop, .csd .default-decoration.titlebar:not(headerbar):backdrop {
color: #8C8C8C;
background-image: linear-gradient(to bottom, shade(#EDEDED, 1.05), shade(#EDEDED, 0.95));
border-bottom-color: shade(#EDEDED, 0.9);
background-color: #EDEDED; }
window.ssd .titlebar, window.ssd .titlebar:not(headerbar), window.ssd headerbar.default-decoration, window.ssd .csd headerbar.default-decoration, window.ssd .default-decoration.titlebar:not(headerbar), window.ssd .csd .default-decoration.titlebar:not(headerbar) {
border-bottom: none;
min-height: 20px; }

messagedialog {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; }
Expand Down

0 comments on commit 8cdf2ba

Please sign in to comment.