mirror of
https://github.com/vinceliuice/Colloid-gtk-theme.git
synced 2025-09-16 05:18:38 -07:00
Merge branch 'main' of github.com:vinceliuice/Colloid-gtk-theme
This commit is contained in:
vinceliuice
@@ -230,9 +230,7 @@ tab {
|
||||
}
|
||||
|
||||
.tab-icon-overlay[crashed] {
|
||||
list-style-image: none !important;
|
||||
top: 0 !important;
|
||||
inset-inline-end: 0 !important;
|
||||
list-style-image: url("../icons/info-symbolic.svg") !important;
|
||||
}
|
||||
|
||||
/* Close tab button */
|
||||
|
||||
@@ -24,10 +24,60 @@ $cakeisalie: "This stylesheet is generated, DO NOT EDIT";
|
||||
*/
|
||||
|
||||
// Stage
|
||||
stage {
|
||||
@include fontsize($font_size);
|
||||
color: $text;
|
||||
// stage {
|
||||
// @include fontsize($font_size);
|
||||
// color: $text;
|
||||
// }
|
||||
|
||||
/* General Typography */
|
||||
|
||||
%large_title {
|
||||
font-weight: 300;
|
||||
@include fontsize(24);
|
||||
}
|
||||
|
||||
%title_1 {
|
||||
font-weight: 800;
|
||||
@include fontsize(20);
|
||||
}
|
||||
|
||||
%title_2 {
|
||||
font-weight: 800;
|
||||
@include fontsize(15);
|
||||
}
|
||||
|
||||
%title_3 {
|
||||
font-weight: 700;
|
||||
@include fontsize(15);
|
||||
}
|
||||
|
||||
%title_4 {
|
||||
font-weight: 700;
|
||||
@include fontsize(13);
|
||||
}
|
||||
|
||||
%heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(11);
|
||||
}
|
||||
|
||||
%caption_heading {
|
||||
font-weight: 700;
|
||||
@include fontsize(9);
|
||||
}
|
||||
|
||||
%caption {
|
||||
font-weight: 400;
|
||||
@include fontsize(9);
|
||||
}
|
||||
|
||||
%smaller {
|
||||
font-weight: 400;
|
||||
@include fontsize(8);
|
||||
}
|
||||
|
||||
%monospace {font-family: monospace;}
|
||||
%numeric { font-feature-settings: "tnum";}
|
||||
|
||||
@import 'widgets-40-0';
|
||||
@import 'extensions-40-0';
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
@import 'common/notifications';
|
||||
@import 'common/osd';
|
||||
@import 'common/overview';
|
||||
@import 'common/quick-settings';
|
||||
@import 'common/panel';
|
||||
@import 'common/popovers';
|
||||
@import 'common/screen-shield';
|
||||
@@ -39,5 +40,6 @@
|
||||
@import 'widgets-40-0/panel';
|
||||
@import 'widgets-42-0/popovers';
|
||||
@import 'widgets-40-0/search-entry';
|
||||
@import 'widgets-42-0/screenshot';
|
||||
@import 'widgets-40-0/window-picker';
|
||||
@import 'widgets-40-0/workspace-thumbnails';
|
||||
|
||||
@@ -21,8 +21,20 @@
|
||||
padding: 0 $base_padding * 2;
|
||||
border-radius: $base_radius;
|
||||
border: none;
|
||||
@extend %button;
|
||||
|
||||
.popup-menu & {
|
||||
@extend %flat_button;
|
||||
}
|
||||
}
|
||||
|
||||
// buttons on OSD elements
|
||||
// that are undecorated by default and use OSD colors
|
||||
%osd_button {
|
||||
@include button(flat-normal, $tc:on($osd));
|
||||
&:insensitive { @include button(insensitive, $tc:on($osd), $bc:$osd); }
|
||||
&:focus { @include button(focus, $tc:on($osd), $bc:$osd);}
|
||||
&:hover { @include button(hover, $tc:on($osd), $bc:$osd);}
|
||||
&:active { @include button(active, $tc:on($osd), $bc:$osd);}
|
||||
&:outlined, &:checked { @include button(checked, $tc:on($osd), $bc:$osd);}
|
||||
}
|
||||
|
||||
@@ -21,15 +21,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.clock-display-box {
|
||||
spacing: 2px;
|
||||
|
||||
.clock {
|
||||
padding-left: $base_padding * 2;
|
||||
padding-right: $base_padding * 2;
|
||||
}
|
||||
}
|
||||
|
||||
// overall menu
|
||||
#calendarArea {
|
||||
padding: $base_padding 0;
|
||||
@@ -39,7 +30,7 @@
|
||||
.datemenu-calendar-column {
|
||||
spacing: $base_spacing;
|
||||
border: 0 solid $border;
|
||||
padding: 0 $base_padding * 2;
|
||||
padding: 0 $base_margin 0 $base_padding * 2;
|
||||
|
||||
&:ltr { margin-right: $base_margin * 2; border-left-width: 0; }
|
||||
&:rtl { margin-left: $base_margin * 2; border-right-width: 0; }
|
||||
@@ -73,7 +64,7 @@
|
||||
margin: 0 $base_padding * 2;
|
||||
text-shadow: none;
|
||||
color: $text-secondary;
|
||||
border-radius: $menu_radius;
|
||||
border-radius: $base_radius;
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: overlay($base, hover);
|
||||
@@ -101,10 +92,10 @@
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
padding: 0 $base_padding !important;
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
border-radius: $menu_radius;
|
||||
// border-radius: $base_radius;
|
||||
|
||||
// month
|
||||
.calendar-month-label {
|
||||
@@ -115,7 +106,7 @@
|
||||
text-shadow: none;
|
||||
@include fontsize($font_size + 1);
|
||||
|
||||
&:focus {}
|
||||
// &:focus {}
|
||||
}
|
||||
|
||||
// prev/next month icons
|
||||
@@ -231,9 +222,9 @@
|
||||
|
||||
.calendar-week-number {
|
||||
width: $item_size - 6px;
|
||||
height: $item_size - 12px;
|
||||
margin: 6px $base_margin/2 !important;
|
||||
padding: 0 0;
|
||||
height: 0;
|
||||
margin: 8px 0 8px $base_padding !important;
|
||||
padding: 0 !important;
|
||||
border-radius: $base_radius;
|
||||
background-color: $fill;
|
||||
color: $text-disabled;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
width: if($compact == 'true', 25.5em, 31.5em);
|
||||
text-shadow: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
padding: $base_margin 0;
|
||||
|
||||
// padding and margins to account for scrollbar
|
||||
&:ltr { margin-left: 0; margin-right: 0; padding-right: 0; border-right-width: 0; }
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
color: on(black, secondary);
|
||||
border-radius: $circular_radius;
|
||||
border: none;
|
||||
box-shadow: 0 2px 3px rgba(black, 0.25);
|
||||
box-shadow: none;
|
||||
icon-size: $base_icon_size * 4; // 64px
|
||||
// margin: 6px;
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
.popup-menu {
|
||||
min-width: if($compact == 'true', 10em, 12em);
|
||||
color: $text-secondary !important;
|
||||
padding: 0 !important;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
border-radius: $menu_radius;
|
||||
box-shadow: 0 3px 6px rgba(black, 0.08);
|
||||
@@ -24,7 +24,7 @@
|
||||
@include fontsize($font_size - 1);
|
||||
|
||||
.popup-menu-content {
|
||||
padding: $base_padding 0 !important;
|
||||
padding: $base_padding;
|
||||
background-color: $popover;
|
||||
border-radius: $menu_radius;
|
||||
margin: 0;
|
||||
@@ -41,8 +41,10 @@
|
||||
color: $text-secondary !important;
|
||||
text-shadow: none;
|
||||
border-radius: $base_radius;
|
||||
margin: 0 $base_padding;
|
||||
margin: 0;
|
||||
transition-duration: 100ms;
|
||||
font-weight: normal;
|
||||
background-color: transparent;
|
||||
|
||||
&:checked {
|
||||
font-weight: normal;
|
||||
@@ -84,7 +86,7 @@
|
||||
color: $text-secondary !important;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
margin: 0 $base_padding;
|
||||
margin: 0;
|
||||
border-radius: 0 0 $base_radius $base_radius;
|
||||
|
||||
.popup-menu-item {
|
||||
@@ -146,3 +148,20 @@
|
||||
-st-icon-style: symbolic;
|
||||
}
|
||||
}
|
||||
|
||||
// right-click (and panel) app menu
|
||||
.app-menu {
|
||||
max-width: 27.25em;
|
||||
|
||||
// this is unneeded at the top-level in this menu, hide it
|
||||
.popup-menu-ornament { width: 0 !important; }
|
||||
|
||||
.popup-inactive-menu-item:first-child {
|
||||
// "Open Windows" label
|
||||
> StLabel {
|
||||
@extend %caption_heading;
|
||||
&:ltr {margin-right: $base_margin * 2;}
|
||||
&:rtl {margin-left: $base_margin * 2;}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
183
src/sass/gnome-shell/common/_quick-settings.scss
Normal file
183
src/sass/gnome-shell/common/_quick-settings.scss
Normal file
@@ -0,0 +1,183 @@
|
||||
.quick-settings {
|
||||
padding: $base_padding * 3 !important;
|
||||
border-radius: $base_radius + $base_padding * 3 !important;
|
||||
|
||||
.icon-button, .button {
|
||||
padding: $base_padding * 1.75;
|
||||
}
|
||||
|
||||
.popup-menu-content {
|
||||
padding: $base_padding * 2 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-settings-grid {
|
||||
spacing-rows: $base_padding * 2;
|
||||
spacing-columns: $base_padding * 2;
|
||||
}
|
||||
|
||||
.quick-toggle {
|
||||
border-radius: $base_radius;
|
||||
min-width: 12em;
|
||||
max-width: 12em;
|
||||
min-height: 40px;
|
||||
border: none;
|
||||
background-color: $button !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $divider !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgba($text, 0.15) !important;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: $primary !important;
|
||||
color: on($primary);
|
||||
|
||||
&:hover {
|
||||
background-color: mix($text, $primary, 6%) !important;
|
||||
color: on($primary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: mix($text, $primary, 15%) !important;
|
||||
color: on($primary);
|
||||
}
|
||||
}
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding; }
|
||||
|
||||
/* Move padding into the box; this is to allow menu arrows
|
||||
to extend to the border */
|
||||
&.button { padding: 0; }
|
||||
& > StBoxLayout { padding: 0 $base_padding * 2; }
|
||||
&:ltr > StBoxLayout { padding-left: $base_padding * 2.5; }
|
||||
&:rtl > StBoxLayout { padding-right: $base_padding * 2.5; }
|
||||
|
||||
.quick-toggle-label { font-weight: bold; }
|
||||
.quick-toggle-icon, .quick-toggle-arrow { icon-size: $base_icon_size; }
|
||||
}
|
||||
|
||||
.quick-menu-toggle {
|
||||
&:ltr > StBoxLayout { padding-right: 0; }
|
||||
&:rtl > StBoxLayout { padding-left: 0; }
|
||||
|
||||
.quick-toggle-arrow {
|
||||
background-color: $button !important;
|
||||
padding: $base_padding $base_padding * 1.75;
|
||||
|
||||
&:active {
|
||||
background-color: $divider !important;
|
||||
}
|
||||
|
||||
&:ltr { border-radius: 0 $base_radius $base_radius 0; }
|
||||
&:rtl { border-radius: $base_radius 0 0 $base_radius; }
|
||||
}
|
||||
}
|
||||
|
||||
.quick-slider {
|
||||
padding: 0 $base_padding;
|
||||
|
||||
& > StBoxLayout { spacing: $base_padding; }
|
||||
|
||||
.slider-bin {
|
||||
&:focus { @include button(focus); }
|
||||
min-height: 16px; // slider size
|
||||
padding: $base_padding;
|
||||
border-radius: $circular_radius;
|
||||
}
|
||||
|
||||
.quick-toggle-icon {
|
||||
icon-size: $base_icon_size;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
background-color: transparent;
|
||||
color: $text !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $fill;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $divider;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-toggle-menu {
|
||||
background-color: $popover !important;
|
||||
color: $text !important;
|
||||
border-radius: $base_radius + $base_padding * 2 !important;
|
||||
padding: $base_padding * 2;
|
||||
margin: $base_padding * 2 $base_padding * 3 0;
|
||||
|
||||
.popup-menu-item {
|
||||
border-radius: $base_radius !important;
|
||||
|
||||
&:focus, &:hover, &.selected {
|
||||
color: $text !important;
|
||||
background-color: $divider !important;
|
||||
}
|
||||
|
||||
> StIcon { -st-icon-style: symbolic; }
|
||||
}
|
||||
|
||||
& .header {
|
||||
spacing-rows: 0.5 * $base_padding;
|
||||
spacing-columns: $base_padding * 2;
|
||||
padding-bottom: 2 * $base_padding;
|
||||
|
||||
& .icon {
|
||||
icon-size: $base_icon_size * 1.5; // a non-standard symbolic size but ok
|
||||
border-radius: $base_radius;
|
||||
padding: 1.5 * $base_padding;
|
||||
background-color: on($popover, divider) !important;
|
||||
|
||||
&.active {
|
||||
background-color: $primary !important;
|
||||
color: on($primary);
|
||||
}
|
||||
}
|
||||
|
||||
& .title {
|
||||
@extend %title_3;
|
||||
}
|
||||
|
||||
& .subtitle {
|
||||
@extend %caption_heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-toggle-menu-container {
|
||||
}
|
||||
|
||||
.quick-settings-system-item {
|
||||
& > StBoxLayout { spacing: 2 * $base_padding; }
|
||||
|
||||
.icon-button {
|
||||
background-color: $button;
|
||||
color: $text;
|
||||
border-radius: $base_radius;
|
||||
@extend %button;
|
||||
|
||||
> StIcon { -st-icon-style: symbolic; }
|
||||
}
|
||||
|
||||
& .power-item {
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
|
||||
&:insensitive {
|
||||
@include button(normal);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nm-network-item {
|
||||
.wireless-secure-icon { icon-size: 0.5 * $base_icon_size; }
|
||||
}
|
||||
@@ -12,11 +12,13 @@
|
||||
.popup-separator-menu-item {
|
||||
padding: 0;
|
||||
|
||||
.popup-menu-ornament {
|
||||
width: 0 !important;
|
||||
}
|
||||
|
||||
.popup-separator-menu-item-separator {
|
||||
height: 1px; //not really the whole box
|
||||
background-color: $divider;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
margin: $base_padding 32px;
|
||||
|
||||
.popup-sub-menu & { //submenu separators
|
||||
|
||||
204
src/sass/gnome-shell/widgets-42-0/_screenshot.scss
Normal file
204
src/sass/gnome-shell/widgets-42-0/_screenshot.scss
Normal file
@@ -0,0 +1,204 @@
|
||||
// Screenshot UI
|
||||
.icon-label-button-container {
|
||||
spacing: $base_padding;
|
||||
@extend %caption;
|
||||
|
||||
StIcon { icon-size: 32px; }
|
||||
}
|
||||
|
||||
$screenshot_ui_panel_padding: $base_padding * 3;
|
||||
$screenshot_ui_shot_cast_margin: 21px;
|
||||
$screenshot_ui_panel_border_radius: $modal_radius + $screenshot_ui_shot_cast_margin;
|
||||
$screenshot_ui_shot_cast_spacing: 3px;
|
||||
|
||||
$screenshot_ui_button_red: $error;
|
||||
|
||||
.screenshot-ui-panel {
|
||||
@extend %osd_panel;
|
||||
border-radius: $screenshot_ui_panel_border_radius;
|
||||
padding: $screenshot_ui_panel_padding;
|
||||
// Reduce the bottom padding a little to accommodate the large capture button.
|
||||
padding-bottom: $screenshot_ui_panel_padding - 6px;
|
||||
margin-bottom: 4em;
|
||||
spacing: $base_padding * 2;
|
||||
}
|
||||
|
||||
.screenshot-ui-close-button {
|
||||
@extend .window-close; // copy window close button
|
||||
padding: $base_padding !important; // but with more padding
|
||||
margin-top: 12px;
|
||||
box-shadow: 0 2px 4px 0 rgba(black, 0.15);
|
||||
&.left { margin-left: $base_padding * 2; }
|
||||
&.right { margin-right: $base_padding * 2; }
|
||||
}
|
||||
|
||||
.screenshot-ui-type-button {
|
||||
@extend %osd_button;
|
||||
min-width: 48px;
|
||||
padding: $base_padding * 2 $base_padding * 3 !important;
|
||||
border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
|
||||
}
|
||||
|
||||
.screenshot-ui-capture-button {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: $circular_radius;
|
||||
border: 4px on($osd);
|
||||
padding: 4px;
|
||||
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: on($osd);
|
||||
transition-duration: 200ms;
|
||||
&:hover, &:focus { background-color: $divider; }
|
||||
border-radius: $circular_radius;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: darken(on($osd), 15%);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: darken(on($osd), 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:cast {
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: $screenshot_ui_button_red;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: lighten($screenshot_ui_button_red, 5%);
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
.screenshot-ui-capture-button-circle {
|
||||
background-color: darken($screenshot_ui_button_red, 7%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-shot-cast-container {
|
||||
background-color: lighten($osd, 5%);
|
||||
border-radius: $modal_radius;
|
||||
padding: $screenshot_ui_shot_cast_spacing;
|
||||
spacing: $screenshot_ui_shot_cast_spacing;
|
||||
|
||||
&:ltr { margin-left: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
|
||||
&:rtl { margin-right: $screenshot_ui_shot_cast_margin - $screenshot_ui_panel_padding;}
|
||||
}
|
||||
|
||||
.screenshot-ui-shot-cast-button {
|
||||
padding: $base_padding $base_padding * 2;
|
||||
background-color: transparent;
|
||||
&:hover, &:focus { background-color: lighten($osd, 10%);}
|
||||
&:active { background-color: $track;}
|
||||
&:checked { background-color: white; color: black;}
|
||||
&:insensitive { color: transparentize(on($osd), 0.5);}
|
||||
|
||||
border-radius: $modal_radius - $screenshot_ui_shot_cast_spacing;
|
||||
|
||||
StIcon { icon-size: $base_icon_size;}
|
||||
}
|
||||
|
||||
.screenshot-ui-show-pointer-button {
|
||||
@extend %osd_button;
|
||||
border-radius: $circular_radius;
|
||||
padding: $base_padding * 2 !important;
|
||||
StIcon { icon-size: $base_icon_size;}
|
||||
}
|
||||
|
||||
.screenshot-ui-area-indicator-shade {
|
||||
background-color: rgba(0,0,0, .3);
|
||||
}
|
||||
|
||||
.screenshot-ui-area-selector {
|
||||
.screenshot-ui-area-indicator-shade {
|
||||
background-color: rgba(0,0,0, .5);
|
||||
}
|
||||
|
||||
.screenshot-ui-area-indicator-selection {
|
||||
border: 2px white;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-area-selector-handle {
|
||||
border-radius: $circular_radius;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px 2px rgba(0,0,0, .2);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector {
|
||||
background-color: $scrim;
|
||||
|
||||
.screenshot-ui-window-selector-window-container {
|
||||
margin: 100px;
|
||||
}
|
||||
|
||||
&:primary-monitor {
|
||||
.screenshot-ui-window-selector-window-container {
|
||||
// Make some room for the panel.
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector-window-border {
|
||||
transition-duration: 200ms;
|
||||
border-radius: $modal_radius;
|
||||
border: 6px transparent;
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector-check {
|
||||
transition-duration: 200ms;
|
||||
color: transparent;
|
||||
border-radius: 99px;
|
||||
border-width: 12px;
|
||||
icon-size: 24px;
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector-window {
|
||||
&:hover {
|
||||
.screenshot-ui-window-selector-window-border {
|
||||
border-color: darken($primary, 15%);
|
||||
}
|
||||
}
|
||||
&:checked {
|
||||
.screenshot-ui-window-selector-window-border {
|
||||
border-color: $primary;
|
||||
background-color: transparentize($primary, 0.8);
|
||||
}
|
||||
|
||||
.screenshot-ui-window-selector-check {
|
||||
color: on($primary);
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-screen-selector {
|
||||
transition-duration: 200ms;
|
||||
background-color: rgba(0,0,0,.5);
|
||||
|
||||
&:hover { background-color: rgba(0,0,0,.3);}
|
||||
&:active { background-color: rgba(0,0,0,.7);}
|
||||
&:checked {
|
||||
background-color: transparent;
|
||||
border: 2px white;
|
||||
}
|
||||
}
|
||||
|
||||
.screenshot-ui-tooltip {
|
||||
color: on($osd);
|
||||
background-color: $osd;
|
||||
border-radius: $circular_radius;
|
||||
padding: $base_padding $base_padding * 2;
|
||||
text-align: center;
|
||||
-y-offset: 24px;
|
||||
}
|
||||
@@ -1172,7 +1172,7 @@ spinbutton {
|
||||
/**************
|
||||
* ComboBoxes *
|
||||
**************/
|
||||
dropdown > popover.menu.background > contents { padding: 0; }
|
||||
// dropdown > popover.menu.background > contents { padding: 0; }
|
||||
|
||||
dropdown > button > box {
|
||||
border-spacing: $space-size;
|
||||
@@ -1203,7 +1203,7 @@ combobox {
|
||||
padding: 0;
|
||||
|
||||
listview {
|
||||
margin: $space-size 0;
|
||||
margin: 0;
|
||||
|
||||
& > row {
|
||||
padding: $space-size;
|
||||
@@ -1461,12 +1461,12 @@ headerbar {
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 0 12px;
|
||||
padding: 0 $space-size * 2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
padding: 0 12px;
|
||||
padding: 0 $space-size * 2;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
@@ -1507,12 +1507,15 @@ headerbar {
|
||||
entry,
|
||||
spinbutton,
|
||||
button,
|
||||
stackswitcher {
|
||||
stackswitcher,
|
||||
separator:not(.sidebar) {
|
||||
margin-top: $space-size;
|
||||
margin-bottom: $space-size;
|
||||
}
|
||||
|
||||
menubutton.popup {
|
||||
menubutton > button,
|
||||
spinbutton > button,
|
||||
splitbutton > button {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@@ -1522,8 +1525,8 @@ headerbar {
|
||||
}
|
||||
|
||||
separator:not(.sidebar) {
|
||||
margin-top: $large-size / 4;
|
||||
margin-bottom: $large-size / 4;
|
||||
// margin-top: $large-size / 4;
|
||||
// margin-bottom: $large-size / 4;
|
||||
background-color: $titlebar-divider;
|
||||
}
|
||||
|
||||
@@ -1935,6 +1938,7 @@ menubar {
|
||||
**********************/
|
||||
popover.menu {
|
||||
box.inline-buttons {
|
||||
color: $text;
|
||||
padding: 0 $space-size;
|
||||
|
||||
button.image-button.model {
|
||||
@@ -2125,7 +2129,7 @@ magnifier {
|
||||
background-image 0ms;
|
||||
min-height: $small-size;
|
||||
min-width: $small-size;
|
||||
padding: $space-size / 2 $space-size * 2;
|
||||
padding: $space-size / 2 $space-size;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
@@ -2145,7 +2149,7 @@ magnifier {
|
||||
|
||||
&:disabled { color: $text-secondary-disabled; }
|
||||
|
||||
&:checked {
|
||||
&:checked, &:selected {
|
||||
transition: $transition;
|
||||
background-color: if($variant == 'light', rgba($base, 1), rgba(white, 0.15));
|
||||
color: $text;
|
||||
@@ -2371,6 +2375,10 @@ $tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
|
||||
}
|
||||
|
||||
tabbar {
|
||||
> revealer > box {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.box {
|
||||
min-height: $medium-size;
|
||||
border-bottom: none;
|
||||
@@ -2390,7 +2398,8 @@ tabbar {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
tabbox > background {
|
||||
tabbox {
|
||||
> background {
|
||||
&:dir(ltr) {
|
||||
box-shadow: inset -1px 0 $border;
|
||||
}
|
||||
@@ -2400,6 +2409,7 @@ tabbar {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
undershoot {
|
||||
transition: background 150ms ease-in-out;
|
||||
@@ -2422,15 +2432,23 @@ tabbar {
|
||||
}
|
||||
|
||||
tabbox {
|
||||
background-color: $fill;
|
||||
background-color: rgba($text, if($variant == 'light', 0.08, 0.04));
|
||||
background-image: none;
|
||||
padding: $space-size / 2;
|
||||
padding: $space-size / 2 0;
|
||||
margin: $space-size / 2;
|
||||
border-radius: $modal-radius + $space-size / 2;
|
||||
|
||||
> background {
|
||||
background: none;
|
||||
}
|
||||
|
||||
> tabboxchild {
|
||||
margin: 0;
|
||||
|
||||
> tab {
|
||||
@extend %tabs_tab;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tab {
|
||||
@@ -2711,12 +2729,12 @@ switch {
|
||||
|
||||
> slider {
|
||||
transition: all $duration $ease-out;
|
||||
min-width: $small-size - 4px;
|
||||
min-height: $small-size - 4px;
|
||||
margin: if($variant == 'light', 1px, 0);
|
||||
min-width: $small-size - 6px;
|
||||
min-height: $small-size - 6px;
|
||||
margin: $space-size / 2;
|
||||
border-radius: $circular-radius;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
box-shadow: $shadow-z3;
|
||||
background-color: white;
|
||||
border: none;
|
||||
}
|
||||
@@ -2917,6 +2935,7 @@ columnview.view {
|
||||
/************
|
||||
* GtkScale *
|
||||
************/
|
||||
|
||||
scale {
|
||||
// sizing
|
||||
$_marks_length: 8px;
|
||||
@@ -2937,45 +2956,17 @@ columnview.view {
|
||||
min-width: $trough_size;
|
||||
|
||||
&.horizontal { padding: ($medium-size - $trough_size) / 2 12px; }
|
||||
|
||||
&.vertical { padding: 12px ($medium-size - $trough_size) / 2; }
|
||||
|
||||
// the slider is inside the trough, so to have make it bigger there's a negative margin
|
||||
slider {
|
||||
min-height: $slider_size;
|
||||
min-width: $slider_size;
|
||||
margin: $slider_margin;
|
||||
}
|
||||
|
||||
// click-and-hold the slider to activate
|
||||
&.fine-tune {
|
||||
&.horizontal {
|
||||
min-height: $finetune_trough_size;
|
||||
padding-top: ($medium-size - $finetune_trough_size) / 2;
|
||||
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
min-width: $finetune_trough_size;
|
||||
padding-left: ($medium-size - $finetune_trough_size) / 2;
|
||||
padding-right: ($medium-size - $finetune_trough_size) / 2;
|
||||
}
|
||||
|
||||
// to make the trough grow in fine-tune mode
|
||||
slider { margin: $finetune_slider_margin; }
|
||||
}
|
||||
|
||||
// the backing bit
|
||||
trough {
|
||||
> trough {
|
||||
transition: background-color $duration $ease-out;
|
||||
outline: none;
|
||||
background-color: $track;
|
||||
|
||||
&:disabled { background-color: $track-disabled; }
|
||||
}
|
||||
|
||||
// the colored part of the backing bit
|
||||
highlight {
|
||||
> highlight {
|
||||
transition: background-image $duration $ease-out;
|
||||
background-image: image($primary);
|
||||
|
||||
@@ -2987,14 +2978,19 @@ columnview.view {
|
||||
|
||||
// this is another differently styled part of the backing bit, the most relevant use case is for example
|
||||
// in media player to indicate how much video stream as been cached
|
||||
fill {
|
||||
> fill {
|
||||
transition: background-color $duration $ease-out;
|
||||
background-color: $track;
|
||||
|
||||
&:disabled { background-color: transparent; }
|
||||
}
|
||||
|
||||
slider {
|
||||
// the slider is inside the trough, so to have make it bigger there's a negative margin
|
||||
> slider {
|
||||
min-height: $slider_size;
|
||||
min-width: $slider_size;
|
||||
margin: $slider_margin;
|
||||
|
||||
transition: all $duration $ease-out;
|
||||
border-radius: $circular-radius;
|
||||
color: $primary;
|
||||
@@ -3013,15 +3009,41 @@ columnview.view {
|
||||
box-shadow: inset 0 0 0 2px $text-secondary-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
marks,
|
||||
value { color: $text-secondary; }
|
||||
// click-and-hold the slider to activate
|
||||
&.fine-tune {
|
||||
&.horizontal {
|
||||
min-height: $finetune_trough_size;
|
||||
padding-top: ($medium-size - $finetune_trough_size) / 2;
|
||||
padding-bottom: ($medium-size - $finetune_trough_size) / 2;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
min-width: $finetune_trough_size;
|
||||
padding-left: ($medium-size - $finetune_trough_size) / 2;
|
||||
padding-right: ($medium-size - $finetune_trough_size) / 2;
|
||||
}
|
||||
|
||||
// to make the trough grow in fine-tune mode
|
||||
> trough > slider { margin: $finetune_slider_margin; }
|
||||
}
|
||||
|
||||
> marks,
|
||||
> value { color: $text-secondary; }
|
||||
|
||||
indicator {
|
||||
background-color: $track;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&.marks-before:not(.marks-after),
|
||||
&.marks-after:not(.marks-before) {
|
||||
> trough > slider {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
//marks margins
|
||||
@each $scale_orient, $marks_class, $marks_pos, $marks_margin in (horizontal, top, top, bottom),
|
||||
(horizontal, bottom, bottom, top),
|
||||
@@ -3063,7 +3085,7 @@ columnview.view {
|
||||
@each $marks_infix, $marks_class in ('marks-before', 'marks-before:not(.marks-after)'),
|
||||
('marks-after', 'marks-after:not(.marks-before)') {
|
||||
&.#{$dir_class}.#{$marks_class} {
|
||||
slider {
|
||||
> trough > slider {
|
||||
transition: background-color $duration $ease-out,
|
||||
background-size $ripple-fade-out-duration $ease-out,
|
||||
background-image $ripple-fade-out-opacity-duration $ease-out;
|
||||
@@ -3117,7 +3139,7 @@ columnview.view {
|
||||
&.horizontal {
|
||||
padding: 0 0 12px 0;
|
||||
|
||||
slider {
|
||||
> trough > slider {
|
||||
&:dir(ltr), &:dir(rtl) { // specificity bump
|
||||
margin-bottom: $color_slider_margin;
|
||||
margin-top: $color_marks_slider_margin;
|
||||
@@ -3138,7 +3160,7 @@ columnview.view {
|
||||
&:dir(rtl) {
|
||||
padding: 0 12px 0 0;
|
||||
|
||||
slider {
|
||||
> trough > slider {
|
||||
margin-right: $color_slider_margin;
|
||||
margin-left: $color_marks_slider_margin;
|
||||
}
|
||||
@@ -3358,6 +3380,10 @@ separator {
|
||||
min-width: 1px;
|
||||
min-height: 1px;
|
||||
background-color: $divider;
|
||||
|
||||
&.spacer {
|
||||
@extend %hide_separators;
|
||||
}
|
||||
}
|
||||
|
||||
%hide_separators {
|
||||
@@ -3519,6 +3545,10 @@ row {
|
||||
&:focus, &:hover, &:active { box-shadow: none; }
|
||||
}
|
||||
|
||||
button:checked &.activatable {
|
||||
color: on($primary);
|
||||
}
|
||||
|
||||
&:selected {
|
||||
@extend %selected_items;
|
||||
color: inherit; // for overlays
|
||||
@@ -3727,7 +3757,11 @@ window.dialog.message { // Message Dialog styling
|
||||
&.background { background-color: $surface; }
|
||||
|
||||
box.dialog-vbox.vertical {
|
||||
border-spacing: 10px;
|
||||
border-spacing: $space-size * 2;
|
||||
|
||||
> box.vertical {
|
||||
margin-bottom: $space-size;
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
@@ -3744,19 +3778,21 @@ window.dialog.message { // Message Dialog styling
|
||||
}
|
||||
|
||||
.dialog-action-area {
|
||||
margin-top: -$space-size;
|
||||
margin-top: $space-size;
|
||||
// padding: $space-size;
|
||||
|
||||
> button {
|
||||
@extend %button-flat;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
min-height: $menuitem-size;
|
||||
padding: $space-size $space-size * 2;
|
||||
|
||||
&, &:first-child, &:last-child { border-radius: $circular-radius; }
|
||||
&:first-child { border-radius: 0 0 0 $window-radius; }
|
||||
|
||||
&:not(:last-child) { margin-right: $space-size; }
|
||||
&:last-child { border-radius: 0 0 $window-radius 0; }
|
||||
|
||||
&:not(:disabled) { color: $primary; }
|
||||
|
||||
// &.suggested-action:not(:disabled) { color: $suggested; }
|
||||
&:not(:last-child) { border-right: 1px solid $border; }
|
||||
|
||||
&.destructive-action:not(:disabled) { color: $destructive; }
|
||||
}
|
||||
@@ -3929,7 +3965,7 @@ row image.sidebar-icon {
|
||||
&:disabled { color: $text-secondary-disabled; }
|
||||
}
|
||||
|
||||
placessidebar.sidebar {
|
||||
placessidebar {
|
||||
> viewport.frame { border-style: none; }
|
||||
|
||||
list > separator { margin: $space-size / 2 0; }
|
||||
@@ -4077,12 +4113,11 @@ video {
|
||||
* GtkInfoBar *
|
||||
**************/
|
||||
infobar {
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
|
||||
> revealer > box {
|
||||
padding: $space-size;
|
||||
border-spacing: $space-size * 2;
|
||||
border-bottom: 1px solid $border;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&.info {
|
||||
|
||||
@@ -86,11 +86,12 @@ $nautilus: $base-alt;
|
||||
.floating-bar {
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
margin: 6px;
|
||||
border-style: none;
|
||||
margin: $space-size;
|
||||
border: none;
|
||||
border-radius: $corner-radius;
|
||||
background-color: $primary;
|
||||
color: on($primary);
|
||||
box-shadow: $shadow-z3;
|
||||
|
||||
button {
|
||||
margin: (32px - $small-size) / 2;
|
||||
|
||||
@@ -7,6 +7,24 @@
|
||||
placesview {
|
||||
label { color: $text-secondary; }
|
||||
}
|
||||
|
||||
.floating-bar {
|
||||
min-height: 32px;
|
||||
padding: 0;
|
||||
margin: $space-size;
|
||||
border-style: none;
|
||||
border-radius: $corner-radius;
|
||||
background-color: $primary;
|
||||
color: on($primary);
|
||||
box-shadow: $shadow-z3;
|
||||
|
||||
button {
|
||||
margin: (32px - $small-size) / 2;
|
||||
color: on($primary);
|
||||
|
||||
@extend %small-button;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#NautilusPathBar {
|
||||
@@ -26,6 +44,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
#NautilusQueryEditor { // search entry
|
||||
> menubutton > button {
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
> text { margin: 0; }
|
||||
}
|
||||
|
||||
#NautilusPathBar {
|
||||
background-color: $titlebar-fill;
|
||||
border-radius: $corner-radius;
|
||||
margin: $space-size 0;
|
||||
|
||||
#NautilusPathButton {
|
||||
margin: 0 $space-size / 2;
|
||||
border-radius: $corner-radius;
|
||||
|
||||
&.current-dir {
|
||||
color: $titlebar-text;
|
||||
|
||||
&:hover, &:active {
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child { margin-left: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
/**************
|
||||
* Extensions *
|
||||
**************/
|
||||
@@ -73,6 +123,23 @@ window.background.csd {
|
||||
|
||||
.history-view { background-color: $base; }
|
||||
|
||||
#displayitem {
|
||||
border-top: 1px solid $border;
|
||||
}
|
||||
|
||||
.small .card {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
leaflet {
|
||||
button.number-button {
|
||||
background-color: rgba($text, if($variant == 'light', 0.1, 0.15));
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Contacts
|
||||
//
|
||||
@@ -81,12 +148,6 @@ window.background.csd {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.small .card {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-bottom: 1px solid $border;
|
||||
}
|
||||
|
||||
//
|
||||
// Gnome Software
|
||||
//
|
||||
|
||||
@@ -45,10 +45,10 @@ avatar {
|
||||
.card {
|
||||
@at-root %card, & {
|
||||
border-radius: $corner-radius;
|
||||
box-shadow: $shadow-z3;
|
||||
box-shadow: none;
|
||||
border: 1px solid $border;
|
||||
background-clip: border-box;
|
||||
background-color: $surface;
|
||||
background-color: $button;
|
||||
color: $text-secondary;
|
||||
}
|
||||
}
|
||||
@@ -100,6 +100,8 @@ preferencesgroup > box {
|
||||
outline-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cutout-button { background-color: $base-alt; }
|
||||
}
|
||||
|
||||
//
|
||||
|
||||
Reference in New Issue
Block a user