1// Dash to Dock 2 3$dash_panel_bg: if($variant == 'light', rgba(#f1f1f1, 0.65), rgba(#222222, 0.75)); 4$dash_panel_fg: if($variant == 'light', black, white); 5$dash_radius: 18px; 6 7// Scrollview style 8.bottom #dashtodockDashScrollview, 9.top #dashtodockDashScrollview { 10 -st-hfade-offset: 24px; 11} 12 13.left #dashtodockDashScrollview, 14.right #dashtodockDashScrollview { 15 -st-vfade-offset: 24px; 16} 17 18#dashtodockContainer { 19 background-color: transparent; 20 21 .number-overlay { 22 color: $light_fg_color; 23 background-color: rgba(black, 0.75); 24 text-align: center; 25 } 26 27 .notification-badge { 28 color: $light_fg_color; 29 background-color: $primary_color; 30 box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25); 31 border-radius: 1000px; 32 margin: 2px; 33 padding: 0.2em 0.6em; 34 font-weight: bold; 35 text-align: center; 36 } 37 38 &.straight-corner #dash .dash-background, 39 &.shrink.straight-corner #dash .dash-background { 40 border-radius: 0; 41 margin: 0; 42 } 43 44 &.extended.top, 45 &.extended.bottom { 46 #dash { 47 border-left: 0; 48 border-right: 0; 49 padding-top: 0; 50 padding-bottom: 0; 51 margin-top: 0; 52 } 53 54 .dash-background { 55 margin-bottom: 0; 56 } 57 } 58 59 &.extended.right, 60 &.extended.left { 61 #dash { 62 border-top: 0; 63 border-bottom: 0; 64 padding-top: 0; 65 padding-bottom: 0; 66 margin-top: 0; 67 } 68 69 .dash-background { 70 margin-bottom: 0; 71 } 72 } 73 74 &.dashtodock #dash { background: none; } 75 76 #dash { // default-mode 77 background: none; 78 79 StWidget.focused .app-well-app-running-dot { 80 background-color: $primary_color; 81 } 82 83 .app-well-app, 84 .show-apps { 85 &:hover .overview-icon, 86 &:focus .overview-icon, 87 &:selected .overview-icon { 88 background-color: rgba($fg_color, 0.15); 89 } 90 &:active .overview-icon, 91 &:checked .overview-icon { 92 background-color: rgba($fg_color, 0.25); 93 } 94 } 95 96 .show-apps, .show-apps .show-apps-icon, .show-apps .overview-icon { 97 color: $fg_color; 98 } 99 } 100 101 .dash-background { 102 background-color: $dash_panel_bg; 103 border: 1px solid if($variant == 'light', rgba(black, 0.08), rgba(black, 0.75)); 104 box-shadow: inset 0 0 0 1px rgba(white, 0.05); 105 } 106 107 108 &:overview #dash { // overview-mode #1 109 background: none; 110 111 .app-well-app, 112 .show-apps { 113 &:hover .overview-icon, 114 &:focus .overview-icon, 115 &:selected .overview-icon { 116 background-color: $light_divider_color; 117 } 118 &:active .overview-icon, 119 &:checked .overview-icon { 120 background-color: $light_track_color; 121 } 122 } 123 124 .show-apps, .show-apps .show-apps-icon, .show-apps .overview-icon { 125 color: $light_alt_fg_color; 126 } 127 128 .dash-background { 129 background-color: $light_divider_color; 130 border: 1px solid rgba(black, 0.08); 131 box-shadow: inset 0 0 0 1px rgba(white, 0.05); 132 } 133 134 .app-well-app-running-dot { 135 background-color: $light_alt_fg_color; 136 } 137 138 StWidget.focused .app-well-app-running-dot { 139 background-color: $primary_color; 140 } 141 } 142 143 &.opaque:overview, 144 &.transparent:overview { // overview-mode #2 145 #dash { 146 background-color: transparent !important; 147 box-shadow: none !important; 148 } 149 150 .dash-background { 151 background-color: transparent !important; 152 } 153 } 154 155 &.extended:overview, // overview-mode #3 156 &.opaque.extended:overview, 157 &.transparent.extended:overview { 158 #dash { 159 background: none; 160 } 161 } 162 163 &.running-dots, 164 &.dashtodock { 165 .dash-item-container > StButton { 166 transition-duration: 250ms; 167 background-size: contain; 168 } 169 } 170 171 &.shrink, 172 &.dashtodock { 173 .dash-item-container > StButton { 174 padding: 1px 2px; 175 } 176 } 177 178 .app-well-app, 179 .show-apps { 180 .overview-icon { 181 padding: 8px; 182 background-size: contain; 183 } 184 } 185 186 &.extended, 187 &.extended:overview { 188 .app-well-app, 189 .show-apps { 190 .overview-icon { 191 border-radius: $bt_radius; 192 } 193 } 194 } 195 196 .metro .overview-icon { 197 border-radius: 0; 198 } 199} 200 201.dashtodock-app-well-preview-menu-item { 202 padding: 1em 1em 0.5em 1em; 203} 204 205#dashtodockPreviewSeparator.popup-separator-menu-item-horizontal { 206 width: 1px; 207 height: auto; 208 border-right-width: 1px; 209 margin: 32px 0; 210} 211