2019-12-18 16:25:03 -05:00
|
|
|
/* App Grid */
|
|
|
|
|
|
|
|
$app_icon_size: 96px;
|
2023-12-05 16:31:47 -03:30
|
|
|
$app_folder_size: 720px;
|
2019-12-18 16:25:03 -05:00
|
|
|
|
|
|
|
// app icons
|
|
|
|
.icon-grid {
|
2022-02-07 14:52:40 -03:30
|
|
|
row-spacing: $base_padding * 2;
|
|
|
|
column-spacing: $base_padding * 2;
|
2023-12-05 16:31:47 -03:30
|
|
|
max-row-spacing: $base_padding * 6;
|
|
|
|
max-column-spacing: $base_padding * 6;
|
2021-01-15 15:23:50 -03:00
|
|
|
page-padding-top: $base_padding * 4;
|
|
|
|
page-padding-bottom: $base_padding * 4;
|
2022-02-15 12:30:51 -03:30
|
|
|
page-padding-left: $base_padding * 3;
|
|
|
|
page-padding-right: $base_padding * 3;
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
/* App Icons */
|
|
|
|
|
2023-11-14 10:30:45 -03:30
|
|
|
// items in the app grid and dash
|
|
|
|
.overview-tile {
|
|
|
|
@include tile_button($system_fg_color);
|
2019-12-19 10:38:27 -05:00
|
|
|
|
2023-11-14 10:30:45 -03:30
|
|
|
// override the %tile style
|
|
|
|
border-radius: $base_border_radius*3;
|
|
|
|
padding: $base_padding * 2;
|
|
|
|
|
|
|
|
// the icon itself
|
2022-11-03 12:58:24 -02:30
|
|
|
.overview-icon {
|
2023-11-14 10:30:45 -03:30
|
|
|
// item with a label
|
|
|
|
&.overview-icon-with-label {
|
|
|
|
> StBoxLayout {
|
|
|
|
spacing: $base_padding;
|
|
|
|
}
|
2020-02-05 01:03:05 +09:00
|
|
|
}
|
2019-12-19 10:38:27 -05:00
|
|
|
}
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
2022-02-07 14:52:40 -03:30
|
|
|
// app folders
|
2023-11-14 10:30:45 -03:30
|
|
|
.app-folder {
|
|
|
|
@include tile_button($system_fg_color, $flat: false);
|
|
|
|
}
|
|
|
|
|
|
|
|
// Running app indicator (also shown in dash)
|
|
|
|
.app-grid-running-dot {
|
|
|
|
height: 5px;
|
|
|
|
width: 5px;
|
|
|
|
border-radius:5px;
|
|
|
|
background-color: $system_fg_color;
|
|
|
|
margin-bottom: 2px;
|
2024-01-08 14:05:09 -03:30
|
|
|
|
|
|
|
@if $contrast == 'high' {
|
2023-11-14 10:30:45 -03:30
|
|
|
margin-bottom: 4px;
|
|
|
|
}
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
2023-12-05 16:31:47 -03:30
|
|
|
.app-folder-dialog-container {
|
|
|
|
// pad the top with panel height so the folder doesn't overlap the panel on smaller resolutions
|
|
|
|
padding-top: $panel_height;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Expanded app folder dialog
|
2022-02-07 14:52:40 -03:30
|
|
|
.app-folder-dialog {
|
2023-12-05 16:31:47 -03:30
|
|
|
width: $app_folder_size;
|
|
|
|
height: $app_folder_size;
|
|
|
|
|
2023-11-29 14:18:59 -03:30
|
|
|
border-radius: $modal_radius * 4;
|
2023-07-05 14:13:39 -02:30
|
|
|
background-color: $system_overlay_bg_color;
|
2023-12-05 16:31:47 -03:30
|
|
|
box-shadow: inset 0 0 0 1px $system_borders_color;
|
|
|
|
padding: 0 1px;
|
2022-11-03 12:58:24 -02:30
|
|
|
|
2024-01-08 14:05:09 -03:30
|
|
|
@if $contrast == 'high' {
|
2023-12-05 16:31:47 -03:30
|
|
|
padding: 0 2px;
|
2023-11-27 14:49:05 +08:00
|
|
|
box-shadow: inset 0 0 0 2px $hc_inset_color;
|
2022-11-03 12:58:24 -02:30
|
|
|
}
|
2019-12-17 16:39:24 -03:00
|
|
|
|
|
|
|
& .folder-name-container {
|
2023-12-05 16:31:47 -03:30
|
|
|
padding: $base_padding * 4 $base_padding * 6;
|
|
|
|
padding-bottom: 0;
|
2019-12-17 16:39:24 -03:00
|
|
|
|
|
|
|
& .folder-name-label,
|
|
|
|
& .folder-name-entry {
|
2022-02-07 14:52:40 -03:30
|
|
|
@extend %title_1;
|
2019-12-17 16:39:24 -03:00
|
|
|
}
|
|
|
|
|
2022-11-03 12:58:24 -02:30
|
|
|
& .folder-name-entry {
|
|
|
|
width: 12em;
|
|
|
|
}
|
2020-05-20 19:20:15 -03:00
|
|
|
}
|
|
|
|
|
|
|
|
& .page-indicators {
|
2023-12-05 16:31:47 -03:30
|
|
|
margin-bottom: $base_padding * 4;
|
2020-05-20 19:20:15 -03:00
|
|
|
}
|
2019-12-12 15:54:18 -03:00
|
|
|
}
|
2021-12-28 10:16:54 -03:30
|
|
|
|
2019-12-19 13:05:28 -05:00
|
|
|
|
2019-12-18 16:25:03 -05:00
|
|
|
|
|
|
|
// Rename popup for app folders
|
|
|
|
.rename-folder-popup {
|
2019-12-19 10:38:27 -05:00
|
|
|
.rename-folder-popup-item {
|
2022-02-07 14:52:40 -03:30
|
|
|
spacing: $base_padding;
|
2019-12-19 15:56:45 -05:00
|
|
|
&:ltr, &:rtl { padding: 0 $base_padding * 2; }
|
2019-12-19 10:38:27 -05:00
|
|
|
}
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
// App Grid pagination indicators
|
2023-11-29 14:18:59 -03:30
|
|
|
$page_indicator_size: 10px;
|
2019-12-18 16:25:03 -05:00
|
|
|
.page-indicator {
|
2021-01-15 15:23:50 -03:00
|
|
|
padding: $base_padding $base_padding * 2 0;
|
2022-05-27 15:39:45 -02:30
|
|
|
transition-duration:400ms;
|
2019-12-19 10:38:27 -05:00
|
|
|
|
|
|
|
.page-indicator-icon {
|
2023-11-29 14:18:59 -03:30
|
|
|
width: $page_indicator_size;
|
|
|
|
height: $page_indicator_size;
|
|
|
|
border-radius: $forced_circular_radius;
|
2023-12-18 10:21:03 -03:30
|
|
|
background-color: $system_fg_color;
|
2023-05-21 19:51:46 -03:00
|
|
|
transition-duration: 400ms;
|
2019-12-19 10:38:27 -05:00
|
|
|
}
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
2021-02-03 12:39:26 +01:00
|
|
|
.apps-scroll-view {
|
appDisplay: Adapt to available extra space showing icon grids
Depending on the available horizontal space, we may want to manipulate
the icon grid and scroll view spacing to result in an optimal layout
that has space left to preview prev/next pages.
The main change here is that, when adapting to the available size, the
space given to a page does not necessarily match the available space,
as we need to be able to show more than one page at a time.
With this decoupling of available and page sizes in place, we now know
how much space there is available in order to extend the padding between
pages, or the fade effect applied to the previewed pages.
Underneath, we rely a bit less on hardcoded CSS paddings, and a bit more
on the StScrollView::content-padding property.
All put together, gives us proper space management from ultra-wide
displays, to display ratios that are close to the optimal grid ratio.
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1630>
2021-02-19 16:45:57 +01:00
|
|
|
padding: 0;
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
// shutdown and other actions in the grid
|
|
|
|
.system-action-icon {
|
2022-10-13 14:21:17 -02:30
|
|
|
background-color: transparentize($system_fg_color,.9);
|
|
|
|
color: $system_fg_color;
|
2023-11-29 14:18:59 -03:30
|
|
|
border-radius: $forced_circular_radius;
|
2019-12-19 10:38:27 -05:00
|
|
|
icon-size: $app_icon_size * 0.5;
|
2024-01-08 14:05:09 -03:30
|
|
|
@if $contrast == 'high' {
|
2022-11-03 12:58:24 -02:30
|
|
|
box-shadow: inset 0 0 0 2px $hc_inset_color;
|
|
|
|
}
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
2021-02-03 12:46:07 +01:00
|
|
|
|
2023-11-14 10:30:45 -03:30
|
|
|
// page navigation
|
2022-08-20 18:36:38 -03:00
|
|
|
.page-navigation-hint {
|
|
|
|
&.dnd {
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
}
|
|
|
|
|
|
|
|
&.next:ltr,
|
|
|
|
&.previous:rtl {
|
|
|
|
background-gradient-start: rgba(255, 255, 255, 0.05);
|
|
|
|
background-gradient-end: transparent;
|
|
|
|
background-gradient-direction: horizontal;
|
2023-11-29 14:18:59 -03:30
|
|
|
border-radius: $modal_radius * 1.5 0px 0px $modal_radius * 1.5;
|
2022-08-20 18:36:38 -03:00
|
|
|
}
|
|
|
|
|
|
|
|
&.previous:ltr,
|
|
|
|
&.next:rtl {
|
|
|
|
background-gradient-start: transparent;
|
|
|
|
background-gradient-end: rgba(255, 255, 255, 0.05);
|
|
|
|
background-gradient-direction: horizontal;
|
2023-11-29 14:18:59 -03:30
|
|
|
border-radius: 0px $modal_radius * 1.5 $modal_radius * 1.5 0px;
|
2022-08-20 18:36:38 -03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-28 13:19:55 -03:00
|
|
|
.page-navigation-arrow {
|
2023-11-29 14:18:59 -03:30
|
|
|
margin: $base_padding;
|
|
|
|
padding: $base_padding * 3;
|
|
|
|
width: $medium_icon_size;
|
|
|
|
height: $medium_icon_size;
|
|
|
|
border-radius: $forced_circular_radius;
|
2023-05-21 19:51:46 -03:00
|
|
|
transition-duration: 100ms;
|
2022-10-13 14:21:17 -02:30
|
|
|
|
|
|
|
> StIcon { color: $system_fg_color;}
|
|
|
|
|
2024-01-08 14:05:09 -03:30
|
|
|
@if $contrast == 'high' {
|
2022-10-13 14:21:17 -02:30
|
|
|
@include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5));
|
2022-06-28 13:19:55 -03:00
|
|
|
}
|
|
|
|
|
2022-10-13 14:21:17 -02:30
|
|
|
&:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
|
|
|
&:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
|
|
|
&:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
|
2021-02-13 19:54:14 +01:00
|
|
|
}
|