TinyGladeTOD/style.css at main · InvitedToHell/TinyGladeTOD · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
body,
html {
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.content {
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(30px);
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-size: xx-large;
  font-family: Patrick Hand SC;
  color: white;
  text-shadow: 0 2px 3px black, 0 0 0.25em rgba(0, 0, 0, 0.5);
  width: 80%; /* Set a fixed width */
  max-width: 600px; /* Optional: Set a maximum width */
  margin: 0 auto; /* Center the box horizontally */
  height: 50%;
  max-height: 150px;
  align-content: center;
}

#language-selector {
  margin: 10px;
}

#langs-output {
  font-size: 1.2em;
}

.middle {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.topright {
  display: flex;
  align-items: center;
  padding: 2px;
  position: absolute;
  top: 1px;
  right: 1px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(100px);
  border-bottom-left-radius: 10px;
  font-family: Noto Sans;
  color: white;
}

.topleft {
  display: flex;
  align-items: center;
  padding: 2px;
  position: absolute;
  top: 1px;
  left: 1px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(100px);
  border-bottom-right-radius: 10px;
  font-family: Noto Sans;
  color: white;
}

.topleft a {
  text-decoration: none;
  margin: 10px;
  color: white;
}
/* patrick-hand-sc-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Patrick Hand SC";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/patrick-hand-sc-v15-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* noto-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/noto-sans-v36-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Loading Screen Styles */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#progress-bar-container {
  width: 80%;
  background: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
}

#progress-bar {
  width: 0;
  height: 20px;
  background: #b49668;
}

#progress-text {
  margin-top: 10px;
  font-size: 1.2em;
  font-family: "Patrick Hand SC", cursive; /* Change font to Patrick Hand SC */
}

#countdown-timer {
  font-size: 1em;
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Prevent overflow */
  text-overflow: ellipsis; /* Add ellipsis if text overflows */
  margin-top: 10px; /* Add some space above the timer */
}