Skip to content

Commit da273f6

Browse files
Coding-with-AdamCoding-with-Adam
authored
Create style.css
1 parent 5a31238 commit da273f6

File tree

1 file changed

+172
-0
lines changed

1 file changed

+172
-0
lines changed

Diff for: ‎dash-layout-tutorial/assets/style.css

+172
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
body {
2+
background-color: #708090;
3+
}
4+
5+
.dashboard-container {
6+
width: 1400px;
7+
height: 800px;
8+
margin-left: auto;
9+
margin-right: auto;
10+
margin-top: 50px;
11+
margin-bottom: 50px;
12+
background-color: #010103;
13+
border: 1px solid #cccccc;
14+
border-radius: 10px;
15+
}
16+
17+
.modebar { display: none !important; }
18+
19+
/* Texts */
20+
21+
h1 {
22+
font-family: "Poppins";
23+
color: #ffffff;
24+
font-size: 35px;
25+
margin: 15px;
26+
}
27+
28+
h2 {
29+
margin-bottom: 0px;
30+
margin-top: 10px;
31+
font-family: "Poppins";
32+
font-size: 14px !important;
33+
color: #ffffff;
34+
}
35+
36+
p {
37+
font-family: "Poppins";
38+
color: #ffffff;
39+
font-size: 16px;
40+
margin: 15px;
41+
text-align: justify;
42+
}
43+
44+
/* Radio-buttons */
45+
46+
.form-check {
47+
width: 100%;
48+
height: 38px;
49+
margin: 1px;
50+
padding-left: 0;
51+
}
52+
53+
.btn.btn-outline-light,
54+
.btn.btn-light {
55+
width: 100%;
56+
height: 100%;
57+
padding: 6px;
58+
font-family: "Poppins";
59+
border-radius: 3px;
60+
}
61+
62+
.btn.btn-outline-light {
63+
border: 1px solid transparent;
64+
}
65+
66+
.btn.btn-outline-light:hover {
67+
color: #010103;
68+
background-color: color-mix(in srgb, var(--bs-light), #010103 7%);
69+
}
70+
71+
/* Single button */
72+
73+
.btn.btn-info {
74+
width: 100%;
75+
height: 38px;
76+
margin: 1px;
77+
padding: 6px;
78+
font-family: "Poppins";
79+
border-radius: 3px;
80+
background-color: transparent;
81+
border: 1px solid transparent;
82+
}
83+
84+
.btn.btn-info:active,
85+
.btn.btn-info:focus {
86+
background-color: var(--bs-info);
87+
}
88+
89+
.btn.btn-info:hover {
90+
background-color: color-mix(in srgb, var(--bs-info), #010103 7%);
91+
}
92+
93+
/* Dropdowns */
94+
95+
.customDropdown {
96+
font-size: 16px;
97+
font-family: "Poppins";
98+
padding-left: 1px;
99+
}
100+
101+
.customDropdown .Select-control {
102+
width: 100%;
103+
height: 38px;
104+
background-color: transparent;
105+
border: 1px solid #676768;
106+
border-radius: 3px;
107+
color: var(--bs-info) !important;
108+
}
109+
110+
.customDropdown .Select-value-label,
111+
.customDropdown .Select-placeholder {
112+
color: var(--bs-info) !important;
113+
}
114+
115+
.customDropdown .Select-arrow {
116+
border-color: #cccccc transparent transparent;
117+
}
118+
119+
.customDropdown.is-open .Select-arrow {
120+
border-color: transparent transparent #cccccc;
121+
}
122+
123+
.customDropdown .Select-clear {
124+
color: var(--bs-info);
125+
font-size: 22px;
126+
}
127+
128+
.customDropdown.is-focused:not(.is-open) > .Select-control {
129+
border: 2px solid color-mix(in srgb, var(--bs-info), #010103 50%) !important;
130+
}
131+
132+
.customDropdown.is-focused:not(.is-open) .Select-arrow {
133+
border-color: var(--bs-info) transparent transparent;
134+
}
135+
136+
.customDropdown .Select-menu-outer {
137+
margin-top: 5px;
138+
border-radius: 3px;
139+
background-color: #010103;
140+
border: 1px solid #676768;
141+
color: var(--bs-light);
142+
}
143+
144+
.customDropdown .VirtualizedSelectFocusedOption {
145+
background-color: color-mix(in srgb, var(--bs-light), #010103 7%);
146+
border-radius: 3px;
147+
color: #010103;
148+
}
149+
150+
151+
/* Outputs */
152+
153+
.Output {
154+
width: 150px;
155+
height: 38px;
156+
background-color: rgba(204,204,204,0.1);
157+
border: 1px solid rgba(204,204,204,0.1);
158+
border-radius: 3px;
159+
}
160+
161+
.Output:empty::before {
162+
content:"";
163+
display:inline-block;
164+
}
165+
166+
h3 {
167+
font-size: 16px;
168+
line-height: 34px;
169+
padding-left: 7px;
170+
font-family: "Poppins";
171+
color: var(--bs-info);
172+
}

0 commit comments

Comments
 (0)