krz/vox-populi
A Tumblr web client.
clone: git clone https://gitbay.org/krz/vox-populi.git
main: assets/css/app.css · raw
1@media (min-width: 34em) {
2 .card-columns {
3 -webkit-column-count: 2;
4 -moz-column-count: 2;
5 column-count: 2;
6 }
7}
8
9p {
10 font-size: 0.8rem;
11}
12
13a,
14a:hover {
15 color: #dc3545;
16}
17
18iframe {
19 width: 100%;
20}
21
22hr {
23 border-top: 1px solid #5b5b5b;
24}
25
26.login-card {
27 height: auto;
28 width: 50%;
29}
30
31@media (max-width: 576px) {
32 .login-card {
33 height: auto;
34 width: 100%;
35 }
36}
37
38.card {
39 background: #202020;
40 border-radius: 0;
41}
42
43.card-body img {
44 width: 100%;
45}
46
47.card-footer {
48 border: none;
49}
50
51.card-footer a[title^='Unlike'] svg {
52 fill: #dc3545;
53}
54
55blockquote {
56 background: #3b3b3b;
57 border-left: 2px solid #dc3545;
58 margin: 0.5rem auto;
59 padding: 0.25rem 0.5rem;
60}
61
62blockquote p {
63 margin-bottom: 0;
64}
65
66.avatar {
67 height: 32px;
68 margin-right: 0.75rem;
69 width: 32px;
70}
71
72.feather {
73 margin: 0 0.2rem;
74}
75
76.page-link {
77 color: #dc3545;
78 background-color: #202020;
79 border: 1px solid #3b3b3b;
80}
81
82.page-link:hover {
83 color: #dc3545;
84 background-color: #202020;
85 border-color: #3b3b3b;
86}
87
88.page-link:focus {
89 box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .25);
90}
91
92.page-item.disabled .page-link {
93 color: #dc3545;
94 opacity: 0.5;
95 pointer-events: none;
96 cursor: auto;
97 background-color: #202020;
98 border-color: #3b3b3b;
99}
100
101.page-item.active .page-link {
102 background-color: #dc3545;
103 border-color: #dc3545;
104}
105
106.search-query {
107 background: #dc3545;
108 padding: 0 0.5rem;
109}
110
111.blog-title {
112 font-weight: bold
113}
114
115@media (max-width: 576px) {
116 .blog-title {
117 font-size: 1.5rem;
118 }
119}
120
121.blog-header-image {
122 height: 25vh;
123 object-fit: cover
124}
125
126/*************************************************************************************
127**************************************************************************************
128*************************** NEW CSS CODE IMPORTED FROM BLOG **************************
129**************************************************************************************
130**************************************************************************************/
131html {
132 scroll-behavior: smooth;
133}
134
135body {
136 font-family: 'IBM Plex Sans', sans-serif;
137 background-color: #161616;
138 color: #ccc;
139}
140
141h1,
142h2,
143h3,
144h4,
145h5,
146h6 {
147 color: white
148}
149
150pre,
151code {
152 font-family: 'IBM Plex Mono', monospace;
153}
154
155blockquote {
156 background: #202020;
157 border-left: 5px solid #dc3545;
158 margin: 1rem auto;
159 padding: 1rem 2rem;
160}
161
162/* CSS copy of IBM primary & tertiary button */
163.bx--btn-set {
164 display: flex
165}
166
167.bx--btn-set>.bx--btn {
168 width: 100%;
169 max-width: 12.25rem
170}
171
172.bx--btn--secondary.bx--btn--disabled+.bx--btn--primary.bx--btn--disabled,
173.bx--btn--tertiary.bx--btn--disabled+.bx--btn--danger.bx--btn--disabled {
174 box-shadow: -.0625rem 0 0 0 #8d8d8d
175}
176
177.bx--btn {
178 box-sizing: border-box;
179 font-size: 100%;
180 font-family: inherit;
181 vertical-align: initial;
182 border: 0;
183 font-size: .875rem;
184 font-weight: 400;
185 line-height: 1.125rem;
186 letter-spacing: .16px;
187 position: relative;
188 display: inline-flex;
189 flex-shrink: 0;
190 align-items: center;
191 justify-content: space-between;
192 max-width: 20rem;
193 min-height: 3rem;
194 margin: 0;
195 padding: calc(.875rem - 3px) 63px calc(.875rem - 3px) 15px;
196 text-align: left;
197 text-decoration: none;
198 vertical-align: top;
199 border-radius: 0;
200 outline: none;
201 cursor: pointer;
202 transition: all 70ms cubic-bezier(0, 0, .38, .9)
203}
204
205.bx--btn *,
206.bx--btn :after,
207.bx--btn :before {
208 box-sizing: inherit
209}
210
211.bx--btn.bx--btn--disabled,
212.bx--btn.bx--btn--disabled:focus,
213.bx--btn.bx--btn--disabled:hover,
214.bx--btn:disabled,
215.bx--btn:focus:disabled,
216.bx--btn:hover:disabled {
217 color: #8d8d8d;
218 background: #c6c6c6;
219 border-color: #c6c6c6;
220 box-shadow: none;
221 cursor: not-allowed
222}
223
224.bx--btn .bx--btn__icon {
225 position: absolute;
226 right: 1rem;
227 flex-shrink: 0;
228 width: 1rem;
229 height: 1rem
230}
231
232.bx--btn::-moz-focus-inner {
233 padding: 0;
234 border: 0
235}
236
237.bx--btn--primary {
238 color: #fff;
239 background-color: #0f62fe;
240 border: 1px solid transparent
241}
242
243.bx--btn--primary:hover {
244 background-color: #0353e9;
245}
246
247.bx--btn--primary:focus {
248 border-color: #0f62fe;
249 box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #161616
250}
251
252.bx--btn--primary:disabled:focus,
253.bx--btn--primary:disabled:hover,
254.bx--btn--primary:focus.bx--btn--disabled,
255.bx--btn--primary:hover.bx--btn--disabled {
256 color: #8d8d8d;
257 text-decoration: none;
258 background-color: #c6c6c6;
259 border-color: #c6c6c6;
260 box-shadow: none
261}
262
263.bx--btn--primary:active {
264 background-color: #002d9c
265}
266
267.bx--btn--primary .bx--btn__icon,
268.bx--btn--primary .bx--btn__icon path {
269 fill: currentColor
270}
271
272.bx--btn--primary:hover,
273.bx--btn--secondary {
274 color: #fff
275}
276
277.bx--btn--tertiary {
278 color: white;
279 background-color: transparent;
280 border: 1px solid #0f62fe
281}
282
283.bx--btn--tertiary:hover {
284 background-color: #0353e9
285}
286
287.bx--btn--tertiary:focus {
288 border-color: #0f62fe;
289 box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #161616
290}
291
292.bx--btn--tertiary:disabled:focus,
293.bx--btn--tertiary:disabled:hover,
294.bx--btn--tertiary:focus.bx--btn--disabled,
295.bx--btn--tertiary:hover.bx--btn--disabled {
296 color: #8d8d8d;
297 text-decoration: none;
298 background-color: #c6c6c6;
299 border-color: #c6c6c6;
300 box-shadow: none
301}
302
303.bx--btn--tertiary:active {
304 background-color: #002d9c
305}
306
307.bx--btn--tertiary .bx--btn__icon,
308.bx--btn--tertiary .bx--btn__icon path {
309 fill: currentColor
310}
311
312.bx--btn--tertiary:focus,
313.bx--btn--tertiary:hover {
314 color: #fff
315}
316
317.bx--btn--tertiary:focus {
318 background-color: #0f62fe
319}
320
321.bx--btn--tertiary:active {
322 border-color: transparent
323}
324
325.bx--btn--tertiary.bx--btn--disabled,
326.bx--btn--tertiary.bx--btn--disabled:focus,
327.bx--btn--tertiary.bx--btn--disabled:hover,
328.bx--btn--tertiary:disabled,
329.bx--btn--tertiary:focus:disabled,
330.bx--btn--tertiary:hover:disabled {
331 color: #c6c6c6;
332 background: transparent;
333 outline: none
334}
335
336.bx--btn--danger {
337 color: #fff;
338 background-color: #da1e28;
339 border: 1px solid transparent
340}
341
342.bx--btn--danger:hover {
343 background-color: #b81921
344}
345
346.bx--btn--danger:focus {
347 border-color: #0f62fe;
348 box-shadow: inset 0 0 0 1px #0f62fe, inset 0 0 0 2px #161616
349}
350
351.bx--btn--danger:disabled:focus,
352.bx--btn--danger:disabled:hover,
353.bx--btn--danger:focus.bx--btn--disabled,
354.bx--btn--danger:hover.bx--btn--disabled {
355 color: #8d8d8d;
356 text-decoration: none;
357 background-color: #c6c6c6;
358 border-color: #c6c6c6;
359 box-shadow: none
360}
361
362.bx--btn--danger:active {
363 background-color: #750e13
364}
365
366.bx--btn--danger .bx--btn__icon,
367.bx--btn--danger .bx--btn__icon path {
368 fill: currentColor
369}
370
371.bx--btn--danger:hover {
372 color: #fff
373}
374
375/* 'To Top' Button */
376.btn-to-top {
377 width: 3rem;
378 height: 3rem;
379 border-radius: 0;
380 background: #c6c6c6;
381 border-color: transparent;
382 position: fixed;
383 bottom: 0;
384 right: 0;
385 transition: all .11s;
386 cursor: pointer;
387 z-index: 9000;
388 color: #161616;
389}
390
391.btn-to-top:focus {
392 outline: none;
393 border: 2px solid #0f62fe;
394}
395
396#icon-to-top {
397 fill: #161616;
398}
399
400/* Banner */
401.banner {
402 color: black;
403 position: fixed;
404 top: 0;
405 width: 100%;
406 z-index: 6000;
407 display: flex;
408 align-items: center;
409 justify-content: flex-start;
410 height: 32px;
411 padding-left: 1rem;
412 background: #dc3545;
413}
414
415.banner p {
416 color: black;
417 font-weight: bold;
418 font-size: .875rem;
419 line-height: 1.125rem;
420 letter-spacing: .16px;
421}
422
423.banner a {
424 color: black;
425 text-decoration: underline;
426 font-size: .875rem;
427 line-height: 1.125rem;
428 letter-spacing: .16px;
429}
430
431/* Navbar */
432.navbar {
433 background-color: #161616;
434 border-bottom: 1px solid #3d3d3d;
435 height: 48px;
436 padding: 0;
437 top: 32px;
438 z-index: 10;
439}
440
441.nav-item:hover {
442 background: #3b3b3b;
443}
444
445.nav-item a:focus {
446 outline: 2px solid #fff;
447 outline-offset: -2px;
448}
449
450.nav-link {
451 padding: 0.75rem !important;
452}
453
454.navbar-brand {
455 font-size: 1rem;
456 margin-left: 1rem;
457}
458
459.navbar-brand span {
460 color: #dc3545;
461}
462
463.navbar .form-inline input,
464.navbar .form-inline button {
465 border-radius: 0;
466}
467
468.navbar .form-control {
469 background-color: #202020;
470 border-color: #3b3b3b;
471 border-radius: 0rem;
472 color: white
473}
474
475.navbar .form-control:focus {
476 box-shadow: inset 0 0 0 .2rem rgba(220, 53, 69, .25)
477}
478
479.navbar .form-inline .nav-link:hover {
480 background: #3b3b3b;
481}
482
483#search-form {
484 flex-flow: row;
485}
486
487#icon-side-menu,
488#icon-menu,
489#icon-search {
490 fill: #ccc;
491}
492
493/* Sidenav */
494#icon-external-link {
495 fill: #ccc;
496 float: right;
497}
498
499.sidebar {
500 background-color: #161616;
501 border-right: 1px solid #3d3d3d;
502 min-height: calc(100vh - 80px);
503 position: fixed;
504 top: 80px;
505 z-index: 9;
506}
507
508.sidebar-box {
509 display: flex;
510 flex-direction: column;
511 justify-content: space-between;
512 min-height: calc(100vh - 80px);
513 padding: 1rem;
514}
515
516.actions,
517.categories,
518.meta {
519 padding: 0;
520 padding-top: 1rem;
521}
522
523.actions li,
524.categories li,
525.meta li {
526 padding: 0;
527 margin: 0;
528 position: relative;
529 list-style: none;
530}
531
532.actions li a,
533.categories li a,
534.meta li a {
535 color: #D8D8D8;
536 text-decoration: none;
537 display: block;
538 font-size: 0.875rem;
539 padding: 0.5rem 1.5rem;
540 background: none;
541 border: none;
542 text-align: left;
543 width: 100%;
544}
545
546.actions li p,
547.categories li p,
548.meta li p {
549 margin: 0;
550 padding: 0.5rem 1.5rem;
551}
552
553.actions li a.active,
554.categories li a.active,
555.meta li a.active {
556 background: #cd3545;
557}
558
559.actions li a:hover,
560.categories li a:hover,
561.meta li a:hover {
562 background-color: #565656 !important;
563 color: #F3F3F3;
564}
565
566.actions li a.active:hover,
567.categories li a.active:hover,
568.meta li a.active:hover {
569 background: #b50415;
570}
571
572.actions li a:focus,
573.categories li a:focus,
574.meta li a:focus {
575 outline: 2px solid #fff;
576 outline-offset: -2px;
577}
578
579.sidebar-box .btn {
580 border-radius: 0rem;
581 margin-left: 0.25rem;
582 margin-right: 0.25rem
583}
584
585.sidebar-divider {
586 display: block;
587 margin: 0 1rem;
588 border-style: solid;
589 border-bottom: none;
590 border-color: #393939;
591}
592
593/* Main container */
594.main {
595 padding: 4rem;
596 top: 4rem;
597}
598
599@media (max-width: 576px) {
600 .main {
601 padding: 2rem;
602 }
603}
604
605.homepage--dots {
606 position: fixed;
607 z-index: -1;
608 width: 100%;
609 height: 100%;
610 background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16' xml:space='preserve'%3E%3Crect width='16' fill='none' height='16'/%3E%3Crect x='0' y='0' fill='white' width='1' height='1'/%3E%3C/svg%3E");
611 background-size: 16px;
612 opacity: .35;
613 top: 0;
614 left: 0;
615}
616
617/* IBM Carbon Notifications */
618.bx--toast-notification {
619 box-sizing: border-box;
620 font-size: 100%;
621 font-family: inherit;
622 vertical-align: initial;
623 border: 0;
624 display: flex;
625 width: 100%;
626 height: auto;
627 margin: .5rem 1rem .5rem 0;
628 padding: 0 0 0 .875rem;
629 color: #fff;
630 box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2)
631}
632
633.bx--toast-notification a {
634 text-decoration: underline;
635}
636
637.bx--toast-notification *,
638.bx--toast-notification :after,
639.bx--toast-notification :before {
640 box-sizing: inherit
641}
642
643.bx--toast-notification:first-child {
644 margin-top: 1rem
645}
646
647.bx--toast-notification:not(.bx--toast-notification--low-contrast) a {
648 color: #78a9ff
649}
650
651.bx--toast-notification a:hover {
652 text-decoration: underline
653}
654
655.bx--toast-notification a:focus {
656 outline: 1px solid #78a9ff
657}
658
659.bx--toast-notification.bx--toast-notification--low-contrast a:focus {
660 outline: 1px solid #0f62fe
661}
662
663.bx--toast-notification--low-contrast {
664 color: #161616
665}
666
667.bx--toast-notification--error {
668 background: #393939;
669 border-left: 3px solid #fa4d56
670}
671
672.bx--toast-notification--error .bx--inline-notification__icon,
673.bx--toast-notification--error .bx--toast-notification__icon {
674 fill: #fa4d56
675}
676
677.bx--toast-notification--success {
678 background: #393939;
679 border-left: 3px solid #42be65
680}
681
682.bx--toast-notification--success .bx--inline-notification__icon,
683.bx--toast-notification--success .bx--toast-notification__icon {
684 fill: #42be65
685}
686
687.bx--toast-notification--info,
688.bx--toast-notification--info-square {
689 background: #393939;
690 /* border-left: 3px solid #4589ff */
691 border-left: 3px solid #f1c21b
692}
693
694.bx--toast-notification--info-square .bx--inline-notification__icon,
695.bx--toast-notification--info-square .bx--toast-notification__icon,
696.bx--toast-notification--info .bx--inline-notification__icon,
697.bx--toast-notification--info .bx--toast-notification__icon {
698 /* fill: #4589ff */
699 fill: #f1c21b
700}
701
702.bx--toast-notification--warning,
703.bx--toast-notification--warning-alt {
704 background: #393939;
705 border-left: 3px solid #f1c21b
706}
707
708.bx--toast-notification--warning-alt .bx--inline-notification__icon,
709.bx--toast-notification--warning-alt .bx--toast-notification__icon,
710.bx--toast-notification--warning .bx--inline-notification__icon,
711.bx--toast-notification--warning .bx--toast-notification__icon {
712 fill: #f1c21b
713}
714
715.bx--toast-notification--warning .bx--toast-notification__icon path[opacity="0"] {
716 opacity: 1;
717 fill: #000
718}
719
720.bx--toast-notification__icon {
721 flex-shrink: 0;
722 margin-top: .875rem;
723 margin-right: .875rem
724}
725
726.bx--toast-notification__details {
727 margin-right: 1rem
728}
729
730.bx--toast-notification__close-button {
731 outline: 2px solid transparent;
732 outline-offset: -2px;
733 display: flex;
734 flex-direction: column;
735 align-items: center;
736 justify-content: center;
737 width: 3rem;
738 min-width: 3rem;
739 height: 3rem;
740 min-height: 3rem;
741 margin-left: auto;
742 padding: 0;
743 background-color: initial;
744 border: none;
745 cursor: pointer;
746 transition: outline .11s, background-color .11s
747}
748
749.bx--toast-notification__close-button:focus {
750 outline: 2px solid #fff;
751 outline-offset: -2px
752}
753
754.bx--toast-notification__close-button .bx--toast-notification__close-icon {
755 fill: #fff
756}
757
758.bx--toast-notification__title {
759 font-size: .875rem;
760 font-weight: 600;
761 line-height: 1.125rem;
762 letter-spacing: .16px;
763 margin-top: 1rem;
764 font-weight: 600;
765 word-break: break-word
766}
767
768.bx--toast-notification__subtitle {
769 font-size: .875rem;
770 font-weight: 400;
771 line-height: 1.125rem;
772 letter-spacing: .16px;
773 margin-top: 0;
774 margin-bottom: 1.5rem;
775 color: #fff;
776 word-break: break-word
777}
778
779.bx--toast-notification--low-contrast .bx--toast-notification__subtitle {
780 color: #161616
781}
782
783.bx--toast-notification__caption {
784 font-size: .875rem;
785 font-weight: 400;
786 line-height: 1.125rem;
787 letter-spacing: .16px;
788 margin-bottom: 1rem;
789 color: #fff
790}
791
792.bx--toast-notification--low-contrast .bx--toast-notification__caption {
793 color: #161616
794}