2019-12-18 16:25:03 -05:00
|
|
|
/* App Grid */
|
|
|
|
|
|
|
|
|
|
$app_icon_size: 96px;
|
|
|
|
|
|
|
|
|
|
// app icons
|
|
|
|
|
.icon-grid {
|
2021-01-15 13:23:50 -05:00
|
|
|
row-spacing: $base_spacing * 2;
|
|
|
|
|
column-spacing: $base_spacing * 2;
|
2020-05-19 09:43:10 -04:00
|
|
|
max-row-spacing: $base_spacing * 12;
|
|
|
|
|
max-column-spacing: $base_spacing * 12;
|
2021-01-15 13:23:50 -05:00
|
|
|
page-padding-top: $base_padding * 4;
|
|
|
|
|
page-padding-bottom: $base_padding * 4;
|
|
|
|
|
page-padding-left: $base_padding * 2;
|
|
|
|
|
page-padding-right: $base_padding * 2;
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* App Icons */
|
|
|
|
|
|
|
|
|
|
$app_grid_fg_color: #fff;
|
|
|
|
|
|
|
|
|
|
// Icon tiles in the app grid
|
|
|
|
|
.app-well-app,
|
2020-01-25 03:53:17 -05:00
|
|
|
%app-well-app {
|
|
|
|
|
@include overview-icon($app_grid_fg_color);
|
2019-12-19 10:38:27 -05:00
|
|
|
|
2020-02-04 11:03:05 -05:00
|
|
|
.overview-icon.overview-icon-with-label {
|
2020-01-25 03:53:17 -05:00
|
|
|
padding: 10px 8px 5px 8px;
|
2020-02-04 11:03:05 -05:00
|
|
|
|
|
|
|
|
> StBoxLayout {
|
|
|
|
|
spacing: $base_spacing;
|
|
|
|
|
}
|
2019-12-19 10:38:27 -05:00
|
|
|
}
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* App Folders */
|
2020-02-16 15:56:27 -05:00
|
|
|
.app-well-app.app-folder {
|
2021-04-08 15:03:59 -04:00
|
|
|
background-color: $dash_background_color;
|
2020-02-16 15:56:27 -05:00
|
|
|
border-radius: $base_border_radius + 4px; // same as %icon_tile
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
2019-12-19 13:05:28 -05:00
|
|
|
// expanded folder
|
2021-02-22 08:58:58 -05:00
|
|
|
.app-folder-dialog { //style like the dash
|
2020-02-02 09:35:35 -05:00
|
|
|
border-radius: $modal_radius * 1.5;
|
2021-02-22 08:58:58 -05:00
|
|
|
background-color: $dash_background_color;
|
2021-02-12 14:48:37 -05:00
|
|
|
padding: 12px 0px 12px 0px;
|
2019-12-17 14:39:24 -05:00
|
|
|
|
|
|
|
|
& .folder-name-container {
|
2020-02-02 09:35:35 -05:00
|
|
|
padding: 24px 36px 0;
|
2019-12-17 14:39:24 -05:00
|
|
|
spacing: 12px;
|
|
|
|
|
|
|
|
|
|
& .folder-name-label,
|
|
|
|
|
& .folder-name-entry {
|
|
|
|
|
font-size: 18pt;
|
2020-05-20 18:19:40 -04:00
|
|
|
font-weight: 800;
|
2019-12-17 14:39:24 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& .folder-name-entry { width: 300px }
|
|
|
|
|
|
|
|
|
|
/* FIXME: this is to keep the label in sync with the entry */
|
2020-03-03 06:47:21 -05:00
|
|
|
& .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
|
2019-12-17 14:39:24 -05:00
|
|
|
|
|
|
|
|
& .edit-folder-button {
|
|
|
|
|
@extend %button;
|
|
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
width: 36px;
|
|
|
|
|
height: 36px;
|
|
|
|
|
border-radius: 18px;
|
|
|
|
|
|
|
|
|
|
& > StIcon { icon-size: 16px }
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-05-20 18:20:15 -04:00
|
|
|
|
|
|
|
|
& .icon-grid {
|
|
|
|
|
row-spacing: $base_spacing * 2;
|
|
|
|
|
column-spacing: $base_spacing * 5;
|
2020-11-25 16:52:29 -05:00
|
|
|
page-padding-top: 0;
|
|
|
|
|
page-padding-bottom: 0;
|
2021-02-12 14:48:37 -05:00
|
|
|
page-padding-left: 0;
|
|
|
|
|
page-padding-right: 0;
|
2020-05-20 18:20:15 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& .page-indicators {
|
|
|
|
|
margin-bottom: 18px;
|
|
|
|
|
}
|
2019-12-12 13:54:18 -05:00
|
|
|
}
|
|
|
|
|
.app-folder-dialog-container {
|
|
|
|
|
padding: 12px;
|
2020-05-20 18:19:40 -04:00
|
|
|
width: 620px;
|
|
|
|
|
height: 620px;
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
2019-12-19 13:05:28 -05:00
|
|
|
|
2019-12-18 16:25:03 -05:00
|
|
|
// Running app indicator (also shown in dash)
|
|
|
|
|
.app-well-app-running-dot {
|
2019-12-19 10:38:27 -05:00
|
|
|
height: 5px;
|
|
|
|
|
width: 5px;
|
|
|
|
|
border-radius:5px;
|
|
|
|
|
background-color: $osd_fg_color;
|
|
|
|
|
margin-bottom: 1px;
|
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 {
|
|
|
|
|
spacing: $base_spacing;
|
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
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// right-click app menu
|
2021-08-11 20:02:12 -04:00
|
|
|
.app-menu {
|
2019-12-19 10:38:27 -05:00
|
|
|
max-width: 27.25em;
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// App Grid pagination indicators
|
|
|
|
|
.page-indicator {
|
2021-01-15 13:23:50 -05:00
|
|
|
padding: $base_padding $base_padding * 2 0;
|
2019-12-19 10:38:27 -05:00
|
|
|
|
|
|
|
|
.page-indicator-icon {
|
2019-12-19 15:56:45 -05:00
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
border-radius: 10px; // the same as height&width
|
|
|
|
|
background-color: white;
|
2019-12-19 10:38:27 -05:00
|
|
|
}
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
2021-02-03 06:39:26 -05: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 10:45:57 -05:00
|
|
|
padding: 0;
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// shutdown and other actions in the grid
|
|
|
|
|
.system-action-icon {
|
2019-12-19 10:38:27 -05:00
|
|
|
background-color: rgba(0,0,0,0.8);
|
|
|
|
|
color: #fff;
|
2019-12-20 16:33:13 -05:00
|
|
|
border-radius: 99px;
|
2019-12-19 10:38:27 -05:00
|
|
|
icon-size: $app_icon_size * 0.5;
|
2019-12-18 16:25:03 -05:00
|
|
|
}
|
2021-02-03 06:46:07 -05:00
|
|
|
|
|
|
|
|
.page-navigation-hint {
|
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 10:45:57 -05:00
|
|
|
width: 300px;
|
2021-02-03 06:46:07 -05:00
|
|
|
|
2021-02-03 06:51:17 -05:00
|
|
|
&.dnd {
|
|
|
|
|
background: rgba(255, 255, 255, 0.1);
|
|
|
|
|
}
|
|
|
|
|
|
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 10:45:57 -05:00
|
|
|
&.next:ltr,
|
|
|
|
|
&.previous:rtl {
|
|
|
|
|
background-gradient-start: rgba(255, 255, 255, 0.05);
|
|
|
|
|
background-gradient-end: transparent;
|
|
|
|
|
background-gradient-direction: horizontal;
|
|
|
|
|
border-radius: 15px 0px 0px 15px;
|
2021-02-03 06:46:07 -05:00
|
|
|
}
|
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 10:45:57 -05:00
|
|
|
|
|
|
|
|
&.previous:ltr,
|
|
|
|
|
&.next:rtl {
|
|
|
|
|
background-gradient-start: transparent;
|
|
|
|
|
background-gradient-end: rgba(255, 255, 255, 0.05);
|
|
|
|
|
background-gradient-direction: horizontal;
|
|
|
|
|
border-radius: 0px 15px 15px 0px;
|
2021-02-03 06:46:07 -05:00
|
|
|
}
|
|
|
|
|
}
|
2021-02-13 13:54:14 -05:00
|
|
|
|
|
|
|
|
.page-navigation-arrow {
|
|
|
|
|
margin: 6px;
|
|
|
|
|
width: 24px;
|
|
|
|
|
height: 24px;
|
|
|
|
|
}
|
