mirror of
https://github.com/luneko/SweetTokyoNight.git
synced 2025-12-13 15:29:53 +01:00
Improve flat buttons style
This commit is contained in:
@@ -428,8 +428,7 @@ box-shadow: none;
|
||||
// border-color: transparent;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: mix($bg_color, $base_color, 20%);
|
||||
// border: 1px solid transparentize($tc, 0.7);
|
||||
border-color: transparent;
|
||||
@include _shadows(inset 0 1px transparentize(white, 1),
|
||||
$_blank_edge);
|
||||
|
||||
|
||||
@@ -276,7 +276,7 @@ button {
|
||||
button.flat {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -360,7 +360,7 @@ button {
|
||||
button.flat:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
@@ -707,7 +707,7 @@ button.suggested-action {
|
||||
button.suggested-action.flat:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -860,7 +860,7 @@ button.destructive-action {
|
||||
button.destructive-action.flat:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -1005,7 +1005,7 @@ toolbar button:active {
|
||||
.inline-toolbar toolbutton > button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
@@ -2960,7 +2960,7 @@ menu,
|
||||
.context-menu > arrow {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3139,7 +3139,7 @@ notebook > header {
|
||||
notebook > header > tabs > arrow:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
@@ -3187,12 +3187,6 @@ notebook > header {
|
||||
color: #ed254e; }
|
||||
notebook > header tab button.flat, notebook > header tab button.flat:backdrop {
|
||||
color: alpha(currentColor,0.3); }
|
||||
notebook > header tab button.flat:last-child {
|
||||
margin-left: 4px;
|
||||
margin-right: -4px; }
|
||||
notebook > header tab button.flat:first-child {
|
||||
margin-left: -4px;
|
||||
margin-right: 4px; }
|
||||
notebook > header.top tabs, notebook > header.bottom tabs {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px; }
|
||||
@@ -3237,14 +3231,6 @@ notebook > stack:not(:only-child) {
|
||||
notebook > stack:not(:only-child):backdrop {
|
||||
background-color: #1a1d2b; }
|
||||
|
||||
notebook button.flat {
|
||||
padding: 2px 4px; }
|
||||
notebook button.flat, notebook button.flat:backdrop {
|
||||
border: none;
|
||||
background-color: transparent; }
|
||||
notebook button.flat:hover, notebook button.flat:active, notebook button.flat:checked {
|
||||
background: #f7b922; }
|
||||
|
||||
/*********
|
||||
* Paned *
|
||||
*********/
|
||||
@@ -3961,7 +3947,7 @@ scrollbar {
|
||||
transition-property: min-height, min-width, color;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3969,7 +3955,7 @@ scrollbar {
|
||||
scrollbar button:hover {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3977,7 +3963,7 @@ scrollbar {
|
||||
scrollbar button:active, scrollbar button:checked {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3985,7 +3971,7 @@ scrollbar {
|
||||
scrollbar button:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3993,7 +3979,7 @@ scrollbar {
|
||||
scrollbar button:backdrop {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4001,7 +3987,7 @@ scrollbar {
|
||||
scrollbar button:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4190,7 +4176,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4205,7 +4191,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button:hover {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4217,7 +4203,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button:backdrop {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4228,7 +4214,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #181b28;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
|
||||
@@ -276,7 +276,7 @@ button {
|
||||
button.flat {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -360,7 +360,7 @@ button {
|
||||
button.flat:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
@@ -710,7 +710,7 @@ button.suggested-action {
|
||||
button.suggested-action.flat:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -863,7 +863,7 @@ button.destructive-action {
|
||||
button.destructive-action.flat:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -1008,7 +1008,7 @@ toolbar button:active {
|
||||
.inline-toolbar toolbutton > button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
@@ -2967,7 +2967,7 @@ menu,
|
||||
.context-menu > arrow {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3146,7 +3146,7 @@ notebook > header {
|
||||
notebook > header > tabs > arrow:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none; }
|
||||
@@ -3194,12 +3194,6 @@ notebook > header {
|
||||
color: #ed254e; }
|
||||
notebook > header tab button.flat, notebook > header tab button.flat:backdrop {
|
||||
color: alpha(currentColor,0.3); }
|
||||
notebook > header tab button.flat:last-child {
|
||||
margin-left: 4px;
|
||||
margin-right: -4px; }
|
||||
notebook > header tab button.flat:first-child {
|
||||
margin-left: -4px;
|
||||
margin-right: 4px; }
|
||||
notebook > header.top tabs, notebook > header.bottom tabs {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px; }
|
||||
@@ -3244,14 +3238,6 @@ notebook > stack:not(:only-child) {
|
||||
notebook > stack:not(:only-child):backdrop {
|
||||
background-color: #e8edf3; }
|
||||
|
||||
notebook button.flat {
|
||||
padding: 2px 4px; }
|
||||
notebook button.flat, notebook button.flat:backdrop {
|
||||
border: none;
|
||||
background-color: transparent; }
|
||||
notebook button.flat:hover, notebook button.flat:active, notebook button.flat:checked {
|
||||
background: #f7b922; }
|
||||
|
||||
/*********
|
||||
* Paned *
|
||||
*********/
|
||||
@@ -3968,7 +3954,7 @@ scrollbar {
|
||||
transition-property: min-height, min-width, color;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3976,7 +3962,7 @@ scrollbar {
|
||||
scrollbar button:hover {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3984,7 +3970,7 @@ scrollbar {
|
||||
scrollbar button:active, scrollbar button:checked {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -3992,7 +3978,7 @@ scrollbar {
|
||||
scrollbar button:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4000,7 +3986,7 @@ scrollbar {
|
||||
scrollbar button:backdrop {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4008,7 +3994,7 @@ scrollbar {
|
||||
scrollbar button:backdrop:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4197,7 +4183,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4212,7 +4198,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button:hover {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4224,7 +4210,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button:backdrop {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
@@ -4235,7 +4221,7 @@ spinbutton:not(.vertical) {
|
||||
.osd spinbutton:not(.vertical) button:disabled {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-color: #eaeef2;
|
||||
border-color: transparent;
|
||||
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
|
||||
text-shadow: none;
|
||||
-gtk-icon-shadow: none;
|
||||
|
||||
@@ -223,16 +223,6 @@ notebook {
|
||||
// FIXME: generalize .small-button?
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-left: 4px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: -4px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -296,15 +286,4 @@ notebook {
|
||||
|
||||
&:backdrop { background-color: $backdrop_base_color; }
|
||||
}
|
||||
|
||||
button.flat{
|
||||
&, &:backdrop {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
&:hover, &:active, &:checked {
|
||||
background: $selected_bg_color;
|
||||
}
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user