res/styles/partials/_panel.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

//
// Styles for the panel and its various supported items.
//

window.panel {
  background: $foobar-color-background-primary;
  border: $foobar-dim-border-light solid $foobar-color-border;
  border-radius: $foobar-dim-radius-large;

  & panel-item.workspaces {
    & row,
    & row:hover,
    & row:active,
    & row:focus ,
    & row:selected {
      background: transparent;
    }

    & button {
      border-radius: 100%;
      outline: $foobar-dim-border-strong solid $foobar-color-accent-primary;
      outline-offset: 0;
      border: $foobar-dim-spacing-small solid $foobar-color-background-primary; // Cut-out effect
      margin: $foobar-dim-border-strong; // To reverse the outline
      padding: 0;
      background: transparent;
      transition: background-color 0.1s;

      &:hover {
        background: $foobar-color-accent-tertiary;
      }

      &.visible {
        background: $foobar-color-accent-secondary;
      }

      &.active {
        background: $foobar-color-accent-primary;
      }
    }

    @if variable-exists(foobar-color-alternate-primary) {
      & row:nth-child(even) button:not(.special):not(.urgent) {
        outline-color: $foobar-color-alternate-primary;

        &:hover {
          background: $foobar-color-alternate-tertiary;
        }

        &.visible {
          background: $foobar-color-alternate-secondary;
        }

        &.active {
          background: $foobar-color-alternate-primary;
        }
      }
    }

    & button.special {
      outline-color: $foobar-color-special-primary;

      &:hover {
        background: $foobar-color-special-tertiary;
      }

      &.visible {
        background: $foobar-color-special-secondary;
      }

      &.active {
        background: $foobar-color-special-primary;
      }
    }

    & button.urgent {
      outline-color: $foobar-color-urgent-primary;

      &:hover {
        background: $foobar-color-urgent-tertiary;
      }

      &.visible {
        background: $foobar-color-urgent-secondary;
      }

      &.active {
        background: $foobar-color-urgent-primary;
      }
    }
  }

  & panel-item.clock {
    & button {
      min-width: 24px;
      min-height: 24px;
    }

    & label {
      font-size: $foobar-dim-font-large;
      font-weight: bold;
    }
  }

  & panel-item.icon {
    & button {
      -gtk-icon-size: 20px;
      min-width: 24px;
      min-height: 24px;
    }
  }

  & panel-item.status {
    & button {
      min-width: 24px;
      min-height: 24px;
    }

    & image {
      -gtk-icon-size: 20px;
    }

    & label {
      margin-left: $foobar-dim-spacing-small;
      font-weight: normal;
      font-size: $foobar-dim-font-small;
    }
  }
}