Changes to make the theme more aestetic in my opinion

Took headerbar gradient from Haiku theme.
Took tab bat from Haiku theme and made it slim, plus close buttons are
flat now.
master
Adam Kruszewski 2022-10-04 09:44:55 +02:00
parent 8624a804ef
commit 3a95bab526
15 changed files with 170 additions and 124 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 276 B

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 262 B

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 299 B

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 261 B

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 320 B

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
gtk-3.0/assets/tab-bottom-active.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 187 B

After

Width:  |  Height:  |  Size: 238 B

BIN
gtk-3.0/assets/tab-bottom.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 160 B

After

Width:  |  Height:  |  Size: 180 B

BIN
gtk-3.0/assets/tab-left-active.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 188 B

After

Width:  |  Height:  |  Size: 238 B

BIN
gtk-3.0/assets/tab-left.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 160 B

After

Width:  |  Height:  |  Size: 183 B

BIN
gtk-3.0/assets/tab-right-active.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 206 B

After

Width:  |  Height:  |  Size: 255 B

BIN
gtk-3.0/assets/tab-right.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 186 B

After

Width:  |  Height:  |  Size: 175 B

BIN
gtk-3.0/assets/tab-top-active.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 198 B

After

Width:  |  Height:  |  Size: 254 B

BIN
gtk-3.0/assets/tab-top.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 167 B

After

Width:  |  Height:  |  Size: 176 B

View File

@ -839,112 +839,6 @@ modelbutton.flat, menuitem.button.flat, .menuitem.button.flat {
modelbutton.flat arrow.right, menuitem.button.flat arrow.right, .menuitem.button.flat arrow.right {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook {
padding: 0; }
notebook.frame {
margin: -1px;
border-width: 1px;
border-style: solid;
border-color: #eeeeee;
border-right-color: #9c9c9c;
border-bottom-color: #9c9c9c;
background-color: transparent; }
notebook.frame > header {
margin: -1px; }
notebook.frame > header.top {
margin-bottom: 0; }
notebook.frame > header.bottom {
margin-top: 0; }
notebook.frame > header.left {
margin-right: 0; }
notebook.frame > header.right {
margin-left: 0; }
notebook.frame > header.top, notebook.frame > header.bottom {
padding-left: 0;
padding-right: 0; }
notebook.frame > header.left, notebook.frame > header.right {
padding-top: 0;
padding-bottom: 0; }
notebook > stack:not(:only-child) {
background-color: transparent; }
notebook tab {
padding: 2px 6px;
border-width: 6px;
border-style: solid;
border-radius: 0;
border-color: transparent;
color: #000000;
outline-color: transparent;
background-color: #c7c7c7; }
notebook tab:checked {
background-color: #D8D8D8; }
notebook > header {
padding-top: 2px;
background-color: #D8D8D8; }
notebook > header:backdrop {
background-color: #D8D8D8; }
notebook > header.top {
box-shadow: 0 1px #eeeeee; }
notebook > header.top > tabs > tab {
border-image: url("assets/tab-top.png") 6 6 6 6 stretch;
margin-top: 2px; }
notebook > header.top > tabs > tab:checked {
border-image: url("assets/tab-top-active.png") 6 6 6 6 stretch;
margin-top: 0;
margin-bottom: -1px; }
notebook > header.bottom {
padding-top: 0;
box-shadow: 0 -1px #9c9c9c; }
notebook > header.bottom > tabs > tab {
border-image: url("assets/tab-bottom.png") 6 6 6 6 stretch;
margin-bottom: 2px; }
notebook > header.bottom > tabs > tab:checked {
border-image: url("assets/tab-bottom-active.png") 6 6 6 6 stretch;
margin-bottom: 0;
margin-top: -1px; }
notebook > header.right {
box-shadow: -1px 0 #9c9c9c; }
notebook > header.right > tabs > tab {
border-image: url("assets/tab-right.png") 6 6 6 6 stretch;
margin-right: 2px; }
notebook > header.right > tabs > tab:checked {
border-image: url("assets/tab-right-active.png") 6 6 6 6 stretch;
margin-right: 0;
margin-left: -1px; }
notebook > header.left {
box-shadow: 1px 0 #eeeeee; }
notebook > header.left > tabs > tab {
border-image: url("assets/tab-left.png") 6 6 6 6 stretch;
margin-left: 2px; }
notebook > header.left > tabs > tab:checked {
border-image: url("assets/tab-left-active.png") 6 6 6 6 stretch;
margin-left: 0;
margin-right: -1px; }
notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child {
margin-left: 2px; }
notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child {
margin-right: 2px; }
notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child {
margin-top: 2px; }
notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child {
margin-bottom: 2px; }
notebook > header > tabs > arrow {
color: #000000; }
notebook > header > tabs > arrow:hover {
color: black; }
notebook > header > tabs > arrow:active {
color: black; }
notebook > header > tabs > arrow:disabled {
color: #828282; }
paned > separator {
border: none;
color: transparent;
@ -1524,11 +1418,13 @@ headerbar {
min-height: 30px;
color: #000000;
background-color: #FFC000;
background-image: linear-gradient(to bottom, #ffe699, #FFC000);
box-shadow: inset 1px 1px #ffd966, inset -1px -1px #FFC000; }
headerbar:backdrop {
color: #000000;
background-color: #D8D8D8;
box-shadow: inset 1px 1px #f2f2f2, inset -1px -1px #b8b8b8; }
background-color: #D7D7D7;
background-image: linear-gradient(to bottom, #e2e2e2, #D7D7D7);
box-shadow: inset 1px 1px #f2f2f2, inset -1px -1px #b7b7b7; }
.tiled headerbar, .tiled headerbar:backdrop, .maximized headerbar, .maximized headerbar:backdrop {
border-radius: 0; }
separator:first-child + headerbar, separator:first-child + headerbar:backdrop, headerbar:first-child, headerbar:first-child:backdrop {
@ -1552,31 +1448,27 @@ headerbar {
padding: 4px 9px;
border-style: solid;
border-width: 1px;
border-radius: 2px;
border-radius: 0px;
color: #000000;
border-color: #606060;
background-color: #e9e9e9;
-gtk-outline-radius: 2px;
box-shadow: inset 3px 3px white, inset 1px 1px #D8D8D8, inset -2px -2px #b8b8b8, inset -1px -1px #8c8c8c;
outline-offset: 2px;
background-color: #e8e8e8;
background-image: linear-gradient(to bottom, #ededed, #e8e8e8 45%, #e0e0e0 55%, #d7d7d7);
-gtk-outline-radius: 0px;
box-shadow: inset 1px 1px white, inset -1px -1px #8c8c8c, 0 0 0 1px rgba(0, 0, 0, 0.05), 1px 1px rgba(255, 255, 255, 0.5);
outline-offset: 0;
outline-width: 2px;
outline-style: solid;
outline-color: rgba(0, 0, 0, 0.5); }
outline-color: #989898; }
headerbar button:active, headerbar button:checked {
background-color: #c2c2c2;
box-shadow: inset -3px -3px #e6e6e6, inset -1px -1px #c2c2c2, inset 2px 2px #b8b8b8, inset 1px 1px #8c8c8c; }
headerbar button:active:backdrop, headerbar button:checked:backdrop {
box-shadow: inset -3px -3px #e6e6e6, inset -1px -1px #c2c2c2, inset 2px 2px #b8b8b8, inset 1px 1px #8c8c8c; }
background-image: none;
box-shadow: inset -1px -1px white, inset 1px 1px #8c8c8c, 0 0 0 1px rgba(255, 255, 255, 0.5), 1px 1px rgba(0, 0, 0, 0.05); }
headerbar button:active:disabled, headerbar button:checked:disabled {
background-color: #cdcdcd;
color: #0b0b0b;
box-shadow: inset -3px -3px #e6e6e6, inset -1px -1px #cdcdcd, inset 2px 2px #b8b8b8, inset 1px 1px #8c8c8c; }
headerbar button:active:disabled:backdrop, headerbar button:checked:disabled:backdrop {
box-shadow: inset -3px -3px #e6e6e6, inset -1px -1px #cdcdcd, inset 2px 2px #b8b8b8, inset 1px 1px #8c8c8c; }
background-color: #c2c2c2; }
headerbar button:disabled {
color: #363636;
box-shadow: inset 3px 3px white, inset 1px 1px #D8D8D8, inset -2px -2px #cdcdcd; }
headerbar button:backdrop {
box-shadow: inset 3px 3px white, inset 1px 1px #D8D8D8, inset -2px -2px #b8b8b8, inset -1px -1px #8c8c8c; }
background-color: #cccccc; }
headerbar entry {
padding: 4px 8px; }
headerbar.titlebar, .titlebar headerbar {
@ -2867,3 +2759,157 @@ read if you used those and something break with a version upgrade you're on your
@define-color wm_button_active_color_b shade(#D8D8D8, 0.89);
@define-color wm_button_active_color_c shade(#D8D8D8, 0.9);
@define-color content_view_bg #FFFFFF;
/* tab bar taken from Hiaku theme */
notebook {
padding: 0; }
notebook.frame {
margin: -1px;
border-width: 1px;
border-style: solid;
border-color: #9b9b9b;
box-shadow: inset 0 0 0 1px #e2e2e2, inset -1px -1px 0 0 #cccccc;
background-color: transparent; }
notebook.frame > header {
margin: -1px; }
notebook.frame > header.top {
margin-bottom: 0; }
notebook.frame > header.bottom {
margin-top: 0; }
notebook.frame > header.left {
margin-right: 0; }
notebook.frame > header.right {
margin-left: 0; }
notebook.frame > header.top, notebook.frame > header.bottom {
padding-left: 0;
padding-right: 0; }
notebook.frame > header.left, notebook.frame > header.right {
padding-top: 0;
padding-bottom: 0; }
notebook > stack:not(:only-child) {
background-color: transparent; }
notebook tab {
padding: 2px 6px;
border-width: 6px;
border-style: solid;
border-radius: 0;
border-color: transparent;
color: #000000;
outline-color: transparent;
background-color: #c6c6c6; }
notebook tab:checked {
background-color: #D7D7D7; }
notebook > header {
padding-top: 2px;
background-color: #D7D7D7; }
notebook > header:backdrop {
background-color: #D7D7D7; }
notebook > header.top {
box-shadow: 0 1px #9b9b9b; }
notebook > header.top > tabs > tab {
border-image: url("assets/tab-top.png") 6 6 6 6 stretch;
margin-top: 2px; }
notebook > header.top > tabs > tab:checked {
border-image: url("assets/tab-top-active.png") 6 6 6 6 stretch;
margin-top: 0;
margin-bottom: -1px; }
notebook > header.bottom {
padding-top: 0;
box-shadow: 0 -1px #9b9b9b; }
notebook > header.bottom > tabs > tab {
border-image: url("assets/tab-bottom.png") 6 6 6 6 stretch;
margin-bottom: 2px; }
notebook > header.bottom > tabs > tab:checked {
border-image: url("assets/tab-bottom-active.png") 6 6 6 6 stretch;
margin-bottom: 0;
margin-top: -1px; }
notebook > header.right {
box-shadow: -1px 0 #9b9b9b; }
notebook > header.right > tabs > tab {
border-image: url("assets/tab-right.png") 6 6 6 6 stretch;
margin-right: 2px; }
notebook > header.right > tabs > tab:checked {
border-image: url("assets/tab-right-active.png") 6 6 6 6 stretch;
margin-right: 0;
margin-left: -1px; }
notebook > header.left {
box-shadow: 1px 0 #9b9b9b; }
notebook > header.left > tabs > tab {
border-image: url("assets/tab-left.png") 6 6 6 6 stretch;
margin-left: 2px; }
notebook > header.left > tabs > tab:checked {
border-image: url("assets/tab-left-active.png") 6 6 6 6 stretch;
margin-left: 0;
margin-right: -1px; }
notebook > header.top > tabs > arrow.up, notebook > header.bottom > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
notebook > header.top > tabs > arrow.up:last-child, notebook > header.bottom > tabs > arrow.up:last-child {
margin-left: 2px; }
notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
notebook > header.top > tabs > arrow.down:first-child, notebook > header.bottom > tabs > arrow.down:first-child {
margin-right: 2px; }
notebook > header.left > tabs > arrow.up, notebook > header.right > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook > header.left > tabs > arrow.up:last-child, notebook > header.right > tabs > arrow.up:last-child {
margin-top: 2px; }
notebook > header.left > tabs > arrow.down, notebook > header.right > tabs > arrow.down {
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
notebook > header.left > tabs > arrow.down:first-child, notebook > header.right > tabs > arrow.down:first-child {
margin-bottom: 2px; }
notebook > header > tabs > arrow {
color: #000000; }
notebook > header > tabs > arrow:hover {
color: black; }
notebook > header > tabs > arrow:active {
color: black; }
notebook > header > tabs > arrow:disabled {
color: #818181; }
/* make the close buttons flat */
notebook > header tab button.flat {
border-radius: 2px;
color: alpha(@theme_fg_color,0.4);
padding: 1px;
margin-top: 1px;
margin-bottom: 1px;
min-width: 20px;
min-height: 20px;
border-color: transparent;
background-color: rgba(0,0,0,0.0);
background-image: none;
box-shadow: none;}
notebook > header tab button.flat:hover {
border-color: transparent;
background-color: transparent;
background-image: none;
box-shadow: none;
color: alpha(@theme_fg_color,0.8);}
/* make tab bar height much smaller */
notebook tab {
min-height: 0;
padding-top: 0px;
padding-bottom: 0px;
}
/* those break other buttons, not only on the tab bar */
/*
notebook tab button {
min-height: 0;
min-width: 0;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}*/
/*
notebook button {
min-height: 0;
min-width: 0;
padding: 0px;
}
*/