git ssb

0+

mixmix / marama



Tree: fd8e4bbb6424efcc4479ad97fab770566256b4c4

Files: fd8e4bbb6424efcc4479ad97fab770566256b4c4 / index.mcss

1552 bytesRaw
1Marama {
2 --day-radius: 6px
3 --day-border-radius: 2px
4 --day-gap: 1px
5
6 width: calc(7 * 2 * var(--day-radius) + 6 * var(--day-gap))
7 /* max of 6 weeks + day labels, with gaps between each */
8
9 div.month-name {
10 font-size: 20px
11 font-weight: bold
12 text-align: left
13 cursor: pointer
14 margin-bottom: 5px
15 }
16
17 div.days {
18 grid-gap: var(--day-gap)
19 justify-content: start
20 align-content: start
21
22 div.MaramaDay {}
23 }
24}
25
26MaramaDay {
27 width: calc(2 * var(--day-radius))
28 height: calc(2 * var(--day-radius))
29 cursor: pointer
30
31 border-radius: var(--day-border-radius)
32
33 display: flex
34 justify-content: center
35 align-items: center
36
37 -past {
38 background: hsl(0, 0%, 20%)
39 }
40
41 -future {
42 background: hsl(0, 0%, 80%)
43 }
44
45 -range {
46 background: deeppink
47
48 -future {
49 background: deepskyblue
50 }
51 }
52
53 -events {
54 /* border-radius: var(--day-radius) */
55 /* background: hsla(277, 57%, 45%, 1) */
56
57 div.dot {
58 background: none
59 width: 4px
60 height: 4px
61 border: 1px solid #fff
62 border-radius: 8px
63 }
64
65 -past {
66 }
67
68 -attending {
69 div.dot {
70 background: #fff
71 width: 6px
72 height: 6px
73 border: none
74 }
75 }
76 }
77}
78
79MaramaDayName {
80 color: hsl(0, 0%, 40%)
81 font-family: arial
82 font-size: calc(2 * var(--day-radius) - 3px)
83 /* line-height: calc(2 * var(--day-radius) - 2px) */
84
85 width: calc(2 * var(--day-radius))
86 height: calc(2 * var(--day-radius))
87
88 display: flex
89 align-items: center
90 justify-content: center
91}
92

Built with git-ssb-web