newtab

  1/* ---------------------------------------------------------------------------*/
  2/* 00 Global                                                                  */
  3/* ---------------------------------------------------------------------------*/
  4
  5body {
  6  background-image: url(background.webp);
  7  background-repeat: no-repeat;
  8  background-size: cover;
  9  background-position: center;
 10  background-attachment: fixed;
 11  background-color: #000000;
 12  color: #ffffff;
 13  display: flex;
 14  flex-direction: column;
 15  align-items: center;
 16  justify-content: center;
 17  height: 100vh;
 18  margin: 0;
 19}
 20
 21#overlay {
 22  background-color: rgba(0, 0, 0, 0.8);
 23  position: fixed;
 24  top: 0;
 25  left: 0;
 26  width: 100%;
 27  height: 100%;
 28  z-index: -1;
 29}
 30
 31/* ---------------------------------------------------------------------------*/
 32/* 01 Time                                                                    */
 33/* ---------------------------------------------------------------------------*/
 34
 35#currentTime {
 36  font-size: 20em;
 37  font-weight: lighter;
 38  font-variant-numeric: tabular-nums;
 39}
 40
 41/* ---------------------------------------------------------------------------*/
 42/* 02 Date                                                                    */
 43/* ---------------------------------------------------------------------------*/
 44
 45#currentDate {
 46  font-size: 5rem;
 47  font-weight: lighter;
 48  color: #b8b8b8;
 49}
 50
 51/* ---------------------------------------------------------------------------*/
 52/* 03 Weather                                                                 */
 53/* ---------------------------------------------------------------------------*/
 54
 55#currentWeather {
 56  position: fixed;
 57  left: 15px;
 58  bottom: 15px;
 59  display: flex;
 60  align-items: center;
 61  font-size: 2em;
 62}
 63
 64#currentWeather .temp {
 65  font-size: 3em;
 66  font-weight: lighter;
 67}
 68
 69#currentWeather .after-temp {
 70  font-size: 0.4em;
 71  position: relative;
 72  left: -22px;
 73  color: #b8b8b8;
 74}
 75
 76/* ---------------------------------------------------------------------------*/
 77/* 04 Posts                                                                   */
 78/* ---------------------------------------------------------------------------*/
 79
 80#currentPosts {
 81  position: fixed;
 82  bottom: 15px;
 83  right: 15px;
 84  color: rgb(255, 255, 255);
 85}
 86
 87#currentPosts > img {
 88  width: 16px;
 89  height: 16px;
 90  position: absolute;
 91  top: 0.25rem;
 92  right: 0.5rem;
 93}
 94
 95#currentPosts > ul {
 96  padding: 0;
 97  margin: 0;
 98  list-style-type: none;
 99}
100
101#currentPosts > ul > li {
102  margin-bottom: 0.5rem;
103  background-color: rgba(255, 255, 255, 0.1);
104  border-radius: 0.25rem;
105  padding: 0.25rem 0.5rem;
106  max-width: 250px;
107}
108
109#currentPosts > ul > li:hover {
110  background-color: rgba(255, 255, 255, 0.2);
111}
112
113#currentPosts > ul > li:last-child {
114  margin-bottom: 0;
115}
116
117#currentPosts a {
118  display: block;
119  color: white;
120  text-decoration: none;
121  width: 100%;
122  font-size: 1.2em;
123  position: relative;
124}
125
126#currentPosts a > span {
127  font-size: 0.8em;
128  color: #b8b8b8;
129  margin-right: 0.5rem;
130}
131
132/* ---------------------------------------------------------------------------*/
133/* 05 Bookmarks                                                               */
134/* ---------------------------------------------------------------------------*/
135
136#currentBookmarks {
137  background-color: rgba(0, 0, 0, 0.8);
138  position: fixed;
139  top: 0;
140  left: 0;
141  right: 0;
142  color: rgb(255, 255, 255);
143  padding: 0.5rem;
144  display: flex;
145  justify-content: space-between;
146}
147
148#currentBookmarks > ul {
149  display: flex;
150  align-items: center;
151  height: 100%;
152  list-style: none;
153  margin: 0;
154  padding: 0;
155  gap: 0.5rem;
156}
157
158#currentBookmarks > ul > li {
159  display: flex;
160  align-items: center;
161  justify-content: center;
162  padding: 0.25rem 0.5rem;
163  border-radius: 0.25rem;
164  background-color: rgba(255, 255, 255, 0.1);
165  cursor: pointer;
166  position: relative;
167  white-space: nowrap;
168}
169
170#currentBookmarks > ul > li:hover {
171  background-color: rgba(255, 255, 255, 0.2);
172}
173
174#currentBookmarks > ul:last-child > li {
175  background-color: rgba(10, 160, 60, 0.4);
176}
177
178#currentBookmarks > ul:last-child > li:hover {
179  background-color: rgba(10, 160, 60, 0.6);
180}
181
182#currentBookmarks > ul > li > a {
183  color: white;
184  text-decoration: none;
185  display: flex;
186  align-items: center;
187  gap: 5px;
188}
189
190#currentBookmarks > ul > li > a > span {
191  display: flex;
192  align-items: center;
193}
194
195#currentBookmarks > ul > li > ul {
196  display: none;
197  position: absolute;
198  top: 100%;
199  left: 0;
200  background-color: rgba(255, 255, 255, 0.1);
201  padding: 0.5rem 0;
202  border-radius: 0.25rem;
203  z-index: 1;
204}
205
206#currentBookmarks > ul > li:hover > ul {
207  display: block;
208  list-style: none;
209  margin: 0;
210}
211
212#currentBookmarks > ul > li > ul > li {
213  padding: 0.25rem 0.5rem;
214  white-space: nowrap;
215}
216
217#currentBookmarks > ul > li > ul > li:hover {
218  background-color: rgba(255, 255, 255, 0.2);
219}
220
221#currentBookmarks > ul > li > ul > li > a {
222  color: white;
223  text-decoration: none;
224  text-decoration: none;
225  display: flex;
226  align-items: center;
227  gap: 5px;
228}