jfr.im git - irc/unrealircd/unrealircd-webpanel.git/blob

1 .unrealircd_overview {

2 font-family: arial, sans-serif;

3 border-collapse: collapse;

4 border-radius: 7px;

5 width: 25%;

         box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

7 }

8 .tkl_add_boxheader {

9 font-weight: bold;

10 background-color: #4B86EE;

11 width: 24%;

12 color: white;

13 margin-top: 20px;

         border: 10px solid #4B86EE;

15 border-top-left-radius: 10px;

16 border-top-right-radius: 10px;

17 }

19 .align_right {

20 width: 10px;

21 text-align: right;

22 }

24 .tkl_add_form {

25 background-color: lightgray;

26 padding: 10px;

27 width: 24%;

         box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

29 line-height: 30px;

30 }

32 .tkl_add_form_contents {

33 margin-left: auto;

34 margin-right: 0;

35 }

36 .users_overview {

37 font-family: arial, sans-serif;

38 border-collapse: collapse;

39 border-radius: 7px;

40 width: 100%;

         box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

42 }

43 .input_text {

44 border-radius: 7px;

45 }

46 select {

47 border-radius: 7px;

48 }

50 a {

51 color: white;

52 text-decoration: none;

53 }

55 .thuf {

56 border-bottom-left-radius: 10px;

57 }

59 .thuffer {

60 border-bottom-right-radius: 10px;

61 }

62 .filter-fields {

63 height: 30px;

64 width: 400px;

65 padding: 5px 5px;

66 margin: 8px 0;

67 border-radius: 7px;

68 }

70 .secure-connection {

71 color: darkgreen;

72 border: 3px solid darkgreen;

         background-color: rgba(0, 255, 0, 0.1);

74 }

76 .operclass-label {

77 color:brown;

78 border: 3px solid brown;

         background-color: rgba(255, 166, 0, 0.247);

80 }

81 .bluelabel {

82 color: blue;

83 border: 3px solid darkblue;

         background-color: rgba(131, 78, 255, 0.295);

85 }

86 .redlabel {

87 color: darkred;

88 border: 3px solid darkred;

         background-color: rgba(255, 78, 78, 0.295);

90 }

92 .align_label {

93 width: 80px;

94 display: inline-block;

95 text-align: right;

96 }

98 .align_right_button_tkl_add {

99 width: 400px;

100 display: inline-block;

101 text-align: right;

102 }

103

104 .label {

105 white-space: nowrap;

         font-family: 'Heebo', sans-serif;

107 font-size: 0.65rem;

108 font-weight: 500;

109 letter-spacing: 0.025rem;

110 font-style: normal;

111 text-transform: uppercase;

112 border-radius: 7px;

113 -webkit-border-radius: 1rem;

114 -moz-border-radius: 1rem;

115 padding: 0.20rem 0.50rem;

116 border-style: solid;

117

118 }

119 textarea {

120 height: 30px;

121 width: 400px;

122 padding: 5px 5px;

123 margin: 8px 0;

124 border-radius: 7px;

125 }

126 table {

127 border-collapse: collapse;

128 margin: 25px 0;

129 font-size: 0.9em;

130 font-family: sans-serif;

131 min-width: 400px;

         box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);

133 }

134

135 td {

136 text-align: left;

137 padding: 8px;

138 }

139

140 th {

141 text-align: left;

142 padding: 8px;

143 background-color: #4B86EE;

144 color: white;

145 }

146

147 th:first-of-type {

148 border-top-left-radius: 10px;

149 color: white;

150 }

151

152 th:last-of-type {

153 border-top-right-radius: 10px;

154 color: white;

155 }

156

 tr:last-of-type td:first-of-type {

158 border-bottom-left-radius: 10px;

159

160 }

161

 tr:last-of-type td:last-of-type {

163 border-bottom-right-radius: 10px;

164 }

165

166 tr:nth-child(even) {

167 background-color: #bec8d3;

168 }

169

170 tr:nth-child(odd) {

171 background-color: whitesmoke;

172 }

173

174 html {

175 height: 100%;

176 /* for the page to take full window height */

177 box-sizing: border-box;

178

179 /* to have the footer displayed at the bottom of the page without scrolling */

180 font-family: arial, sans-serif;

181

182 }

183

184 *,

185 *:before,

186 *:after {

187 box-sizing: inherit;

188 /* enable the "border-box effect" everywhere */

189 }

190

191 .body-for-sticky {

192 position: relative;

193 /* for the footer to move with the page size */

194 min-height: 100%;

195 /* for the footer to be at the bottom */

196 }

197

198 .footer {

         font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

200 position: fixed;

201 left: 0;

202 bottom: 0;

203 width: 100%;

204 background-color: #333;

205 color: white;

206 text-align: center;

207 }

208

209

210 .footer a {

211 color: #4B86EE;

212 }

213

214 .row {

215 display: flex;

216 }

217

218 .column {

219 flex: 50%;

220 padding: 5px;

221 }

222

223 .topnav {

224 background-color: #333;

225 overflow: hidden;

         font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

227

228 }

229

230 /* Style the links inside the navigation bar */

231 .topnav a {

232 float: left;

233 color: #f2f2f2;

234 text-align: center;

235 padding: 14px 16px;

236 text-decoration: none;

237 font-size: 17px;

238 }

239

240 /* Change the color of links on hover */

241 .topnav a:hover {

242 background-color: #ddd;

243 color: black;

244 }

245

246 /* Add a color to the active/current link */

247 .topnav a.active {

248 background-color: #4B86EE;

249 color: white;

250 }

251

252

253 [data-tab-content] {

254 display: none;

255 }

256

257 .active[data-tab-content] {

258 display: block;

259 }

260

261 .tab.active {

262 background-color: #AAA;

263 }

264

265 .tab:hover {

266 background-color: #AAA;

267 }

268

269 #headerContainer,

270 #headerTitle {

271 background-color: #4B86EE;

         font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

273 height: 62px;

274 margin-top: -10px;

275 padding: 10px 25px;

276 position: relative;

277 }

278

279 #headerContainer {

280 margin-left: -15px;

281 z-index: 10;

282

         -webkit-box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2);

         box-shadow: 0 3px 3px .01px rgba(0, 0, 0, 0.2);

285 }

286

287 #headerContainer:before {

288 border-color: #034FD5 transparent;

289 border-style: solid;

290 border-width: 1em 0 0 1em;

291 bottom: -1em;

292 content: '';

293 display: block;

294 left: 0;

295 position: absolute;

296 }

297

298 #headerContainer h2,

299 #headerContainer h2 small {

300 color: white !important;

301 margin-bottom: 0px;

302

303 }

304

305 #headerContainer h2 small {

306 font-weight: lighter;

307 }

308

309 #headerTitle {

310 background-color: white;

311 margin-right: 15px;

312 z-index: 9;

313 }

314

315 #headerTitle h2 {

316 line-height: 1.5;

317 margin-bottom: 0px;

318 }

319

320 #headerTitle h2 i {

321 color: #f2f2f2;

322 font-size: 80px;

323 position: absolute;

324 right: 0;

325 top: -30px;

326 z-index: -1;

327 }

328

329 #headerTitle h2 small {

330 color: #bbb;

331 }

332

333

334 body {

         background-image: url("/img/linen.png");

336 display: flex;

337 flex-direction: column;

338 }

339

340 /* CSS */

341 .cute_button {

342 align-items: center;

343 appearance: none;

344 background-color: #4B86EE;

         background-size: calc(100% + 20px) calc(100% + 20px);

346 border-radius: 7px;

347 border-width: 0;

348 box-shadow: none;

349 box-sizing: border-box;

350 color: #FFFFFF;

351 cursor: pointer;

352 display: inline-flex;

353 font-family: CircularStd, sans-serif;

354 font-size: 1rem;

355 height: auto;

356 justify-content: center;

357 line-height: 1.5;

358 padding: 6px 20px;

359 position: relative;

360 text-align: center;

361 text-decoration: none;

         transition: background-color .2s, background-position .2s;

363 user-select: none;

364 -webkit-user-select: none;

365 touch-action: manipulation;

366 vertical-align: top;

367 white-space: nowrap;

368 }

369

370 .cute_button:active,

371 .cute_button:focus {

372 outline: none;

373 }

374

375 .cute_button:hover {

         background-position: -20px -20px;

377 background-color: #034FD5;

378 }

379

380 .cute_button:focus:not(:active) {

         box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;

382 }

383

384 .cute_button2 {

385 align-items: center;

386 appearance: none;

387 height: 27px;

388 background-color: green;

389 border-radius: 7px;

390 font-weight: bold;

391 border-width: 0;

392 box-shadow: none;

393 box-sizing: border-box;

394 color: #FFFFFF;

395 cursor: pointer;

396 display: inline-flex;

397 font-family: CircularStd, sans-serif;

398 font-size: 1rem;

399 justify-content: center;

400 line-height: 1.5;

401 position: relative;

402 text-align: center;

403 text-decoration: none;

         transition: background-color .2s, background-position .2s;

405 user-select: none;

406 -webkit-user-select: none;

407 touch-action: manipulation;

408 white-space: nowrap;

409 }

410

411 .cute_button2:active,

412 .cute_button2:focus {

413 outline: none;

414 }

415

416 .cute_button2:hover {

         background-position: -20px -20px;

418 background-color: #353c47;

419 }

420

421 .cute_button2:focus:not(:active) {

         box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;

423 }

424

425 .alert {

426 padding: 10px;

427 background-color: #b62c22;

428 /* Red */

429 color: white;

430 margin-bottom: 15px;

431 margin-top: 15px;

432 border-radius: 7px;

433 width: 100%;

434 }

435

436 .success {

437 padding: 10px;

438 background-color: #208120;

439 /* Red */

440 color: white;

441 margin-bottom: 15px;

442 margin-top: 15px;

443 border-radius: 7px;

444 width: 100%;

445 }

446

447 .information {

448 padding: 10px;

449 background-color: #245788;

450 /* Red */

451 color: white;

452 margin-bottom: 15px;

453 margin-top: 15px;

454 border-radius: 7px;

455 width: 100%;

456 }

457

458 /* The close button */

459 .closebtn {

460 margin-left: 15px;

461 color: white;

462 font-weight: bold;

463 float: right;

464 font-size: 22px;

465 line-height: 20px;

466 cursor: pointer;

467 transition: 0.3s;

468 }

469

470

471 .checkbox-dropdown {

472 width: 200px;

         border: 1px solid #aaa;

474 padding: 10px;

475 position: relative;

476 margin: 0 auto;

477

478 user-select: first;

479 }

480

481 /* Display CSS arrow to the right of the dropdown text */

482 .checkbox-dropdown:after {

483 content:'';

484 height: 0;

485 position: absolute;

486 width: 0;

487 border: 6px solid transparent;

488 border-top-color: #000;

489 top: 50%;

490 right: 10px;

491 margin-top: -3px;

492 }

493

494 /* Reverse the CSS arrow when the dropdown is active */

495 .checkbox-dropdown.is-active:after {

496 border-bottom-color: #000;

497 border-top-color: #fff;

498 margin-top: -9px;

499 }

500

501 .checkbox-dropdown-list {

502 list-style: none;

503 margin: 0;

504 padding: 0;

505 position: absolute;

         top: 100%; /* align the dropdown right below the dropdown text */

507 border: inherit;

508 border-top: none;

         left: -1px; /* align the dropdown to the left */

         right: -1px; /* align the dropdown to the right */

         opacity: 0; /* hide the dropdown */

512

513 transition: opacity 0.4s ease-in-out;

514 height: 100px;

515 overflow: scroll;

516 overflow-x: hidden;

517 pointer-events: none; /* avoid mouse click events inside the dropdown */

518 }

519 .is-active .checkbox-dropdown-list {

         opacity: 1; /* display the dropdown */

521 pointer-events: auto; /* make sure that the user still can select checkboxes */

522 }

523

524 .checkbox-dropdown-list li label {

525 display: block;

526 border-bottom: 1px solid silver;

527 padding: 10px;

528

529 transition: all 0.2s ease-out;

530 }

531

532 .checkbox-dropdown-list li label:hover {

533 background-color: #555;

534 color: white;

535 }