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