1@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
2
3html {
4 --main-bg-color: white;
5 --text-color:black;
6 --text-secondary-color:#555;
7 --border-color: rgba(0, 0, 0, 0.33);
8 --semi-bg-color: rgba(0, 0, 0, 0.03);
9 background: var(--main-bg-color);
10}
11
12body {
13 margin: 0;
14 background: url(./assets/noise-strong.png);
15 font-family: 'Ubuntu', sans-serif;
16 color:var(--text-color);
17}
18
19#toast-notification {
20 position: absolute;
21 top: -55.5px;
22 left: 50%;
23 -webkit-transform: translateX(-50%);
24 transform: translateX(-50%);
25 transition: top 0.5s ease, color 1s ease, background 1s ease;
26 background: var(--semi-bg-color);
27 padding: 12px 64px 12px 64px;
28 border-radius: 8px;
29 box-shadow: 0px 0px 10px var(--border-color);
30}
31
32#header {
33 display: flex;
34 justify-content: flex-end;
35 background: var(--semi-bg-color);
36}
37
38#header-icon-image {
39 height: 16px;
40}
41
42#header-icon{
43 padding: 12px;
44}
45
46#header-title {
47 width: 100%;
48 text-align: left;
49 padding: 12px;
50}
51
52#schedule-file-link {
53 color: var(--text-color);
54}
55
56.week-control-button {
57 padding: 10px 12px 10px 12px;
58 margin: 2px 0px 2px 0px;
59 border: solid 1px var(--border-color);
60}
61
62.night-mode-button {
63 padding: 10px 12px 10px 12px;
64 margin: 2px 20px 2px 0px;
65 border: solid 1px var(--border-color);
66 border-radius: 8px;
67}
68
69#week-back-button {
70 border-radius: 8px 0px 0px 8px;
71}
72
73#week-upload-button {
74 border-radius: 0px 8px 8px 0px;
75}
76
77#week-count {
78 transition: text-decoration 150ms ease;
79}
80
81#schedule-table {
82 background: var(--semi-bg-color);
83 margin: 32px;
84 border-radius: 8px;
85}
86
87#schedule-weekday-name-list {
88 display: flex;
89}
90
91.schedule-weekday-name {
92 width: 100%;
93 text-align: center;
94 margin: 4px;
95 border-radius: 8px;
96 transition: text-decoration 150ms ease;
97}
98
99#schedule-days {
100 display: flex;
101}
102
103.schedule-day {
104 position: relative;
105 width: 100%;
106 text-align: center;
107 background: var(--semi-bg-color);
108 margin: 4px;
109 border-radius: 8px;
110 animation: loadIn 150ms ease, paddingLoadIn 500ms ease;
111}
112
113.schedule-event {
114 text-align: center;
115 border: dashed 1px var(--border-color);
116 border-radius: 8px;
117 margin: 10px;
118 animation: loadIn 150ms ease;
119}
120
121.schedule-event-destroy {
122 opacity: 0;
123 animation: loadOut 150ms ease;
124}
125
126.schedule-event-name {
127 padding: 4px;
128}
129
130.schedule-event-time {
131 padding: 4px;
132}
133
134
135#dates-list {
136 background: var(--semi-bg-color);
137 margin: 32px;
138 border-radius: 8px;
139}
140
141#dates-list-header {
142 display: flex;
143}
144
145#dates-list-header-title {
146 padding: 12px;
147}
148
149#dates-upload-button {
150 border-radius: 8px;
151}
152.dates-control-button {
153 padding: 10px 12px 10px 12px;
154 margin: 2px 2px 2px auto;
155 border: solid 1px var(--border-color);
156}
157#dates-list-list{
158 position: relative;
159 background: var(--semi-bg-color);
160 margin: 4px;
161 padding: 0.01px;
162 border-radius: 8px;
163}
164.dates-date{
165 padding: 12px;
166 border: dashed 1px var(--border-color);
167 border-radius: 8px;
168 display:flex;
169 margin:10px;
170 animation: loadIn 150ms ease;
171}
172.dates-date-date{
173 margin-left: auto;
174}
175#dates-seperator{
176 width: 98%;
177 height: 2px;
178 margin: 0px auto 25px auto;
179 border-top: dashed 2px var(--border-color);
180 animation: loadIn 150ms ease;
181}
182.dates-date-description{
183 margin-left: 50px;
184 color: var(--text-secondary-color);
185}
186
187@keyframes loadIn {
188 0% {
189 opacity: 0;
190 transform: translateY(10px);
191 }
192
193 100% {
194 opacity: 1;
195 transform: translateY(0px);
196 }
197
198}
199
200@keyframes loadOut {
201 0% {
202 opacity: 1;
203 transform: translateY(0px);
204 }
205
206 100% {
207 opacity: 0;
208 transform: translateY(10px);
209 }
210
211
212}
213
214@keyframes paddingLoadIn {
215 0%{
216 padding: 16px 32px 16px 32px;
217 }
218 100%{
219 padding: 0px;
220 }
221}