1/* App Grid */ 2 3$app_icon_size: 96px; 4 5// app icons 6.icon-grid { 7 row-spacing: $base_spacing * 2; 8 column-spacing: $base_spacing * 2; 9 max-row-spacing: $base_spacing * 12; 10 max-column-spacing: $base_spacing * 12; 11 page-padding-top: $base_padding * 4; 12 page-padding-bottom: $base_padding * 4; 13 page-padding-left: $base_padding * 2; 14 page-padding-right: $base_padding * 2; 15} 16 17/* App Icons */ 18 19$app_grid_fg_color: #fff; 20 21// Icon tiles in the app grid 22.app-well-app, 23%app-well-app { 24 @include overview-icon($app_grid_fg_color); 25 26 .overview-icon.overview-icon-with-label { 27 padding: 10px 8px 5px 8px; 28 29 > StBoxLayout { 30 spacing: $base_spacing; 31 } 32 } 33} 34 35/* App Folders */ 36.app-well-app.app-folder { 37 background-color: $dash_background_color; 38 border-radius: $base_border_radius + 4px; // same as %icon_tile 39} 40 41// expanded folder 42.app-folder-dialog { //style like the dash 43 border-radius: $modal_radius * 1.5; 44 background-color: $dash_background_color; 45 padding: 12px 0px 12px 0px; 46 47 & .folder-name-container { 48 padding: 24px 36px 0; 49 spacing: 12px; 50 51 & .folder-name-label, 52 & .folder-name-entry { 53 font-size: 18pt; 54 font-weight: 800; 55 } 56 57 & .folder-name-entry { width: 300px } 58 59 /* FIXME: this is to keep the label in sync with the entry */ 60 & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; } 61 62 & .edit-folder-button { 63 @extend %button; 64 65 padding: 0; 66 width: 36px; 67 height: 36px; 68 border-radius: 18px; 69 70 & > StIcon { icon-size: 16px } 71 } 72 } 73 74 & .icon-grid { 75 row-spacing: $base_spacing * 2; 76 column-spacing: $base_spacing * 5; 77 page-padding-top: 0; 78 page-padding-bottom: 0; 79 page-padding-left: 0; 80 page-padding-right: 0; 81 } 82 83 & .page-indicators { 84 margin-bottom: 18px; 85 } 86} 87.app-folder-dialog-container { 88 padding: 12px; 89 width: 620px; 90 height: 620px; 91} 92 93// Running app indicator (also shown in dash) 94.app-well-app-running-dot { 95 height: 5px; 96 width: 5px; 97 border-radius:5px; 98 background-color: $osd_fg_color; 99 margin-bottom: 1px; 100} 101 102// Rename popup for app folders 103.rename-folder-popup { 104 .rename-folder-popup-item { 105 spacing: $base_spacing; 106 &:ltr, &:rtl { padding: 0 $base_padding * 2; } 107 } 108} 109 110// right-click app menu 111.app-menu { 112 max-width: 27.25em; 113} 114 115// App Grid pagination indicators 116.page-indicator { 117 padding: $base_padding $base_padding * 2 0; 118 119 .page-indicator-icon { 120 width: 10px; 121 height: 10px; 122 border-radius: 10px; // the same as height&width 123 background-color: white; 124 } 125} 126 127.apps-scroll-view { 128 padding: 0; 129} 130 131// shutdown and other actions in the grid 132.system-action-icon { 133 background-color: rgba(0,0,0,0.8); 134 color: #fff; 135 border-radius: 99px; 136 icon-size: $app_icon_size * 0.5; 137} 138 139.page-navigation-hint { 140 width: 300px; 141 142 &.dnd { 143 background: rgba(255, 255, 255, 0.1); 144 } 145 146 &.next:ltr, 147 &.previous:rtl { 148 background-gradient-start: rgba(255, 255, 255, 0.05); 149 background-gradient-end: transparent; 150 background-gradient-direction: horizontal; 151 border-radius: 15px 0px 0px 15px; 152 } 153 154 &.previous:ltr, 155 &.next:rtl { 156 background-gradient-start: transparent; 157 background-gradient-end: rgba(255, 255, 255, 0.05); 158 background-gradient-direction: horizontal; 159 border-radius: 0px 15px 15px 0px; 160 } 161} 162 163.page-navigation-arrow { 164 margin: 6px; 165 width: 24px; 166 height: 24px; 167} 168