Warning, /plasma/breeze-gtk/src/gtk4/widgets/_button.scss is written in an unsupported language. File is not indexed.
0001 @charset "UTF-8"; 0002 0003 // buttons 0004 0005 @mixin btn-highlight($c) { 0006 $bg: gtk("@theme_button_background_normal"); 0007 $fg: gtk("@theme_button_foreground_normal"); 0008 0009 background-color: gtkalpha($c, 0.2); 0010 border-color: gtkmix($c, gtkmix($bg, $fg, 0.333), 0.5); 0011 } 0012 0013 @mixin bg-gradient($bg) { 0014 background: linear-gradient( 0015 180deg, 0016 gtkmix($bg, white, 0.03125) 0%, 0017 $bg 50%, 0018 gtkmix($bg, black, 0.03125) 100% 0019 ); 0020 } 0021 0022 @mixin linked() { 0023 border-right-style: none; 0024 border-radius: 0; 0025 0026 &:first-child { 0027 border-top-left-radius: $r; 0028 border-bottom-left-radius: $r; 0029 } 0030 &:last-child { 0031 border-right-style: solid; 0032 border-top-right-radius: $r; 0033 border-bottom-right-radius: $r; 0034 } 0035 0036 &:only-child { 0037 border-style: solid; 0038 border-radius: $r; 0039 } 0040 } 0041 0042 0043 @mixin linked-vertical() { 0044 border-bottom-style: none; 0045 border-radius: 0; 0046 0047 &:first-child { 0048 border-top-left-radius: $r; 0049 border-top-right-radius: $r; 0050 } 0051 0052 &:last-child { 0053 border-bottom-style: solid; 0054 border-bottom-left-radius: $r; 0055 border-bottom-right-radius: $r; 0056 } 0057 0058 &:only-child { 0059 border-style: solid; 0060 } 0061 } 0062 0063 @mixin linked-side() { 0064 &:focus { 0065 + entry { 0066 border-left-color: gtk( 0067 "@theme_view_active_decoration_color" 0068 ); 0069 } 0070 + button { 0071 border-left-color: gtk( 0072 "@theme_button_decoration_focus" 0073 ); 0074 } 0075 } 0076 &:hover { 0077 + entry { 0078 border-left-color: gtk( 0079 "@theme_view_active_decoration_color" 0080 ); 0081 } 0082 + button { 0083 border-left-color: gtk( 0084 "@theme_button_decoration_hover" 0085 ); 0086 } 0087 } 0088 } 0089 0090 @mixin linked-side-vertical() { 0091 &:focus { 0092 + entry { 0093 border-top-color: gtk("@theme_view_active_decoration_color"); 0094 } 0095 + button { 0096 border-top-color: gtk("@theme_view_active_decoration_color"); 0097 } 0098 } 0099 &:hover { 0100 + entry { 0101 border-top-color: gtk("@theme_view_active_decoration_color"); 0102 } 0103 + button { 0104 border-top-color: gtk("@theme_view_active_decoration_color"); 0105 } 0106 } 0107 } 0108 0109 // button styles mixin: $t is normal or toolbutton 0110 @mixin neobutton($t) { 0111 &.suggested-action { 0112 @include btn-highlight( 0113 gtk("@theme_button_decoration_focus") 0114 ); 0115 } 0116 &.destructive-action { 0117 @include btn-highlight(gtk("@error_color")); 0118 } 0119 0120 @if $t == normal { 0121 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.125); 0122 text-shadow: none; 0123 -gtk-icon-shadow: none; 0124 0125 color: gtk("@theme_button_foreground_normal"); 0126 border-color: gtk("@borders"); 0127 @include bg-gradient( 0128 gtk("@theme_button_background_normal") 0129 ); 0130 0131 &:backdrop { 0132 box-shadow: none; 0133 background: gtk("@theme_button_background_normal"); 0134 } 0135 0136 &:checked { 0137 background: gtkalpha( 0138 gtk("@theme_button_foreground_normal"), 0139 0.125 0140 ); 0141 box-shadow: none; 0142 } 0143 0144 &:hover { 0145 border-color: gtk("@theme_button_decoration_hover"); 0146 0147 &:not(:checked):not(:active) { 0148 background: gtk("@theme_button_background_normal"); 0149 } 0150 } 0151 0152 &:active { 0153 box-shadow: none; 0154 background: gtkalpha( 0155 gtk("@theme_button_decoration_hover"), 0156 0.333 0157 ); 0158 } 0159 0160 &:focus { 0161 border-color: gtk("@theme_button_decoration_focus"); 0162 } 0163 0164 &:disabled { 0165 box-shadow: none; 0166 color: gtk("@theme_button_foreground_insensitive"); 0167 border-color: gtk("@insensitive_borders"); 0168 background: gtk( 0169 "@theme_button_background_insensitive" 0170 ); 0171 0172 &:active, 0173 &:checked { 0174 color: gtk( 0175 "@theme_button_foreground_active_insensitive" 0176 ); 0177 } 0178 } 0179 } @else if $t == toolbutton { 0180 border-color: transparent; 0181 background: transparent; 0182 background-color: transparent; 0183 background-image: none; 0184 box-shadow: none; 0185 color: gtk("@theme_button_foreground_normal"); 0186 0187 text-shadow: none; 0188 -gtk-icon-shadow: none; 0189 0190 &:checked { 0191 border-color: gtkmix( 0192 gtk("@theme_button_background_normal"), 0193 gtk("@theme_button_foreground_normal"), 0194 0.3 0195 ); 0196 background-color: gtkalpha( 0197 gtk("@theme_button_foreground_normal"), 0198 0.125 0199 ); 0200 } 0201 0202 &:hover { 0203 border-color: gtk("@theme_button_decoration_hover"); 0204 0205 &:not(:checked):not(:active) { 0206 background: unset; 0207 } 0208 } 0209 0210 &:active { 0211 0212 border-color: gtk("@theme_button_decoration_hover"); 0213 background-color: gtkalpha( 0214 gtk("@theme_button_decoration_hover"), 0215 0.333 0216 ); 0217 } 0218 0219 0220 &:focus { 0221 border-color: gtk("@theme_button_decoration_focus"); 0222 } 0223 } 0224 } 0225 0226 /*********** 0227 * Buttons * 0228 ***********/ 0229 0230 // stuff for .needs-attention 0231 $_dot_color: gtk("@theme_button_decoration_focus"); 0232 @keyframes needs_attention { 0233 from { 0234 background-image: radial-gradient( 0235 circle, 0236 $_dot_color 0%, 0237 transparent 5px 0238 ); 0239 } 0240 to { 0241 background-image: radial-gradient( 0242 circle, 0243 gtk("@theme_selected_bg_color") 0%, 0244 transparent 6px 0245 ); 0246 } 0247 } 0248 0249 %buttons { 0250 border: 1px solid; 0251 border-radius: $r; 0252 padding: 6px 6px; 0253 background-clip: border-box; 0254 0255 @include neobutton(normal); 0256 &.flat { 0257 @include neobutton(toolbutton); 0258 } 0259 0260 separator { 0261 background-color: transparent; 0262 background-image: none; 0263 color: transparent; 0264 } 0265 } 0266 %button, 0267 button { 0268 @at-root %button_basic, 0269 & { 0270 @extend %buttons; 0271 &.osd { 0272 @extend %buttons; 0273 } 0274 //overlay / OSD style 0275 .osd & { 0276 //@extend %buttons; 0277 } 0278 0279 &.image-button { 0280 min-width: 16px; 0281 min-height: 16px; 0282 padding: 6px; 0283 } 0284 0285 &.text-button { 0286 padding-left: 6px; 0287 padding-right: 6px; 0288 } 0289 0290 &.circular { 0291 min-width: 18px; 0292 min-height: 18px; 0293 border-radius: 9999px; 0294 } 0295 0296 &.text-button.image-button { 0297 padding-left: 6px; 0298 padding-right: 6px; 0299 label { 0300 padding-left: 6px; 0301 padding-right: 6px; 0302 } 0303 } 0304 // FIXME 0305 // &:drop(active) { 0306 // color: $drop_target_color; 0307 // border-color: $drop_target_color; 0308 // box-shadow: inset 0 0 0 1px $drop_target_color; 0309 // } 0310 } 0311 0312 @at-root %button_selected, 0313 & { 0314 row:selected & { 0315 border-color: gtk("@theme_selected_bg_color"); 0316 0317 &.flat:not(:active):not(:checked):not(:hover):not(disabled) { 0318 color: gtk("@theme_selected_fg_color"); 0319 border-color: transparent; 0320 0321 &:backdrop { 0322 color: gtk("@theme_unfocused_selected_fg_color"); 0323 } 0324 } 0325 } 0326 } 0327 0328 .stack-switcher > & { 0329 // to position the needs attention dot, padding is added to the button 0330 // child, a label needs just lateral padding while an icon needs vertical 0331 // padding added too. 0332 > label { 0333 padding-left: 6px; // label padding 0334 padding-right: 6px; // 0335 } 0336 > image { 0337 padding-left: 6px; // image padding 0338 padding-right: 6px; // 0339 padding-top: 3px; // 0340 padding-bottom: 3px; // 0341 } 0342 &.text-button { 0343 padding: 6px; // needed or it will get overridden 0344 } 0345 &.image-button { 0346 // we want image buttons to have a 1:1 aspect ratio, so compensation 0347 // of the padding added to the GtkImage is needed 0348 padding: 3px 0px; 0349 } 0350 &.needs-attention > label, 0351 &.needs-attention > image { 0352 @extend %needs_attention; 0353 } 0354 &.needs-attention:active > label, 0355 &.needs-attention:active > image, 0356 &.needs-attention:focus > label, 0357 &.needs-attention:focus > image, 0358 &.needs-attention:checked > label, 0359 &.needs-attention:checked > image { 0360 animation: none; 0361 background-image: none; 0362 } 0363 } 0364 0365 //inline-toolbar buttons 0366 .inline-toolbar &, 0367 .inline-toolbar &:backdrop { 0368 border-radius: $r; 0369 border-width: 1px; 0370 } 0371 0372 .primary-toolbar & { 0373 -gtk-icon-shadow: none; 0374 } 0375 } 0376 0377 /************** 0378 * ComboBoxes * 0379 **************/ 0380 combobox { 0381 arrow { 0382 -gtk-icon-source: -gtk-icontheme($arrow_down); 0383 min-height: 16px; 0384 min-width: 16px; 0385 } 0386 0387 button { 0388 padding-top: 4px; 0389 padding-bottom: 4px; 0390 } 0391 0392 > box > button.combo:only-child { 0393 // remove a shadow for headerbar comboboxes 0394 headerbar &, 0395 .linked & { 0396 box-shadow: none; 0397 } 0398 0399 arrow { 0400 min-width: 14px; 0401 0402 &:dir(rtl) { 0403 margin-left: -3px; 0404 } 0405 0406 &:dir(ltr) { 0407 margin-right: -3px; 0408 } 0409 } 0410 } 0411 } 0412 0413 %needs_attention { 0414 animation: needs_attention 150ms ease-in; 0415 $_dot_shadow: gtk("@theme_button_foreground_normal"); 0416 $_dot_shadow_r: 0.5; 0417 background-image: radial-gradient( 0418 circle, 0419 $_dot_color 0%, 0420 transparent 5px 0421 ); 0422 background-size: 6px 6px, 6px 6px; 0423 background-repeat: no-repeat; 0424 background-position: right 3px, right 4px; 0425 &:backdrop { 0426 background-size: 6px 6px, 0 0; 0427 } 0428 &:dir(rtl) { 0429 background-position: left 3px, left 4px; 0430 } 0431 } 0432 0433 box.linked:not(.vertical), 0434 box.inline-toolbar:not(.vertical), 0435 buttonbox.linked:not(.vertical) { 0436 &:not(.dialog-action-area) { // make an exception for dialog buttons to look more consistent in Qt environment 0437 entry, 0438 button { 0439 // if we have a box-shadow, buttons look raised while the 0440 // other elements aren't, which looks weird, and we can't really 0441 // fix it, so just drop the box shadow in this case. 0442 &:not(.combo) { 0443 box-shadow: none; 0444 } 0445 @include linked(); 0446 @include linked-side(); 0447 } 0448 } 0449 } 0450 0451 box.linked.vertical, 0452 box.inline-toolbar.vertical, 0453 buttonbox.linked.vertical { 0454 &:not(.dialog-action-area) { 0455 entry, 0456 button { 0457 &:not(.combo) { 0458 box-shadow: none; 0459 } 0460 @include linked-vertical(); 0461 @include linked-side-vertical(); 0462 } 0463 } 0464 } 0465 0466 stackswitcher.linked { 0467 button:not(.flat) { 0468 box-shadow: none; 0469 @include linked(); 0470 @include linked-side(); 0471 } 0472 } 0473 0474 %undecorated_button { 0475 border-color: transparent; 0476 background-color: transparent; 0477 background-image: none; 0478 box-shadow: none; 0479 text-shadow: none; 0480 -gtk-icon-shadow: none; 0481 }