Skip to content

Commit 7b6c4d1

Browse files
author
Funasitien DreamCloud
committed
🎨 Add new class
1 parent b52962d commit 7b6c4d1

File tree

3 files changed

+388
-135
lines changed

3 files changed

+388
-135
lines changed

‎public/bs-theme.css

+222-112
Original file line numberDiff line numberDiff line change
@@ -1,128 +1,238 @@
11
:root {
2-
--white-light:#e6e3e6;
3-
--white-tone:#ced2d6;
4-
--white-dark:#5a595a;
5-
6-
--outline: #211c21;
7-
8-
--black-light:#5a595a;
9-
--black-tone:#4a494a;
10-
--black-dark:#2e2e2e;
2+
--white-light: #e6e3e6;
3+
--white-tone: #ced2d6;
4+
--white-dark: #5a595a;
5+
--black-light: #5a595a;
6+
--black-tone: #4a494a;
7+
--black-dark: #2e2e2e;
8+
9+
--outline: #211c21;
10+
11+
--success-light: #639e52;
12+
--success-tone: #3a8529;
13+
--success-dark: #214d10;
14+
15+
--danger-light: #e05050;
16+
--danger-tone: #d2052b;
17+
--danger-dark: #5c0000;
18+
19+
--warning-light: #ffe063;
20+
--warning-tone: #ffcc00;
21+
--warning-dark: #cc9901;
22+
23+
--info-light: #5aa9ff;
24+
--info-tone: #007bff;
25+
--info-dark: #0056b3;
26+
27+
--base-light: #e6e3e6;
28+
--base-tone: #ced2d6;
29+
--base-dark: #5a595a;
30+
}
31+
.dark {
32+
--base-light: #5a595a;
33+
--base-tone: #4a494a;
34+
--base-dark: #2e2e2e;
1135
}
1236

1337
.outline {
14-
outline: 4px solid var(--outline);
15-
border-bottom: 8px solid var(--white-dark);
38+
outline: 4px solid var(--outline);
39+
border-bottom: 8px solid var(--base-dark);
40+
}
41+
42+
.card,
43+
.alert,
44+
.modal {
45+
padding: 1rem;
46+
background-color: var(--base-tone);
47+
outline: 4px solid var(--outline);
48+
border-block: 4px solid var(--base-light);
49+
border-radius: 0;
1650
}
1751

18-
.card {
19-
padding: 1rem;
20-
background-color: var(--black-tone);
21-
outline: 4px solid var(--outline);
22-
border-block: 4px solid var(--black-light);
23-
border-radius: 0;
52+
.accordion-item {
53+
background-color: var(--base-tone);
54+
outline: 4px solid var(--outline);
55+
border-block: 4px solid var(--base-light);
56+
border-radius: 0;
2457
}
2558

2659
.navbar {
27-
margin-block: 4px;
28-
background-color: var(--white-tone);
29-
outline: 4px solid var(--white-light);
30-
cursor: pointer;
31-
color: #000;
60+
margin-block: 4px;
61+
background-color: var(--base-tone);
62+
outline: 4px solid var(--base-light);
63+
cursor: pointer;
64+
color: #000;
65+
}
66+
67+
.outline-success {
68+
outline: 4px solid var(--outline);
69+
line-height: normal;
70+
border-bottom: 8px solid var(--success-dark);
71+
padding: 4px;
72+
border-radius: 0;
73+
display: inline-block;
74+
}
75+
.btn-success {
76+
text-decoration: none;
77+
color: #fff;
78+
background-color: var(--success-tone);
79+
outline: 4px solid var(--success-light);
80+
cursor: pointer;
81+
padding: 0 4px;
82+
}
83+
84+
.card-success,
85+
.alert-success,
86+
.modal-sucess,
87+
.accordion-success {
88+
padding: 1rem;
89+
background-color: var(--success-tone);
90+
outline: 4px solid var(--outline);
91+
border-block: 4px solid var(--success-light);
92+
border-radius: 0;
93+
}
94+
95+
.outline-danger {
96+
outline: 4px solid var(--outline);
97+
line-height: normal;
98+
border-bottom: 8px solid var(--danger-dark);
99+
padding: 4px;
100+
border-radius: 0;
101+
display: inline-block;
102+
}
103+
104+
.btn-danger {
105+
text-decoration: none;
106+
color: #fff;
107+
background-color: var(--danger-tone);
108+
outline: 4px solid var(--danger-light);
109+
cursor: pointer;
110+
padding: 0 4px;
111+
}
112+
113+
.card-danger,
114+
.alert-danger,
115+
.modal-danger,
116+
.accordion-danger {
117+
padding: 1rem;
118+
background-color: var(--danger-tone);
119+
outline: 4px solid var(--outline);
120+
border-block: 4px solid var(--danger-light);
121+
border-radius: 0;
122+
}
123+
124+
.outline-warning {
125+
outline: 4px solid var(--outline);
126+
line-height: normal;
127+
border-bottom: 8px solid var(--warning-dark);
128+
padding: 4px;
129+
border-radius: 0;
130+
display: inline-block;
32131
}
33132

133+
.btn-warning {
134+
text-decoration: none;
135+
color: #fff;
136+
background-color: var(--warning-tone);
137+
outline: 4px solid var(--warning-light);
138+
cursor: pointer;
139+
padding: 0 4px;
140+
}
141+
142+
.card-warning,
143+
.alert-warning,
144+
.modal-warning,
145+
.accordion-warning {
146+
padding: 1rem;
147+
background-color: var(--warning-tone);
148+
outline: 4px solid var(--outline);
149+
border-block: 4px solid var(--warning-light);
150+
border-radius: 0;
151+
}
152+
153+
.outline-info {
154+
outline: 4px solid var(--outline);
155+
line-height: normal;
156+
border-bottom: 8px solid var(--info-dark);
157+
padding: 4px;
158+
border-radius: 0;
159+
display: inline-block;
160+
}
161+
162+
.btn-info {
163+
text-decoration: none;
164+
color: #fff;
165+
background-color: var(--info-tone);
166+
outline: 4px solid var(--info-light);
167+
cursor: pointer;
168+
padding: 0 4px;
169+
}
170+
171+
.card-info,
172+
.alert-info,
173+
.modal-info,
174+
.accordion-info {
175+
padding: 1rem;
176+
background-color: var(--info-tone);
177+
outline: 4px solid var(--outline);
178+
border-block: 4px solid var(--info-light);
179+
border-radius: 0;
180+
}
181+
182+
.outline-dark {
183+
outline: 4px solid var(--outline);
184+
line-height: normal;
185+
border-bottom: 8px solid var(--black-dark);
186+
padding: 4px;
187+
border-radius: 0;
188+
display: inline-block;
189+
}
34190
.btn-dark {
35-
text-decoration: none;
36-
color: #fff;
37-
cursor: pointer;
38-
padding: 0 4px;
39-
background-color: var(--black-tone);
40-
outline: 4px solid var(--outline);
41-
border-block: 4px solid var(--black-light);
42-
border-bottom: 8px solid var(--black-dark);
43-
}
44-
45-
.success-outline {
46-
outline: 4px solid #211c21;
47-
line-height: normal;
48-
border-bottom: 8px solid #214d10;
49-
padding: 4px;
50-
border-radius: 0;
51-
display: inline-block;
52-
}
53-
.success-core {
54-
text-decoration: none;
55-
color: #fff;
56-
background-color: #3a8529;
57-
outline: 4px solid #639e52;
58-
cursor: pointer;
59-
padding: 0 4px;
60-
}
61-
62-
.error-outline {
63-
outline: 4px solid #211c21;
64-
line-height: normal;
65-
border-bottom: 8px solid #5c0000;
66-
padding: 4px;
67-
border-radius: 0;
68-
display: inline-block;
69-
}
70-
71-
.error-core {
72-
text-decoration: none;
73-
color: #fff;
74-
background-color: #d2052b;
75-
outline: 4px solid #e05050;
76-
cursor: pointer;
77-
padding: 0 4px;
78-
}
79-
80-
.warning-outline {
81-
outline: 4px solid #211c21;
82-
line-height: normal;
83-
border-bottom: 8px solid #cc9901;
84-
padding: 4px;
85-
border-radius: 0;
86-
display: inline-block;
87-
}
88-
89-
.warning-core {
90-
text-decoration: none;
91-
color: #fff;
92-
background-color: #ffcc00;
93-
outline: 4px solid #ffe063;
94-
cursor: pointer;
95-
padding: 0 4px;
96-
}
97-
98-
.info-outline {
99-
outline: 4px solid #211c21;
100-
line-height: normal;
101-
border-bottom: 8px solid #0056b3;
102-
padding: 4px;
103-
border-radius: 0;
104-
display: inline-block;
105-
}
106-
107-
.info-core {
108-
text-decoration: none;
109-
color: #fff;
110-
background-color: #007bff;
111-
outline: 4px solid #5aa9ff;
112-
cursor: pointer;
113-
padding: 0 4px;
114-
}
115-
116-
.light-core {
117-
text-decoration: none;
118-
color: #fff;
119-
cursor: pointer;
120-
padding: 0 4px;
121-
background-color: #4a494a;
122-
outline: 4px solid #211c21;
123-
border-block: 4px solid #5a595a;
124-
border-bottom: 8px solid #0056b3;
191+
text-decoration: none;
192+
color: #fff;
193+
background-color: var(--black-tone);
194+
outline: 4px solid var(--black-light);
195+
cursor: pointer;
196+
padding: 0 4px;
197+
}
198+
199+
.card-dark,
200+
.alert-dark,
201+
.modal-dark,
202+
.accordion-dark {
203+
padding: 1rem;
204+
background-color: var(--black-tone);
205+
outline: 4px solid var(--outline);
206+
border-block: 4px solid var(--black-light);
207+
border-radius: 0;
125208
}
126209

127210

211+
.outline-light {
212+
outline: 4px solid var(--outline);
213+
line-height: normal;
214+
border-bottom: 8px solid var(--white-dark);
215+
padding: 4px;
216+
border-radius: 0;
217+
display: inline-block;
218+
}
219+
.btn-light {
220+
text-decoration: none;
221+
color: #fff;
222+
background-color: var(--white-tone);
223+
outline: 4px solid var(--white-light);
224+
cursor: pointer;
225+
padding: 0 4px;
226+
}
227+
228+
.card-light,
229+
.alert-light,
230+
.modal-light,
231+
.accordion-light {
232+
padding: 1rem;
233+
background-color: var(--white-tone);
234+
outline: 4px solid var(--outline);
235+
border-block: 4px solid var(--white-light);
236+
border-radius: 0;
237+
}
128238

‎src/layouts/Bootstrap.astro

+3-10
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,10 @@ const isDev = import.meta.env.DEV;
1919
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
2020
crossorigin="anonymous"
2121
/>
22-
{isDev && <link href="/bs-theme.css" rel="stylesheet" />}
23-
{
24-
!isDev && (
25-
<link
26-
href="https://democraftmc.github.io/ore-aui//bs-theme.css"
27-
rel="stylesheet"
28-
/>
29-
)
30-
}
22+
<link href="/bs-theme.css" rel="stylesheet" />
23+
3124
</head>
32-
<body>
25+
<body class="dark">
3326
<slot />
3427
<script
3528
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"

0 commit comments

Comments
 (0)