]> jfr.im git - irc/unrealircd/unrealircd-webpanel.git/blame_incremental - css/unrealircd-admin.css
Move user functionality fully into the base
[irc/unrealircd/unrealircd-webpanel.git] / css / unrealircd-admin.css
... / ...
CommitLineData
1.unrealircd_overview {
2 font-family: arial, sans-serif;
3 border-collapse: collapse;
4 border-radius: 7px;
5 width: 25%;
6 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
7}
8
9.badge-pill {
10 box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
11}
12
13.curvy {
14 border-radius: 7px;
15 margin: 2px;
16}
17
18
19.short-form-control {
20 width: 70%;
21}
22
23
24.align_right {
25 width: 10px;
26 text-align: right;
27}
28
29.input_text {
30 border-radius: 7px;
31}
32
33.filter-fields {
34 height: 30px;
35 width: 400px;
36 padding: 5px 5px;
37 margin: 8px 0;
38 border-radius: 7px;
39}
40
41
42.align_label {
43 width: 80px;
44 display: inline-block;
45 text-align: right;
46}
47
48body {
49 padding-bottom: 120px;
50}
51footer {
52 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
53 position: absolute;
54 bottom: 0;
55 width: 100%;
56 height: 55px;
57 }
58
59.topnav {
60 background-color: #333;
61 overflow: hidden;
62 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
63
64}
65
66/* Style the links inside the navigation bar */
67.topnav a {
68 float: left;
69 color: #f2f2f2;
70 text-align: center;
71 padding: 14px 16px;
72 text-decoration: none;
73 font-size: 17px;
74}
75
76
77body {
78 padding-top: 45px;
79 background-image: url("../img/background.jpg");
80 display: flex;
81 flex-direction: column;
82}
83
84
85.alert-short {
86 width: 40%;
87}
88
89/* The close button */
90.closebtn {
91 color: black;
92 font-weight: bold;
93 float: right;
94 font-size: 22px;
95 line-height: 20px;
96 cursor: pointer;
97 transition: 0.3s;
98}
99
100
101.checkbox-dropdown {
102 width: 200px;
103 border: 1px solid #aaa;
104 padding: 10px;
105 position: relative;
106 margin: 0 auto;
107
108 user-select: first;
109}
110
111/* Display CSS arrow to the right of the dropdown text */
112.checkbox-dropdown:after {
113 content:'';
114 height: 0;
115 position: absolute;
116 width: 0;
117 border: 6px solid transparent;
118 border-top-color: #000;
119 top: 50%;
120 right: 10px;
121 margin-top: -3px;
122}
123
124/* Reverse the CSS arrow when the dropdown is active */
125.checkbox-dropdown.is-active:after {
126 border-bottom-color: #000;
127 border-top-color: #fff;
128 margin-top: -9px;
129}
130
131.checkbox-dropdown-list {
132 list-style: none;
133 margin: 0;
134 padding: 0;
135 position: absolute;
136 top: 100%; /* align the dropdown right below the dropdown text */
137 border: inherit;
138 border-top: none;
139 left: -1px; /* align the dropdown to the left */
140 right: -1px; /* align the dropdown to the right */
141 opacity: 0; /* hide the dropdown */
142
143 transition: opacity 0.4s ease-in-out;
144 height: 100px;
145 overflow: scroll;
146 overflow-x: hidden;
147 pointer-events: none; /* avoid mouse click events inside the dropdown */
148}
149.is-active .checkbox-dropdown-list {
150 opacity: 1; /* display the dropdown */
151 pointer-events: auto; /* make sure that the user still can select checkboxes */
152}
153
154.checkbox-dropdown-list li label {
155 display: block;
156 border-bottom: 1px solid silver;
157 padding: 10px;
158
159 transition: all 0.2s ease-out;
160}
161
162.checkbox-dropdown-list li label:hover {
163 background-color: #555;
164 color: white;
165}
166
167.table-striped>tbody>tr:nth-child(even)>td,
168.table-striped>tbody>tr:nth-child(even)>th {
169 background-color: #a5a5a549;
170 }
171 .table-striped>tbody>tr:nth-child(odd)>td,
172 .table-striped>tbody>tr:nth-child(odd)>th {
173 background-color: #ffffff;
174 }
175
176 /* Small screens (max-width: 576px) */
177@media (max-width: 576px) {
178 /* Change the font size for all headings */
179 h1, h2, h3, h4, h5, h6 {
180 font-size: 18px;
181 }
182
183 /* Hide the sidebar */
184 .sidebar {
185 display: none;
186 }
187
188 /* Make the main content take up the full width of the screen */
189 .main-content {
190 width: 100%;
191 }
192}
193
194/* Medium screens (min-width: 577px) and (max-width: 768px) */
195@media (min-width: 577px) and (max-width: 768px) {
196 /* Change the font size for all headings */
197
198}
199
200/* Large screens (min-width: 769px) */
201@media (min-width: 769px) {
202 /* CSS rules for large screens go here */
203}
204/* Portrait screens (max-width: 576px) */
205@media (max-width: 576px) and (max-height: 812px) {
206 /* CSS rules for portrait screens go here */
207}
208
209/* Landscape screens (min-width: 577px) and (max-height: 812px) */
210@media (min-width: 577px) and (max-height: 812px) {
211 /* CSS rules for landscape screens go here */
212}
213
214.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
215 width: inherit;
216}
217
218.card-header i.fa {
219 line-height: 74px;
220}