High Contrast: fix titlebuttons sizing

... simplifying the scss in the process.
This commit is contained in:
Lapo Calamandrei 2016-03-17 12:16:48 +01:00 committed by Jakub Steiner
parent b0a25b3aa9
commit 52c362721c
3 changed files with 39 additions and 109 deletions

View File

@ -3112,19 +3112,9 @@ decoration {
// Window Close button
button.titlebutton {
padding: 8px;
border-color: transparent;
background-image: none;
transition-property: border, box-shadow, color;
box-shadow: inset 0 1px transparentize(white,1),
0 1px transparentize($borders_edge,1);
&:hover { @include button(normal); }
&:active { @include button(active); }
&:backdrop {
@include button(backdrop);
border-color: transparent;
transition-property: border, box-shadow, color;
}
@extend %button_basic;
@extend %button_basic.flat;
}
/**********************

View File

@ -377,7 +377,7 @@ entry:drop(active):not(:only-child) + combobox > box > button.combo {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#aaa), to(transparent)); }
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#aaa), to(transparent)); } }
button {
button.titlebutton, button {
min-height: 24px;
min-width: 16px;
padding: 4px 8px;
@ -390,7 +390,7 @@ button {
background-image: none;
background-color: #000;
border-color: gray; }
button.flat, button.sidebar-button {
button.titlebutton, button.flat, button.sidebar-button {
border-width: 2px;
border-style: solid;
color: #fff;
@ -398,12 +398,12 @@ button {
background-image: none;
border-color: transparent;
transition: none; }
button.flat:hover, button.sidebar-button:hover {
button.titlebutton:hover, button.flat:hover, button.sidebar-button:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-duration: 500ms; }
button.flat:hover:active, button.sidebar-button:hover:active {
button.titlebutton:hover:active, button.flat:hover:active, button.sidebar-button:hover:active {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
button:hover {
button.titlebutton:hover, button:hover {
border-width: 2px;
border-style: solid;
color: #fff;
@ -411,7 +411,7 @@ button {
border-color: gray;
background-image: none;
-gtk-icon-effect: highlight; }
button:active, button:checked {
button.titlebutton:active, button.titlebutton:checked, button:active, button:checked {
border-width: 2px;
border-style: solid;
background-image: none;
@ -419,7 +419,7 @@ button {
background-color: white;
border-color: gray;
transition-duration: 50ms; }
button:backdrop.flat, button.sidebar-button:backdrop, button:backdrop {
button.titlebutton:backdrop, button.titlebutton:backdrop, button:backdrop.flat, button.sidebar-button:backdrop, button:backdrop {
border-width: 2px;
border-style: solid;
color: #fff;
@ -427,62 +427,62 @@ button {
border-color: #737373;
background-image: none;
-gtk-icon-effect: none; }
button:backdrop.flat:active, button.sidebar-button:backdrop:active, button:backdrop.flat:checked, button.sidebar-button:backdrop:checked, button:backdrop:active, button:backdrop:checked {
button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop.flat:active, button.sidebar-button:backdrop:active, button:backdrop.flat:checked, button.sidebar-button:backdrop:checked, button:backdrop:active, button:backdrop:checked {
border-width: 2px;
border-style: solid;
color: black;
background-color: #737373;
border-color: #737373;
background-image: none; }
button:backdrop.flat:disabled, button.sidebar-button:backdrop:disabled, button:backdrop:disabled {
button.titlebutton:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled, button.sidebar-button:backdrop:disabled, button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: #070707;
border-color: #494949;
background-image: none; }
button:backdrop.flat:disabled:active, button.sidebar-button:backdrop:disabled:active, button:backdrop.flat:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button.sidebar-button:backdrop:disabled:active, button:backdrop.flat:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
border-width: 2px;
border-style: solid;
color: gray;
border-color: #494949;
background-image: none;
background-color: #090909; }
button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
button.titlebutton:backdrop, button.titlebutton:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: transparent;
background-image: none;
border-color: transparent; }
button:disabled {
button.titlebutton:disabled, button:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: #070707;
border-color: #494949;
background-image: none; }
button:disabled:active, button:disabled:checked {
button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked {
border-width: 2px;
border-style: solid;
color: gray;
border-color: #494949;
background-image: none;
background-color: #070707; }
button.image-button {
button.image-button.titlebutton, button.image-button {
min-width: 24px;
padding-left: 4px;
padding-right: 4px; }
button.text-button {
button.text-button.titlebutton, button.text-button {
padding-left: 16px;
padding-right: 16px; }
button.text-button.image-button {
button.text-button.image-button.titlebutton, button.text-button.image-button {
padding-left: 8px;
padding-right: 8px; }
button.text-button.image-button label {
button.text-button.image-button.titlebutton label, button.text-button.image-button label {
padding-left: 8px;
padding-right: 8px; }
combobox:drop(active) button.combo, button:drop(active) {
combobox:drop(active) button.combo, button.titlebutton:drop(active), button:drop(active) {
color: #fff;
border-color: #fff;
box-shadow: inset 0 0 0 1px #fff; }
@ -3290,36 +3290,6 @@ decoration {
border: solid 1px #737373;
box-shadow: none; }
button.titlebutton {
padding: 8px;
border-color: transparent;
background-image: none;
transition-property: border, box-shadow, color;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px transparent; }
button.titlebutton:hover {
border-width: 2px;
border-style: solid;
color: #fff;
background-image: none;
background-color: #000;
border-color: gray; }
button.titlebutton:active {
border-width: 2px;
border-style: solid;
background-image: none;
color: black;
background-color: white;
border-color: gray; }
button.titlebutton:backdrop {
border-width: 2px;
border-style: solid;
color: #fff;
background-color: #000;
border-color: #737373;
background-image: none;
border-color: transparent;
transition-property: border, box-shadow, color; }
/**********************
* Touch Copy & Paste *
*********************/

View File

@ -377,7 +377,7 @@ entry:drop(active):not(:only-child) + combobox > box > button.combo {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#000), to(transparent)); }
to {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#000), to(transparent)); } }
button {
button.titlebutton, button {
min-height: 24px;
min-width: 16px;
padding: 4px 8px;
@ -390,7 +390,7 @@ button {
background-image: none;
background-color: #fff;
border-color: gray; }
button.flat, button.sidebar-button {
button.titlebutton, button.flat, button.sidebar-button {
border-width: 2px;
border-style: solid;
color: #000;
@ -398,12 +398,12 @@ button {
background-image: none;
border-color: transparent;
transition: none; }
button.flat:hover, button.sidebar-button:hover {
button.titlebutton:hover, button.flat:hover, button.sidebar-button:hover {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
transition-duration: 500ms; }
button.flat:hover:active, button.sidebar-button:hover:active {
button.titlebutton:hover:active, button.flat:hover:active, button.sidebar-button:hover:active {
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
button:hover {
button.titlebutton:hover, button:hover {
border-width: 2px;
border-style: solid;
color: #000;
@ -411,7 +411,7 @@ button {
border-color: gray;
background-image: none;
-gtk-icon-effect: highlight; }
button:active, button:checked {
button.titlebutton:active, button.titlebutton:checked, button:active, button:checked {
border-width: 2px;
border-style: solid;
background-image: none;
@ -419,7 +419,7 @@ button {
background-color: black;
border-color: gray;
transition-duration: 50ms; }
button:backdrop.flat, button.sidebar-button:backdrop, button:backdrop {
button.titlebutton:backdrop, button.titlebutton:backdrop, button:backdrop.flat, button.sidebar-button:backdrop, button:backdrop {
border-width: 2px;
border-style: solid;
color: #000;
@ -427,62 +427,62 @@ button {
border-color: #8d8d8d;
background-image: none;
-gtk-icon-effect: none; }
button:backdrop.flat:active, button.sidebar-button:backdrop:active, button:backdrop.flat:checked, button.sidebar-button:backdrop:checked, button:backdrop:active, button:backdrop:checked {
button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button.titlebutton:backdrop:active, button.titlebutton:backdrop:checked, button:backdrop.flat:active, button.sidebar-button:backdrop:active, button:backdrop.flat:checked, button.sidebar-button:backdrop:checked, button:backdrop:active, button:backdrop:checked {
border-width: 2px;
border-style: solid;
color: white;
background-color: #8d8d8d;
border-color: #8d8d8d;
background-image: none; }
button:backdrop.flat:disabled, button.sidebar-button:backdrop:disabled, button:backdrop:disabled {
button.titlebutton:backdrop:disabled, button.titlebutton:backdrop:disabled, button:backdrop.flat:disabled, button.sidebar-button:backdrop:disabled, button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: white;
border-color: silver;
background-image: none; }
button:backdrop.flat:disabled:active, button.sidebar-button:backdrop:disabled:active, button:backdrop.flat:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button.titlebutton:backdrop:disabled:active, button.titlebutton:backdrop:disabled:checked, button:backdrop.flat:disabled:active, button.sidebar-button:backdrop:disabled:active, button:backdrop.flat:disabled:checked, button.sidebar-button:backdrop:disabled:checked, button:backdrop:disabled:active, button:backdrop:disabled:checked {
border-width: 2px;
border-style: solid;
color: gray;
border-color: silver;
background-image: none;
background-color: #f6f6f6; }
button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
button.titlebutton:backdrop, button.titlebutton:disabled, button.titlebutton:backdrop:disabled, button.flat:backdrop, button.sidebar-button:backdrop, button.flat:disabled, button.sidebar-button:disabled, button.flat:backdrop:disabled, button.sidebar-button:backdrop:disabled {
border-width: 2px;
border-style: solid;
color: #000;
background-color: transparent;
background-image: none;
border-color: transparent; }
button:disabled {
button.titlebutton:disabled, button:disabled {
border-width: 2px;
border-style: solid;
color: gray;
background-color: white;
border-color: silver;
background-image: none; }
button:disabled:active, button:disabled:checked {
button.titlebutton:disabled:active, button.titlebutton:disabled:checked, button:disabled:active, button:disabled:checked {
border-width: 2px;
border-style: solid;
color: gray;
border-color: silver;
background-image: none;
background-color: white; }
button.image-button {
button.image-button.titlebutton, button.image-button {
min-width: 24px;
padding-left: 4px;
padding-right: 4px; }
button.text-button {
button.text-button.titlebutton, button.text-button {
padding-left: 16px;
padding-right: 16px; }
button.text-button.image-button {
button.text-button.image-button.titlebutton, button.text-button.image-button {
padding-left: 8px;
padding-right: 8px; }
button.text-button.image-button label {
button.text-button.image-button.titlebutton label, button.text-button.image-button label {
padding-left: 8px;
padding-right: 8px; }
combobox:drop(active) button.combo, button:drop(active) {
combobox:drop(active) button.combo, button.titlebutton:drop(active), button:drop(active) {
color: #000;
border-color: #000;
box-shadow: inset 0 0 0 1px #000; }
@ -3297,36 +3297,6 @@ decoration {
border: solid 1px #8d8d8d;
box-shadow: none; }
button.titlebutton {
padding: 8px;
border-color: transparent;
background-image: none;
transition-property: border, box-shadow, color;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
button.titlebutton:hover {
border-width: 2px;
border-style: solid;
color: #000;
background-image: none;
background-color: #fff;
border-color: gray; }
button.titlebutton:active {
border-width: 2px;
border-style: solid;
background-image: none;
color: white;
background-color: black;
border-color: gray; }
button.titlebutton:backdrop {
border-width: 2px;
border-style: solid;
color: #000;
background-color: #fff;
border-color: #8d8d8d;
background-image: none;
border-color: transparent;
transition-property: border, box-shadow, color; }
/**********************
* Touch Copy & Paste *
*********************/