Skip to content

Commit 32b8ea2

Browse files
Brackets-CoderBrackets-Coder
authored
Create styles.css
1 parent 3c59a7e commit 32b8ea2

File tree

1 file changed

+370
-0
lines changed

1 file changed

+370
-0
lines changed

‎docs/Resources/styles.css‎

Lines changed: 370 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,370 @@
1+
/* This Stylesheet overrides the necessary Bootstrap classes to display our website's theme and branding properly */
2+
3+
h1, h2, h3, h4, h5, h6 {
4+
color: darkgreen;
5+
}
6+
7+
p {
8+
color: green;
9+
}
10+
a {
11+
color: green;
12+
}
13+
14+
.nav-link {
15+
color: rgba(255, 255, 255, .75) !important;
16+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
17+
}
18+
19+
.nav-link.active {
20+
color: rgba(255, 255, 255, 1) !important;
21+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
22+
}
23+
24+
.nav-link:hover {
25+
color: rgba(255, 255, 255, 1) !important;
26+
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out
27+
}
28+
29+
/* Restyling of all buttons */
30+
.btn-primary {
31+
background-color: green !important;
32+
border-color: green !important;
33+
color: white !important;
34+
border-radius: 5px !important;
35+
transition: all 0.5s !important;
36+
}
37+
.btn-primary:hover,
38+
.btn-primary:active,
39+
.btn-primary:focus,
40+
.btn-primary:active:focus {
41+
background-color: darkgreen !important;
42+
border-color: darkgreen !important;
43+
color: e6e6e6 !important;
44+
border-radius: 10px !important;
45+
transition: all 0.5s !important;
46+
outline: none;
47+
box-shadow: none!important;
48+
}
49+
.btn-danger {
50+
border-radius: 5px !important;
51+
transition: all 0.5s !important;
52+
}
53+
.btn-danger:hover,
54+
.btn-danger:active,
55+
.btn-danger:focus,
56+
.btn-danger:active:focus {
57+
border-radius: 10px !important;
58+
transition: all 0.5s !important;
59+
outline: none;
60+
box-shadow: none !important;
61+
}
62+
.btn-outline-primary {
63+
background-color: transparent !important;
64+
border-color: green !important;
65+
color: green !important;
66+
border-radius: 5px;
67+
transition: all 0.5s;
68+
}
69+
.btn-outline-primary:hover,
70+
.btn-outline-primary:active,
71+
.btn-outline-primary:focus,
72+
.btn-outline-primary:active:focus {
73+
background-color: green !important;
74+
border-color: green !important;
75+
color: white !important;
76+
border-radius: 10px;
77+
transition: all 0.5s;
78+
box-shadow: none !important; /* Removes a styling issue that involves a blue focus ring that clashes with the green theme and branding colors*/
79+
}
80+
/*Button styling for the "get started" button on the index page*/
81+
.btn-get-started {
82+
background-color: transparent !important;
83+
border-color: green !important;
84+
color: green !important;
85+
border-radius: 3px;
86+
transition: all 0.5s;
87+
}
88+
89+
.btn-get-started:hover,
90+
.btn-get-started:active,
91+
.btn-get-started:focus,
92+
.btn-get-started:active:focus {
93+
background-color: green !important;
94+
border-color: green !important;
95+
color: white !important;
96+
border-radius: 8px 15px;
97+
transition: all 0.5s;
98+
box-shadow: none !important; /* Removes a styling issue that involves a blue focus ring that clashes with the green theme and branding colors*/
99+
}
100+
/*=-=-=-=-=--=-==-=-=-=-=-=-==---=-==-==-==-=*/
101+
102+
103+
.btn-light {
104+
background-color: white !important;
105+
border-color: white !important;
106+
color: green !important;
107+
border-radius: 5px;
108+
transition: all 0.5s;
109+
}
110+
.btn-light:hover,
111+
.btn-light:active,
112+
.btn-light:focus,
113+
.btn-light:active:focus {
114+
background-color: white !important;
115+
border-color: white !important;
116+
color: green !important;
117+
border-radius: 10px;
118+
transition: all 0.5s;
119+
}
120+
121+
.btn-outline-light {
122+
background-color: transparent !important;
123+
border-color: white !important;
124+
color: white !important;
125+
border-radius: 5px;
126+
transition: all 0.5s;
127+
}
128+
.btn-outline-light:hover,
129+
.btn-outline-light:active,
130+
.btn-outline-light:focus,
131+
.btn-outline-light:active:focus {
132+
background-color: white !important;
133+
border-color: white !important;
134+
color: green !important;
135+
border-radius: 10px;
136+
transition: all 0.5s;
137+
}
138+
139+
.btn-account-dropdown {
140+
background-color: white;
141+
color: green;
142+
height: 100% !important;
143+
width: auto;
144+
}
145+
146+
/*Dropdown menu restylings*/
147+
.dropdown-menu {
148+
background-color: white !important;
149+
border-color: green !important;
150+
color: green !important;
151+
}
152+
153+
.dropdown-menu>li>a:hover {
154+
background: #e6e6e6;
155+
color: darkgreen !important;
156+
}
157+
158+
.dropdown-menu>li>a {
159+
color: green !important;
160+
}
161+
162+
.file-upload-form {
163+
border-style: dashed;
164+
border-color: green;
165+
border-width: 3px;
166+
border-radius: 7.5px;
167+
padding: 15px;
168+
width: 400px;
169+
cursor: pointer;
170+
text-align: center;
171+
}
172+
173+
.account-dropdown {
174+
height: 100%;
175+
width: 100%;
176+
background-color: transparent;
177+
color: green;
178+
border: none;
179+
border-radius: none;
180+
transition: all 0.5s;
181+
}
182+
183+
.account-dropdown:hover,
184+
.account-dropdown:active,
185+
.account-dropdown:focus,
186+
.account-dropdown:active:focus {
187+
background-color: transparent !important;
188+
border: none;
189+
color: darkgreen !important;
190+
border-radius: none;
191+
transition: all 0.5s;
192+
}
193+
194+
/*Change the color of the glow around the form inputs*/
195+
.form-control {
196+
border-color: green;
197+
border-width: 2px;
198+
}
199+
.form-control:focus {
200+
border-color: green;
201+
box-shadow:0 0 0 .25rem rgba(0, 128, 0, .25)
202+
}
203+
204+
.form-select {
205+
border-color: green !important;
206+
border-width: 2px !important;
207+
color: darkgreen;
208+
}
209+
.form-select:focus {
210+
border-color: green !important;
211+
box-shadow:0 0 0 .25rem rgba(0, 128, 0, .25) !important;
212+
}
213+
214+
input:-webkit-autofill,
215+
input:-webkit-autofill:hover,
216+
input:-webkit-autofill:focus,
217+
input:-webkit-autofill:active {
218+
-webkit-text-fill-color: darkgreen !important;
219+
-webkit-box-shadow: 0 0 50px rgba(255, 255, 255, 0) inset !important;
220+
background-color: transparent !important;
221+
background-clip: text;
222+
}
223+
224+
.shadow-lg {
225+
box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2) !important;
226+
}
227+
228+
/* "Zoom" class for zooming the logo upon hover in the index page, as a small fun little tidbit for no reason whatsoever */
229+
.zoom {
230+
transition: transform .2s; /* Animation */
231+
width: auto;
232+
height: auto;
233+
margin: 0 auto;
234+
}
235+
236+
.zoom:hover {
237+
transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
238+
}
239+
240+
::placeholder {
241+
color: green;
242+
opacity: 1; /* Firefox */
243+
}
244+
245+
::-ms-input-placeholder { /* Edge 12 -18 */
246+
color: green;
247+
}
248+
249+
.nav-pills .nav-link:hover,
250+
.nav-pills .nav-link:active,
251+
.nav-pills .nav-link:focus,
252+
.nav-pills .nav-link:active:focus {
253+
background-color: #e6e6e6 !important;
254+
}
255+
256+
.nav-pills .nav-link.active {
257+
background-color: #cde3c8 !important;
258+
color: darkgreen !important;
259+
}
260+
.nav-pills .nav-link.active:hover {
261+
background-color: #b2d4aa !important;
262+
}
263+
.nav-pills .nav-item {
264+
padding-bottom: 5px !important;
265+
}
266+
267+
.unselectable {
268+
-webkit-touch-callout: none;
269+
-webkit-user-select: none;
270+
-khtml-user-select: none;
271+
-moz-user-select: none;
272+
-ms-user-select: none;
273+
user-select: none;
274+
pointer-events: none;
275+
}
276+
277+
.preformatted {
278+
white-space: pre-wrap;
279+
}
280+
281+
.alert-success {
282+
background-color:#cde3c8;
283+
border: 1.5px solid #a3cc99;
284+
}
285+
286+
.badge.bg-success {
287+
background-color: green !important;
288+
}
289+
290+
.footer-light {
291+
padding-top: 50px;
292+
}
293+
.footer-light div {
294+
background-color: white;
295+
color: green;
296+
height: auto;
297+
border-top: 2px solid green;
298+
}
299+
.footer-light div p,
300+
.footer-light div a {
301+
color: green;
302+
}
303+
304+
305+
.footer-dark {
306+
padding-top: auto;
307+
}
308+
.footer-dark div {
309+
background-color: green;
310+
color: white;
311+
height: auto;
312+
}
313+
.footer-dark div p,
314+
.footer-dark div a {
315+
color: white;
316+
}
317+
318+
.border-success {
319+
border-color: green !important;
320+
}
321+
.bold {
322+
font-weight: bold;
323+
}
324+
325+
326+
@media (max-width: 1400px) {
327+
.col-sm-6 {
328+
padding-top: 10px;
329+
flex: 0 0 100%;
330+
max-width: 100%;
331+
}
332+
}
333+
334+
@media (max-width: 1400px) {
335+
.col-sm-2 {
336+
padding-top: 10px;
337+
flex: 0 0 100%;
338+
max-width: 100%;
339+
}
340+
}
341+
342+
@media (max-width: 1400px) {
343+
.col-sm-3 {
344+
flex: 0 0 100%;
345+
max-width: 100%;
346+
}
347+
}
348+
349+
.form-check-input:checked {
350+
background-color: green;
351+
border-color: green;
352+
}
353+
.form-check-input,
354+
.form-check-input:focus {
355+
border-color: green;
356+
}
357+
.form-check .form-check-input {
358+
float: none;
359+
}
360+
361+
.card {
362+
transform: scale(1);
363+
transition: all 0.5s
364+
}
365+
366+
.card:hover {
367+
box-shadow: 0rem 0rem 2rem rgba(0, 0, 0, .3) !important;
368+
transform: scale(1.02);
369+
transition: all 0.5s
370+
}

0 commit comments

Comments
 (0)