_windows.scss 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159
  1. /**********************
  2. * Window Decorations *
  3. *********************/
  4. window {
  5. // lamefun trick to get rounded borders regardless of CSD use
  6. border-width: 0px;
  7. // this needs to be transparent
  8. // see bug #722563
  9. $_wm_border: if($variant=='light', transparentize(black, 0.77), transparentize(black, 0.25));
  10. $_wm_border_backdrop: if($variant=='light', transparentize(black, 0.82), transparentize(black, 0.25));
  11. $_window_radius: 4px;
  12. $_menu_radius: 7px;
  13. &.csd {
  14. box-shadow: 0 3px 9px 1px transparentize(black, 0.5),
  15. 0 0 0 1px $_wm_border; //doing borders with box-shadow
  16. margin: 0px;
  17. border-radius: $_window_radius $_window_radius 0 0;
  18. &:backdrop {
  19. // the transparent shadow here is to enforce that the shadow extents don't
  20. // change when we go to backdrop, to prevent jumping windows.
  21. // The biggest shadow should be in the same order then in the active state
  22. // or the jumping will happen during the transition.
  23. box-shadow: 0 3px 9px 1px transparent,
  24. 0 2px 6px 2px transparentize(black, 0.8),
  25. 0 0 0 1px $_wm_border_backdrop;
  26. transition: $backdrop_transition;
  27. }
  28. &.popup {
  29. border-radius: $_menu_radius;
  30. box-shadow: 0 1px 2px transparentize(black, 0.8),
  31. 0 0 0 1px transparentize($_wm_border, 0.1);
  32. }
  33. &.dialog.message {
  34. border-radius: $_window_radius;
  35. box-shadow: 0 1px 2px transparentize(black, 0.8),
  36. 0 0 0 1px transparentize($_wm_border, 0.1);
  37. }
  38. }
  39. &.solid-csd {
  40. margin: 0;
  41. padding: 4px;
  42. border: solid 1px $borders_color;
  43. border-radius: 0;
  44. box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $headerbar_color, inset 0 1px transparentize($fg_color, 0.93);
  45. &:backdrop { box-shadow: inset 0 0 0 4px $borders_color, inset 0 0 0 3px $backdrop_bg_color, inset 0 1px transparentize($fg_color, 0.93); }
  46. }
  47. &.maximized,
  48. &.fullscreen { border-radius: 0; box-shadow: none; }
  49. &.tiled,
  50. &.tiled-top,
  51. &.tiled-left,
  52. &.tiled-right,
  53. &.tiled-bottom {
  54. border-radius: 0;
  55. box-shadow: 0 0 0 1px $_wm_border_backdrop,
  56. 0 0 0 20px transparent; //transparent control workaround -- #3670
  57. }
  58. &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop,
  59. 0 0 0 20px transparent; // #3670
  60. }
  61. &.popup { box-shadow: none; }
  62. // server-side decorations as used by mutter
  63. &.ssd { box-shadow: 0 0 0 1px $_wm_border; } //just doing borders, wm draws actual shadows
  64. }
  65. // Window Close button
  66. windowcontrols {
  67. button {
  68. &.close, &.maximize, &.minimize {
  69. min-width: 20px;
  70. min-height: 20px;
  71. margin: 0;
  72. padding: 0 1px;
  73. background-position: center;
  74. background-repeat: no-repeat;
  75. background-size: 16px 16px;
  76. &, &:hover, &:focus, &:active, &:backdrop, &:backdrop:hover {
  77. background-color: transparent;
  78. border: none;
  79. box-shadow: none;
  80. color: transparent;
  81. }
  82. }
  83. &.close {
  84. background-image: -gtk-scaled(url("../assets/close.png"),url("../assets/close@2.png"));
  85. &:hover,&:active {
  86. background-image: -gtk-scaled(url("../assets/close_prelight.png"),url("../assets/close_prelight@2.png"));
  87. }
  88. }
  89. &.maximize {
  90. background-image: -gtk-scaled(url("../assets/maximize.png"),url("../assets/maximize@2.png"));
  91. &:hover,&:active {
  92. background-image: -gtk-scaled(url("../assets/maximize_prelight.png"),url("../assets/maximize_prelight@2.png"));
  93. }
  94. }
  95. &.minimize {
  96. background-image: -gtk-scaled(url("../assets/min.png"),url("../assets/min@2.png"));
  97. &:hover,&:active {
  98. background-image: -gtk-scaled(url("../assets/min_prelight.png"),url("../assets/min_prelight@2.png"));
  99. }
  100. }
  101. .selection-mode & {
  102. @extend %button.flat.suggested-action;
  103. @extend %nobg_selected_items;
  104. }
  105. &:backdrop {
  106. -gtk-icon-shadow: none;
  107. background-image: -gtk-scaled(url("../assets/close_unfocused.png"),url("../assets/close_unfocused@2.png"));
  108. }
  109. }
  110. }
  111. headerbar.selection-mode button.titlebutton,
  112. .titlebar.selection-mode button.titlebutton {
  113. @include _button_text_shadow(white, $selected_bg_color);
  114. &:backdrop { -gtk-icon-shadow: none; }
  115. }
  116. // catch all extend :)
  117. %selected_items {
  118. background-color: $selected_bg_color;
  119. @at-root %nobg_selected_items, & {
  120. color: $selected_fg_color;
  121. font-weight: normal;
  122. @if $variant == 'light' { outline-color: transparentize($selected_fg_color, 0.7); }
  123. &:disabled { color: mix($selected_fg_color, $selected_bg_color, 50%); }
  124. &:backdrop {
  125. color: $backdrop_selected_fg_color;
  126. &:disabled { color: mix($backdrop_selected_fg_color, $selected_bg_color, 30%); }
  127. }
  128. }
  129. }
  130. .monospace { font-family: Monospace; }