PluginProbe
iCalendrier / trunk
iCalendrier vtrunk
1.77 1.78 1.79 1.80 1.81 1.82 1.83 2.0 trunk 1.5 1.51 1.52 1.53 1.54 1.6 1.61 1.62 1.7 1.71 1.72 1.73 1.74 1.75 1.76
icalendrier / css / icalendrier-modern.css

icalendrier-modern.css in iCalendrier trunk, at css/icalendrier-modern.css

200 lines 6.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*
2 * iCalendrier "modern" layout (type="modern"), ported from the v2 widget on https://icalendrier.fr/widget/.
3 * Everything is scoped under .c-ef__widget and starts with a reset so host themes do not leak in.
4 * Icons and the moon sprite are embedded so the layout needs this one file only.
5 */
6 .c-ef__widget,
7 .c-ef__widget *,
8 .c-ef__widget *::before,
9 .c-ef__widget *::after {
10 box-sizing: border-box;
11 }
12
13 .c-ef__widget {
14 display: block;
15 position: relative;
16 font-family: Tahoma, sans-serif;
17 font-size: 16px;
18 line-height: 1.5;
19 font-weight: normal;
20 font-style: normal;
21 text-align: left;
22 text-transform: none;
23 text-decoration: none;
24 letter-spacing: normal;
25 word-spacing: normal;
26 white-space: normal;
27 color: #111;
28 direction: ltr;
29 border: 0;
30 margin: 0;
31 padding: 0;
32 background: transparent;
33 max-width: none;
34 min-width: 0;
35 isolation: isolate;
36 }
37
38 .c-ef__widget a {
39 color: inherit;
40 text-decoration: none;
41 }
42
43 .c-ef__widget img {
44 display: block;
45 border: 0;
46 max-width: none;
47 height: auto;
48 }
49
50 .c-ef__widget div,
51 .c-ef__widget span,
52 .c-ef__widget a {
53 margin: 0;
54 padding: 0;
55 }
56
57 /* [class] outranks WordPress theme layout rules such as `.is-layout-constrained > *` (max-width, margins). */
58 .c-ef__widget[class] {
59 min-width: 300px;
60 max-width: 400px;
61 border-radius: 8px;
62 overflow: hidden;
63 box-shadow: 0 30px 32px 0 rgba(60, 53, 137, 0.06);
64 }
65
66 .c-ef__fulldate[class] {
67 display: flex;
68 flex-direction: column;
69 align-items: center;
70 justify-content: center;
71 padding: 16px 40px;
72 background-image: linear-gradient(65.68deg, #e53b47 0%, #f7963d 100%);
73 color: #fff;
74 white-space: nowrap;
75 position: relative;
76 }
77
78 .c-ef__fulldate > * {
79 font-family: Tahoma, sans-serif;
80 line-height: 150%;
81 font-weight: bold;
82 font-size: 20px;
83 }
84
85 .c-ef__fulldate > a {
86 font-size: 10px;
87 position: absolute;
88 bottom: 2px;
89 left: 2px;
90 color: #fbe0e2;
91 line-height: 1;
92 font-weight: normal;
93 }
94
95 .c-ef__day {
96 font-size: 36px;
97 }
98
99 .c-ef__metadata[class], .c-ef__metadata-icons[class] {
100 display: flex;
101 justify-content: center;
102 padding: 0 16px;
103 background: #fff;
104 }
105
106 .c-ef__metadata-icons[class] {
107 justify-content: space-around;
108 padding-top: 16px;
109 padding-bottom: 8px;
110 }
111
112 .c-ef__icon {
113 display: inline-block;
114 width: 24px;
115 height: 24px;
116 background-repeat: no-repeat;
117 background-size: 24px 24px;
118 }
119
120 .c-ef__icon--cal {
121 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAADFBMVEX///89P42am8TS0uTrvtX8AAAAs0lEQVR42t2VUQvEMAiDTfL///NBH7zbYpU+jdtXWKg1iBa6eCEir1tNBuDXAWBw8MggkQCYa+24swh7pnxnl8/1+ZIxb2UdraZhTWcNyy+nlKcXMlJfnBk0DJwAPNCgQ4NfOQGqww0Djxh42jRaw4MVCN2UbQUV2lZQoX0Pkkr9p3sAmDpX8HHOFVIHgzJBkWrnh6/GEPFnyw3o8qEihu4/UEcB3mne+46owBbGBrFC8TI+eHED9cGqvRQAAAAASUVORK5CYII=");
122 }
123
124 .c-ef__icon--moon {
125 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAADFBMVEX///+XmMHU1OU9P4xEb7OfAAAA+0lEQVR42t2TwRKEIAxDTfj/f97ZJVp2HgN6lQsVk4a05XjrkvyM0FrrgXUX335IfYOtmFtfnZlohw9OibQhQGLNkDrGp4m2dhKYL7nDt25VBdOCYWeXB0K8eJ6Zt9NZiQeEuJ93mP6vfywOrhoPUTfwZCgESLjDIVJf+ick+SkzlsFDSIJ7AM+xAwPORlBiuMicYajKP8pUh2N/qYB2ojBaEPhJBc6SC1EtgcRouBDIxuXgFxY2c2iOq+XsSj/wzpG0FvR5ogV8+qg9wD31NDuUXWDiIcvkbAk1NoloQzgEHhMuPCwgWVy1igEDhT3ZzB17siVJlnS8c30AwTkGLHxNml8AAAAASUVORK5CYII=");
126 }
127
128 .c-ef__icon--cheer {
129 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAADFBMVEX///+XmMI+P43T1OVJVra1AAABBElEQVR42t2UQZKEMAwDp6X//3mLjMsVhmiSvW2tDmDAHdkx8PrX4pf5kg4zja+jJJ8BSLyB41ouggEYsQV8EQOocKfKRbY2AAL7OrtJvKllCFw32JVS6kwbQM7b08QLJj4BY2QwUjSLUFGHM8ARgCVh95NlRUzd+27o2EL1iqesJWB9dPnG2vwEaCQDczV9zXoSSGBc7Fh2ErsxDACjoeQwhb2CDbGHjuSH5RK4b+INIE+aCVAA2te1vX0jT7oymfbQs6e/fXF8eJZVJHgOvwzCtINnApaeDsDT2915BrJreDuOAZsAKJQzZB8CVmtXZ2kN2OTJGYRE8M1aAhwD1L/hD+sHUasFNEVHGuQAAAAASUVORK5CYII=");
130 }
131
132 .c-ef__metadata[class] {
133 padding-bottom: 16px;
134 }
135
136 .c-ef__metadata > * {
137 font-family: Tahoma, sans-serif;
138 line-height: 150%;
139 font-size: 16px;
140 }
141
142 .c-ef__weeknumber, .c-ef__saint, .c-ef__moonphase {
143 flex: 1;
144 display: flex;
145 flex-direction: column;
146 align-items: center;
147 justify-content: center;
148 gap: 8px;
149 text-align: center;
150 padding: 0 8px !important;
151 border-left: 1px solid #e1e3ed;
152 }
153
154 .c-ef__weeknumber {
155 border-left: none;
156 }
157
158 .c-ef__moonphasechar {
159 display: inline-block;
160 width: 18px;
161 height: 18px;
162 vertical-align: middle;
163 margin-top: -2px;
164 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAAkBAMAAADbS/oRAAAAMFBMVEUAAAA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1STLyxAAAAEHRSTlMAd+7/iCJmzKozVZkRu0TdLxRlLgAAAu1JREFUeAHs0wFklHEcxvHnZXe3297WuzITVLwCJt2ebbfbai4hBGcDQGMAEKUYMQoIZkFAZwHAZQFgXBRBWSRBGoDYjCRJ97+353+/n6AE0Bf4fW6397md4X9/1nhOXm79s5QnyflTsCUnyJmJv5TqPYbqbS+dcS+chZMdLsLJ80ungfKZQwx6tDiBcs51L0d0Mj+xRic7LKpvOqlj5I6TWcBLE1aSmV2EPv+AelkDgIfke8mrIEf0kpBWHlMteMmQOJkFnNQBI+k7Ldtu6o/4NUzsP69t5YhOwmIjYxyUOZkCtiQaFCUnlwAj1zv4VekuivazYmpO1qJokJG9cEs0TyQprtKhkTBIskXyAJBE7/diA6HqEoqu6LNW56BBRkoMSUo5TW0r9fBgiQZJ9H5JpYNYeguh5VUMPvNCXzINspIwJDlG2zknLWBEokGFDId7ExjIVZiWPwLAW50VktMtAB+gQVYqDEnWaFt0kgF4INGgKNPhkJQaMCUHAMrfdQ6xV6cnU3GQlW44JHpRtSR6fSWKBknmwyEZ7cD2BcDxVV3l4t0S/T7Jk3BIxuhrWrkBYDiKBklq4ZB0N2GbBLANVWWvGeDTrhskORkOyRB9ZwvRAYxE0SDJXDgkk3B1W8AzqJTFN3wNbpBkJxySCn0NKxcBpFE0SLIUDsl9uCqrwDfE8uJ/YN0PkuyRjNKlbyGKFqxLNEjSABDlNlyjTaT6cS1opw1zGrlJUoIV+mpRtOBNX3RKdErOw5VsoHoBRXpkJtGgIDol2P9tkERfytO+aIFEp6QBV/IaY2bQz10GW8aH4SC+we+gQRdlgy5R0zLba2Fk+18Y2f4Xeranb8G4G6Ng3I1WMNK56liEUXUsQqs6Bl3lOuiaH2Q30HiJaaCVkN5AG2xNWAoa+ZPxNvIvgCk+WMEgTGwjf7B1gwZpR5GBB6MrzYPRleYhpSv9i8yuNNUHG0IoH2ygfDhmI8pwjDywuJSjYDiGMBgFANAmaH32mB1ZAAAAAElFTkSuQmCC");
165 background-size: 144px auto;
166 background-position: 0 0;
167 }
168
169 .c-ef__moonphasechar--0 {
170 background-position: 0px 0;
171 }
172
173 .c-ef__moonphasechar--1 {
174 background-position: -18px 0;
175 }
176
177 .c-ef__moonphasechar--2 {
178 background-position: -36px 0;
179 }
180
181 .c-ef__moonphasechar--3 {
182 background-position: -54px 0;
183 }
184
185 .c-ef__moonphasechar--4 {
186 background-position: -72px 0;
187 }
188
189 .c-ef__moonphasechar--5 {
190 background-position: -90px 0;
191 }
192
193 .c-ef__moonphasechar--6 {
194 background-position: -108px 0;
195 }
196
197 .c-ef__moonphasechar--7 {
198 background-position: -126px 0;
199 }
200