mirror of
https://github.com/vinceliuice/WhiteSur-gtk-theme.git
synced 2025-06-07 07:53:07 +00:00
137 lines
3.0 KiB
SCSS
137 lines
3.0 KiB
SCSS
![]() |
/* App Grid */
|
||
|
|
||
|
$app_icon_size: 96px;
|
||
|
$app_folder_size: 720px;
|
||
|
|
||
|
// app icons
|
||
|
.icon-grid {
|
||
|
row-spacing: 12px;
|
||
|
column-spacing: 12px;
|
||
|
max-row-spacing: 36px;
|
||
|
max-column-spacing: 36px;
|
||
|
page-padding-top: 24px;
|
||
|
page-padding-bottom: 24px;
|
||
|
page-padding-left: 18px;
|
||
|
page-padding-right: 18px;
|
||
|
}
|
||
|
|
||
|
/* App Icons */
|
||
|
|
||
|
// items in the app grid and dash
|
||
|
.overview-tile {
|
||
|
background-color: transparent;
|
||
|
|
||
|
&:focus { background-color: $light_divider_color; }
|
||
|
&:hover { background-color: $light_divider_color; }
|
||
|
&:active { background-color: $light_track_color; }
|
||
|
&:highlighted,&:selected,
|
||
|
&:checked { background-color: $light_track_color; }
|
||
|
&:insensitive { background-color: transparent; }
|
||
|
|
||
|
// override the %tile style
|
||
|
border-radius: $wm_radius * 1.5;
|
||
|
padding: 12px;
|
||
|
|
||
|
// the icon itself
|
||
|
.overview-icon {
|
||
|
// item with a label
|
||
|
&.overview-icon-with-label {
|
||
|
> StBoxLayout {
|
||
|
spacing: 6px;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.app-folder {
|
||
|
background-color: $light_divider_color;
|
||
|
|
||
|
&:focus { background-color: $light_divider_color; }
|
||
|
&:hover { background-color: rgba(white, 0.2); }
|
||
|
&:active { background-color: rgba(white, 0.3); }
|
||
|
&:highlighted,&:selected,
|
||
|
&:checked { background-color: rgba(white, 0.3); }
|
||
|
&:insensitive { background-color: transparent; }
|
||
|
}
|
||
|
|
||
|
.app-folder-dialog-container {
|
||
|
// pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
|
||
|
padding-top: $menuitem_size;
|
||
|
}
|
||
|
|
||
|
// Expanded app folder dialog
|
||
|
.app-folder-dialog {
|
||
|
width: $app_folder_size;
|
||
|
height: $app_folder_size;
|
||
|
|
||
|
& .page-indicators {
|
||
|
margin-bottom: $base_padding * 4;
|
||
|
}
|
||
|
|
||
|
& .icon-button, & .page-navigation-arrow {
|
||
|
color: $light_alt_fg_color;
|
||
|
background-color: transparent;
|
||
|
|
||
|
&:hover {
|
||
|
background-color: $light_divider_color;
|
||
|
color: $light_fg_color;
|
||
|
}
|
||
|
|
||
|
&:active {
|
||
|
background-color: $light_track_color;
|
||
|
color: $light_fg_color;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.page-navigation-hint {
|
||
|
width: if($laptop == 'true', 220px, 300px);
|
||
|
|
||
|
&.dnd {
|
||
|
background: rgba(255, 255, 255, 0.1);
|
||
|
}
|
||
|
|
||
|
&.next:ltr,
|
||
|
&.previous:rtl {
|
||
|
background-gradient-start: $light_divider_color;
|
||
|
background-gradient-end: transparent;
|
||
|
background-gradient-direction: horizontal;
|
||
|
border-radius: $modal_radius 0px 0px $modal_radius;
|
||
|
}
|
||
|
|
||
|
&.previous:ltr,
|
||
|
&.next:rtl {
|
||
|
background-gradient-start: transparent;
|
||
|
background-gradient-end: $light_divider_color;
|
||
|
background-gradient-direction: horizontal;
|
||
|
border-radius: 0px $modal_radius $modal_radius 0px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.page-navigation-arrow {
|
||
|
margin: $base_padding;
|
||
|
padding: $base_padding * 3;
|
||
|
width: 24px;
|
||
|
height: 24px;
|
||
|
border-radius: $circular_radius;
|
||
|
color: $light_alt_fg_color;
|
||
|
background-color: transparent;
|
||
|
|
||
|
> StIcon { color: $light_fg_color; }
|
||
|
|
||
|
&:insensitive {
|
||
|
background-color: $light_fill_color;
|
||
|
color: $light_alt_disabled_fg_color;
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
background-color: $light_divider_color;
|
||
|
color: $light_fg_color;
|
||
|
}
|
||
|
|
||
|
&:active {
|
||
|
background-color: $light_track_color;
|
||
|
color: $light_fg_color;
|
||
|
}
|
||
|
}
|