Skip to content

Commit 00a8009

Browse files
Add files via upload
1 parent 0414110 commit 00a8009

1 file changed

Lines changed: 198 additions & 0 deletions

File tree

newtab/style.css

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
/* === Base Reset === */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background-color: #0f1117;
10+
color: #e0e0e0;
11+
font-family: 'Courier New', Courier, monospace;
12+
line-height: 1.6;
13+
padding-top: 150px;
14+
transition: background 0.3s ease, color 0.3s ease;
15+
}
16+
17+
/* === Links === */
18+
a {
19+
color: #00ffcc;
20+
text-decoration: none;
21+
transition: text-shadow 0.3s ease;
22+
}
23+
24+
a:hover {
25+
text-decoration: underline;
26+
text-shadow: 0 0 5px #00ffcc;
27+
}
28+
29+
/* === Header === */
30+
header {
31+
position: fixed;
32+
top: 20px;
33+
left: 50%;
34+
transform: translateX(-50%);
35+
background-color: rgba(26, 28, 35, 0.7); /* semi-transparent */
36+
backdrop-filter: blur(12px);
37+
border: 1px solid #00ffc8;
38+
border-radius: 12px;
39+
padding: 16px 32px;
40+
width: max-content;
41+
z-index: 1000;
42+
box-shadow: 0 8px 24px rgba(0, 255, 200, 0.15);
43+
text-align: center;
44+
}
45+
46+
header1 {
47+
position: relative;
48+
width: fit-content;
49+
max-width: 90%;
50+
background-color: rgba(26, 28, 35, 0.7);
51+
box-shadow: 0 8px 24px rgba(0, 255, 200, 0.15);
52+
text-align: center;
53+
z-index: 1;
54+
}
55+
56+
header h1 {
57+
margin: 0;
58+
font-size: 2rem;
59+
color: #00ffc8;
60+
text-shadow: 0 0 8px #00ffc855;
61+
}
62+
63+
header1 h1 {
64+
margin: 0;
65+
font-size: 2rem;
66+
color: #00ffc8;
67+
text-shadow: 0 0 8px #00ffc855;
68+
}
69+
70+
/* === Navigation === */
71+
nav {
72+
margin-top: 12px;
73+
}
74+
75+
nav a {
76+
margin: 0 10px;
77+
font-weight: bold;
78+
padding: 6px 12px;
79+
border-radius: 6px;
80+
transition: background 0.3s ease;
81+
color: #e0e0e0;
82+
}
83+
84+
nav a:hover {
85+
background-color: #00ffc822;
86+
}
87+
88+
89+
/* === Main Content === */
90+
main {
91+
padding: 40px 20px;
92+
max-width: 800px;
93+
margin: auto;
94+
}
95+
96+
/* === Sections === */
97+
section {
98+
margin-bottom: 40px;
99+
}
100+
101+
section h2 {
102+
color: #00ffcc;
103+
border-bottom: 1px solid #00ffcc;
104+
padding-bottom: 5px;
105+
margin-bottom: 10px;
106+
text-shadow: 0 0 6px #00ffcc55;
107+
}
108+
109+
/* === Footer === */
110+
footer {
111+
background-color: #1a1c23;
112+
text-align: center;
113+
padding: 20px;
114+
border-top: 2px solid #00ffcc;
115+
font-size: 0.9em;
116+
color: #888;
117+
box-shadow: 0 -4px 10px rgba(0, 255, 204, 0.05);
118+
}
119+
120+
/* === Code Block === */
121+
pre {
122+
background-color: #1e1e1e;
123+
color: #00ffcc;
124+
padding: 15px;
125+
border-radius: 5px;
126+
overflow-x: auto;
127+
box-shadow: 0 0 10px #00ffcc33;
128+
font-size: 0.95em;
129+
}
130+
131+
/* === Buttons === */
132+
button {
133+
background-color: #00ffcc;
134+
color: #0f1117;
135+
border: none;
136+
padding: 10px 20px;
137+
font-family: 'Courier New', Courier, monospace;
138+
font-weight: bold;
139+
border-radius: 5px;
140+
cursor: pointer;
141+
box-shadow: 0 0 10px #00ffcc55;
142+
transition: background-color 0.3s ease, transform 0.2s ease;
143+
}
144+
145+
button:hover {
146+
background-color: #00ddb3; /* slightly darker teal on hover */
147+
transform: scale(1.05); /* subtle zoom effect */
148+
}
149+
150+
button:active {
151+
transform: translateY(1px);
152+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
153+
}
154+
155+
/* === Search Bar === */
156+
.search-form {
157+
display: flex;
158+
justify-content: center;
159+
gap: 10px;
160+
margin-bottom: 30px;
161+
}
162+
163+
.search-form input[type="text"] {
164+
padding: 10px 15px;
165+
border: 2px solid #00ffcc;
166+
border-radius: 5px;
167+
background-color: #1e1e1e;
168+
color: #e0e0e0;
169+
font-family: 'Courier New', Courier, monospace;
170+
font-size: 1em;
171+
box-shadow: 0 0 10px #00ffcc33;
172+
width: 60%;
173+
transition: border-color 0.3s ease, box-shadow 0.3s ease;
174+
}
175+
176+
.search-form input[type="text"]:focus {
177+
outline: none;
178+
border-color: #00ddb3;
179+
box-shadow: 0 0 12px #00ddb355;
180+
}
181+
182+
183+
/* === Responsive Design === */
184+
@media (max-width: 600px) {
185+
main {
186+
padding: 20px 10px;
187+
}
188+
189+
nav a {
190+
display: block;
191+
margin: 10px 0;
192+
text-align: center;
193+
}
194+
195+
header h1 {
196+
font-size: 2em;
197+
}
198+
}

0 commit comments

Comments
 (0)