_window-picker.scss
ASCII text
1/* Window Picker */ 2 3// Window picker 4.window-picker { 5// Space between window thumbnails 6@if $version >= 3.38 { 7spacing: 8px; 8} @else { 9-horizontal-spacing: 16px; 10-vertical-spacing: 16px; 11} 12 13@if $version < 40 { 14// Padding for container around window thumbnails 15padding: 0 16px 32px; 16 17&.external-monitor { 18padding: 16px; 19} 20} 21} 22 23@if $version < 40 { 24// Borders on window thumbnails 25.window-clone-border { 26border: 4px solid stroke($on-dark); 27border-radius: $corner-radius; 28// For window decorations with round corners we can't match 29// the exact shape when the window is scaled. So apply a shadow 30// to fix that case 31box-shadow: inset 0 0 0 1px stroke($on-dark); 32} 33} 34 35// Window titles 36.window-caption { 37padding: 4px 8px; 38border-radius: $corner-radius; 39background-color: $scrim; 40color: $on-scrim; 41 42@if $version < 40 { 43spacing: 0; 44border: 0; 45font-size: 1em; 46font-weight: normal; 47} 48} 49 50// Close button 51.window-close { 52transition-duration: $duration; 53height: $medium-size; 54width: $medium-size; 55padding: 0; 56border: 0; 57border-radius: $medium-size / 2; 58box-shadow: $shadow-z2; 59background-color: $error; 60color: $on-error; 61 62background-image: url("assets/window-close.svg"); 63background-size: 24px; 64 65@if $version < 3.38 { 66-shell-close-overlap: $medium-size / 2; 67} 68 69&:hover { 70box-shadow: $shadow-z4; 71border-color: transparent; 72background-color: overlay("hover", $on-error, $on: $error); 73color: $on-error; 74 75@if $version < 3.32 { 76background-image: url("assets/window-close.svg"); 77} 78} 79 80&:active { 81transition-duration: $duration-ripple; 82box-shadow: $shadow-z8; 83border-color: transparent; 84background-color: overlay("pressed", $on-error, $on: $error); 85color: $on-error; 86 87@if $version < 3.32 { 88background-image: url("assets/window-close.svg"); 89} 90} 91 92StIcon { 93icon-size: 24px; 94color: transparent; 95} 96} 97 98@if $version >= 40 { 99.workspace-background { 100// keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js 101border-radius: 30px; 102background-color: black; 103box-shadow: $shadow-z4; // use z4 for the huge card 104} 105} 106