git ssb

1
ScryNew {
2
  --br: 5px
3
  --boundary: 1rem
4
  --feature-color: hsla(295, 67%, 60%, 1)
5
6
  font-family: sans, arial
7
8
  display: grid
9
  grid-template-columns: auto 1fr
10
  grid-template-rows: auto auto
11
  grid-column-gap: 1rem
12
  grid-row-gap: 0
13
14
  div.cal-picker {
15
    background: #fff
16
    padding: var(--boundary) 3rem
17
    border-radius: var(--br)
18
19
    div.month-picker {
20
      color: #444
21
      font-family: sans
22
      font-size: 1.15rem
23
24
      display: flex
25
      justify-content: space-between
26
      align-items: center
27
28
      margin-bottom: 1rem
29
30
      button {
31
        color: var(--feature-color)
32
        font-size: .8rem
33
34
        background: none
35
        border: none
36
        cursor: pointer
37
        font-size: 1.5rem
38
39
        :focus { outline: none }
40
      }
41
    }
42
43
    div.Marama {}
44
  }
45
46
  div.time-picker {
47
    grid-row: 1 / 3
48
    grid-column: 2
49
50
    max-width: 350px
51
    color: #fff
52
    background: hsla(0, 0%, 100%, .3)
53
    border-radius: var(--br)
54
55
    display: grid
56
    grid-template-rows: auto 1fr auto
57
    align-items: start
58
59
    label {
60
      font-size: .7rem
61
      letter-spacing: 1px
62
      font-weight: 600
63
      text-transform: uppercase
64
65
      margin: var(--boundary) var(--boundary) calc(var(--boundary) / 2) var(--boundary)
66
    }
67
68
    div.picker {
69
      color: #666
70
      background: #fff
71
      border-radius: var(--br)
72
      margin: 0 var(--boundary) var(--boundary)
73
74
      div.time-entry {
75
        padding: calc(var(--boundary) / 2)
76
        border-bottom: 1px solid hsla(0, 0%, 0%, .2)
77
78
        display: flex
79
        justify-content: space-between
80
81
        div.close { cursor: pointer }
82
      }
83
84
      div.new-time-entry {
85
        font-size: .9rem
86
        position: relative
87
88
        div.dropdown {
89
          position: absolute
90
          left: calc(var(--boundary) / 2)
91
          right: calc(var(--boundary) / 2)
92
          top: calc(var(--boundary) / 2)
93
94
          background: #fff
95
          max-height: 20vh
96
          overflow-y: scroll
97
          padding: calc(var(--boundary) / 2)
98
99
          div {
100
            padding: 2px
101
            :hover {
102
              background: var(--feature-color)
103
              color: #fff
104
            }
105
          }
106
        }
107
108
        div.add {
109
          color: var(--feature-color)
110
          padding: calc(var(--boundary) / 2)
111
          cursor: pointer
112
113
          display: flex
114
          justify-content: center
115
        }
116
      }
117
    }
118
119
    div.timezone {
120
      padding: var(--boundary)
121
      border-top: hsla(0, 0%, 100%, .5) 1px dashed
122
123
      label {}
124
125
      div.zone {
126
        margin-top: .3rem
127
128
        font-weight: 600
129
        display: flex
130
        align-items: center
131
132
        span {
133
          margin-left: .5rem
134
          font-weight: initial
135
          font-size: .8rem
136
        }
137
      }
138
    }
139
  }
140
141
  div.time-picker-pristine {
142
    grid-row: 1 / 3
143
    grid-column: 2
144
145
    color: #fff
146
    max-width: 350px
147
148
    display: grid
149
    grid-gap: .5rem
150
    justify-content: center
151
    justify-items: center
152
    align-content: center
153
154
    label {
155
      font-size: .8rem
156
      letter-spacing: 1px
157
      font-weight: 600
158
      text-transform: uppercase
159
    }
160
    div.instruction {
161
    }
162
  }
163
}
164
165
/* over-rides or extension to marama */
166
167
Marama {
168
  grid-template-rows: repeat(7, var(--tile-width)) !important
169
}
170
171
MaramaDayLabel {
172
  font-size: 1rem
173
}
174
175
MaramaDayTile {
176
  border-radius: 4rem
177
  border: 1px solid hsla(0, 0%, 100%, 0)
178
179
  -past {
180
    cursor: not-allowed
181
    background: none
182
    color: hsl(0, 0%, 60%)
183
184
    -events {
185
      border: 1px solid hsl(0, 0%, 40%)
186
187
      -attending {
188
        background: hsl(0, 0%, 40%)
189
        color: #fff
190
      }
191
    }
192
  }
193
194
  -future {
195
    background: none
196
    --color: hsla(320, 100%, 60%, 1)
197
    /* deepskyblue */
198
199
    -events {
200
      border: 1px solid var(--color)
201
      color: var(--color)
202
203
      -attending {
204
        background: var(--color)
205
        color: #fff
206
      }
207
    }
208
  }
209
210
  -range {
211
    background: deeppink
212
213
    -future {
214
      background: deepskyblue
215
    }
216
  }
217
}
218
219