mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2024-10-18 05:20:35 -04:00
update
This commit is contained in:
parent
1b3b2b4cfa
commit
85d421879e
24 changed files with 153 additions and 158 deletions
|
@ -7,6 +7,7 @@ $asset_suffix: if($variant == 'dark', '-dark', '');
|
||||||
//
|
//
|
||||||
|
|
||||||
$base_padding: if($compact == 'false', 6px, 4px);
|
$base_padding: if($compact == 'false', 6px, 4px);
|
||||||
|
$base_margin: if($compact == 'false', 4px, 3px);
|
||||||
$menu_margin: $base_padding; //margin around menuitems & sidebar items
|
$menu_margin: $base_padding; //margin around menuitems & sidebar items
|
||||||
$menu_padding: $base_padding * 2; //inner menuitem padding
|
$menu_padding: $base_padding * 2; //inner menuitem padding
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
avatar {
|
avatar {
|
||||||
border-radius: 9999px;
|
border-radius: $circular_radius;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
||||||
// The list of colors to generate avatars.
|
// The list of colors to generate avatars.
|
||||||
|
|
|
@ -296,8 +296,8 @@ button {
|
||||||
|
|
||||||
@at-root %circular_button,
|
@at-root %circular_button,
|
||||||
&.circular { // force circular button shape
|
&.circular { // force circular button shape
|
||||||
min-width: 34px;
|
min-width: $medium_size - 2px;
|
||||||
min-height: 34px;
|
min-height: $medium_size - 2px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-radius: $circular_radius;
|
border-radius: $circular_radius;
|
||||||
|
|
||||||
|
@ -355,7 +355,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
button.color {
|
button.color {
|
||||||
padding: 5px;
|
padding: $base_padding;
|
||||||
|
|
||||||
> colorswatch:only-child {
|
> colorswatch:only-child {
|
||||||
border-radius: 2.5px;
|
border-radius: 2.5px;
|
||||||
|
@ -422,8 +422,8 @@ menubutton {
|
||||||
|
|
||||||
&.image-button > button {
|
&.image-button > button {
|
||||||
min-width: 24px;
|
min-width: 24px;
|
||||||
padding-left: 5px;
|
padding-left: $base_padding;
|
||||||
padding-right: 5px;
|
padding-right: $base_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.card > button {
|
&.card > button {
|
||||||
|
@ -460,31 +460,31 @@ splitbutton {
|
||||||
}
|
}
|
||||||
|
|
||||||
> separator {
|
> separator {
|
||||||
margin-top: 6px;
|
margin-top: $base_padding;
|
||||||
margin-bottom: 6px;
|
margin-bottom: $base_padding;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
> menubutton > button {
|
> menubutton > button {
|
||||||
padding-left: 4px;
|
padding-left: $base_margin;
|
||||||
padding-right: 4px;
|
padding-right: $base_margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Since the inner button doesn't have any style classes on it,
|
// Since the inner button doesn't have any style classes on it,
|
||||||
// we have to add them manually
|
// we have to add them manually
|
||||||
&.image-button > button {
|
&.image-button > button {
|
||||||
min-width: 24px;
|
min-width: 24px;
|
||||||
padding-left: 5px;
|
padding-left: $base_padding;
|
||||||
padding-right: 5px;
|
padding-right: $base_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.text-button.image-button > button,
|
&.text-button.image-button > button,
|
||||||
&.image-text-button > button {
|
&.image-text-button > button {
|
||||||
padding-left: 9px;
|
padding-left: $base_padding * 1.5;
|
||||||
padding-right: 9px;
|
padding-right: $base_padding * 1.5;
|
||||||
|
|
||||||
> box {
|
> box {
|
||||||
border-spacing: 6px;
|
border-spacing: $base_padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -14,8 +14,8 @@ calendar {
|
||||||
}
|
}
|
||||||
|
|
||||||
> grid {
|
> grid {
|
||||||
padding-left: 3px;
|
padding-left: $base_padding / 2;
|
||||||
padding-bottom: 3px;
|
padding-bottom: $base_padding / 2;
|
||||||
|
|
||||||
> label.today {
|
> label.today {
|
||||||
box-shadow: inset 0px -2px $border_color;
|
box-shadow: inset 0px -2px $border_color;
|
||||||
|
@ -27,11 +27,11 @@ calendar {
|
||||||
|
|
||||||
> label {
|
> label {
|
||||||
@include focus-ring($focus-state: ':focus');
|
@include focus-ring($focus-state: ':focus');
|
||||||
margin-top: 3px;
|
margin-top: $base_padding / 2;
|
||||||
margin-right: 3px;
|
margin-right: $base_padding / 2;
|
||||||
|
|
||||||
&.day-number {
|
&.day-number {
|
||||||
padding: 3px;
|
padding: $base_padding / 2;
|
||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
border-radius: $button_radius;
|
border-radius: $button_radius;
|
||||||
|
|
|
@ -71,7 +71,7 @@ columnview {
|
||||||
|
|
||||||
// align horizontal sizing with header buttons
|
// align horizontal sizing with header buttons
|
||||||
> cell {
|
> cell {
|
||||||
padding: 8px 6px;
|
padding: $base_padding + 2px $base_padding;
|
||||||
|
|
||||||
&:not(:first-child) {
|
&:not(:first-child) {
|
||||||
border-left: 1px solid transparent;
|
border-left: 1px solid transparent;
|
||||||
|
|
|
@ -152,7 +152,7 @@ infobar {
|
||||||
.close {
|
.close {
|
||||||
min-width: 18px;
|
min-width: 18px;
|
||||||
min-height: 18px;
|
min-height: 18px;
|
||||||
padding: 4px;
|
padding: $base_margin;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
@extend %button_basic_flat;
|
@extend %button_basic_flat;
|
||||||
}
|
}
|
||||||
|
@ -163,7 +163,7 @@ infobar {
|
||||||
****************/
|
****************/
|
||||||
|
|
||||||
statusbar {
|
statusbar {
|
||||||
padding: 6px 10px 6px 10px;
|
padding: $base_padding $base_padding + $base_margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
/***************
|
/***************
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
dropdown {
|
dropdown {
|
||||||
> button > box {
|
> button > box {
|
||||||
border-spacing: 6px;
|
border-spacing: $base_padding;
|
||||||
|
|
||||||
> stack > row.activatable {
|
> stack > row.activatable {
|
||||||
&:hover, &:active { background: none; }
|
&:hover, &:active { background: none; }
|
||||||
|
@ -20,7 +20,7 @@ dropdown {
|
||||||
}
|
}
|
||||||
|
|
||||||
popover.menu {
|
popover.menu {
|
||||||
padding-top: 6px;
|
padding-top: $base_padding;
|
||||||
|
|
||||||
listview > row {
|
listview > row {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
@ -28,7 +28,7 @@ dropdown {
|
||||||
|
|
||||||
// dropdowns with searchboxes on top
|
// dropdowns with searchboxes on top
|
||||||
.dropdown-searchbar {
|
.dropdown-searchbar {
|
||||||
padding: 6px;
|
padding: $base_padding;
|
||||||
|
|
||||||
+ scrolledwindow {
|
+ scrolledwindow {
|
||||||
@include undershoot(top, $popover_shade_color);
|
@include undershoot(top, $popover_shade_color);
|
||||||
|
|
|
@ -3,13 +3,13 @@ popover.emoji-picker > contents {
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-searchbar {
|
.emoji-searchbar {
|
||||||
padding: 6px;
|
padding: $base_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
.emoji-toolbar {
|
.emoji-toolbar {
|
||||||
// flowbox children already have 3px padding, so we only need 3px more to
|
// flowbox children already have 3px padding, so we only need 3px more to
|
||||||
// get the regular 6px. We also don't need spacing, for the same reason.
|
// get the regular 6px. We also don't need spacing, for the same reason.
|
||||||
padding: 3px;
|
padding: $base_padding / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
|
button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
|
||||||
|
@ -22,7 +22,7 @@ button.emoji-section.image-button:not(.raised):not(.suggested-action):not(.destr
|
||||||
|
|
||||||
popover.emoji-picker emoji {
|
popover.emoji-picker emoji {
|
||||||
font-size: x-large;
|
font-size: x-large;
|
||||||
padding: 6px;
|
padding: $base_padding;
|
||||||
border-radius: $button_radius;
|
border-radius: $button_radius;
|
||||||
|
|
||||||
&:focus,
|
&:focus,
|
||||||
|
|
|
@ -67,8 +67,8 @@ entry {
|
||||||
opacity: .8;
|
opacity: .8;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.left { margin-right: 6px; }
|
&.left { margin-right: $base_padding; }
|
||||||
&.right { margin-left: 6px; }
|
&.right { margin-left: $base_padding; }
|
||||||
}
|
}
|
||||||
|
|
||||||
&.password image.caps-lock-indicator {
|
&.password image.caps-lock-indicator {
|
||||||
|
@ -84,7 +84,7 @@ entry {
|
||||||
}
|
}
|
||||||
|
|
||||||
> progress {
|
> progress {
|
||||||
margin-bottom: 3px;
|
margin-bottom: $base_padding / 2;
|
||||||
|
|
||||||
> trough > progress {
|
> trough > progress {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
@ -5,11 +5,11 @@ placessidebar {
|
||||||
|
|
||||||
// Using margins/padding directly in the SidebarRow
|
// Using margins/padding directly in the SidebarRow
|
||||||
// will make the animation of the new bookmark row jump
|
// will make the animation of the new bookmark row jump
|
||||||
> revealer { padding: 0 14px; }
|
> revealer { padding: 0 $base_padding * 2 + 2px; }
|
||||||
|
|
||||||
image.sidebar-icon {
|
image.sidebar-icon {
|
||||||
&:dir(ltr) { padding-right: 8px; }
|
&:dir(ltr) { padding-right: $base_padding + 2px; }
|
||||||
&:dir(rtl) { padding-left: 8px; }
|
&:dir(rtl) { padding-left: $base_padding + 2px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
label.sidebar-label {
|
label.sidebar-label {
|
||||||
|
@ -32,7 +32,7 @@ placessidebar {
|
||||||
&:selected:active { box-shadow: none; }
|
&:selected:active { box-shadow: none; }
|
||||||
|
|
||||||
&.sidebar-placeholder-row {
|
&.sidebar-placeholder-row {
|
||||||
padding: 0 8px;
|
padding: 0 $base_padding + 2px;
|
||||||
min-height: 2px;
|
min-height: 2px;
|
||||||
background-image: image($drop_target_color);
|
background-image: image($drop_target_color);
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
|
@ -102,7 +102,7 @@ filechooser {
|
||||||
|
|
||||||
// Icon + label buttons
|
// Icon + label buttons
|
||||||
> box {
|
> box {
|
||||||
border-spacing: 4px;
|
border-spacing: $base_margin;
|
||||||
|
|
||||||
> label {
|
> label {
|
||||||
padding-left: 2px;
|
padding-left: 2px;
|
||||||
|
|
|
@ -357,22 +357,22 @@ windowcontrols {
|
||||||
headerbar,
|
headerbar,
|
||||||
windowtitle {
|
windowtitle {
|
||||||
.title {
|
.title {
|
||||||
padding-left: 12px;
|
padding-left: $base_padding * 2;
|
||||||
padding-right: 12px;
|
padding-right: $base_padding * 2;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: smaller;
|
font-size: smaller;
|
||||||
padding-left: 12px;
|
padding-left: $base_padding * 2;
|
||||||
padding-right: 12px;
|
padding-right: $base_padding * 2;
|
||||||
@extend .dim-label;
|
@extend .dim-label;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
windowtitle {
|
windowtitle {
|
||||||
margin-top: -6px;
|
margin-top: -$base_padding;
|
||||||
margin-bottom: -6px;
|
margin-bottom: -$base_padding;
|
||||||
min-height: 12px;
|
min-height: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -43,34 +43,6 @@ listview > header {
|
||||||
|
|
||||||
row {
|
row {
|
||||||
@include focus-ring();
|
@include focus-ring();
|
||||||
|
|
||||||
.osd & {
|
|
||||||
&:focus:focus-visible {
|
|
||||||
outline-color: $osd_focus_color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.activatable {
|
|
||||||
&:hover { background-color: $hover_color; }
|
|
||||||
|
|
||||||
&:active { background-color: $active_color; }
|
|
||||||
|
|
||||||
// this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
|
||||||
&.has-open-popup { background-color: $hover_color; }
|
|
||||||
|
|
||||||
&:selected {
|
|
||||||
&:hover { background-color: $selected_hover_color; }
|
|
||||||
|
|
||||||
&:active { background-color: $selected_active_color; }
|
|
||||||
|
|
||||||
&.has-open-popup { background-color: $selected_hover_color; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:selected {
|
|
||||||
background-color: $selected_color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
|
|
||||||
&.activatable {
|
&.activatable {
|
||||||
|
@ -114,6 +86,33 @@ row {
|
||||||
&:selected {
|
&:selected {
|
||||||
background-color: $view_selected_color;
|
background-color: $view_selected_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.osd & {
|
||||||
|
&:focus:focus-visible {
|
||||||
|
outline-color: $osd_focus_color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.activatable {
|
||||||
|
&:hover { background-color: $hover_color; }
|
||||||
|
|
||||||
|
&:active { background-color: $active_color; }
|
||||||
|
|
||||||
|
// this is for indicathing which row generated a popover see https://bugzilla.gnome.org/show_bug.cgi?id=754411
|
||||||
|
&.has-open-popup { background-color: $hover_color; }
|
||||||
|
|
||||||
|
&:selected {
|
||||||
|
&:hover { background-color: $selected_hover_color; }
|
||||||
|
|
||||||
|
&:active { background-color: $selected_active_color; }
|
||||||
|
|
||||||
|
&.has-open-popup { background-color: $selected_hover_color; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:selected {
|
||||||
|
background-color: $selected_color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*******************************************************
|
/*******************************************************
|
||||||
|
|
|
@ -125,7 +125,7 @@ popover.menu {
|
||||||
|
|
||||||
modelbutton {
|
modelbutton {
|
||||||
min-height: $menuitem_size;
|
min-height: $menuitem_size;
|
||||||
min-width: 40px;
|
min-width: $medium_size + 4px;
|
||||||
padding: 2px $menu_padding;
|
padding: 2px $menu_padding;
|
||||||
border-radius: $menuitem_radius;
|
border-radius: $menuitem_radius;
|
||||||
@include button(flat-normal);
|
@include button(flat-normal);
|
||||||
|
@ -234,7 +234,7 @@ menubar {
|
||||||
|
|
||||||
//nested submenus
|
//nested submenus
|
||||||
popover.menu popover.menu {
|
popover.menu popover.menu {
|
||||||
padding: 0 0 4px 0;
|
padding: 0 0 $base_margin 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
popover.menu popover.menu > contents {
|
popover.menu popover.menu > contents {
|
||||||
|
|
|
@ -25,7 +25,7 @@ window.dialog.message {
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
|
|
||||||
&.suggested-action {
|
&.suggested-action {
|
||||||
color: $accent_color;
|
color: $accent_bg_color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.destructive-action {
|
&.destructive-action {
|
||||||
|
|
|
@ -37,9 +37,8 @@ separator {
|
||||||
|
|
||||||
.app-notification {
|
.app-notification {
|
||||||
@extend %osd;
|
@extend %osd;
|
||||||
|
padding: $base_padding + $base_margin;
|
||||||
padding: 10px;
|
border-spacing: $base_padding + $base_margin;
|
||||||
border-spacing: 10px;
|
|
||||||
border-radius: 0 0 $card_radius $card_radius;
|
border-radius: 0 0 $card_radius $card_radius;
|
||||||
background-color: $osd_bg_color;
|
background-color: $osd_bg_color;
|
||||||
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
background-image: linear-gradient(to bottom, transparentize(black, 0.8),
|
||||||
|
|
|
@ -72,8 +72,8 @@ notebook {
|
||||||
@at-root %notebook_vert_arrows {
|
@at-root %notebook_vert_arrows {
|
||||||
margin-left: -5px;
|
margin-left: -5px;
|
||||||
margin-right: -5px;
|
margin-right: -5px;
|
||||||
padding-left: 4px;
|
padding-left: $base_margin;
|
||||||
padding-right: 4px;
|
padding-right: $base_margin;
|
||||||
|
|
||||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
&.down { -gtk-icon-source: -gtk-icontheme('pan-start-symbolic'); }
|
||||||
|
|
||||||
|
@ -95,8 +95,8 @@ notebook {
|
||||||
@at-root %notebook_horz_arrows {
|
@at-root %notebook_horz_arrows {
|
||||||
margin-top: -5px;
|
margin-top: -5px;
|
||||||
margin-bottom: -5px;
|
margin-bottom: -5px;
|
||||||
padding-top: 4px;
|
padding-top: $base_margin;
|
||||||
padding-bottom: 4px;
|
padding-bottom: $base_margin;
|
||||||
|
|
||||||
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
&.down { -gtk-icon-source: -gtk-icontheme('pan-up-symbolic'); }
|
||||||
|
|
||||||
|
@ -120,7 +120,7 @@ notebook {
|
||||||
transition: $focus_transition;
|
transition: $focus_transition;
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
min-width: 30px;
|
min-width: 30px;
|
||||||
padding: 3px 12px;
|
padding: $base_padding / 2 $base_padding * 2;
|
||||||
|
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
|
@ -146,20 +146,20 @@ notebook {
|
||||||
&:hover, &:active { color: currentColor; }
|
&:hover, &:active { color: currentColor; }
|
||||||
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin-top: 4px;
|
margin-top: $base_margin;
|
||||||
margin-bottom: 4px;
|
margin-bottom: $base_margin;
|
||||||
// FIXME: generalize .small-button?
|
// FIXME: generalize .small-button?
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
min-height: 20px;
|
min-height: 20px;
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-left: 4px;
|
margin-left: $base_margin;
|
||||||
margin-right: -4px;
|
margin-right: -$base_margin;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
margin-left: -4px;
|
margin-left: -$base_margin;
|
||||||
margin-right: 4px;
|
margin-right: $base_margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -167,20 +167,20 @@ notebook {
|
||||||
&.top,
|
&.top,
|
||||||
&.bottom {
|
&.bottom {
|
||||||
> tabs {
|
> tabs {
|
||||||
padding-left: 4px;
|
padding-left: $base_margin;
|
||||||
padding-right: 4px;
|
padding-right: $base_margin;
|
||||||
|
|
||||||
&:not(:only-child) {
|
&:not(:only-child) {
|
||||||
margin-left: 3px;
|
margin-left: $base_padding / 2;
|
||||||
margin-right: 3px;
|
margin-right: $base_padding / 2;
|
||||||
|
|
||||||
&:first-child { margin-left: -1px; }
|
&:first-child { margin-left: -1px; }
|
||||||
&:last-child { margin-right: -1px; }
|
&:last-child { margin-right: -1px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
> tab {
|
> tab {
|
||||||
margin-left: 4px;
|
margin-left: $base_margin;
|
||||||
margin-right: 4px;
|
margin-right: $base_margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -188,26 +188,26 @@ notebook {
|
||||||
&.left,
|
&.left,
|
||||||
&.right {
|
&.right {
|
||||||
> tabs {
|
> tabs {
|
||||||
padding-top: 4px;
|
padding-top: $base_margin;
|
||||||
padding-bottom: 4px;
|
padding-bottom: $base_margin;
|
||||||
|
|
||||||
&:not(:only-child) {
|
&:not(:only-child) {
|
||||||
margin-top: 3px;
|
margin-top: $base_padding / 2;
|
||||||
margin-bottom: 3px;
|
margin-bottom: $base_padding / 2;
|
||||||
|
|
||||||
&:first-child { margin-top: -1px; }
|
&:first-child { margin-top: -1px; }
|
||||||
&:last-child { margin-bottom: -1px; }
|
&:last-child { margin-bottom: -1px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
> tab {
|
> tab {
|
||||||
margin-top: 4px;
|
margin-top: $base_margin;
|
||||||
margin-bottom: 4px;
|
margin-bottom: $base_margin;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.top > tabs > tab { padding-bottom: 4px; }
|
&.top > tabs > tab { padding-bottom: $base_margin; }
|
||||||
&.bottom > tabs > tab { padding-top: 4px; }
|
&.bottom > tabs > tab { padding-top: $base_margin; }
|
||||||
}
|
}
|
||||||
|
|
||||||
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
> stack:not(:only-child) { // the :not(:only-child) is for "hidden" notebooks
|
||||||
|
|
|
@ -6,8 +6,8 @@ paned {
|
||||||
background-size: 1px 1px;
|
background-size: 1px 1px;
|
||||||
|
|
||||||
&.wide {
|
&.wide {
|
||||||
min-width: 5px;
|
min-width: $base_padding;
|
||||||
min-height: 5px;
|
min-height: $base_padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,14 +9,14 @@ shortcuts-section {
|
||||||
|
|
||||||
// shortcut window keys
|
// shortcut window keys
|
||||||
shortcut {
|
shortcut {
|
||||||
border-spacing: 6px;
|
border-spacing: $base_padding;
|
||||||
border-radius: 6px;
|
border-radius: $base_padding;
|
||||||
@include focus-ring($outer: true, $offset: 4px);
|
@include focus-ring($outer: true, $offset: 4px);
|
||||||
|
|
||||||
> .keycap {
|
> .keycap {
|
||||||
min-width: 20px;
|
min-width: 20px;
|
||||||
min-height: 25px;
|
min-height: 25px;
|
||||||
padding: 2px 6px;
|
padding: 2px $base_padding;
|
||||||
|
|
||||||
@extend %card;
|
@extend %card;
|
||||||
|
|
||||||
|
@ -26,7 +26,7 @@ shortcut {
|
||||||
}
|
}
|
||||||
|
|
||||||
shortcuts-section stackswitcher.circular {
|
shortcuts-section stackswitcher.circular {
|
||||||
border-spacing: 12px;
|
border-spacing: $base_padding * 2;
|
||||||
|
|
||||||
> button.circular,
|
> button.circular,
|
||||||
> button.text-button.circular {
|
> button.text-button.circular {
|
||||||
|
@ -42,7 +42,7 @@ window.shortcuts {
|
||||||
@extend %headerbar-shrunk;
|
@extend %headerbar-shrunk;
|
||||||
|
|
||||||
> windowhandle {
|
> windowhandle {
|
||||||
padding-top: 3px;
|
padding-top: $base_padding / 2;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -294,6 +294,8 @@ stacksidebar row {
|
||||||
**********************/
|
**********************/
|
||||||
|
|
||||||
.navigation-sidebar {
|
.navigation-sidebar {
|
||||||
|
padding: $base_padding 0; //only vertical padding. horizontal row size would clip
|
||||||
|
|
||||||
&, &.view, &.view:disabled {
|
&, &.view, &.view:disabled {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -306,6 +308,18 @@ stacksidebar row {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> row {
|
||||||
|
min-height: $medium_size;
|
||||||
|
padding: 0 $base_padding + 2px;
|
||||||
|
border-radius: $menuitem_radius;
|
||||||
|
margin: 0 $base_padding $base_padding / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
> separator {
|
||||||
|
margin: $base_padding;
|
||||||
|
background: none;
|
||||||
|
}
|
||||||
|
|
||||||
row {
|
row {
|
||||||
&.activatable {
|
&.activatable {
|
||||||
&:hover { background-color: $hover_color; }
|
&:hover { background-color: $hover_color; }
|
||||||
|
@ -328,18 +342,4 @@ stacksidebar row {
|
||||||
background-color: $selected_color;
|
background-color: $selected_color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
padding: $menu_margin 0; //only vertical padding. horizontal row size would clip
|
|
||||||
|
|
||||||
> separator {
|
|
||||||
margin: $menu_margin;
|
|
||||||
background: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> row {
|
|
||||||
min-height: $medium_size;
|
|
||||||
padding: 0 $base_padding + 2px;
|
|
||||||
border-radius: $menuitem_radius;
|
|
||||||
margin: 0 $menu_margin $base_padding / 2;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
spinbutton {
|
spinbutton {
|
||||||
@extend %entry;
|
@extend %entry;
|
||||||
@extend .numeric;
|
@extend .numeric;
|
||||||
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
|
|
||||||
|
@ -9,12 +8,9 @@ spinbutton {
|
||||||
> button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
|
> button.image-button.up:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque),
|
||||||
> button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
|
> button.image-button.down:not(.flat):not(.raised):not(.suggested-action):not(.destructive-action):not(.opaque) {
|
||||||
@extend %button_basic_flat;
|
@extend %button_basic_flat;
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
|
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: gtkalpha(currentColor, .1);
|
border-color: gtkalpha(currentColor, .1);
|
||||||
}
|
}
|
||||||
|
@ -22,7 +18,7 @@ spinbutton {
|
||||||
&:not(.vertical) {
|
&:not(.vertical) {
|
||||||
> text {
|
> text {
|
||||||
min-width: 28px;
|
min-width: 28px;
|
||||||
padding: 6px;
|
padding: $base_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* :not here just to bump specificity above that of the list button styling */
|
/* :not here just to bump specificity above that of the list button styling */
|
||||||
|
|
|
@ -22,7 +22,7 @@ tabbar {
|
||||||
tabbox {
|
tabbox {
|
||||||
padding-bottom: $base_padding;
|
padding-bottom: $base_padding;
|
||||||
padding-top: $base_padding;
|
padding-top: $base_padding;
|
||||||
min-height: 34px;
|
min-height: $medium_size;
|
||||||
|
|
||||||
> tabboxchild {
|
> tabboxchild {
|
||||||
@include focus-ring($focus-state: ':focus-within:focus-visible');
|
@include focus-ring($focus-state: ':focus-within:focus-visible');
|
||||||
|
@ -42,7 +42,7 @@ tabbar {
|
||||||
> revealer > indicator {
|
> revealer > indicator {
|
||||||
min-width: 2px;
|
min-width: 2px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
margin: 3px 6px;
|
margin: $base_padding / 2 $base_padding;
|
||||||
background: gtkalpha($accent_color, 0.5);
|
background: gtkalpha($accent_color, 0.5);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -130,15 +130,15 @@ dnd tab {
|
||||||
tabbar,
|
tabbar,
|
||||||
dnd {
|
dnd {
|
||||||
tab {
|
tab {
|
||||||
min-height: 26px;
|
min-height: 24px;
|
||||||
padding: 4px;
|
padding: ($medium_size - 24px) / 2;
|
||||||
border-radius: $button_radius;
|
border-radius: $button_radius;
|
||||||
|
|
||||||
button.image-button {
|
button.image-button {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-width: 24px;
|
min-width: $small_size;
|
||||||
min-height: 24px;
|
min-height: $small_size;
|
||||||
border-radius: $circular_radius;
|
border-radius: $circular_radius;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -10,8 +10,8 @@ tooltip {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
padding: 6px 10px;
|
padding: $base_padding $base_padding + $base_margin;
|
||||||
border-radius: 9px;
|
border-radius: $base_padding * 1.5;
|
||||||
box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
box-shadow: none; // otherwise it gets inherited by windowframe.csd
|
||||||
|
|
||||||
> box {
|
> box {
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
viewswitcher {
|
viewswitcher {
|
||||||
border-spacing: 3px;
|
border-spacing: $base_padding / 2;
|
||||||
|
|
||||||
&.narrow {
|
&.narrow {
|
||||||
margin-top: -3px;
|
margin-top: -$base_padding / 2;
|
||||||
margin-bottom: -3px;
|
margin-bottom: -$base_padding / 2;
|
||||||
min-height: 6px;
|
min-height: $base_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
button.toggle {
|
button.toggle {
|
||||||
|
@ -13,19 +13,19 @@ viewswitcher {
|
||||||
> stack > box {
|
> stack > box {
|
||||||
&.narrow {
|
&.narrow {
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
padding-top: 4px;
|
padding-top: $base_margin;
|
||||||
|
|
||||||
> label {
|
> label {
|
||||||
min-height: 18px;
|
min-height: 18px;
|
||||||
padding-left: 3px;
|
padding-left: $base_padding / 2;
|
||||||
padding-right: 3px;
|
padding-right: $base_padding / 2;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.wide {
|
&.wide {
|
||||||
padding: 2px 12px;
|
padding: 2px $base_padding * 2;
|
||||||
border-spacing: 6px;
|
border-spacing: $base_padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -38,12 +38,12 @@ viewswitcher {
|
||||||
viewswitcherbar actionbar > revealer > box {
|
viewswitcherbar actionbar > revealer > box {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
padding-top: 7px;
|
padding-top: $base_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
%viewswitcherbar-shrunk actionbar > revealer > box {
|
%viewswitcherbar-shrunk actionbar > revealer > box {
|
||||||
// Not 0px because view switcher has negative margin
|
// Not 0px because view switcher has negative margin
|
||||||
padding-top: 6px;
|
padding-top: $base_padding;
|
||||||
}
|
}
|
||||||
|
|
||||||
/************************
|
/************************
|
||||||
|
@ -51,21 +51,21 @@ viewswitcherbar actionbar > revealer > box {
|
||||||
************************/
|
************************/
|
||||||
|
|
||||||
viewswitchertitle {
|
viewswitchertitle {
|
||||||
margin-top: -6px;
|
margin-top: -$base_padding;
|
||||||
margin-bottom: -6px;
|
margin-bottom: -$base_padding;
|
||||||
|
|
||||||
viewswitcher {
|
viewswitcher {
|
||||||
margin-left: 12px;
|
margin-left: $base_padding * 2;
|
||||||
margin-right: 12px;
|
margin-right: $base_padding 8 2;
|
||||||
|
|
||||||
&.narrow {
|
&.narrow {
|
||||||
margin-top: 3px;
|
margin-top: $base_padding / 2;
|
||||||
margin-bottom: 3px;
|
margin-bottom: $base_padding / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.wide {
|
&.wide {
|
||||||
margin-top: 6px;
|
margin-top: $base_padding;
|
||||||
margin-bottom: 6px;
|
margin-bottom: $base_padding;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -109,8 +109,8 @@ indicatorbin {
|
||||||
> indicator > label {
|
> indicator > label {
|
||||||
font-size: 0.6rem;
|
font-size: 0.6rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-left: 4px;
|
padding-left: $base_margin;
|
||||||
padding-right: 4px;
|
padding-right: $base_margin;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -47,7 +47,7 @@ rubberband {
|
||||||
|
|
||||||
flowbox > flowboxchild,
|
flowbox > flowboxchild,
|
||||||
gridview > child {
|
gridview > child {
|
||||||
padding: 3px;
|
padding: $base_padding / 2;
|
||||||
border-radius: $button_radius;
|
border-radius: $button_radius;
|
||||||
|
|
||||||
@include focus-ring();
|
@include focus-ring();
|
||||||
|
|
Loading…
Reference in a new issue