[gtk+/wip/lapo/scalable-adwaita] Adwaita: intial rough conversion from px to rem
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+/wip/lapo/scalable-adwaita] Adwaita: intial rough conversion from px to rem
- Date: Fri, 25 Mar 2016 13:48:28 +0000 (UTC)
commit 434a187fae39e4611671c743291211207a79b352
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Fri Mar 25 14:47:12 2016 +0100
Adwaita: intial rough conversion from px to rem
gtk/theme/Adwaita/_common.scss | 590 +++++++++++++++---------------
gtk/theme/Adwaita/gtk-contained-dark.css | 568 ++++++++++++++--------------
gtk/theme/Adwaita/gtk-contained.css | 568 ++++++++++++++--------------
3 files changed, 866 insertions(+), 860 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d8be13d..98872f1 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -6,6 +6,11 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$asset_suffix: if($variant=='dark', '-dark', '');
$backdrop_transition: 200ms ease-out;
$button_transition: all 200ms $ease-out-quad;
+$font_size: 14px;
+
+ function rem($px, $fs: $font_size) {
+ @return ($px / $fs ) * 1rem;
+}
* {
padding: 0;
@@ -36,9 +41,9 @@ $button_transition: all 200ms $ease-out-quad;
outline-color: transparentize($fg_color, 0.7);
outline-style: dashed;
- outline-offset: -3px;
+ outline-offset: rem(-3px);
outline-width: 1px;
- -gtk-outline-radius: 2px;
+ -gtk-outline-radius: rem(2px);
}
@@ -105,7 +110,7 @@ $button_transition: all 200ms $ease-out-quad;
&:focus, & {
@extend %selected_items;
- border-radius: 3px;
+ border-radius: rem(3px);
}
}
}
@@ -131,13 +136,13 @@ flowbox {
rubberband { @extend rubberband; }
flowboxchild {
- padding: 3px;
- border-radius: 3px;
+ padding: rem(3px);
+ border-radius: rem(3px);
&:selected {
@extend %selected_items;
- outline-offset: -2px;
+ outline-offset: rem(-2px);
}
}
}
@@ -192,7 +197,7 @@ assistant {
&.csd .sidebar { border-top-style: none; }
- .sidebar label { padding: 6px 12px; }
+ .sidebar label { padding: rem(6px) rem(12px); }
.sidebar label.highlight { background-color: mix($bg_color, $fg_color, 80%); }
}
@@ -247,18 +252,18 @@ spinner {
%entry,
entry {
%entry_basic, & {
- min-height: 32px;
- padding-left: 8px;
- padding-right: 8px;
+ min-height: rem(32px);
+ padding-left: rem(8px);
+ padding-right: rem(8px);
border: 1px solid;
- border-radius: 3px;
+ border-radius: rem(3px);
transition: all 200ms $ease-out-quad;
@include entry(normal);
image { // icons inside the entry
- &.left { padding-left: 0; padding-right: 6px; }
- &.right { padding-left: 6px; padding-right: 0; }
+ &.left { padding-left: 0; padding-right: rem(6px); }
+ &.right { padding-left: rem(6px); padding-right: 0; }
}
undershoot {
@@ -269,7 +274,7 @@ entry {
&.flat {
&:focus, & {
min-height: 0;
- padding: 2px;
+ padding: rem(2px);
background-image: none;
border-color: transparent;
border-radius: 0;
@@ -332,11 +337,11 @@ entry {
}
progress {
- margin: 2px -6px;
+ margin: rem(2px) rem(-6px);
background-color: transparent;
background-image: none;
border-radius: 0;
- border-width: 0 0 2px;
+ border-width: 0 0 rem(2px);
border-color: $selected_bg_color;
border-style: solid;
box-shadow: none;
@@ -440,11 +445,11 @@ $_dot_color: if($variant=='light', $selected_bg_color,
button {
@at-root %button_basic, & {
- min-height: 24px;
- min-width: 16px;
- padding: 4px 8px;
+ min-height: rem(24px);
+ min-width: rem(16px);
+ padding: rem(4px) rem(8px);
border: 1px solid;
- border-radius: 3px;
+ border-radius: rem(3px);
transition: $button_transition;
@include button(normal);
@@ -506,23 +511,23 @@ button {
}
&.image-button {
- min-width: 24px;
- padding-left: 4px;
- padding-right: 4px;
+ min-width: rem(24px);
+ padding-left: rem(4px);
+ padding-right: rem(4px);
}
&.text-button {
- padding-left: 16px;
- padding-right: 16px;
+ padding-left: rem(16px);
+ padding-right: rem(16px);
}
&.text-button.image-button {
- padding-left: 8px;
- padding-right: 8px;
+ padding-left: rem(8px);
+ padding-right: rem(8px);
label {
- padding-left: 8px;
- padding-right: 8px;
+ padding-left: rem(8px);
+ padding-right: rem(8px);
}
}
@@ -549,13 +554,13 @@ button {
// big standalone buttons like in Documents pager
&.osd {
- min-width: 24px;
- min-height: 32px;
+ min-width: rem(24px);
+ min-height: rem(32px);
- &.image-button { min-width: 32px; }
+ &.image-button { min-width: rem(32px); }
color: $osd_fg_color;
- border-radius: 5px;
+ border-radius: rem(5px);
outline-color: transparentize($osd_fg_color, 0.7); //FIXME: define a color var?
@include button(osd);
@@ -697,31 +702,31 @@ button {
// child, a label needs just lateral padding while an icon needs vertical
// padding added too.
- outline-offset: -3px; // needs to be set or it gets overriden by GtkRadioButton outline-offset
+ outline-offset: rem(-3px); // needs to be set or it gets overriden by GtkRadioButton outline-offset
> label {
- padding-left: 6px; // label padding
- padding-right: 6px; //
+ padding-left: rem(6px); // label padding
+ padding-right: rem(6px); //
}
> image {
- padding-left: 6px; // image padding
- padding-right: 6px; //
- padding-top: 3px; //
- padding-bottom: 3px; //
+ padding-left: rem(6px); // image padding
+ padding-right: rem(6px); //
+ padding-top: rem(3px); //
+ padding-bottom: rem(3px); //
}
&.text-button {
// compensate text-button paddings
- padding-left: 10px;
- padding-right: 10px;
+ padding-left: rem(10px);
+ padding-right: rem(10px);
}
&.image-button {
// we want image buttons to have a 1:1 aspect ratio, so compensation
// of the padding added to the GtkImage is needed
- padding-left: 2px;
- padding-right: 2px;
+ padding-left: rem(2px);
+ padding-right: rem(2px);
}
&.needs-attention {
@@ -741,8 +746,8 @@ button {
//inline-toolbar buttons
.inline-toolbar &, .inline-toolbar &:backdrop {
- border-radius: 2px;
- border-width: 1px;
+ border-radius: rem(2px);
+ border-width: rem(1px);
@extend %linked;
}
@@ -775,19 +780,19 @@ button {
center center, $_dot_shadow_r,
to($_dot_shadow),
to(transparent));
- background-size: 6px 6px, 6px 6px;
+ background-size: rem(6px) rem(6px), rem(6px) rem(6px);
background-repeat: no-repeat;
- @if $variant == 'light' { background-position: right 3px, right 4px; }
+ @if $variant == 'light' { background-position: right rem(3px), right rem(4px); }
- @else { background-position: right 3px, right 2px; }
+ @else { background-position: right rem(3px), right rem(2px); }
- &:backdrop { background-size: 6px 6px, 0 0;}
+ &:backdrop { background-size: rem(6px) rem(6px), 0 0;}
&:dir(rtl) {
- @if $variant == 'light' { background-position: left 3px, left 4px; }
+ @if $variant == 'light' { background-position: left rem(3px), left rem(4px); }
- @else { background-position: left 3px, left 2px; }
+ @else { background-position: left rem(3px), left rem(2px); }
}
}
@@ -846,18 +851,18 @@ toolbar.inline-toolbar toolbutton:backdrop {
@extend %linked_middle;
&:first-child {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
+ border-top-left-radius: rem(3px);
+ border-bottom-left-radius: rem(3px);
}
&:last-child {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
+ border-top-right-radius: rem(3px);
+ border-bottom-right-radius: rem(3px);
border-right-style: solid;
}
&:only-child {
- border-radius: 3px;
+ border-radius: rem(3px);
border-style: solid;
}
}
@@ -871,18 +876,18 @@ toolbar.inline-toolbar toolbutton:backdrop {
@extend %linked_vertical_middle;
&:first-child {
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
+ border-top-left-radius: rem(3px);
+ border-top-right-radius: rem(3px);
}
&:last-child {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
+ border-bottom-left-radius: rem(3px);
+ border-bottom-right-radius: rem(3px);
border-style: solid;
}
&:only-child {
- border-radius: 3px;
+ border-radius: rem(3px);
border-style: solid;
}
}
@@ -900,11 +905,11 @@ toolbar.inline-toolbar toolbutton:backdrop {
/* menu buttons */
modelbutton.flat,
.menuitem.button.flat {
- min-height: 26px;
- padding-left: 5px;
- padding-right: 5px;
- border-radius: 3px;
- outline-offset: -2px;
+ min-height: rem(26px);
+ padding-left: rem(5px);
+ padding-right: rem(5px);
+ border-radius: rem(3px);
+ outline-offset: rem(-2px);
@extend %undecorated_button;
@@ -917,10 +922,10 @@ modelbutton.flat,
// FIXME: remove the following when the checks/radios rewrite lands
check:last-child,
- radio:last-child { margin-left: 8px; }
+ radio:last-child { margin-left: rem(8px); }
check:first-child,
- radio:first-child { margin-right: 8px; }
+ radio:first-child { margin-right: rem(8px); }
}
modelbutton.flat arrow {
@@ -934,7 +939,7 @@ modelbutton.flat arrow {
}
button.color {
- padding: 4px;
+ padding: rem(4px);
colorswatch:only-child {
&, overlay { border-radius: 0; }
@@ -1013,7 +1018,7 @@ spinbutton {
padding: 0;
entry {
- min-width: 28px;
+ min-width: rem(28px);
// reset all the other props since the spinbutton node is styled here
margin: 0;
background: none;
@@ -1024,7 +1029,7 @@ spinbutton {
}
button {
- min-height: 16px;
+ min-height: rem(16px);
margin: 0;
padding-bottom: 0;
padding-top: 0;
@@ -1046,7 +1051,7 @@ spinbutton {
&:active {
background-color: transparentize(black, 0.9);
- box-shadow: inset 0 2px 3px -1px transparentize(black, 0.8);
+ box-shadow: inset 0 rem(2px) rem(3px) rem(-1px) transparentize(black, 0.8); // CHECKTHIS
}
&:backdrop {
@@ -1108,9 +1113,9 @@ spinbutton {
box-shadow: none;
}
- &:last-child { border-radius: 0 3px 3px 0; }
+ &:last-child { border-radius: 0 rem(3px) rem(3px) 0; }
- &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
+ &:dir(rtl):first-child { border-radius: rem(3px) 0 0 rem(3px); }
}
}
@@ -1131,15 +1136,15 @@ spinbutton {
}
entry {
- min-height: 32px;
- min-width: 32px;
+ min-height: rem(32px);
+ min-width: rem(32px);
padding: 0;
border-radius: 0;
}
button {
- min-height: 32px;
- min-width: 32px;
+ min-height: rem(32px);
+ min-width: rem(32px);
padding: 0;
&.up { @extend %top_button; }
@@ -1148,12 +1153,12 @@ spinbutton {
}
%top_button {
- border-radius: 3px 3px 0 0;
+ border-radius: rem(3px) rem(3px) 0 0;
border-style: solid solid none solid;
}
%bottom_button {
- border-radius: 0 0 3px 3px;
+ border-radius: 0 0 rem(3px) rem(3px);
border-style: none solid solid solid;
}
}
@@ -1179,7 +1184,7 @@ spinbutton {
entry {
min-height: 0;
- padding: 1px 2px;
+ padding: rem(1px) rem(2px);
}
}
}
@@ -1191,8 +1196,8 @@ spinbutton {
combobox {
arrow {
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
- min-height: 16px;
- min-width: 16px;
+ min-height: rem(16px);
+ min-width: rem(16px);
}
&.linked {
@@ -1233,23 +1238,23 @@ combobox {
************/
%toolbar {
-GtkWidget-window-dragging: true;
- padding: 4px;
+ padding: rem(4px);
background-color: $bg_color;
}
toolbar {
@extend %toolbar;
- padding: 4px 3px 3px 4px;
+ padding: rem(4px) rem(3px) rem(3px) rem(4px);
// on OSD
.osd & { background-color: transparent; }
// stand-alone OSD toolbars
&.osd {
- padding: 13px;
+ padding: rem(13px);
border: none;
- border-radius: 5px;
+ border-radius: rem(5px);
background-color: $osd_bg_color;
&.left,
@@ -1259,8 +1264,8 @@ toolbar {
}
// toolbar separators
- &.horizontal separator { margin: 0 7px 1px 6px; }
- &.vertical separator { margin: 6px 1px 7px 0; }
+ &.horizontal separator { margin: 0 rem(7px) 1px rem(6px); }
+ &.vertical separator { margin: rem(6px) 1px rem(7px) 0; } // CHECKTHIS
&:not(.inline-toolbar):not(.osd) {
switch,
@@ -1268,21 +1273,36 @@ toolbar {
entry,
spinbutton,
button {
- margin-right: 1px;
- margin-bottom: 1px;
+ margin-right: rem(1px);
+ margin-bottom: rem(1px);
}
}
}
//searchbar, location-bar & inline-toolbar
+%darkbar {
+ border-style: solid;
+ border-color: $borders_color;
+ $_bg: mix($bg_color, $borders_color, 70%);
+ background-color: $_bg;
+
+ &:backdrop {
+ border-color: $backdrop_borders_color;
+ background-color: $backdrop_dark_fill;
+ box-shadow: none;
+ transition: $backdrop_transition;
+ }
+}
+
.inline-toolbar {
@extend %toolbar;
@extend %darkbar;
- padding: 3px;
- border-width: 0 1px 1px;
- border-radius: 0 0 5px 5px;
+ padding: rem(3px);
+ border-width: 1px;
+ border-style: none solid solid;
+ border-radius: 0 0 rem(5px) rem(5px);
}
searchbar,
@@ -1291,22 +1311,8 @@ searchbar,
@extend %darkbar;
- border-width: 0 0 1px;
- padding: 3px;
-}
-
-%darkbar {
- border-style: solid;
- border-color: $borders_color;
- $_bg: mix($bg_color, $borders_color, 70%);
- background-color: $_bg;
-
- &:backdrop {
- border-color: $backdrop_borders_color;
- background-color: $backdrop_dark_fill;
- box-shadow: none;
- transition: $backdrop_transition;
- }
+ border-style: none none solid;
+ padding: rem(3px);
}
@@ -1315,8 +1321,8 @@ searchbar,
***************/
%titlebar,
headerbar {
- padding: 0 6px;
- min-height: 46px;
+ padding: 0 rem(6px);
+ min-height: rem(46px);
border-width: 0 0 1px;
border-style: solid;
border-color: $borders_color;
@@ -1335,14 +1341,14 @@ headerbar {
.title {
font-weight: bold;
- padding-left: 12px;
- padding-right: 12px;
+ padding-left: rem(12px);
+ padding-right: rem(12px);
}
.subtitle {
font-size: smaller;
- padding-left: 12px;
- padding-right: 12px;
+ padding-left: rem(12px);
+ padding-right: rem(12px);
@extend .dim-label;
}
@@ -1453,8 +1459,8 @@ headerbar {
border-color: transparentize($selected_bg_color, 1);
background-image: linear-gradient(to bottom, transparentize($selected_bg_color, 1));
box-shadow: none;
- padding-left: 10px;
- padding-right: 10px;
+ padding-left: rem(10px);
+ padding-right: rem(10px);
GtkArrow { -GtkArrow-arrow-scaling: 1; }
@@ -1471,12 +1477,12 @@ headerbar {
.maximized & { &:backdrop, & { border-radius: 0; }} // squared corners when the window is maximized or
tiled
&.default-decoration {
- padding: 4px;
- min-height: 28px;
+ padding: rem(4px);
+ min-height: rem(28px);
button.titlebutton {
- min-height: 26px;
- min-width: 26px;
+ min-height: rem(26px);
+ min-width: rem(26px);
margin: 0;
padding: 0;
}
@@ -1489,23 +1495,23 @@ headerbar {
spinbutton,
separator,
button {
- margin-top: 6px;
- margin-bottom: 6px;
+ margin-top: rem(6px);
+ margin-bottom: rem(6px);
}
}
.titlebar {
&, &:backdrop {
- border-top-left-radius: 7px;
- border-top-right-radius: 7px;
+ border-top-left-radius: rem(7px);
+ border-top-right-radius: rem(7px);
}
}
headerbar {
separator:first-child + &, // tackles the paned container case
- &:first-child { &, &:backdrop { border-top-left-radius: 7px; }}
+ &:first-child { &, &:backdrop { border-top-left-radius: rem(7px); }}
- &:last-child { &, &:backdrop { border-top-right-radius: 7px; }}
+ &:last-child { &, &:backdrop { border-top-right-radius: rem(7px); }}
}
.titlebar:not(headerbar) {
@@ -1530,8 +1536,8 @@ headerbar {
************/
.path-bar button {
&.text-button, &.image-button, & {
- padding-left: 4px;
- padding-right: 4px;
+ padding-left: rem(4px);
+ padding-right: rem(4px);
}
&.text-button.image-button label {
@@ -1540,13 +1546,13 @@ headerbar {
}
&.text-button.image-button, & {
- label:last-child { padding-right: 8px; }
- label:first-child { padding-left: 8px; }
+ label:last-child { padding-right: rem(8px); }
+ label:first-child { padding-left: rem(8px); }
}
image {
- padding-left: 4px;
- padding-right: 4px;
+ padding-left: rem(4px);
+ padding-right: rem(4px);
}
&.slider-button {
@@ -1790,14 +1796,14 @@ treeview.view {
menubar,
.menubar {
-GtkWidget-window-dragging: true;
- padding: 0px;
+ padding: 0;
box-shadow: inset 0 -1px transparentize(black, 0.9);
&:backdrop { background-color: $backdrop_bg_color; }
> menuitem {
- min-height: 16px;
- padding: 4px 8px;
+ min-height: rem(16px);
+ padding: rem(4px) rem(8px);
&:hover { //Seems like it :hover even with keyboard focus
box-shadow: inset 0 -3px $selected_bg_color;
@@ -1813,8 +1819,8 @@ menubar,
menu,
.menu {
- margin: 4px;
- padding: 2px 0px;
+ margin: rem(4px);
+ padding: rem(2px) 0;
background-color: $menu_color;
border: 1px solid $borders_color; // adds borders in a non composited env
@@ -1823,9 +1829,9 @@ menu,
&:backdrop { background-color: $backdrop_menu_color; }
menuitem {
- min-height: 16px;
- min-width: 40px;
- padding: 4px 6px;
+ min-height: rem(16px);
+ min-width: rem(40px);
+ padding: rem(4px) rem(6px);
text-shadow: none;
&:hover {
@@ -1846,17 +1852,17 @@ menu,
// submenu indicators
arrow {
- min-height: 16px;
- min-width: 16px;
+ min-height: rem(16px);
+ min-width: rem(16px);
&:dir(ltr) {
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
- margin-left: 10px;
+ margin-left: rem(10px);
}
&:dir(rtl) {
-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl');
- margin-right: 10px;
+ margin-right: rem(10px);
}
}
}
@@ -1865,20 +1871,20 @@ menu,
> arrow {
@include button(undecorated);
- min-height: 16px;
- min-width: 16px;
- padding: 4px;
+ min-height: rem(16px);
+ min-width: rem(16px);
+ padding: rem(4px);
background-color: $menu_color;
border-radius: 0;
&.top {
- margin-top: -6px;
+ margin-top: rem(-6px);
border-bottom: 1px solid mix($fg_color, $base_color, 10%);
-gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
}
&.bottom {
- margin-bottom: -6px;
+ margin-bottom: rem(-6px);
border-top: 1px solid mix($fg_color, $base_color, 10%);
-gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
}
@@ -1890,7 +1896,7 @@ menu,
&:disabled {
color: transparent;
background-color: transparent;
- border-color: transparent ;
+ border-color: transparent;
}
}
}
@@ -1900,11 +1906,11 @@ menuitem {
check,
radio {
- min-height: 16px;
- min-width: 16px;
+ min-height: rem(16px);
+ min-width: rem(16px); // CHECKTHIS
- &:dir(ltr) { margin-right: 7px; }
- &:dir(rtl) { margin-left: 7px; }
+ &:dir(ltr) { margin-right: rem(7px); }
+ &:dir(rtl) { margin-left: rem(7px); }
}
}
@@ -1913,8 +1919,8 @@ menuitem {
***************/
popover.background {
- padding: 2px;
- border-radius: 5px;
+ padding: rem(2px);
+ border-radius: rem(5px);
background-color: $popover_bg_color;
&, .csd & { border: 1px solid $borders_color; }
@@ -1946,7 +1952,7 @@ popover.background {
&.osd { @extend %osd; }
}
- separator { margin: 3px; }
+ separator { margin: rem(3px); }
list separator { margin: 0px; }
@@ -1959,7 +1965,7 @@ popover.background {
*************/
notebook {
> header {
- padding: 1px;
+ padding: rem(1px);
border-color: $borders_color;
border-width: 1px;
background-color: $dark_fill;
@@ -1974,13 +1980,13 @@ notebook {
&.top {
border-bottom-style: solid;
> tabs {
- margin-bottom: -2px;
+ margin-bottom: calc(#{rem(-1px)} - 1px);
> tab {
- &:hover { box-shadow: inset 0 -3px $borders_color; }
+ &:hover { box-shadow: inset 0 rem(-3px) $borders_color; }
&:backdrop { box-shadow: none; }
- &:checked { box-shadow: inset 0 -3px $selected_bg_color; }
+ &:checked { box-shadow: inset 0 rem(-3px) $selected_bg_color; }
}
}
}
@@ -1988,13 +1994,13 @@ notebook {
&.bottom {
border-top-style: solid;
> tabs {
- margin-top: -2px;
+ margin-top: calc(#{rem(-1px)} - 1px);
> tab {
- &:hover { box-shadow: inset 0 3px $borders_color; }
+ &:hover { box-shadow: inset 0 rem(3px) $borders_color; }
&:backdrop { box-shadow: none; }
- &:checked { box-shadow: inset 0 3px $selected_bg_color; }
+ &:checked { box-shadow: inset 0 rem(3px) $selected_bg_color; }
}
}
}
@@ -2002,13 +2008,13 @@ notebook {
&.left {
border-right-style: solid;
> tabs {
- margin-right: -2px;
+ margin-right: calc(#{rem(-1px)} - 1px);
> tab {
- &:hover { box-shadow: inset -3px 0 $borders_color; }
+ &:hover { box-shadow: inset rem(-3px) 0 $borders_color; }
&:backdrop { box-shadow: none; }
- &:checked { box-shadow: inset -3px 0 $selected_bg_color; }
+ &:checked { box-shadow: inset rem(-3px) 0 $selected_bg_color; }
}
}
}
@@ -2016,13 +2022,13 @@ notebook {
&.right {
border-left-style: solid;
> tabs {
- margin-left: -2px;
+ margin-left: calc(#{rem(-1px)} - 1px);
> tab {
- &:hover { box-shadow: inset 3px 0 $borders_color; }
+ &:hover { box-shadow: inset rem(3px) 0 $borders_color; }
&:backdrop { box-shadow: none; }
- &:checked { box-shadow: inset 3px 0 $selected_bg_color; }
+ &:checked { box-shadow: inset rem(3px) 0 $selected_bg_color; }
}
}
}
@@ -2040,8 +2046,8 @@ notebook {
}
@at-root %notebook_vert_arrows {
- margin-left: -5px;
- margin-right: -5px;
+ margin-left: calc(#{rem(-4px)} - 1px);
+ margin-right: calc(#{rem(-4px)} - 1px);
padding-left: 4px;
padding-right: 4px;
@@ -2063,10 +2069,10 @@ notebook {
}
@at-root %notebook_horz_arrows {
- margin-top: -5px;
- margin-bottom: -5px;
- padding-top: 4px;
- padding-bottom: 4px;
+ margin-top: calc(#{rem(-4px)} - 1px);
+ margin-bottom: calc(#{rem(-4px)} - 1px);
+ padding-top: rem(4px);
+ padding-bottom: rem(4px);
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
@@ -2078,8 +2084,8 @@ notebook {
@extend %button_basic.flat;
- min-height: 16px;
- min-width: 16px;
+ min-height: rem(16px);
+ min-width: rem(16px);
border-radius: 0;
&:hover:not(:active):not(:backdrop) {
@@ -2094,11 +2100,11 @@ notebook {
}
tab {
- min-height: 30px;
- min-width: 30px;
- padding: 3px 12px;
+ min-height: rem(30px);
+ min-width: rem(30px);
+ padding: rem(3px) rem(12px);
- outline-offset: -5px;
+ outline-offset: rem(-5px);
color: $insensitive_fg_color;
font-weight: bold;
@@ -2150,20 +2156,20 @@ notebook {
&, &:backdrop { color: gtkalpha(currentColor, 0.3); }
padding: 0;
- margin-top: 4px;
- margin-bottom: 4px;
+ margin-top: rem(4px);
+ margin-bottom: rem(4px);
// FIXME: generalize .small-button?
- min-width: 20px;
- min-height: 20px;
+ min-width: rem(20px);
+ min-height: rem(20px);
&:last-child {
- margin-left: 4px;
- margin-right: -4px;
+ margin-left: rem(4px);
+ margin-right: rem(-4px);
}
&:first-child {
- margin-left: -4px;
- margin-right: 4px;
+ margin-left: rem(-4px);
+ margin-right: rem(4px);
}
}
}
@@ -2171,20 +2177,20 @@ notebook {
&.top,
&.bottom {
tabs {
- padding-left: 4px;
- padding-right: 4px;
+ padding-left: rem(4px);
+ padding-right: rem(4px);
&:not(:only-child) {
- margin-left: 3px;
- margin-right: 3px;
+ margin-left: calc(#{rem(4px)} - 1px); // CHECKTHIS
+ margin-right: calc(#{rem(4px)} - 1px);
&:first-child { margin-left: -1px; }
&:last-child { margin-right: -1px; }
}
tab {
- margin-left: 4px;
- margin-right: 4px;
+ margin-left: rem(4px);
+ margin-right: rem(4px);
&.reorderable-page { border-style: none solid; }
}
@@ -2194,28 +2200,28 @@ notebook {
&.left,
&.right {
tabs {
- padding-top: 4px;
- padding-bottom: 4px;
+ padding-top: rem(4px);
+ padding-bottom: rem(4px);
&:not(:only-child) {
- margin-top: 3px;
- margin-bottom: 3px;
+ margin-top: calc(#{rem(4px)} - 1px);
+ margin-bottom: calc(#{rem(4px)} - 1px);
&:first-child { margin-top: -1px; }
&:last-child { margin-bottom: -1px; }
}
tab {
- margin-top: 4px;
- margin-bottom: 4px;
+ margin-top: rem(4px);
+ margin-bottom: rem(4px);
&.reorderable-page { border-style: solid none; }
}
}
}
- &.top tab { padding-bottom: 4px; }
- &.bottom tab { padding-top: 4px; }
+ &.top tab { padding-bottom: rem(4px); }
+ &.bottom tab { padding-top: rem(4px); }
}
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
@@ -2230,7 +2236,7 @@ notebook {
* Scrollbars *
**************/
scrollbar {
- $_slider_min_length: 40px;
+ $_slider_min_length: rem(40px);
// disable steppers
@at-root * {
@@ -2255,11 +2261,11 @@ scrollbar {
// slider
slider {
- min-width: 6px;
- min-height: 6px;
- margin: -1px;
- border: 4px solid transparent;
- border-radius: 8px;
+ min-width: rem(6px);
+ min-height: rem(6px);
+ margin: rem(-1px);
+ border: rem(4px) solid transparent;
+ border-radius: rem(8px);
background-clip: padding-box;
background-color: $scrollbar_slider_color;
@@ -2274,12 +2280,12 @@ scrollbar {
&.fine-tune {
slider {
- min-width: 4px;
- min-height: 4px;
+ min-width: rem(4px);
+ min-height: rem(4px);
}
- &.horizontal slider { border-width: 5px 4px; }
- &.vertical slider { border-width: 4px 5px; }
+ &.horizontal slider { border-width: rem(5px) rem(4px); }
+ &.vertical slider { border-width: rem(4px) rem(5px); }
}
&.overlay-indicator {
@@ -2290,15 +2296,15 @@ scrollbar {
slider {
margin: 0;
- min-width: 3px;
- min-height: 3px;
+ min-width: rem(3px);
+ min-height: rem(3px);
background-color: $fg_color;
border: 1px solid if($variant == 'light', white, black);
}
button {
- min-width: 5px;
- min-height: 5px;
+ min-width: rem(5px);
+ min-height: rem(5px);
background-color: $fg_color;
background-clip: padding-box;
border-radius: 100%;
@@ -2308,25 +2314,25 @@ scrollbar {
&.horizontal {
slider {
- margin: 0 2px;
+ margin: 0 rem(2px);
min-width: $_slider_min_length;
}
button {
- margin: 1px 2px;
- min-width: 5px;
+ margin: rem(1px) rem(2px);
+ min-width: rem(5px);
}
}
&.vertical {
slider {
- margin: 2px 0;
+ margin: rem(2px) 0;
min-height: $_slider_min_length;
}
button {
- margin: 2px 1px;
- min-height: 5px;
+ margin: rem(2px) rem(1px);
+ min-height: rem(5px);
}
}
}
@@ -2342,8 +2348,8 @@ scrollbar {
// button styling
button {
padding: 0;
- min-width: 12px;
- min-height: 12px;
+ min-width: rem(12px);
+ min-height: rem(12px);
border-style: none;
border-radius: 0;
transition-property: min-height, min-width, color;
@@ -2415,7 +2421,7 @@ switch {
// clipped
// similar to the .scale
border: 1px solid $borders_color;
- border-radius: 3px;
+ border-radius: rem(3px);
color: $fg_color;
background-image: linear-gradient(to bottom, mix($bg_color, $borders_color, 60%));
text-shadow: 0 1px transparentize(black, 0.9);
@@ -2465,10 +2471,10 @@ switch {
slider {
margin: -1px;
- min-width: 45px;
- min-height: 27px;
+ min-width: rem(45px);
+ min-height: rem(27px);
border: 1px solid;
- border-radius: 3px;
+ border-radius: rem(3px);
transition: $button_transition;
@include button(normal-alt, $edge: $shadow_color);
@@ -2534,23 +2540,23 @@ switch {
checkbutton.text-button, radiobutton.text-button {
// this is for a nice focus on check and radios text
- padding: 2px 0;
+ padding: rem(2px) 0;
outline-offset: 0;
label:not(:only-child) {
- &:first-child { margin-left: 4px; }
- &:last-child { margin-right: 4px; }
+ &:first-child { margin-left: rem(4px); }
+ &:last-child { margin-right: rem(4px); }
}
}
check,
radio {
- margin: 0 4px;
+ margin: 0 rem(4px);
&:only-child { margin: 0; }
- min-height: 14px;
- min-width: 14px;
+ min-height: rem(14px);
+ min-width: rem(14px);
border: 1px solid;
-gtk-icon-source: none;
@@ -2586,8 +2592,8 @@ radio {
margin: 0; // this is a workaround for a menu check/radio size allocation issue
&, &:hover, &:disabled { //FIXME use button reset mixin
- min-height: 14px;
- min-width: 14px;
+ min-height: rem(14px);
+ min-width: rem(14px);
background-image: none;
background-color: transparent;
box-shadow: none;
@@ -2601,7 +2607,7 @@ radio {
%check,
check {
- border-radius: 3px;
+ border-radius: rem(3px);
&:checked { -gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
@@ -3216,7 +3222,7 @@ progressbar {
* Level Bar *
*************/
levelbar {
- block {
+ &.horizontal block {
min-width: 32px;
min-height: 1px;
}
@@ -3328,7 +3334,7 @@ frame > border,
}
actionbar > revealer > box {
- padding: 6px;
+ padding: rem(6px);
border-top: 1px solid $borders_color;
&:backdrop { border-color: $backdrop_borders_color; }
@@ -3415,7 +3421,7 @@ list {
border-color: $backdrop_borders_color;
}
- row { padding: 2px; }
+ row { padding: rem(2px); }
}
row {
@@ -3455,8 +3461,8 @@ row {
.app-notification.frame {
@extend %osd;
- padding: 10px;
- border-radius: 0 0 5px 5px;
+ padding: rem(10px);
+ border-radius: 0 0 rem(5px) rem(5px);
background-color: $osd_bg_color;
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
transparent 2px);
@@ -3478,8 +3484,8 @@ row {
*************/
expander {
arrow {
- min-width: 16px;
- min-height: 16px;
+ min-width: rem(16px);
+ min-height: rem(16px);
-gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
&:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
@@ -3501,7 +3507,7 @@ calendar {
&:selected {
@extend %selected_items;
- border-radius: 3px;
+ border-radius: rem(3px);
}
&.header {
@@ -3557,23 +3563,23 @@ calendar {
***********/
messagedialog { // Message Dialog styling
.titlebar {
- min-height: 20px;
+ min-height: rem(20px);
background-image: none;
background-color: $bg_color;
border-style: none;
- border-top-left-radius: 7px;
- border-top-right-radius: 7px;
+ border-top-left-radius: rem(7px);
+ border-top-right-radius: rem(7px);
}
&.csd { // rounded bottom border styling for csd version
&.background {
// bigger radius for better antialiasing
- border-bottom-left-radius: 9px;
- border-bottom-right-radius: 9px;
+ border-bottom-left-radius: rem(9px);
+ border-bottom-right-radius: rem(9px);
}
.dialog-action-area button {
- padding: 10px 14px; // labels are not vertically centered on message dialog, this is a workaround
+ padding: rem(10px) rem(14px); // labels are not vertically centered on message dialog, this is a
workaround
border-radius: 0;
border-left-style: solid;
border-right-style: none;
@@ -3581,13 +3587,13 @@ messagedialog { // Message Dialog styling
&:first-child{
border-left-style: none;
- border-bottom-left-radius: 7px;
- -gtk-outline-bottom-left-radius: 5px;
+ border-bottom-left-radius: rem(7px);
+ -gtk-outline-bottom-left-radius: rem(5px);
}
&:last-child {
- border-bottom-right-radius: 7px;
- -gtk-outline-bottom-right-radius: 5px;
+ border-bottom-right-radius: rem(7px);
+ -gtk-outline-bottom-right-radius: rem(5px);
}
}
}
@@ -3653,17 +3659,17 @@ stacksidebar {
}
row {
- padding: 10px 4px;
+ padding: rem(10px) rem(4px);
> label {
- padding-left: 6px;
- padding-right: 6px;
+ padding-left: rem(6px);
+ padding-right: rem(6px);
}
&.needs-attention > label {
@extend %needs_attention;
- background-size: 6px 6px, 0 0;
+ background-size: rem(6px) rem(6px), 0 0;
}
}
}
@@ -3679,12 +3685,12 @@ placessidebar {
row {
// Needs overriding of the GtkListBoxRow padding
- min-height: 36px;
+ min-height: rem(36px);
padding: 0px;
// Using margins/padding directly in the SidebarRow
// will make the animation of the new bookmark row jump
- > revealer { padding: 0 14px; }
+ > revealer { padding: 0 rem(14px); }
&:selected { color: $selected_fg_color; }
@@ -3701,13 +3707,13 @@ placessidebar {
image.sidebar-icon {
opacity: $_placesidebar_icons_opacity; // dim the device icons
- &:dir(ltr) { padding-right: 8px; }
- &:dir(rtl) { padding-left: 8px; }
+ &:dir(ltr) { padding-right: rem(8px); }
+ &:dir(rtl) { padding-left: rem(8px); }
}
label.sidebar-label {
- &:dir(ltr) { padding-right: 2px; }
- &:dir(rtl) { padding-left: 2px; }
+ &:dir(ltr) { padding-right: rem(2px); }
+ &:dir(rtl) { padding-left: rem(2px); }
}
@at-root button.sidebar-button {
@@ -3715,10 +3721,10 @@ placessidebar {
@extend %button_selected.flat;
- min-height: 26px;
- min-width: 26px;
- margin-top: 3px;
- margin-bottom: 3px;
+ min-height: rem(26px);
+ min-width: rem(26px);
+ margin-top: rem(3px);
+ margin-bottom: rem(3px);
padding: 0;
border-radius: 100%;
-gtk-outline-radius: 100%;
@@ -3731,7 +3737,7 @@ placessidebar {
&:selected:active { box-shadow: none; }
&.sidebar-placeholder-row {
- padding: 0 8px;
+ padding: 0 rem(8px);
min-height: 2px;
background-image: image($drop_target_color);
background-clip: content-box;
@@ -3767,8 +3773,8 @@ placesview {
// this selects the "connect to server" label
> actionbar > revealer > box > label {
- padding-left: 8px;
- padding-right: 8px;
+ padding-left: rem(8px);
+ padding-right: rem(8px);
}
}
@@ -3792,8 +3798,8 @@ paned {
&:backdrop { background-image: image($backdrop_borders_color); }
&.wide {
- min-width: 5px;
- min-height: 5px;
+ min-width: rem(5px);
+ min-height: rem(5px);
background-color: $bg_color;
background-image: image($borders_color), image($borders_color);
background-size: 1px 1px, 1px 1px;
@@ -3810,13 +3816,13 @@ paned {
background-repeat: repeat-y;
&:dir(ltr) {
- margin: 0 -8px 0 0;
- padding: 0 8px 0 0;
+ margin: 0 rem(-8px) 0 0;
+ padding: 0 rem(8px) 0 0;
background-position: left;
}
&:dir(rtl) {
- margin: 0 0 0 -8px;
- padding: 0 0 0 8px;
+ margin: 0 0 0 rem(-8px);
+ padding: 0 0 0 rem(8px);
background-position: right;
}
@@ -3829,8 +3835,8 @@ paned {
}
&.vertical > separator {
- margin: 0 0 -8px 0;
- padding: 0 0 8px 0;
+ margin: 0 0 rem(-8px) 0;
+ padding: 0 0 rem(8px) 0;
background-repeat: repeat-x;
background-position: top;
@@ -3901,8 +3907,8 @@ tooltip {
// very dark backgrounds
}
- padding: 4px; /* not working */
- border-radius: 5px;
+ padding: rem(4px); // not working
+ border-radius: rem(5px);
box-shadow: none; // otherwise it gets inherited by windowframe.csd
text-shadow: 0 1px black;
@@ -3910,7 +3916,7 @@ tooltip {
decoration { background-color: transparent; }
* { // Yeah this is ugly
- padding: 4px;
+ padding: rem(4px);
background-color: transparent;
color: white;
}
@@ -4076,14 +4082,14 @@ colorchooser .popover.osd { border-radius: 5px; }
.osd & button.flat { //FIXME: quick hack, redo properly
border-style: none;
- border-radius: 5px;
+ border-radius: rem(5px);
}
button { // +/- buttons on GtkVolumeButton popup
&:hover {
@extend %undecorated_button;
background-color: transparentize($fg_color,0.9);
- border-radius: 5px;
+ border-radius: rem(5px);
}
&:backdrop { &:hover, &:disabled, & { extend %undecorated_button; }}
@@ -4283,7 +4289,7 @@ stackswitcher button.text-button { min-width: 100px; } // FIXME aggregate with b
stackswitcher button.circular,
stackswitcher button.text-button.circular { // FIXME aggregate with buttons
- min-width: 32px;
- min-height: 32px;
+ min-width: rem(32px);
+ min-height: rem(32px);
padding: 0;
}
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 4ca5eb1..4d72d9f 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -12,9 +12,9 @@
-GtkDialog-action-area-border: 0;
outline-color: rgba(238, 238, 236, 0.3);
outline-style: dashed;
- outline-offset: -3px;
+ outline-offset: -0.21429rem;
outline-width: 1px;
- -gtk-outline-radius: 2px; }
+ -gtk-outline-radius: 0.14286rem; }
/***************
* Base States *
@@ -72,7 +72,7 @@ textview text {
.view text:selected,
iconview text:selected,
textview text:selected {
- border-radius: 3px; }
+ border-radius: 0.21429rem; }
.rubberband,
rubberband,
@@ -83,10 +83,10 @@ treeview.view rubberband,
background-color: rgba(24, 68, 114, 0.2); }
flowbox flowboxchild {
- padding: 3px;
- border-radius: 3px; }
+ padding: 0.21429rem;
+ border-radius: 0.21429rem; }
flowbox flowboxchild:selected {
- outline-offset: -2px; }
+ outline-offset: -0.14286rem; }
label.separator {
color: #eeeeec; }
@@ -116,7 +116,7 @@ assistant .sidebar {
assistant.csd .sidebar {
border-top-style: none; }
assistant .sidebar label {
- padding: 6px 12px; }
+ padding: 0.42857rem 0.85714rem; }
assistant .sidebar label.highlight {
background-color: #5d6262; }
@@ -159,11 +159,11 @@ spinner {
****************/
spinbutton:not(.vertical),
entry {
- min-height: 32px;
- padding-left: 8px;
- padding-right: 8px;
+ min-height: 2.28571rem;
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem;
border: 1px solid;
- border-radius: 3px;
+ border-radius: 0.21429rem;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: white;
border-color: #1c1f1f;
@@ -172,10 +172,10 @@ entry {
spinbutton:not(.vertical) image.left,
entry image.left {
padding-left: 0;
- padding-right: 6px; }
+ padding-right: 0.42857rem; }
spinbutton:not(.vertical) image.right,
entry image.right {
- padding-left: 6px;
+ padding-left: 0.42857rem;
padding-right: 0; }
spinbutton:not(.vertical) undershoot.left,
entry undershoot.left {
@@ -203,7 +203,7 @@ entry {
entry.flat:focus,
entry.flat {
min-height: 0;
- padding: 2px;
+ padding: 0.14286rem;
background-image: none;
border-color: transparent;
border-radius: 0; }
@@ -309,11 +309,11 @@ entry {
-gtk-icon-shadow: none; }
spinbutton:not(.vertical) progress,
entry progress {
- margin: 2px -6px;
+ margin: 0.14286rem -0.42857rem;
background-color: transparent;
background-image: none;
border-radius: 0;
- border-width: 0 0 2px;
+ border-width: 0 0 0.14286rem;
border-color: #215d9c;
border-style: solid;
box-shadow: none; }
@@ -404,11 +404,11 @@ treeview entry.flat, treeview entry {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c),
to(transparent)); } }
notebook > header > tabs > arrow, button.titlebutton,
button {
- min-height: 24px;
- min-width: 16px;
- padding: 4px 8px;
+ min-height: 1.71429rem;
+ min-width: 1.14286rem;
+ padding: 0.28571rem 0.57143rem;
border: 1px solid;
- border-radius: 3px;
+ border-radius: 0.21429rem;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
@@ -551,21 +551,21 @@ button {
color: #949796; }
notebook > header > tabs > arrow.image-button, button.image-button.titlebutton,
button.image-button {
- min-width: 24px;
- padding-left: 4px;
- padding-right: 4px; }
+ min-width: 1.71429rem;
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
notebook > header > tabs > arrow.text-button, button.text-button.titlebutton,
button.text-button {
- padding-left: 16px;
- padding-right: 16px; }
+ padding-left: 1.14286rem;
+ padding-right: 1.14286rem; }
notebook > header > tabs > arrow.text-button.image-button, button.text-button.image-button.titlebutton,
button.text-button.image-button {
- padding-left: 8px;
- padding-right: 8px; }
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem; }
notebook > header > tabs > arrow.text-button.image-button label,
button.text-button.image-button.titlebutton label,
button.text-button.image-button label {
- padding-left: 8px;
- padding-right: 8px; }
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem; }
combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active),
button.titlebutton:drop(active),
button:drop(active) {
color: #4e9a06;
@@ -579,10 +579,10 @@ button.flat:not(:active):not(:checked):not(:hover):not(disabled) {
button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
color: #949796; }
button.osd {
- min-width: 24px;
- min-height: 32px;
+ min-width: 1.71429rem;
+ min-height: 2.28571rem;
color: #eeeeec;
- border-radius: 5px;
+ border-radius: 0.35714rem;
outline-color: rgba(238, 238, 236, 0.3);
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
@@ -595,7 +595,7 @@ button.osd {
border: none;
box-shadow: none; }
button.osd.image-button {
- min-width: 32px; }
+ min-width: 2.28571rem; }
button.osd:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
@@ -1087,25 +1087,25 @@ button.destructive-action {
-gtk-icon-shadow: none; }
.stack-switcher >
button {
- outline-offset: -3px; }
+ outline-offset: -0.21429rem; }
.stack-switcher >
button > label {
- padding-left: 6px;
- padding-right: 6px; }
+ padding-left: 0.42857rem;
+ padding-right: 0.42857rem; }
.stack-switcher >
button > image {
- padding-left: 6px;
- padding-right: 6px;
- padding-top: 3px;
- padding-bottom: 3px; }
+ padding-left: 0.42857rem;
+ padding-right: 0.42857rem;
+ padding-top: 0.21429rem;
+ padding-bottom: 0.21429rem; }
.stack-switcher >
button.text-button {
- padding-left: 10px;
- padding-right: 10px; }
+ padding-left: 0.71429rem;
+ padding-right: 0.71429rem; }
.stack-switcher >
button.image-button {
- padding-left: 2px;
- padding-right: 2px; }
+ padding-left: 0.14286rem;
+ padding-right: 0.14286rem; }
.stack-switcher >
button.needs-attention:active > label,
.stack-switcher >
@@ -1118,8 +1118,8 @@ button {
.inline-toolbar
button, .inline-toolbar
button:backdrop {
- border-radius: 2px;
- border-width: 1px; }
+ border-radius: 0.14286rem;
+ border-width: 0.07143rem; }
.primary-toolbar
button {
-gtk-icon-shadow: none; }
@@ -1130,19 +1130,19 @@ button.needs-attention > label,
button.needs-attention > image, stacksidebar row.needs-attention > label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)),
to(transparent));
- background-size: 6px 6px, 6px 6px;
+ background-size: 0.42857rem 0.42857rem, 0.42857rem 0.42857rem;
background-repeat: no-repeat;
- background-position: right 3px, right 2px; }
+ background-position: right 0.21429rem, right 0.14286rem; }
.stack-switcher >
button.needs-attention > label:backdrop,
.stack-switcher >
button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop {
- background-size: 6px 6px, 0 0; }
+ background-size: 0.42857rem 0.42857rem, 0 0; }
.stack-switcher >
button.needs-attention > label:dir(rtl),
.stack-switcher >
button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) {
- background-position: left 3px, left 2px; }
+ background-position: left 0.21429rem, left 0.14286rem; }
.inline-toolbar toolbutton > button {
color: #eeeeec;
@@ -1229,22 +1229,22 @@ entry:first-child, .inline-toolbar
button:first-child, .linked >
button:first-child, toolbar.inline-toolbar toolbutton:first-child > button.flat,
toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, combobox.linked
button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px; }
+ border-top-left-radius: 0.21429rem;
+ border-bottom-left-radius: 0.21429rem; }
.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) >
entry:last-child, .inline-toolbar
button:last-child, .linked >
button:last-child, toolbar.inline-toolbar toolbutton:last-child > button.flat,
toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked
button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
+ border-top-right-radius: 0.21429rem;
+ border-bottom-right-radius: 0.21429rem;
border-right-style: solid; }
.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) >
entry:only-child, .inline-toolbar
button:only-child, .linked >
button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat,
toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) >
combobox:only-child > box > button.combo {
- border-radius: 3px;
+ border-radius: 0.21429rem;
border-style: solid; }
.linked.vertical > spinbutton:not(.vertical), .linked.vertical >
@@ -1260,18 +1260,18 @@ button:backdrop, .linked.vertical > combobox > box > button.combo {
.linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical >
entry:first-child, .linked.vertical >
button:first-child, .linked.vertical > combobox:first-child > box > button.combo {
- border-top-left-radius: 3px;
- border-top-right-radius: 3px; }
+ border-top-left-radius: 0.21429rem;
+ border-top-right-radius: 0.21429rem; }
.linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical >
entry:last-child, .linked.vertical >
button:last-child, .linked.vertical > combobox:last-child > box > button.combo {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 0.21429rem;
+ border-bottom-right-radius: 0.21429rem;
border-style: solid; }
.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical >
entry:only-child, .linked.vertical >
button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
- border-radius: 3px;
+ border-radius: 0.21429rem;
border-style: solid; }
modelbutton.flat, popover.background checkbutton,
@@ -1296,11 +1296,11 @@ button:visited:checked, calendar.button, calendar.button:hover, calendar.button:
modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
.menuitem.button.flat {
- min-height: 26px;
- padding-left: 5px;
- padding-right: 5px;
- border-radius: 3px;
- outline-offset: -2px; }
+ min-height: 1.85714rem;
+ padding-left: 0.35714rem;
+ padding-right: 0.35714rem;
+ border-radius: 0.21429rem;
+ outline-offset: -0.14286rem; }
modelbutton.flat:hover, popover.background checkbutton:hover,
popover.background radiobutton:hover,
.menuitem.button.flat:hover {
@@ -1312,7 +1312,7 @@ popover.background radiobutton,
popover.background radiobutton radio:last-child,
.menuitem.button.flat check:last-child,
.menuitem.button.flat radio:last-child {
- margin-left: 8px; }
+ margin-left: 0.57143rem; }
modelbutton.flat check:first-child, popover.background checkbutton check:first-child,
popover.background radiobutton check:first-child,
modelbutton.flat radio:first-child,
@@ -1320,7 +1320,7 @@ popover.background radiobutton,
popover.background radiobutton radio:first-child,
.menuitem.button.flat check:first-child,
.menuitem.button.flat radio:first-child {
- margin-right: 8px; }
+ margin-right: 0.57143rem; }
modelbutton.flat arrow, popover.background checkbutton arrow,
popover.background radiobutton arrow {
@@ -1336,7 +1336,7 @@ popover.background radiobutton arrow {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
button.color {
- padding: 4px; }
+ padding: 0.28571rem; }
button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
border-radius: 0; }
@@ -1404,7 +1404,7 @@ button:visited {
spinbutton:not(.vertical) {
padding: 0; }
spinbutton:not(.vertical) entry {
- min-width: 28px;
+ min-width: 2rem;
margin: 0;
background: none;
background-color: transparent;
@@ -1412,7 +1412,7 @@ spinbutton:not(.vertical) {
border-radius: 0;
box-shadow: none; }
spinbutton:not(.vertical) button {
- min-height: 16px;
+ min-height: 1.14286rem;
margin: 0;
padding-bottom: 0;
padding-top: 0;
@@ -1431,7 +1431,7 @@ spinbutton:not(.vertical) {
color: rgba(148, 151, 150, 0.3); }
spinbutton:not(.vertical) button:active {
background-color: rgba(0, 0, 0, 0.1);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
+ box-shadow: inset 0 0.14286rem 0.21429rem -0.07143rem rgba(0, 0, 0, 0.2); }
spinbutton:not(.vertical) button:backdrop {
color: #8a8c8b;
background-color: transparent;
@@ -1493,9 +1493,9 @@ spinbutton:not(.vertical) {
-gtk-icon-shadow: none;
box-shadow: none; }
.osd spinbutton:not(.vertical) button:last-child {
- border-radius: 0 3px 3px 0; }
+ border-radius: 0 0.21429rem 0.21429rem 0; }
.osd spinbutton:not(.vertical) button:dir(rtl):first-child {
- border-radius: 3px 0 0 3px; }
+ border-radius: 0.21429rem 0 0 0.21429rem; }
spinbutton.vertical:disabled {
color: #949796; }
spinbutton.vertical:backdrop:disabled {
@@ -1504,19 +1504,19 @@ spinbutton.vertical:drop(active) {
border-color: transparent;
box-shadow: none; }
spinbutton.vertical entry {
- min-height: 32px;
- min-width: 32px;
+ min-height: 2.28571rem;
+ min-width: 2.28571rem;
padding: 0;
border-radius: 0; }
spinbutton.vertical button {
- min-height: 32px;
- min-width: 32px;
+ min-height: 2.28571rem;
+ min-width: 2.28571rem;
padding: 0; }
spinbutton.vertical button.up {
- border-radius: 3px 3px 0 0;
+ border-radius: 0.21429rem 0.21429rem 0 0;
border-style: solid solid none solid; }
spinbutton.vertical button.down {
- border-radius: 0 0 3px 3px;
+ border-radius: 0 0 0.21429rem 0.21429rem;
border-style: none solid solid solid; }
.osd spinbutton.vertical button:first-child {
color: #eeeeec;
@@ -1567,15 +1567,15 @@ treeview spinbutton:not(.vertical) {
border-radius: 0; }
treeview spinbutton:not(.vertical) entry {
min-height: 0;
- padding: 1px 2px; }
+ padding: 0.07143rem 0.14286rem; }
/**************
* ComboBoxes *
**************/
combobox arrow {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
- min-height: 16px;
- min-width: 16px; }
+ min-height: 1.14286rem;
+ min-width: 1.14286rem; }
combobox:drop(active) {
box-shadow: none; }
@@ -1585,41 +1585,31 @@ combobox:drop(active) {
toolbar, .inline-toolbar, searchbar,
.location-bar {
-GtkWidget-window-dragging: true;
- padding: 4px;
+ padding: 0.28571rem;
background-color: #393f3f; }
toolbar {
- padding: 4px 3px 3px 4px; }
+ padding: 0.28571rem 0.21429rem 0.21429rem 0.28571rem; }
.osd toolbar {
background-color: transparent; }
toolbar.osd {
- padding: 13px;
+ padding: 0.92857rem;
border: none;
- border-radius: 5px;
+ border-radius: 0.35714rem;
background-color: rgba(32, 37, 38, 0.8); }
toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom {
border-radius: 0; }
toolbar.horizontal separator {
- margin: 0 7px 1px 6px; }
+ margin: 0 0.5rem 1px 0.42857rem; }
toolbar.vertical separator {
- margin: 6px 1px 7px 0; }
+ margin: 0.42857rem 1px 0.5rem 0; }
toolbar:not(.inline-toolbar):not(.osd) switch,
toolbar:not(.inline-toolbar):not(.osd) scale,
toolbar:not(.inline-toolbar):not(.osd) entry,
toolbar:not(.inline-toolbar):not(.osd) spinbutton,
toolbar:not(.inline-toolbar):not(.osd) button {
- margin-right: 1px;
- margin-bottom: 1px; }
-
-.inline-toolbar {
- padding: 3px;
- border-width: 0 1px 1px;
- border-radius: 0 0 5px 5px; }
-
-searchbar,
-.location-bar {
- border-width: 0 0 1px;
- padding: 3px; }
+ margin-right: 0.07143rem;
+ margin-bottom: 0.07143rem; }
.inline-toolbar, searchbar,
.location-bar {
@@ -1633,13 +1623,24 @@ searchbar,
box-shadow: none;
transition: 200ms ease-out; }
+.inline-toolbar {
+ padding: 0.21429rem;
+ border-width: 1px;
+ border-style: none solid solid;
+ border-radius: 0 0 0.35714rem 0.35714rem; }
+
+searchbar,
+.location-bar {
+ border-style: none none solid;
+ padding: 0.21429rem; }
+
/***************
* Header bars *
***************/
.titlebar:not(headerbar),
headerbar {
- padding: 0 6px;
- min-height: 46px;
+ padding: 0 0.42857rem;
+ min-height: 3.28571rem;
border-width: 0 0 1px;
border-style: solid;
border-color: #1c1f1f;
@@ -1657,13 +1658,13 @@ headerbar {
.titlebar:not(headerbar) .title,
headerbar .title {
font-weight: bold;
- padding-left: 12px;
- padding-right: 12px; }
+ padding-left: 0.85714rem;
+ padding-right: 0.85714rem; }
.titlebar:not(headerbar) .subtitle,
headerbar .subtitle {
font-size: smaller;
- padding-left: 12px;
- padding-right: 12px; }
+ padding-left: 0.85714rem;
+ padding-right: 0.85714rem; }
.selection-mode.titlebar:not(headerbar),
headerbar.selection-mode {
color: #ffffff;
@@ -1883,8 +1884,8 @@ headerbar {
border-color: rgba(33, 93, 156, 0);
background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0));
box-shadow: none;
- padding-left: 10px;
- padding-right: 10px; }
+ padding-left: 0.71429rem;
+ padding-right: 0.71429rem; }
.selection-mode.titlebar:not(headerbar) .selection-menu:backdrop GtkArrow,
.selection-mode.titlebar:not(headerbar) .selection-menu GtkArrow,
headerbar.selection-mode .selection-menu:backdrop GtkArrow,
headerbar.selection-mode .selection-menu GtkArrow {
@@ -1903,12 +1904,12 @@ headerbar {
border-radius: 0; }
.default-decoration.titlebar:not(headerbar),
headerbar.default-decoration {
- padding: 4px;
- min-height: 28px; }
+ padding: 0.28571rem;
+ min-height: 2rem; }
.default-decoration.titlebar:not(headerbar) button.titlebutton,
headerbar.default-decoration button.titlebutton {
- min-height: 26px;
- min-width: 26px;
+ min-height: 1.85714rem;
+ min-width: 1.85714rem;
margin: 0;
padding: 0; }
@@ -1916,17 +1917,17 @@ headerbar entry,
headerbar spinbutton,
headerbar separator,
headerbar button {
- margin-top: 6px;
- margin-bottom: 6px; }
+ margin-top: 0.42857rem;
+ margin-bottom: 0.42857rem; }
.titlebar, .titlebar:backdrop {
- border-top-left-radius: 7px;
- border-top-right-radius: 7px; }
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem; }
separator:first-child + headerbar, separator:first-child + headerbar:backdrop, headerbar:first-child,
headerbar:first-child:backdrop {
- border-top-left-radius: 7px; }
+ border-top-left-radius: 0.5rem; }
headerbar:last-child, headerbar:last-child:backdrop {
- border-top-right-radius: 7px; }
+ border-top-right-radius: 0.5rem; }
window.csd > .titlebar:not(headerbar) {
padding: 0;
@@ -1942,18 +1943,18 @@ window.csd > .titlebar:not(headerbar) {
* Pathbars *
************/
.path-bar button.text-button, .path-bar button.image-button, .path-bar button {
- padding-left: 4px;
- padding-right: 4px; }
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
.path-bar button.text-button.image-button label {
padding-left: 0;
padding-right: 0; }
.path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child {
- padding-right: 8px; }
+ padding-right: 0.57143rem; }
.path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child {
- padding-left: 8px; }
+ padding-left: 0.57143rem; }
.path-bar button image {
- padding-left: 4px;
- padding-right: 4px; }
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
.path-bar button.slider-button {
padding-left: 0;
padding-right: 0; }
@@ -2094,15 +2095,15 @@ treeview.view header button, treeview.view header button:hover, treeview.view he
menubar,
.menubar {
-GtkWidget-window-dragging: true;
- padding: 0px;
+ padding: 0;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); }
menubar:backdrop,
.menubar:backdrop {
background-color: #393f3f; }
menubar > menuitem,
.menubar > menuitem {
- min-height: 16px;
- padding: 4px 8px; }
+ min-height: 1.14286rem;
+ padding: 0.28571rem 0.57143rem; }
menubar > menuitem:hover,
.menubar > menuitem:hover {
box-shadow: inset 0 -3px #215d9c;
@@ -2114,8 +2115,8 @@ menubar,
menu,
.menu {
- margin: 4px;
- padding: 2px 0px;
+ margin: 0.28571rem;
+ padding: 0.14286rem 0;
background-color: #2c2d2d;
border: 1px solid #1c1f1f; }
.csd menu, .csd
@@ -2126,9 +2127,9 @@ menu,
background-color: #2f3030; }
menu menuitem,
.menu menuitem {
- min-height: 16px;
- min-width: 40px;
- padding: 4px 6px;
+ min-height: 1.14286rem;
+ min-width: 2.85714rem;
+ padding: 0.28571rem 0.42857rem;
text-shadow: none; }
menu menuitem:hover,
.menu menuitem:hover {
@@ -2147,16 +2148,16 @@ menu,
background-color: transparent; }
menu menuitem arrow,
.menu menuitem arrow {
- min-height: 16px;
- min-width: 16px; }
+ min-height: 1.14286rem;
+ min-width: 1.14286rem; }
menu menuitem arrow:dir(ltr),
.menu menuitem arrow:dir(ltr) {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
- margin-left: 10px; }
+ margin-left: 0.71429rem; }
menu menuitem arrow:dir(rtl),
.menu menuitem arrow:dir(rtl) {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
- margin-right: 10px; }
+ margin-right: 0.71429rem; }
menu > arrow,
.menu > arrow {
border-color: transparent;
@@ -2165,19 +2166,19 @@ menu,
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none;
- min-height: 16px;
- min-width: 16px;
- padding: 4px;
+ min-height: 1.14286rem;
+ min-width: 1.14286rem;
+ padding: 0.28571rem;
background-color: #2c2d2d;
border-radius: 0; }
menu > arrow.top,
.menu > arrow.top {
- margin-top: -6px;
+ margin-top: -0.42857rem;
border-bottom: 1px solid #3d3d3d;
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
menu > arrow.bottom,
.menu > arrow.bottom {
- margin-bottom: -6px;
+ margin-bottom: -0.42857rem;
border-top: 1px solid #3d3d3d;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
menu > arrow:hover,
@@ -2196,21 +2197,21 @@ menuitem accelerator {
color: alpha(currentColor,0.55); }
menuitem check,
menuitem radio {
- min-height: 16px;
- min-width: 16px; }
+ min-height: 1.14286rem;
+ min-width: 1.14286rem; }
menuitem check:dir(ltr),
menuitem radio:dir(ltr) {
- margin-right: 7px; }
+ margin-right: 0.5rem; }
menuitem check:dir(rtl),
menuitem radio:dir(rtl) {
- margin-left: 7px; }
+ margin-left: 0.5rem; }
/***************
* Popovers *
***************/
popover.background {
- padding: 2px;
- border-radius: 5px;
+ padding: 0.14286rem;
+ border-radius: 0.35714rem;
background-color: #393f3f;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
popover.background, .csd popover.background {
@@ -2227,7 +2228,7 @@ popover.background {
popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection,
.csd popover.background.magnifier {
border: 1px solid rgba(255, 255, 255, 0.1); }
popover.background separator {
- margin: 3px; }
+ margin: 0.21429rem; }
popover.background list separator {
margin: 0px; }
@@ -2235,7 +2236,7 @@ popover.background {
* Notebooks *
*************/
notebook > header {
- padding: 1px;
+ padding: 0.07143rem;
border-color: #1c1f1f;
border-width: 1px;
background-color: #2f3434; }
@@ -2247,50 +2248,50 @@ notebook > header {
notebook > header.top {
border-bottom-style: solid; }
notebook > header.top > tabs {
- margin-bottom: -2px; }
+ margin-bottom: calc(-0.07143rem - 1px); }
notebook > header.top > tabs > tab:hover {
- box-shadow: inset 0 -3px #1c1f1f; }
+ box-shadow: inset 0 -0.21429rem #1c1f1f; }
notebook > header.top > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.top > tabs > tab:checked {
- box-shadow: inset 0 -3px #215d9c; }
+ box-shadow: inset 0 -0.21429rem #215d9c; }
notebook > header.bottom {
border-top-style: solid; }
notebook > header.bottom > tabs {
- margin-top: -2px; }
+ margin-top: calc(-0.07143rem - 1px); }
notebook > header.bottom > tabs > tab:hover {
- box-shadow: inset 0 3px #1c1f1f; }
+ box-shadow: inset 0 0.21429rem #1c1f1f; }
notebook > header.bottom > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.bottom > tabs > tab:checked {
- box-shadow: inset 0 3px #215d9c; }
+ box-shadow: inset 0 0.21429rem #215d9c; }
notebook > header.left {
border-right-style: solid; }
notebook > header.left > tabs {
- margin-right: -2px; }
+ margin-right: calc(-0.07143rem - 1px); }
notebook > header.left > tabs > tab:hover {
- box-shadow: inset -3px 0 #1c1f1f; }
+ box-shadow: inset -0.21429rem 0 #1c1f1f; }
notebook > header.left > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.left > tabs > tab:checked {
- box-shadow: inset -3px 0 #215d9c; }
+ box-shadow: inset -0.21429rem 0 #215d9c; }
notebook > header.right {
border-left-style: solid; }
notebook > header.right > tabs {
- margin-left: -2px; }
+ margin-left: calc(-0.07143rem - 1px); }
notebook > header.right > tabs > tab:hover {
- box-shadow: inset 3px 0 #1c1f1f; }
+ box-shadow: inset 0.21429rem 0 #1c1f1f; }
notebook > header.right > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.right > tabs > tab:checked {
- box-shadow: inset 3px 0 #215d9c; }
+ box-shadow: inset 0.21429rem 0 #215d9c; }
notebook > header.top > tabs > arrow {
border-top-style: none; }
notebook > header.bottom > tabs > arrow {
border-bottom-style: none; }
notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
- margin-left: -5px;
- margin-right: -5px;
+ margin-left: calc(-0.28571rem - 1px);
+ margin-right: calc(-0.28571rem - 1px);
padding-left: 4px;
padding-right: 4px; }
notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
@@ -2302,17 +2303,17 @@ notebook > header {
notebook > header.right > tabs > arrow {
border-right-style: none; }
notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
- margin-top: -5px;
- margin-bottom: -5px;
- padding-top: 4px;
- padding-bottom: 4px; }
+ margin-top: calc(-0.28571rem - 1px);
+ margin-bottom: calc(-0.28571rem - 1px);
+ padding-top: 0.28571rem;
+ padding-bottom: 0.28571rem; }
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.up, notebook > header.right > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook > header > tabs > arrow {
- min-height: 16px;
- min-width: 16px;
+ min-height: 1.14286rem;
+ min-width: 1.14286rem;
border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) {
background-clip: padding-box;
@@ -2328,10 +2329,10 @@ notebook > header {
text-shadow: none;
-gtk-icon-shadow: none; }
notebook > header tab {
- min-height: 30px;
- min-width: 30px;
- padding: 3px 12px;
- outline-offset: -5px;
+ min-height: 2.14286rem;
+ min-width: 2.14286rem;
+ padding: 0.21429rem 0.85714rem;
+ outline-offset: -0.35714rem;
color: #949796;
font-weight: bold;
border-width: 1px;
@@ -2360,54 +2361,54 @@ notebook > header {
background-color: #393f3f; }
notebook > header tab button.flat {
padding: 0;
- margin-top: 4px;
- margin-bottom: 4px;
- min-width: 20px;
- min-height: 20px; }
+ margin-top: 0.28571rem;
+ margin-bottom: 0.28571rem;
+ min-width: 1.42857rem;
+ min-height: 1.42857rem; }
notebook > header tab button.flat:hover {
color: currentColor; }
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; }
+ margin-left: 0.28571rem;
+ margin-right: -0.28571rem; }
notebook > header tab button.flat:first-child {
- margin-left: -4px;
- margin-right: 4px; }
+ margin-left: -0.28571rem;
+ margin-right: 0.28571rem; }
notebook > header.top tabs, notebook > header.bottom tabs {
- padding-left: 4px;
- padding-right: 4px; }
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) {
- margin-left: 3px;
- margin-right: 3px; }
+ margin-left: calc(0.28571rem - 1px);
+ margin-right: calc(0.28571rem - 1px); }
notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom
tabs:not(:only-child):first-child {
margin-left: -1px; }
notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom
tabs:not(:only-child):last-child {
margin-right: -1px; }
notebook > header.top tabs tab, notebook > header.bottom tabs tab {
- margin-left: 4px;
- margin-right: 4px; }
+ margin-left: 0.28571rem;
+ margin-right: 0.28571rem; }
notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
border-style: none solid; }
notebook > header.left tabs, notebook > header.right tabs {
- padding-top: 4px;
- padding-bottom: 4px; }
+ padding-top: 0.28571rem;
+ padding-bottom: 0.28571rem; }
notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) {
- margin-top: 3px;
- margin-bottom: 3px; }
+ margin-top: calc(0.28571rem - 1px);
+ margin-bottom: calc(0.28571rem - 1px); }
notebook > header.left tabs:not(:only-child):first-child, notebook > header.right
tabs:not(:only-child):first-child {
margin-top: -1px; }
notebook > header.left tabs:not(:only-child):last-child, notebook > header.right
tabs:not(:only-child):last-child {
margin-bottom: -1px; }
notebook > header.left tabs tab, notebook > header.right tabs tab {
- margin-top: 4px;
- margin-bottom: 4px; }
+ margin-top: 0.28571rem;
+ margin-bottom: 0.28571rem; }
notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
border-style: solid none; }
notebook > header.top tab {
- padding-bottom: 4px; }
+ padding-bottom: 0.28571rem; }
notebook > header.bottom tab {
- padding-top: 4px; }
+ padding-top: 0.28571rem; }
notebook > stack:not(:only-child) {
background-color: #292929; }
notebook > stack:not(:only-child):backdrop {
@@ -2435,11 +2436,11 @@ scrollbar {
border-color: #1f2222;
transition: 200ms ease-out; }
scrollbar slider {
- min-width: 6px;
- min-height: 6px;
- margin: -1px;
- border: 4px solid transparent;
- border-radius: 8px;
+ min-width: 0.42857rem;
+ min-height: 0.42857rem;
+ margin: -0.07143rem;
+ border: 0.28571rem solid transparent;
+ border-radius: 0.57143rem;
background-clip: padding-box;
background-color: #a6a8a7; }
scrollbar slider:hover {
@@ -2451,52 +2452,52 @@ scrollbar {
scrollbar slider:disabled {
background-color: transparent; }
scrollbar.fine-tune slider {
- min-width: 4px;
- min-height: 4px; }
+ min-width: 0.28571rem;
+ min-height: 0.28571rem; }
scrollbar.fine-tune.horizontal slider {
- border-width: 5px 4px; }
+ border-width: 0.35714rem 0.28571rem; }
scrollbar.fine-tune.vertical slider {
- border-width: 4px 5px; }
+ border-width: 0.28571rem 0.35714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
border-color: transparent;
opacity: 0.4;
background-color: transparent; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
margin: 0;
- min-width: 3px;
- min-height: 3px;
+ min-width: 0.21429rem;
+ min-height: 0.21429rem;
background-color: #eeeeec;
border: 1px solid black; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
- min-width: 5px;
- min-height: 5px;
+ min-width: 0.35714rem;
+ min-height: 0.35714rem;
background-color: #eeeeec;
background-clip: padding-box;
border-radius: 100%;
border: 1px solid black;
-gtk-icon-source: none; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
- margin: 0 2px;
- min-width: 40px; }
+ margin: 0 0.14286rem;
+ min-width: 2.85714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
- margin: 1px 2px;
- min-width: 5px; }
+ margin: 0.07143rem 0.14286rem;
+ min-width: 0.35714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
- margin: 2px 0;
- min-height: 40px; }
+ margin: 0.14286rem 0;
+ min-height: 2.85714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
- margin: 2px 1px;
- min-height: 5px; }
+ margin: 0.14286rem 0.07143rem;
+ min-height: 0.35714rem; }
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
opacity: 0.8; }
scrollbar.horizontal slider {
- min-width: 40px; }
+ min-width: 2.85714rem; }
scrollbar.vertical slider {
- min-height: 40px; }
+ min-height: 2.85714rem; }
scrollbar button {
padding: 0;
- min-width: 12px;
- min-height: 12px;
+ min-width: 0.85714rem;
+ min-height: 0.85714rem;
border-style: none;
border-radius: 0;
transition-property: min-height, min-width, color;
@@ -2569,7 +2570,7 @@ switch {
outline-offset: -4px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px transparent;
border: 1px solid #1c1f1f;
- border-radius: 3px;
+ border-radius: 0.21429rem;
color: #eeeeec;
background-image: linear-gradient(to bottom, #2d3232);
text-shadow: 0 1px rgba(0, 0, 0, 0.1); }
@@ -2605,10 +2606,10 @@ switch {
background-color: #333636; }
switch slider {
margin: -1px;
- min-width: 45px;
- min-height: 27px;
+ min-width: 3.21429rem;
+ min-height: 1.92857rem;
border: 1px solid;
- border-radius: 3px;
+ border-radius: 0.21429rem;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
@@ -2697,18 +2698,18 @@ switch {
background-color: transparent; }
checkbutton.text-button, radiobutton.text-button {
- padding: 2px 0;
+ padding: 0.14286rem 0;
outline-offset: 0; }
checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button
label:not(:only-child):first-child {
- margin-left: 4px; }
+ margin-left: 0.28571rem; }
checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button
label:not(:only-child):last-child {
- margin-right: 4px; }
+ margin-right: 0.28571rem; }
check,
radio {
- margin: 0 4px;
- min-height: 14px;
- min-width: 14px;
+ margin: 0 0.28571rem;
+ min-height: 1rem;
+ min-width: 1rem;
border: 1px solid;
-gtk-icon-source: none;
color: #eeeeec;
@@ -2826,8 +2827,8 @@ radio {
radio, menu menuitem
radio:hover, menu menuitem
radio:disabled {
- min-height: 14px;
- min-width: 14px;
+ min-height: 1rem;
+ min-width: 1rem;
background-image: none;
background-color: transparent;
box-shadow: none;
@@ -2837,7 +2838,7 @@ radio {
animation: none; }
check {
- border-radius: 3px; }
+ border-radius: 0.21429rem; }
check:checked {
-gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
check:indeterminate {
@@ -3581,7 +3582,7 @@ progressbar {
/*************
* Level Bar *
*************/
-levelbar block {
+levelbar.horizontal block {
min-width: 32px;
min-height: 1px; }
levelbar.vertical block {
@@ -3670,7 +3671,7 @@ frame > border,
border-color: #1f2222; }
actionbar > revealer > box {
- padding: 6px;
+ padding: 0.42857rem;
border-top: 1px solid #1c1f1f; }
actionbar > revealer > box:backdrop {
border-color: #1f2222; }
@@ -3808,7 +3809,7 @@ list {
background-color: #2c2c2c;
border-color: #1f2222; }
list row {
- padding: 2px; }
+ padding: 0.14286rem; }
row {
transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
@@ -3834,8 +3835,8 @@ row {
*********************/
.app-notification,
.app-notification.frame {
- padding: 10px;
- border-radius: 0 0 5px 5px;
+ padding: 0.71429rem;
+ border-radius: 0 0 0.35714rem 0.35714rem;
background-color: rgba(32, 37, 38, 0.8);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; }
@@ -3851,8 +3852,8 @@ row {
* Expanders *
*************/
expander arrow {
- min-width: 16px;
- min-height: 16px;
+ min-width: 1.14286rem;
+ min-height: 1.14286rem;
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
expander arrow:dir(rtl) {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
@@ -3868,7 +3869,7 @@ calendar {
color: white;
border: 1px solid #1c1f1f; }
calendar:selected {
- border-radius: 3px; }
+ border-radius: 0.21429rem; }
calendar.header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0; }
@@ -3895,28 +3896,28 @@ calendar {
* Dialogs *
***********/
messagedialog .titlebar {
- min-height: 20px;
+ min-height: 1.42857rem;
background-image: none;
background-color: #393f3f;
border-style: none;
- border-top-left-radius: 7px;
- border-top-right-radius: 7px; }
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem; }
messagedialog.csd.background {
- border-bottom-left-radius: 9px;
- border-bottom-right-radius: 9px; }
+ border-bottom-left-radius: 0.64286rem;
+ border-bottom-right-radius: 0.64286rem; }
messagedialog.csd .dialog-action-area button {
- padding: 10px 14px;
+ padding: 0.71429rem 1rem;
border-radius: 0;
border-left-style: solid;
border-right-style: none;
border-bottom-style: none; }
messagedialog.csd .dialog-action-area button:first-child {
border-left-style: none;
- border-bottom-left-radius: 7px;
- -gtk-outline-bottom-left-radius: 5px; }
+ border-bottom-left-radius: 0.5rem;
+ -gtk-outline-bottom-left-radius: 0.35714rem; }
messagedialog.csd .dialog-action-area button:last-child {
- border-bottom-right-radius: 7px;
- -gtk-outline-bottom-right-radius: 5px; }
+ border-bottom-right-radius: 0.5rem;
+ -gtk-outline-bottom-right-radius: 0.35714rem; }
filechooser .dialog-action-box {
border-top: 1px solid #1c1f1f; }
@@ -3953,12 +3954,12 @@ filechooserbutton:drop(active) {
border-style: none; }
stacksidebar row {
- padding: 10px 4px; }
+ padding: 0.71429rem 0.28571rem; }
stacksidebar row > label {
- padding-left: 6px;
- padding-right: 6px; }
+ padding-left: 0.42857rem;
+ padding-right: 0.42857rem; }
stacksidebar row.needs-attention > label {
- background-size: 6px 6px, 0 0; }
+ background-size: 0.42857rem 0.42857rem, 0 0; }
/****************
* File chooser *
@@ -3966,10 +3967,10 @@ stacksidebar row {
placessidebar > viewport.frame {
border-style: none; }
placessidebar row {
- min-height: 36px;
+ min-height: 2.57143rem;
padding: 0px; }
placessidebar row > revealer {
- padding: 0 14px; }
+ padding: 0 1rem; }
placessidebar row:selected {
color: #ffffff; }
placessidebar row:disabled {
@@ -3983,18 +3984,18 @@ placessidebar row {
placessidebar row image.sidebar-icon {
opacity: 0.7; }
placessidebar row image.sidebar-icon:dir(ltr) {
- padding-right: 8px; }
+ padding-right: 0.57143rem; }
placessidebar row image.sidebar-icon:dir(rtl) {
- padding-left: 8px; }
+ padding-left: 0.57143rem; }
placessidebar row label.sidebar-label:dir(ltr) {
- padding-right: 2px; }
+ padding-right: 0.14286rem; }
placessidebar row label.sidebar-label:dir(rtl) {
- padding-left: 2px; }
+ padding-left: 0.14286rem; }
button.sidebar-button {
- min-height: 26px;
- min-width: 26px;
- margin-top: 3px;
- margin-bottom: 3px;
+ min-height: 1.85714rem;
+ min-width: 1.85714rem;
+ margin-top: 0.21429rem;
+ margin-bottom: 0.21429rem;
padding: 0;
border-radius: 100%;
-gtk-outline-radius: 100%; }
@@ -4003,7 +4004,7 @@ placessidebar row {
placessidebar row:selected:active {
box-shadow: none; }
placessidebar row.sidebar-placeholder-row {
- padding: 0 8px;
+ padding: 0 0.57143rem;
min-height: 2px;
background-image: image(#4e9a06);
background-clip: content-box; }
@@ -4025,8 +4026,8 @@ placesview .server-list-button:checked > image {
placesview row.activatable:hover {
background-color: transparent; }
placesview > actionbar > revealer > box > label {
- padding-left: 8px;
- padding-right: 8px; }
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem; }
/*********
* Paned *
@@ -4044,8 +4045,8 @@ paned > separator {
paned > separator:backdrop {
background-image: image(#1f2222); }
paned > separator.wide {
- min-width: 5px;
- min-height: 5px;
+ min-width: 0.35714rem;
+ min-height: 0.35714rem;
background-color: #393f3f;
background-image: image(#1c1f1f), image(#1c1f1f);
background-size: 1px 1px, 1px 1px; }
@@ -4055,12 +4056,12 @@ paned > separator {
paned.horizontal > separator {
background-repeat: repeat-y; }
paned.horizontal > separator:dir(ltr) {
- margin: 0 -8px 0 0;
- padding: 0 8px 0 0;
+ margin: 0 -0.57143rem 0 0;
+ padding: 0 0.57143rem 0 0;
background-position: left; }
paned.horizontal > separator:dir(rtl) {
- margin: 0 0 0 -8px;
- padding: 0 0 0 8px;
+ margin: 0 0 0 -0.57143rem;
+ padding: 0 0 0 0.57143rem;
background-position: right; }
paned.horizontal > separator.wide {
margin: 0;
@@ -4068,8 +4069,8 @@ paned.horizontal > separator {
background-repeat: repeat-y, repeat-y;
background-position: left, right; }
paned.vertical > separator {
- margin: 0 0 -8px 0;
- padding: 0 0 8px 0;
+ margin: 0 0 -0.57143rem 0;
+ padding: 0 0 0.57143rem 0;
background-repeat: repeat-x;
background-position: top; }
paned.vertical > separator.wide {
@@ -4197,9 +4198,8 @@ infobar {
* Tooltips *
************/
tooltip {
- padding: 4px;
- /* not working */
- border-radius: 5px;
+ padding: 0.28571rem;
+ border-radius: 0.35714rem;
box-shadow: none;
text-shadow: 0 1px black; }
tooltip.background {
@@ -4209,7 +4209,7 @@ tooltip {
tooltip decoration {
background-color: transparent; }
tooltip * {
- padding: 4px;
+ padding: 0.28571rem;
background-color: transparent;
color: white; }
@@ -4325,10 +4325,10 @@ colorchooser .popover.osd {
.osd .scale-popup button.flat {
border-style: none;
- border-radius: 5px; }
+ border-radius: 0.35714rem; }
.scale-popup button:hover {
background-color: rgba(238, 238, 236, 0.1);
- border-radius: 5px; }
+ border-radius: 0.35714rem; }
/**********************
* Window Decorations *
@@ -4511,8 +4511,8 @@ stackswitcher button.text-button {
stackswitcher button.circular,
stackswitcher button.text-button.circular {
- min-width: 32px;
- min-height: 32px;
+ min-width: 2.28571rem;
+ min-height: 2.28571rem;
padding: 0; }
/* GTK NAMED COLORS
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 99adfee..fe00272 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -12,9 +12,9 @@
-GtkDialog-action-area-border: 0;
outline-color: rgba(46, 52, 54, 0.3);
outline-style: dashed;
- outline-offset: -3px;
+ outline-offset: -0.21429rem;
outline-width: 1px;
- -gtk-outline-radius: 2px; }
+ -gtk-outline-radius: 0.14286rem; }
/***************
* Base States *
@@ -72,7 +72,7 @@ textview text {
.view text:selected,
iconview text:selected,
textview text:selected {
- border-radius: 3px; }
+ border-radius: 0.21429rem; }
.rubberband,
rubberband,
@@ -83,10 +83,10 @@ treeview.view rubberband,
background-color: rgba(42, 118, 198, 0.2); }
flowbox flowboxchild {
- padding: 3px;
- border-radius: 3px; }
+ padding: 0.21429rem;
+ border-radius: 0.21429rem; }
flowbox flowboxchild:selected {
- outline-offset: -2px; }
+ outline-offset: -0.14286rem; }
label.separator {
color: #2e3436; }
@@ -116,7 +116,7 @@ assistant .sidebar {
assistant.csd .sidebar {
border-top-style: none; }
assistant .sidebar label {
- padding: 6px 12px; }
+ padding: 0.42857rem 0.85714rem; }
assistant .sidebar label.highlight {
background-color: #c3c4c4; }
@@ -159,11 +159,11 @@ spinner {
****************/
spinbutton:not(.vertical),
entry {
- min-height: 32px;
- padding-left: 8px;
- padding-right: 8px;
+ min-height: 2.28571rem;
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem;
border: 1px solid;
- border-radius: 3px;
+ border-radius: 0.21429rem;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: black;
border-color: #9d9d99;
@@ -172,10 +172,10 @@ entry {
spinbutton:not(.vertical) image.left,
entry image.left {
padding-left: 0;
- padding-right: 6px; }
+ padding-right: 0.42857rem; }
spinbutton:not(.vertical) image.right,
entry image.right {
- padding-left: 6px;
+ padding-left: 0.42857rem;
padding-right: 0; }
spinbutton:not(.vertical) undershoot.left,
entry undershoot.left {
@@ -203,7 +203,7 @@ entry {
entry.flat:focus,
entry.flat {
min-height: 0;
- padding: 2px;
+ padding: 0.14286rem;
background-image: none;
border-color: transparent;
border-radius: 0; }
@@ -309,11 +309,11 @@ entry {
-gtk-icon-shadow: none; }
spinbutton:not(.vertical) progress,
entry progress {
- margin: 2px -6px;
+ margin: 0.14286rem -0.42857rem;
background-color: transparent;
background-image: none;
border-radius: 0;
- border-width: 0 0 2px;
+ border-width: 0 0 0.14286rem;
border-color: #4a90d9;
border-style: solid;
box-shadow: none; }
@@ -404,11 +404,11 @@ treeview entry.flat, treeview entry {
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9),
to(transparent)); } }
notebook > header > tabs > arrow, button.titlebutton,
button {
- min-height: 24px;
- min-width: 16px;
- padding: 4px 8px;
+ min-height: 1.71429rem;
+ min-width: 1.14286rem;
+ padding: 0.28571rem 0.57143rem;
border: 1px solid;
- border-radius: 3px;
+ border-radius: 0.21429rem;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
@@ -551,21 +551,21 @@ button {
color: #8b8e8f; }
notebook > header > tabs > arrow.image-button, button.image-button.titlebutton,
button.image-button {
- min-width: 24px;
- padding-left: 4px;
- padding-right: 4px; }
+ min-width: 1.71429rem;
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
notebook > header > tabs > arrow.text-button, button.text-button.titlebutton,
button.text-button {
- padding-left: 16px;
- padding-right: 16px; }
+ padding-left: 1.14286rem;
+ padding-right: 1.14286rem; }
notebook > header > tabs > arrow.text-button.image-button, button.text-button.image-button.titlebutton,
button.text-button.image-button {
- padding-left: 8px;
- padding-right: 8px; }
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem; }
notebook > header > tabs > arrow.text-button.image-button label,
button.text-button.image-button.titlebutton label,
button.text-button.image-button label {
- padding-left: 8px;
- padding-right: 8px; }
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem; }
combobox:drop(active) button.combo, notebook > header > tabs > arrow:drop(active),
button.titlebutton:drop(active),
button:drop(active) {
color: #4e9a06;
@@ -582,10 +582,10 @@ button {
button.flat:not(:active):not(:checked):not(:hover):not(disabled):backdrop {
color: #fcfcfc; }
button.osd {
- min-width: 24px;
- min-height: 32px;
+ min-width: 1.71429rem;
+ min-height: 2.28571rem;
color: #eeeeec;
- border-radius: 5px;
+ border-radius: 0.35714rem;
outline-color: rgba(238, 238, 236, 0.3);
color: #eeeeec;
border-color: rgba(0, 0, 0, 0.7);
@@ -598,7 +598,7 @@ button.osd {
border: none;
box-shadow: none; }
button.osd.image-button {
- min-width: 32px; }
+ min-width: 2.28571rem; }
button.osd:hover {
color: white;
border-color: rgba(0, 0, 0, 0.7);
@@ -1090,25 +1090,25 @@ button.destructive-action {
-gtk-icon-shadow: none; }
.stack-switcher >
button {
- outline-offset: -3px; }
+ outline-offset: -0.21429rem; }
.stack-switcher >
button > label {
- padding-left: 6px;
- padding-right: 6px; }
+ padding-left: 0.42857rem;
+ padding-right: 0.42857rem; }
.stack-switcher >
button > image {
- padding-left: 6px;
- padding-right: 6px;
- padding-top: 3px;
- padding-bottom: 3px; }
+ padding-left: 0.42857rem;
+ padding-right: 0.42857rem;
+ padding-top: 0.21429rem;
+ padding-bottom: 0.21429rem; }
.stack-switcher >
button.text-button {
- padding-left: 10px;
- padding-right: 10px; }
+ padding-left: 0.71429rem;
+ padding-right: 0.71429rem; }
.stack-switcher >
button.image-button {
- padding-left: 2px;
- padding-right: 2px; }
+ padding-left: 0.14286rem;
+ padding-right: 0.14286rem; }
.stack-switcher >
button.needs-attention:active > label,
.stack-switcher >
@@ -1121,8 +1121,8 @@ button {
.inline-toolbar
button, .inline-toolbar
button:backdrop {
- border-radius: 2px;
- border-width: 1px; }
+ border-radius: 0.14286rem;
+ border-width: 0.07143rem; }
.primary-toolbar
button {
-gtk-icon-shadow: none; }
@@ -1133,19 +1133,19 @@ button.needs-attention > label,
button.needs-attention > image, stacksidebar row.needs-attention > label {
animation: needs_attention 150ms ease-in;
background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9),
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255,
0.76923)), to(transparent));
- background-size: 6px 6px, 6px 6px;
+ background-size: 0.42857rem 0.42857rem, 0.42857rem 0.42857rem;
background-repeat: no-repeat;
- background-position: right 3px, right 4px; }
+ background-position: right 0.21429rem, right 0.28571rem; }
.stack-switcher >
button.needs-attention > label:backdrop,
.stack-switcher >
button.needs-attention > image:backdrop, stacksidebar row.needs-attention > label:backdrop {
- background-size: 6px 6px, 0 0; }
+ background-size: 0.42857rem 0.42857rem, 0 0; }
.stack-switcher >
button.needs-attention > label:dir(rtl),
.stack-switcher >
button.needs-attention > image:dir(rtl), stacksidebar row.needs-attention > label:dir(rtl) {
- background-position: left 3px, left 4px; }
+ background-position: left 0.21429rem, left 0.28571rem; }
.inline-toolbar toolbutton > button {
color: #2e3436;
@@ -1232,22 +1232,22 @@ entry:first-child, .inline-toolbar
button:first-child, .linked >
button:first-child, toolbar.inline-toolbar toolbutton:first-child > button.flat,
toolbar.inline-toolbar toolbutton:backdrop:first-child > button.flat, combobox.linked
button:nth-child(2):dir(rtl), .linked:not(.vertical) > combobox:first-child > box > button.combo {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px; }
+ border-top-left-radius: 0.21429rem;
+ border-bottom-left-radius: 0.21429rem; }
.linked:not(.vertical) > spinbutton:last-child:not(.vertical), .linked:not(.vertical) >
entry:last-child, .inline-toolbar
button:last-child, .linked >
button:last-child, toolbar.inline-toolbar toolbutton:last-child > button.flat,
toolbar.inline-toolbar toolbutton:backdrop:last-child > button.flat, combobox.linked
button:nth-child(2):dir(ltr), .linked:not(.vertical) > combobox:last-child > box > button.combo {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
+ border-top-right-radius: 0.21429rem;
+ border-bottom-right-radius: 0.21429rem;
border-right-style: solid; }
.linked:not(.vertical) > spinbutton:only-child:not(.vertical), .linked:not(.vertical) >
entry:only-child, .inline-toolbar
button:only-child, .linked >
button:only-child, toolbar.inline-toolbar toolbutton:only-child > button.flat,
toolbar.inline-toolbar toolbutton:backdrop:only-child > button.flat, .linked:not(.vertical) >
combobox:only-child > box > button.combo {
- border-radius: 3px;
+ border-radius: 0.21429rem;
border-style: solid; }
.linked.vertical > spinbutton:not(.vertical), .linked.vertical >
@@ -1263,18 +1263,18 @@ button:backdrop, .linked.vertical > combobox > box > button.combo {
.linked.vertical > spinbutton:first-child:not(.vertical), .linked.vertical >
entry:first-child, .linked.vertical >
button:first-child, .linked.vertical > combobox:first-child > box > button.combo {
- border-top-left-radius: 3px;
- border-top-right-radius: 3px; }
+ border-top-left-radius: 0.21429rem;
+ border-top-right-radius: 0.21429rem; }
.linked.vertical > spinbutton:last-child:not(.vertical), .linked.vertical >
entry:last-child, .linked.vertical >
button:last-child, .linked.vertical > combobox:last-child > box > button.combo {
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
+ border-bottom-left-radius: 0.21429rem;
+ border-bottom-right-radius: 0.21429rem;
border-style: solid; }
.linked.vertical > spinbutton:only-child:not(.vertical), .linked.vertical >
entry:only-child, .linked.vertical >
button:only-child, .linked.vertical > combobox:only-child > box > button.combo {
- border-radius: 3px;
+ border-radius: 0.21429rem;
border-style: solid; }
modelbutton.flat, popover.background checkbutton,
@@ -1299,11 +1299,11 @@ button:visited:checked, calendar.button, calendar.button:hover, calendar.button:
modelbutton.flat, popover.background checkbutton,
popover.background radiobutton,
.menuitem.button.flat {
- min-height: 26px;
- padding-left: 5px;
- padding-right: 5px;
- border-radius: 3px;
- outline-offset: -2px; }
+ min-height: 1.85714rem;
+ padding-left: 0.35714rem;
+ padding-right: 0.35714rem;
+ border-radius: 0.21429rem;
+ outline-offset: -0.14286rem; }
modelbutton.flat:hover, popover.background checkbutton:hover,
popover.background radiobutton:hover,
.menuitem.button.flat:hover {
@@ -1315,7 +1315,7 @@ popover.background radiobutton,
popover.background radiobutton radio:last-child,
.menuitem.button.flat check:last-child,
.menuitem.button.flat radio:last-child {
- margin-left: 8px; }
+ margin-left: 0.57143rem; }
modelbutton.flat check:first-child, popover.background checkbutton check:first-child,
popover.background radiobutton check:first-child,
modelbutton.flat radio:first-child,
@@ -1323,7 +1323,7 @@ popover.background radiobutton,
popover.background radiobutton radio:first-child,
.menuitem.button.flat check:first-child,
.menuitem.button.flat radio:first-child {
- margin-right: 8px; }
+ margin-right: 0.57143rem; }
modelbutton.flat arrow, popover.background checkbutton arrow,
popover.background radiobutton arrow {
@@ -1339,7 +1339,7 @@ popover.background radiobutton arrow {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
button.color {
- padding: 4px; }
+ padding: 0.28571rem; }
button.color colorswatch:only-child {
box-shadow: 0 1px rgba(255, 255, 255, 0.76923); }
button.color colorswatch:only-child, button.color colorswatch:only-child overlay {
@@ -1411,7 +1411,7 @@ button:visited {
spinbutton:not(.vertical) {
padding: 0; }
spinbutton:not(.vertical) entry {
- min-width: 28px;
+ min-width: 2rem;
margin: 0;
background: none;
background-color: transparent;
@@ -1419,7 +1419,7 @@ spinbutton:not(.vertical) {
border-radius: 0;
box-shadow: none; }
spinbutton:not(.vertical) button {
- min-height: 16px;
+ min-height: 1.14286rem;
margin: 0;
padding-bottom: 0;
padding-top: 0;
@@ -1438,7 +1438,7 @@ spinbutton:not(.vertical) {
color: rgba(139, 142, 143, 0.3); }
spinbutton:not(.vertical) button:active {
background-color: rgba(0, 0, 0, 0.1);
- box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.2); }
+ box-shadow: inset 0 0.14286rem 0.21429rem -0.07143rem rgba(0, 0, 0, 0.2); }
spinbutton:not(.vertical) button:backdrop {
color: #96999a;
background-color: transparent;
@@ -1500,9 +1500,9 @@ spinbutton:not(.vertical) {
-gtk-icon-shadow: none;
box-shadow: none; }
.osd spinbutton:not(.vertical) button:last-child {
- border-radius: 0 3px 3px 0; }
+ border-radius: 0 0.21429rem 0.21429rem 0; }
.osd spinbutton:not(.vertical) button:dir(rtl):first-child {
- border-radius: 3px 0 0 3px; }
+ border-radius: 0.21429rem 0 0 0.21429rem; }
spinbutton.vertical:disabled {
color: #8b8e8f; }
spinbutton.vertical:backdrop:disabled {
@@ -1511,19 +1511,19 @@ spinbutton.vertical:drop(active) {
border-color: transparent;
box-shadow: none; }
spinbutton.vertical entry {
- min-height: 32px;
- min-width: 32px;
+ min-height: 2.28571rem;
+ min-width: 2.28571rem;
padding: 0;
border-radius: 0; }
spinbutton.vertical button {
- min-height: 32px;
- min-width: 32px;
+ min-height: 2.28571rem;
+ min-width: 2.28571rem;
padding: 0; }
spinbutton.vertical button.up {
- border-radius: 3px 3px 0 0;
+ border-radius: 0.21429rem 0.21429rem 0 0;
border-style: solid solid none solid; }
spinbutton.vertical button.down {
- border-radius: 0 0 3px 3px;
+ border-radius: 0 0 0.21429rem 0.21429rem;
border-style: none solid solid solid; }
.osd spinbutton.vertical button:first-child {
color: #eeeeec;
@@ -1574,15 +1574,15 @@ treeview spinbutton:not(.vertical) {
border-radius: 0; }
treeview spinbutton:not(.vertical) entry {
min-height: 0;
- padding: 1px 2px; }
+ padding: 0.07143rem 0.14286rem; }
/**************
* ComboBoxes *
**************/
combobox arrow {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic");
- min-height: 16px;
- min-width: 16px; }
+ min-height: 1.14286rem;
+ min-width: 1.14286rem; }
combobox:drop(active) {
box-shadow: none; }
@@ -1592,41 +1592,31 @@ combobox:drop(active) {
toolbar, .inline-toolbar, searchbar,
.location-bar {
-GtkWidget-window-dragging: true;
- padding: 4px;
+ padding: 0.28571rem;
background-color: #e8e8e7; }
toolbar {
- padding: 4px 3px 3px 4px; }
+ padding: 0.28571rem 0.21429rem 0.21429rem 0.28571rem; }
.osd toolbar {
background-color: transparent; }
toolbar.osd {
- padding: 13px;
+ padding: 0.92857rem;
border: none;
- border-radius: 5px;
+ border-radius: 0.35714rem;
background-color: rgba(32, 37, 38, 0.8); }
toolbar.osd.left, toolbar.osd.right, toolbar.osd.top, toolbar.osd.bottom {
border-radius: 0; }
toolbar.horizontal separator {
- margin: 0 7px 1px 6px; }
+ margin: 0 0.5rem 1px 0.42857rem; }
toolbar.vertical separator {
- margin: 6px 1px 7px 0; }
+ margin: 0.42857rem 1px 0.5rem 0; }
toolbar:not(.inline-toolbar):not(.osd) switch,
toolbar:not(.inline-toolbar):not(.osd) scale,
toolbar:not(.inline-toolbar):not(.osd) entry,
toolbar:not(.inline-toolbar):not(.osd) spinbutton,
toolbar:not(.inline-toolbar):not(.osd) button {
- margin-right: 1px;
- margin-bottom: 1px; }
-
-.inline-toolbar {
- padding: 3px;
- border-width: 0 1px 1px;
- border-radius: 0 0 5px 5px; }
-
-searchbar,
-.location-bar {
- border-width: 0 0 1px;
- padding: 3px; }
+ margin-right: 0.07143rem;
+ margin-bottom: 0.07143rem; }
.inline-toolbar, searchbar,
.location-bar {
@@ -1640,13 +1630,24 @@ searchbar,
box-shadow: none;
transition: 200ms ease-out; }
+.inline-toolbar {
+ padding: 0.21429rem;
+ border-width: 1px;
+ border-style: none solid solid;
+ border-radius: 0 0 0.35714rem 0.35714rem; }
+
+searchbar,
+.location-bar {
+ border-style: none none solid;
+ padding: 0.21429rem; }
+
/***************
* Header bars *
***************/
.titlebar:not(headerbar),
headerbar {
- padding: 0 6px;
- min-height: 46px;
+ padding: 0 0.42857rem;
+ min-height: 3.28571rem;
border-width: 0 0 1px;
border-style: solid;
border-color: #9d9d99;
@@ -1664,13 +1665,13 @@ headerbar {
.titlebar:not(headerbar) .title,
headerbar .title {
font-weight: bold;
- padding-left: 12px;
- padding-right: 12px; }
+ padding-left: 0.85714rem;
+ padding-right: 0.85714rem; }
.titlebar:not(headerbar) .subtitle,
headerbar .subtitle {
font-size: smaller;
- padding-left: 12px;
- padding-right: 12px; }
+ padding-left: 0.85714rem;
+ padding-right: 0.85714rem; }
.selection-mode.titlebar:not(headerbar),
headerbar.selection-mode {
color: #ffffff;
@@ -1890,8 +1891,8 @@ headerbar {
border-color: rgba(74, 144, 217, 0);
background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0));
box-shadow: none;
- padding-left: 10px;
- padding-right: 10px; }
+ padding-left: 0.71429rem;
+ padding-right: 0.71429rem; }
.selection-mode.titlebar:not(headerbar) .selection-menu:backdrop GtkArrow,
.selection-mode.titlebar:not(headerbar) .selection-menu GtkArrow,
headerbar.selection-mode .selection-menu:backdrop GtkArrow,
headerbar.selection-mode .selection-menu GtkArrow {
@@ -1910,12 +1911,12 @@ headerbar {
border-radius: 0; }
.default-decoration.titlebar:not(headerbar),
headerbar.default-decoration {
- padding: 4px;
- min-height: 28px; }
+ padding: 0.28571rem;
+ min-height: 2rem; }
.default-decoration.titlebar:not(headerbar) button.titlebutton,
headerbar.default-decoration button.titlebutton {
- min-height: 26px;
- min-width: 26px;
+ min-height: 1.85714rem;
+ min-width: 1.85714rem;
margin: 0;
padding: 0; }
@@ -1923,17 +1924,17 @@ headerbar entry,
headerbar spinbutton,
headerbar separator,
headerbar button {
- margin-top: 6px;
- margin-bottom: 6px; }
+ margin-top: 0.42857rem;
+ margin-bottom: 0.42857rem; }
.titlebar, .titlebar:backdrop {
- border-top-left-radius: 7px;
- border-top-right-radius: 7px; }
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem; }
separator:first-child + headerbar, separator:first-child + headerbar:backdrop, headerbar:first-child,
headerbar:first-child:backdrop {
- border-top-left-radius: 7px; }
+ border-top-left-radius: 0.5rem; }
headerbar:last-child, headerbar:last-child:backdrop {
- border-top-right-radius: 7px; }
+ border-top-right-radius: 0.5rem; }
window.csd > .titlebar:not(headerbar) {
padding: 0;
@@ -1949,18 +1950,18 @@ window.csd > .titlebar:not(headerbar) {
* Pathbars *
************/
.path-bar button.text-button, .path-bar button.image-button, .path-bar button {
- padding-left: 4px;
- padding-right: 4px; }
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
.path-bar button.text-button.image-button label {
padding-left: 0;
padding-right: 0; }
.path-bar button.text-button.image-button label:last-child, .path-bar button label:last-child {
- padding-right: 8px; }
+ padding-right: 0.57143rem; }
.path-bar button.text-button.image-button label:first-child, .path-bar button label:first-child {
- padding-left: 8px; }
+ padding-left: 0.57143rem; }
.path-bar button image {
- padding-left: 4px;
- padding-right: 4px; }
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
.path-bar button.slider-button {
padding-left: 0;
padding-right: 0; }
@@ -2107,15 +2108,15 @@ treeview.view header button, treeview.view header button:hover, treeview.view he
menubar,
.menubar {
-GtkWidget-window-dragging: true;
- padding: 0px;
+ padding: 0;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.1); }
menubar:backdrop,
.menubar:backdrop {
background-color: #e8e8e7; }
menubar > menuitem,
.menubar > menuitem {
- min-height: 16px;
- padding: 4px 8px; }
+ min-height: 1.14286rem;
+ padding: 0.28571rem 0.57143rem; }
menubar > menuitem:hover,
.menubar > menuitem:hover {
box-shadow: inset 0 -3px #4a90d9;
@@ -2127,8 +2128,8 @@ menubar,
menu,
.menu {
- margin: 4px;
- padding: 2px 0px;
+ margin: 0.28571rem;
+ padding: 0.14286rem 0;
background-color: #ffffff;
border: 1px solid #9d9d99; }
.csd menu, .csd
@@ -2139,9 +2140,9 @@ menu,
background-color: #fcfcfc; }
menu menuitem,
.menu menuitem {
- min-height: 16px;
- min-width: 40px;
- padding: 4px 6px;
+ min-height: 1.14286rem;
+ min-width: 2.85714rem;
+ padding: 0.28571rem 0.42857rem;
text-shadow: none; }
menu menuitem:hover,
.menu menuitem:hover {
@@ -2160,16 +2161,16 @@ menu,
background-color: transparent; }
menu menuitem arrow,
.menu menuitem arrow {
- min-height: 16px;
- min-width: 16px; }
+ min-height: 1.14286rem;
+ min-width: 1.14286rem; }
menu menuitem arrow:dir(ltr),
.menu menuitem arrow:dir(ltr) {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");
- margin-left: 10px; }
+ margin-left: 0.71429rem; }
menu menuitem arrow:dir(rtl),
.menu menuitem arrow:dir(rtl) {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl");
- margin-right: 10px; }
+ margin-right: 0.71429rem; }
menu > arrow,
.menu > arrow {
border-color: transparent;
@@ -2178,19 +2179,19 @@ menu,
box-shadow: inset 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
-gtk-icon-shadow: none;
- min-height: 16px;
- min-width: 16px;
- padding: 4px;
+ min-height: 1.14286rem;
+ min-width: 1.14286rem;
+ padding: 0.28571rem;
background-color: #ffffff;
border-radius: 0; }
menu > arrow.top,
.menu > arrow.top {
- margin-top: -6px;
+ margin-top: -0.42857rem;
border-bottom: 1px solid #eaebeb;
-gtk-icon-source: -gtk-icontheme("pan-up-symbolic"); }
menu > arrow.bottom,
.menu > arrow.bottom {
- margin-bottom: -6px;
+ margin-bottom: -0.42857rem;
border-top: 1px solid #eaebeb;
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
menu > arrow:hover,
@@ -2209,21 +2210,21 @@ menuitem accelerator {
color: alpha(currentColor,0.55); }
menuitem check,
menuitem radio {
- min-height: 16px;
- min-width: 16px; }
+ min-height: 1.14286rem;
+ min-width: 1.14286rem; }
menuitem check:dir(ltr),
menuitem radio:dir(ltr) {
- margin-right: 7px; }
+ margin-right: 0.5rem; }
menuitem check:dir(rtl),
menuitem radio:dir(rtl) {
- margin-left: 7px; }
+ margin-left: 0.5rem; }
/***************
* Popovers *
***************/
popover.background {
- padding: 2px;
- border-radius: 5px;
+ padding: 0.14286rem;
+ border-radius: 0.35714rem;
background-color: #e8e8e7;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
popover.background, .csd popover.background {
@@ -2240,7 +2241,7 @@ popover.background {
popover.background.touch-selection, popover.background.magnifier, .csd popover.background.touch-selection,
.csd popover.background.magnifier {
border: 1px solid rgba(255, 255, 255, 0.1); }
popover.background separator {
- margin: 3px; }
+ margin: 0.21429rem; }
popover.background list separator {
margin: 0px; }
@@ -2248,7 +2249,7 @@ popover.background {
* Notebooks *
*************/
notebook > header {
- padding: 1px;
+ padding: 0.07143rem;
border-color: #9d9d99;
border-width: 1px;
background-color: #cececc; }
@@ -2260,50 +2261,50 @@ notebook > header {
notebook > header.top {
border-bottom-style: solid; }
notebook > header.top > tabs {
- margin-bottom: -2px; }
+ margin-bottom: calc(-0.07143rem - 1px); }
notebook > header.top > tabs > tab:hover {
- box-shadow: inset 0 -3px #9d9d99; }
+ box-shadow: inset 0 -0.21429rem #9d9d99; }
notebook > header.top > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.top > tabs > tab:checked {
- box-shadow: inset 0 -3px #4a90d9; }
+ box-shadow: inset 0 -0.21429rem #4a90d9; }
notebook > header.bottom {
border-top-style: solid; }
notebook > header.bottom > tabs {
- margin-top: -2px; }
+ margin-top: calc(-0.07143rem - 1px); }
notebook > header.bottom > tabs > tab:hover {
- box-shadow: inset 0 3px #9d9d99; }
+ box-shadow: inset 0 0.21429rem #9d9d99; }
notebook > header.bottom > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.bottom > tabs > tab:checked {
- box-shadow: inset 0 3px #4a90d9; }
+ box-shadow: inset 0 0.21429rem #4a90d9; }
notebook > header.left {
border-right-style: solid; }
notebook > header.left > tabs {
- margin-right: -2px; }
+ margin-right: calc(-0.07143rem - 1px); }
notebook > header.left > tabs > tab:hover {
- box-shadow: inset -3px 0 #9d9d99; }
+ box-shadow: inset -0.21429rem 0 #9d9d99; }
notebook > header.left > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.left > tabs > tab:checked {
- box-shadow: inset -3px 0 #4a90d9; }
+ box-shadow: inset -0.21429rem 0 #4a90d9; }
notebook > header.right {
border-left-style: solid; }
notebook > header.right > tabs {
- margin-left: -2px; }
+ margin-left: calc(-0.07143rem - 1px); }
notebook > header.right > tabs > tab:hover {
- box-shadow: inset 3px 0 #9d9d99; }
+ box-shadow: inset 0.21429rem 0 #9d9d99; }
notebook > header.right > tabs > tab:backdrop {
box-shadow: none; }
notebook > header.right > tabs > tab:checked {
- box-shadow: inset 3px 0 #4a90d9; }
+ box-shadow: inset 0.21429rem 0 #4a90d9; }
notebook > header.top > tabs > arrow {
border-top-style: none; }
notebook > header.bottom > tabs > arrow {
border-bottom-style: none; }
notebook > header.top > tabs > arrow, notebook > header.bottom > tabs > arrow {
- margin-left: -5px;
- margin-right: -5px;
+ margin-left: calc(-0.28571rem - 1px);
+ margin-right: calc(-0.28571rem - 1px);
padding-left: 4px;
padding-right: 4px; }
notebook > header.top > tabs > arrow.down, notebook > header.bottom > tabs > arrow.down {
@@ -2315,17 +2316,17 @@ notebook > header {
notebook > header.right > tabs > arrow {
border-right-style: none; }
notebook > header.left > tabs > arrow, notebook > header.right > tabs > arrow {
- margin-top: -5px;
- margin-bottom: -5px;
- padding-top: 4px;
- padding-bottom: 4px; }
+ margin-top: calc(-0.28571rem - 1px);
+ margin-bottom: calc(-0.28571rem - 1px);
+ padding-top: 0.28571rem;
+ padding-bottom: 0.28571rem; }
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.up, notebook > header.right > tabs > arrow.up {
-gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
notebook > header > tabs > arrow {
- min-height: 16px;
- min-width: 16px;
+ min-height: 1.14286rem;
+ min-width: 1.14286rem;
border-radius: 0; }
notebook > header > tabs > arrow:hover:not(:active):not(:backdrop) {
background-clip: padding-box;
@@ -2341,10 +2342,10 @@ notebook > header {
text-shadow: none;
-gtk-icon-shadow: none; }
notebook > header tab {
- min-height: 30px;
- min-width: 30px;
- padding: 3px 12px;
- outline-offset: -5px;
+ min-height: 2.14286rem;
+ min-width: 2.14286rem;
+ padding: 0.21429rem 0.85714rem;
+ outline-offset: -0.35714rem;
color: #8b8e8f;
font-weight: bold;
border-width: 1px;
@@ -2373,54 +2374,54 @@ notebook > header {
background-color: #e8e8e7; }
notebook > header tab button.flat {
padding: 0;
- margin-top: 4px;
- margin-bottom: 4px;
- min-width: 20px;
- min-height: 20px; }
+ margin-top: 0.28571rem;
+ margin-bottom: 0.28571rem;
+ min-width: 1.42857rem;
+ min-height: 1.42857rem; }
notebook > header tab button.flat:hover {
color: currentColor; }
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; }
+ margin-left: 0.28571rem;
+ margin-right: -0.28571rem; }
notebook > header tab button.flat:first-child {
- margin-left: -4px;
- margin-right: 4px; }
+ margin-left: -0.28571rem;
+ margin-right: 0.28571rem; }
notebook > header.top tabs, notebook > header.bottom tabs {
- padding-left: 4px;
- padding-right: 4px; }
+ padding-left: 0.28571rem;
+ padding-right: 0.28571rem; }
notebook > header.top tabs:not(:only-child), notebook > header.bottom tabs:not(:only-child) {
- margin-left: 3px;
- margin-right: 3px; }
+ margin-left: calc(0.28571rem - 1px);
+ margin-right: calc(0.28571rem - 1px); }
notebook > header.top tabs:not(:only-child):first-child, notebook > header.bottom
tabs:not(:only-child):first-child {
margin-left: -1px; }
notebook > header.top tabs:not(:only-child):last-child, notebook > header.bottom
tabs:not(:only-child):last-child {
margin-right: -1px; }
notebook > header.top tabs tab, notebook > header.bottom tabs tab {
- margin-left: 4px;
- margin-right: 4px; }
+ margin-left: 0.28571rem;
+ margin-right: 0.28571rem; }
notebook > header.top tabs tab.reorderable-page, notebook > header.bottom tabs tab.reorderable-page {
border-style: none solid; }
notebook > header.left tabs, notebook > header.right tabs {
- padding-top: 4px;
- padding-bottom: 4px; }
+ padding-top: 0.28571rem;
+ padding-bottom: 0.28571rem; }
notebook > header.left tabs:not(:only-child), notebook > header.right tabs:not(:only-child) {
- margin-top: 3px;
- margin-bottom: 3px; }
+ margin-top: calc(0.28571rem - 1px);
+ margin-bottom: calc(0.28571rem - 1px); }
notebook > header.left tabs:not(:only-child):first-child, notebook > header.right
tabs:not(:only-child):first-child {
margin-top: -1px; }
notebook > header.left tabs:not(:only-child):last-child, notebook > header.right
tabs:not(:only-child):last-child {
margin-bottom: -1px; }
notebook > header.left tabs tab, notebook > header.right tabs tab {
- margin-top: 4px;
- margin-bottom: 4px; }
+ margin-top: 0.28571rem;
+ margin-bottom: 0.28571rem; }
notebook > header.left tabs tab.reorderable-page, notebook > header.right tabs tab.reorderable-page {
border-style: solid none; }
notebook > header.top tab {
- padding-bottom: 4px; }
+ padding-bottom: 0.28571rem; }
notebook > header.bottom tab {
- padding-top: 4px; }
+ padding-top: 0.28571rem; }
notebook > stack:not(:only-child) {
background-color: #ffffff; }
notebook > stack:not(:only-child):backdrop {
@@ -2448,11 +2449,11 @@ scrollbar {
border-color: #a5a5a1;
transition: 200ms ease-out; }
scrollbar slider {
- min-width: 6px;
- min-height: 6px;
- margin: -1px;
- border: 4px solid transparent;
- border-radius: 8px;
+ min-width: 0.42857rem;
+ min-height: 0.42857rem;
+ margin: -0.07143rem;
+ border: 0.28571rem solid transparent;
+ border-radius: 0.57143rem;
background-clip: padding-box;
background-color: #787c7d; }
scrollbar slider:hover {
@@ -2464,52 +2465,52 @@ scrollbar {
scrollbar slider:disabled {
background-color: transparent; }
scrollbar.fine-tune slider {
- min-width: 4px;
- min-height: 4px; }
+ min-width: 0.28571rem;
+ min-height: 0.28571rem; }
scrollbar.fine-tune.horizontal slider {
- border-width: 5px 4px; }
+ border-width: 0.35714rem 0.28571rem; }
scrollbar.fine-tune.vertical slider {
- border-width: 4px 5px; }
+ border-width: 0.28571rem 0.35714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) {
border-color: transparent;
opacity: 0.4;
background-color: transparent; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) slider {
margin: 0;
- min-width: 3px;
- min-height: 3px;
+ min-width: 0.21429rem;
+ min-height: 0.21429rem;
background-color: #2e3436;
border: 1px solid white; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering) button {
- min-width: 5px;
- min-height: 5px;
+ min-width: 0.35714rem;
+ min-height: 0.35714rem;
background-color: #2e3436;
background-clip: padding-box;
border-radius: 100%;
border: 1px solid white;
-gtk-icon-source: none; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal slider {
- margin: 0 2px;
- min-width: 40px; }
+ margin: 0 0.14286rem;
+ min-width: 2.85714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).horizontal button {
- margin: 1px 2px;
- min-width: 5px; }
+ margin: 0.07143rem 0.14286rem;
+ min-width: 0.35714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical slider {
- margin: 2px 0;
- min-height: 40px; }
+ margin: 0.14286rem 0;
+ min-height: 2.85714rem; }
scrollbar.overlay-indicator:not(.dragging):not(.hovering).vertical button {
- margin: 2px 1px;
- min-height: 5px; }
+ margin: 0.14286rem 0.07143rem;
+ min-height: 0.35714rem; }
scrollbar.overlay-indicator.dragging, scrollbar.overlay-indicator.hovering {
opacity: 0.8; }
scrollbar.horizontal slider {
- min-width: 40px; }
+ min-width: 2.85714rem; }
scrollbar.vertical slider {
- min-height: 40px; }
+ min-height: 2.85714rem; }
scrollbar button {
padding: 0;
- min-width: 12px;
- min-height: 12px;
+ min-width: 0.85714rem;
+ min-height: 0.85714rem;
border-style: none;
border-radius: 0;
transition-property: min-height, min-width, color;
@@ -2582,7 +2583,7 @@ switch {
outline-offset: -4px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px transparent;
border: 1px solid #9d9d99;
- border-radius: 3px;
+ border-radius: 0.21429rem;
color: #2e3436;
background-image: linear-gradient(to bottom, #cacac8);
text-shadow: 0 1px rgba(0, 0, 0, 0.1); }
@@ -2619,10 +2620,10 @@ switch {
background-color: #f1f1f1; }
switch slider {
margin: -1px;
- min-width: 45px;
- min-height: 27px;
+ min-width: 3.21429rem;
+ min-height: 1.92857rem;
border: 1px solid;
- border-radius: 3px;
+ border-radius: 0.21429rem;
transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
@@ -2722,18 +2723,18 @@ switch {
background-color: transparent; }
checkbutton.text-button, radiobutton.text-button {
- padding: 2px 0;
+ padding: 0.14286rem 0;
outline-offset: 0; }
checkbutton.text-button label:not(:only-child):first-child, radiobutton.text-button
label:not(:only-child):first-child {
- margin-left: 4px; }
+ margin-left: 0.28571rem; }
checkbutton.text-button label:not(:only-child):last-child, radiobutton.text-button
label:not(:only-child):last-child {
- margin-right: 4px; }
+ margin-right: 0.28571rem; }
check,
radio {
- margin: 0 4px;
- min-height: 14px;
- min-width: 14px;
+ margin: 0 0.28571rem;
+ min-height: 1rem;
+ min-width: 1rem;
border: 1px solid;
-gtk-icon-source: none;
color: #2e3436;
@@ -2854,8 +2855,8 @@ radio {
radio, menu menuitem
radio:hover, menu menuitem
radio:disabled {
- min-height: 14px;
- min-width: 14px;
+ min-height: 1rem;
+ min-width: 1rem;
background-image: none;
background-color: transparent;
box-shadow: none;
@@ -2865,7 +2866,7 @@ radio {
animation: none; }
check {
- border-radius: 3px; }
+ border-radius: 0.21429rem; }
check:checked {
-gtk-icon-source: image(-gtk-recolor(url("assets/check-symbolic.svg")),
-gtk-recolor(url("assets/check-symbolic.symbolic.png"))); }
check:indeterminate {
@@ -3610,7 +3611,7 @@ progressbar {
/*************
* Level Bar *
*************/
-levelbar block {
+levelbar.horizontal block {
min-width: 32px;
min-height: 1px; }
levelbar.vertical block {
@@ -3699,7 +3700,7 @@ frame > border,
border-color: #a5a5a1; }
actionbar > revealer > box {
- padding: 6px;
+ padding: 0.42857rem;
border-top: 1px solid #9d9d99; }
actionbar > revealer > box:backdrop {
border-color: #a5a5a1; }
@@ -3837,7 +3838,7 @@ list {
background-color: #fcfcfc;
border-color: #a5a5a1; }
list row {
- padding: 2px; }
+ padding: 0.14286rem; }
row {
transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
@@ -3863,8 +3864,8 @@ row {
*********************/
.app-notification,
.app-notification.frame {
- padding: 10px;
- border-radius: 0 0 5px 5px;
+ padding: 0.71429rem;
+ border-radius: 0 0 0.35714rem 0.35714rem;
background-color: rgba(32, 37, 38, 0.8);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent 2px);
background-clip: padding-box; }
@@ -3880,8 +3881,8 @@ row {
* Expanders *
*************/
expander arrow {
- min-width: 16px;
- min-height: 16px;
+ min-width: 1.14286rem;
+ min-height: 1.14286rem;
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
expander arrow:dir(rtl) {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
@@ -3897,7 +3898,7 @@ calendar {
color: black;
border: 1px solid #9d9d99; }
calendar:selected {
- border-radius: 3px; }
+ border-radius: 0.21429rem; }
calendar.header {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 0; }
@@ -3924,28 +3925,28 @@ calendar {
* Dialogs *
***********/
messagedialog .titlebar {
- min-height: 20px;
+ min-height: 1.42857rem;
background-image: none;
background-color: #e8e8e7;
border-style: none;
- border-top-left-radius: 7px;
- border-top-right-radius: 7px; }
+ border-top-left-radius: 0.5rem;
+ border-top-right-radius: 0.5rem; }
messagedialog.csd.background {
- border-bottom-left-radius: 9px;
- border-bottom-right-radius: 9px; }
+ border-bottom-left-radius: 0.64286rem;
+ border-bottom-right-radius: 0.64286rem; }
messagedialog.csd .dialog-action-area button {
- padding: 10px 14px;
+ padding: 0.71429rem 1rem;
border-radius: 0;
border-left-style: solid;
border-right-style: none;
border-bottom-style: none; }
messagedialog.csd .dialog-action-area button:first-child {
border-left-style: none;
- border-bottom-left-radius: 7px;
- -gtk-outline-bottom-left-radius: 5px; }
+ border-bottom-left-radius: 0.5rem;
+ -gtk-outline-bottom-left-radius: 0.35714rem; }
messagedialog.csd .dialog-action-area button:last-child {
- border-bottom-right-radius: 7px;
- -gtk-outline-bottom-right-radius: 5px; }
+ border-bottom-right-radius: 0.5rem;
+ -gtk-outline-bottom-right-radius: 0.35714rem; }
filechooser .dialog-action-box {
border-top: 1px solid #9d9d99; }
@@ -3982,12 +3983,12 @@ filechooserbutton:drop(active) {
border-style: none; }
stacksidebar row {
- padding: 10px 4px; }
+ padding: 0.71429rem 0.28571rem; }
stacksidebar row > label {
- padding-left: 6px;
- padding-right: 6px; }
+ padding-left: 0.42857rem;
+ padding-right: 0.42857rem; }
stacksidebar row.needs-attention > label {
- background-size: 6px 6px, 0 0; }
+ background-size: 0.42857rem 0.42857rem, 0 0; }
/****************
* File chooser *
@@ -3995,10 +3996,10 @@ stacksidebar row {
placessidebar > viewport.frame {
border-style: none; }
placessidebar row {
- min-height: 36px;
+ min-height: 2.57143rem;
padding: 0px; }
placessidebar row > revealer {
- padding: 0 14px; }
+ padding: 0 1rem; }
placessidebar row:selected {
color: #ffffff; }
placessidebar row:disabled {
@@ -4012,18 +4013,18 @@ placessidebar row {
placessidebar row image.sidebar-icon {
opacity: 0.7; }
placessidebar row image.sidebar-icon:dir(ltr) {
- padding-right: 8px; }
+ padding-right: 0.57143rem; }
placessidebar row image.sidebar-icon:dir(rtl) {
- padding-left: 8px; }
+ padding-left: 0.57143rem; }
placessidebar row label.sidebar-label:dir(ltr) {
- padding-right: 2px; }
+ padding-right: 0.14286rem; }
placessidebar row label.sidebar-label:dir(rtl) {
- padding-left: 2px; }
+ padding-left: 0.14286rem; }
button.sidebar-button {
- min-height: 26px;
- min-width: 26px;
- margin-top: 3px;
- margin-bottom: 3px;
+ min-height: 1.85714rem;
+ min-width: 1.85714rem;
+ margin-top: 0.21429rem;
+ margin-bottom: 0.21429rem;
padding: 0;
border-radius: 100%;
-gtk-outline-radius: 100%; }
@@ -4032,7 +4033,7 @@ placessidebar row {
placessidebar row:selected:active {
box-shadow: none; }
placessidebar row.sidebar-placeholder-row {
- padding: 0 8px;
+ padding: 0 0.57143rem;
min-height: 2px;
background-image: image(#4e9a06);
background-clip: content-box; }
@@ -4054,8 +4055,8 @@ placesview .server-list-button:checked > image {
placesview row.activatable:hover {
background-color: transparent; }
placesview > actionbar > revealer > box > label {
- padding-left: 8px;
- padding-right: 8px; }
+ padding-left: 0.57143rem;
+ padding-right: 0.57143rem; }
/*********
* Paned *
@@ -4073,8 +4074,8 @@ paned > separator {
paned > separator:backdrop {
background-image: image(#a5a5a1); }
paned > separator.wide {
- min-width: 5px;
- min-height: 5px;
+ min-width: 0.35714rem;
+ min-height: 0.35714rem;
background-color: #e8e8e7;
background-image: image(#9d9d99), image(#9d9d99);
background-size: 1px 1px, 1px 1px; }
@@ -4084,12 +4085,12 @@ paned > separator {
paned.horizontal > separator {
background-repeat: repeat-y; }
paned.horizontal > separator:dir(ltr) {
- margin: 0 -8px 0 0;
- padding: 0 8px 0 0;
+ margin: 0 -0.57143rem 0 0;
+ padding: 0 0.57143rem 0 0;
background-position: left; }
paned.horizontal > separator:dir(rtl) {
- margin: 0 0 0 -8px;
- padding: 0 0 0 8px;
+ margin: 0 0 0 -0.57143rem;
+ padding: 0 0 0 0.57143rem;
background-position: right; }
paned.horizontal > separator.wide {
margin: 0;
@@ -4097,8 +4098,8 @@ paned.horizontal > separator {
background-repeat: repeat-y, repeat-y;
background-position: left, right; }
paned.vertical > separator {
- margin: 0 0 -8px 0;
- padding: 0 0 8px 0;
+ margin: 0 0 -0.57143rem 0;
+ padding: 0 0 0.57143rem 0;
background-repeat: repeat-x;
background-position: top; }
paned.vertical > separator.wide {
@@ -4226,9 +4227,8 @@ infobar {
* Tooltips *
************/
tooltip {
- padding: 4px;
- /* not working */
- border-radius: 5px;
+ padding: 0.28571rem;
+ border-radius: 0.35714rem;
box-shadow: none;
text-shadow: 0 1px black; }
tooltip.background {
@@ -4238,7 +4238,7 @@ tooltip {
tooltip decoration {
background-color: transparent; }
tooltip * {
- padding: 4px;
+ padding: 0.28571rem;
background-color: transparent;
color: white; }
@@ -4354,10 +4354,10 @@ colorchooser .popover.osd {
.osd .scale-popup button.flat {
border-style: none;
- border-radius: 5px; }
+ border-radius: 0.35714rem; }
.scale-popup button:hover {
background-color: rgba(46, 52, 54, 0.1);
- border-radius: 5px; }
+ border-radius: 0.35714rem; }
/**********************
* Window Decorations *
@@ -4541,8 +4541,8 @@ stackswitcher button.text-button {
stackswitcher button.circular,
stackswitcher button.text-button.circular {
- min-width: 32px;
- min-height: 32px;
+ min-width: 2.28571rem;
+ min-height: 2.28571rem;
padding: 0; }
/* GTK NAMED COLORS
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
