Mercurial > nebulaweb3

comparison default/assets/scss/layout/_content.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2 /********************************
3 *********************************
4 Content Area
5 *********************************
6 *********************************/
7 .widget-bg { border: 0 !important; }
8
9 .jqstooltip{
10 box-sizing: content-box;
11 }
12
13 .dropdown-toggle::after {
14 display: none;
15 }
16
17 ul.wysihtml5-toolbar {
18 display: flex;
19 flex-wrap: wrap;
20 }
21
22 .wysihtml5-toolbar {
23 .dropdown {
24 .dropdown-menu {
25 box-shadow: 0 6px 12px rgba(0,0,0,.175);
26 li {
27 a {
28 display: block;
29 width: 100%;
30 padding: em(5) 1.42857em;
31 color: #888;
32
33 &:hover,
34 &:focus {
35 color: #514d6a;
36 background: #f7fafc;
37 }
38 }
39 }
40 }
41 }
42
43 .btn-default:active {
44 color: #555;
45 background-color: #d6dadf;
46 border-color: #d6dadf;
47 }
48
49 .btn {
50 cursor: pointer;
51 span{
52 &::before,
53 &::after {
54 font-family: "FontAwesome";
55 display: block;
56 line-height: 1;
57 font-style: normal;
58 font-size: em(18,15);
59 font-weight: 300;
60 display: inline;
61 vertical-align: middle;
62 }
63 }
64
65 .glyphicon-font::before {
66 content: "\f031";
67 vertical-align: baseline;
68 }
69
70 .glyphicon-quote::before {
71 display: none;
72 }
73
74 .glyphicon-quote::after {
75 content: "\f10d";
76 }
77
78 .glyphicon-list::before {
79 content: "\f03a";
80 }
81
82 .glyphicon-th-list::before {
83 content: "\f00b";
84 }
85
86 .glyphicon-indent-right::before {
87 content: "\f03b";
88 }
89
90 .glyphicon-indent-left::before {
91 content: "\f03c";
92 }
93
94 .glyphicon-share::before {
95 content: "\f045";
96 }
97
98 .glyphicon-picture::before {
99 content: "\f03e";
100 }
101 }
102 }
103
104 .search-results {
105 .form-control { box-shadow: none; }
106 .col-md-3 {
107 h5 {
108 letter-spacing: 0.2rem;
109 opacity: .8;
110 }
111 }
112 }
113
114
115 /* Bootstrap UI
116 ========================*/
117 .badge {
118 &.up {
119 position: absolute;
120 top: rem(10);
121 right: rem(4);
122 }
123 }
124
125 .badge-sm {
126 font-size: rem(11);
127 padding: rem(2) rem(5);
128 }
129
130 .badge-border {
131 background: transparent !important;
132 border-width: 2px;
133 border-style: solid;
134 padding: rem(3) rem(6);
135 border-radius: 200px;
136 color: $color-scheme;
137 font-weight: 700;
138
139 &.bg-color-scheme { color: $color-scheme; }
140 &.bg-primary { color: $primary; }
141 &.bg-danger { color: $danger; }
142 &.bg-warning { color: $warning; }
143 &.bg-success { color: $success; }
144 &.bg-info { color: $info; }
145 &.bg-facebook { color: map-get($colors, facebook); }
146 &.bg-twitter { color: map-get($colors, twitter); }
147 &.bg-googleplus { color: map-get($colors, googleplus); }
148 &.bg-linkedin { color: map-get($colors, linkedin); }
149 &.bg-instagram { color: map-get($colors, instagram); }
150 &.bg-pinterest { color: map-get($colors, pinterest); }
151 &.bg-dribbble { color: map-get($colors, dribbble); }
152 &.bg-youtube { color: map-get($colors, youtube); }
153 &.badge-border-inverted { color: #fff; }
154 }
155
156 /* Basic Icons Styles
157 ========================*/
158 .icons-page .main-wrapper {
159 .material-icons { font-size: em(48); }
160
161 .fa { font-size: em(36); }
162
163 [class^="feather-"],
164 [class*=" feather-"] {
165 font-size: em(36);
166 }
167
168 .linea {
169 font-size: em(36);
170 vertical-align: bottom;
171 }
172
173 .col-md-2,
174 .col-md-3 {
175 cursor: pointer;
176 opacity: .7;
177 margin: em(20) 0;
178 &:hover {
179 opacity: 1;
180 }
181 }
182
183 .social-icons {
184 font-size: em(60);
185 }
186
187 .wi {
188 font-size: em(40);
189 }
190 }
191
192 .list-icon {
193 &.pull-left {
194 margin-right: rem(7);
195 }
196 &.pull-right {
197 margin-left: rem(5);
198 }
199 }
200
201
202 /* Page Title Area
203 ========================*/
204 .page-title {
205 height: em(62);
206 line-height: em(62);
207 margin: 0 em(-30);
208 padding: 0 em(30);
209 border-bottom: 1px solid $theme-border-color;
210 position: relative;
211 background: white;
212
213 .page-title-left {
214 flex: 1;
215 }
216
217 .page-title-right {
218 .btn {
219 color: #fff;
220 }
221 }
222
223 .header-light &,
224 .sidebar-horizontal & {
225 background: transparent;
226 }
227
228 .page-title-description,
229 .page-title-heading {
230 display: inline-block;
231 letter-spacing: -0.08em;
232 font-family: $headings-font-family;
233 }
234
235 .page-title-description {
236 font-size: $font-size-base;
237 font-weight: 400;
238 }
239
240 ol {
241 line-height: em(62);
242 margin: 0;
243 padding: 0;
244 background: transparent;
245 display: inline-block;
246 }
247 }
248
249 /* Breadcrumbs */
250 .breadcrumb {
251 font-weight: 300;
252 letter-spacing: -.06em;
253
254 a {
255 color: $nav-sub-link-color;
256 &:hover { color: #000; }
257 }
258
259 > .active {
260 color: $color-scheme;
261 }
262
263 body.rtl & {
264 direction: ltr;
265 text-align: right;
266 }
267 }
268
269
270
271 /* Widget Boxes
272 ========================*/
273 .widget-list {
274 // margin-top: $widget-list-margin-top;
275 // margin-bottom: $widget-list-margin-bottom;
276
277 .page-title + & {
278 margin-top: $wrapper-top-padding;
279 }
280
281 &.widget-list-full-width {
282 @include margin(null #{-$wrapper-pd-x});
283 }
284 }
285
286 .widget-holder {
287 margin-bottom: $grid-gutter-width;
288 &.widget-full-content {
289 .widget-body {
290 padding: 0;
291 }
292 }
293 &.widget-no-padding {
294 .widget-body {
295 padding: 0;
296 }
297 }
298 &.widget-full-height {
299 display: flex;
300 .widget-bg-transparent,
301 .widget-bg {
302 flex: 1;
303 width: 100%;
304 }
305 }
306 &.widget-flex {
307 display: flex;
308 .widget-bg-transparent,
309 .widget-bg {
310 display: flex;
311 flex-flow: column;
312 }
313 .widget-body {
314 display: flex;
315 flex-flow: column;
316 flex: 1;
317 }
318 }
319 &.widget-sm {
320 .widget-heading {
321 padding: em(13) em(20) em(13) em(20);
322 border-bottom: 1px solid $theme-border-color;
323 color: $text-muted;
324 }
325 }
326 &.widget-border-radius {
327 &, .widget-heading {
328 border-top-left-radius: 3px;
329 border-top-right-radius: 3px;
330 }
331 }
332 }
333 .widget-bg {
334 background: $widget-bg;
335 width: 100%;
336 .widget-heading + & {
337 border-top: 0;
338 }
339 }
340
341 .widget-body {
342 padding: $widget-padding-y $widget-padding-x;
343 > .full-row {
344 margin-left: em(-$widget-padding-x);
345 margin-right: em(-$widget-padding-x);
346 }
347 }
348
349 .box-title,
350 .widget-heading h5,
351 .widget-heading .widget-title {
352 font-family: $headings-font-family;
353 line-height: em(30,15);
354 margin: 0;
355 letter-spacing: -.05em;
356 font-weight: 500;
357 line-height: 1.5;
358 flex: 1;
359
360 small {
361 font-weight: 400;
362 text-transform: none;
363 }
364 }
365
366 .box-title {
367 margin-bottom: rem(20);
368 }
369
370 .widget-heading {
371 display: flex;
372 align-items: center;
373 position: relative;
374
375 h5 {
376 float: left;
377 margin: 0;
378 }
379
380 .widget-bg & {
381 padding: #{$widget-padding-y} #{$widget-padding-x} 0;
382 }
383
384 .widget-bg &[class*='bg-'] {
385 .widget-title {
386 color: #fff;
387 }
388 }
389
390 &.widget-heading-border {
391 min-height: rem(75);
392 display: flex;
393 align-items: flex-end;
394 @include margin(null $widget-padding-y);
395 @include padding(0 0 em(15));
396 border-bottom: 1px solid $theme-border-color;
397 }
398
399 [class*=bg-] &.widget-heading-border {
400 border-color: rgba(255,255,255,.2);
401 }
402 }
403
404 .widget-graph-info {
405 float: right;
406
407 .arrow-icon {
408 position: relative;
409 &:after {
410 font-family: 'feather';
411 content: '\e931';
412 @include position(absolute, 50% 50% null null);
413 transform: translateY(-50%) translateX(50%);
414 font-size: 1.3em;
415 color: inherit;
416 }
417 }
418 }
419
420 .widget-heading-icon {
421 float: right;
422 font-size: rem(18);
423 color: $gray-200;
424
425 .widget-bg .widget-heading[class*='bg-'] & {
426 color: #fff;
427 background: rgba(255,255,255,0.1);
428 @include position(absolute, 0 0 0 null);
429 display: flex;
430 justify-content: center;
431 align-items: center;
432 @include padding(null rem(15));
433
434 body.rtl & {
435 right: auto;
436 left: 0;
437 }
438 }
439 }
440
441 .widget-actions {
442 margin: em(5) 0 0;
443 float: right;
444
445 > li { display: inline-block; }
446 > li > a {
447 color: #333;
448 .list-icon {
449 position: relative;
450 top: rem(-2);
451 }
452 }
453
454 .list-icon {
455 vertical-align: middle;
456 font-size: em(18,13);
457 }
458
459 .dropdown-menu {
460 left: auto;
461 right: 0;
462 padding-top: em(10);
463 }
464
465 @include tablet {
466 float: left;
467 }
468 }
469
470
471
472 /* Full Width BG Pages
473 ========================*/
474 .body-bg-full {
475 background-position: center;
476 background-repeat: no-repeat;
477 background-attachment: fixed;
478 background-size: cover;
479 height: 100%;
480 overflow: hidden;
481
482 .wrapper,
483 #app {
484 margin: 0;
485 display: table;
486 width: 100%;
487 height: 100%;
488 overflow: hidden;
489 }
490
491 .content-wrapper {
492 padding: em(24);
493 display: table-cell;
494 text-align: center;
495 vertical-align: middle;
496 min-height: auto;
497 width: 25rem;
498 }
499
500 .main-wrapper {
501 background: transparent;
502 max-width: 30rem;
503 margin: 0 auto;
504 }
505 }
506
507 .error-page,
508 .profile-page {
509 .page-title {
510 height: auto;
511 margin: 0;
512 padding: 0;
513 background: transparent;
514 border: 0;
515 }
516 }
517
518 .profile-page {
519 overflow: visible;
520
521 h2 {
522 letter-spacing: -3px;
523 }
524
525 .navbar-header {
526 float: none;
527 width: auto;
528 }
529
530 .login-links {
531 margin-top: em(40,16);
532 font-size: em(16);
533 font-weight: 300;
534 opacity: .8;
535 }
536 }
537
538 .error-page {
539
540 h1 {
541 font-size: rem(120);
542 font-weight: 600;
543 text-shadow: 4px 4px 0 $color-scheme-dark, 6px 6px 0 #fff;
544 margin: 0 0 em(24,120);
545 letter-spacing: em(-7,120);
546 }
547
548 h3 {
549 letter-spacing: em(-1,24);
550 }
551 }
552
553
554
555 /* Search Results Page
556 ========================*/
557 .search-listing {
558 > li {
559 border-bottom: 1px solid #eee;
560 padding: em(10) 0;
561 }
562
563 img {
564 width: em(150);
565 }
566
567 h5 {
568 font-weight: 300;
569 margin-bottom: em(5,18);
570 // margin-top: em(20,18);
571
572 a { color: $info; }
573 a:hover { text-decoration: underline; }
574 }
575
576 .media-body {
577 h5 { margin-top: em(5,18); }
578 }
579
580 p {
581 margin-top: em(5);
582 }
583 }
584
585
586
587
588
589
590 /* Notifications / Alerts
591 ========================*/
592 .alert {
593 position: relative;
594 .close {
595 color: inherit;
596 opacity: .7;
597
598 &:focus,
599 &:hover {
600 color: #000;
601 opacity: .9;
602 }
603 }
604 }
605
606 .alert-icon {
607 padding-left: em(50);
608
609 i {
610 position: absolute;
611 left: 5px;
612 height: em(50,24);
613 width: em(50,24);
614 text-align: center;
615 top: 5px;
616 line-height: em(50,24);
617 }
618 }
619
620 /* Sweet Alerts */
621 .swal2-modal {
622 padding: em(40) !important;
623
624 .swal2-title {
625 font-family: $tertiary-font-family;
626 font-weight: 400;
627 }
628
629 .swal2-content {
630 font-size: em(16);
631 color: #8d9ea7;
632 }
633
634 .btn {
635 min-width: em(150,18);
636 border-radius: 3px;
637 margin: em(10,18) em(5,18) 0;
638 border: none!important;
639 padding: em(5,18) em(20,18);
640 font-size: em(18);
641 display: inline;
642 }
643 }
644
645 /* Toastr */
646 body {
647 .jq-toast-single {
648 border-radius: 0;
649 background-color: #313a46;
650 font-family: $font-family-base;
651 font-size: em(13);
652 line-height: em(22,13);
653
654 h2 {
655 font-family: $headings-font-family;
656 font-size: em(14,13);
657 font-weight: 700;
658 }
659 }
660
661 .jq-toast-heading {
662 font-family: $headings-font-family;
663 }
664
665 .jq-icon-info {
666 background-color: $info;
667 color: #fff;
668 }
669 .jq-icon-success {
670 background-color: $success;
671 color: #fff;
672 }
673 .jq-icon-error {
674 background-color: $danger;
675 color: #fff;
676 }
677 .jq-icon-warning {
678 background-color: $warning;
679 color: #fff;
680 }
681
682 .close-jq-toast-single {
683 background: #313a46;
684 color: #fff;
685 border-radius: 50%;
686 height: em(32,20);
687 width: em(32,20);
688 line-height: em(32,20);
689 text-align: center;
690 top: em(-12,20);
691 right: em(-12,20);
692 font-size: em(20,13);
693
694 &:hover { background: #666; }
695 }
696 }
697
698
699
700 /* Progress Bars
701 ========================*/
702 .progress {
703 -webkit-box-shadow: none !important;
704 box-shadow: none !important;
705 background-color: rgba(120, 130, 140, 0.13);
706 height: em(4,12);
707 border-radius: 0px;
708 margin-bottom: em(18,12);
709 overflow: hidden;
710 }
711
712 .progress-bar {
713 box-shadow: none;
714 font-size: em(8,12);
715 font-weight: 600;
716 line-height: em(12,8);
717 }
718
719 .progress-vertical,
720 .progress-vertical-top {
721 min-height: em(250,12);
722 height: em(250,12);
723 width: em(4,12);
724 position: relative;
725 display: inline-block;
726 margin-bottom: 0;
727 margin-right: em(20,12);
728
729 .progress-bar {
730 width: 100%;
731 position: absolute;
732 bottom: 0;
733 }
734
735 &.progress-sm {
736 margin: 0;
737 margin-right: rem(20);
738 width: rem(8)
739 }
740
741 &.progress-md {
742 width: rem(15);
743 }
744
745 &.progress-lg {
746 width: rem(20);
747 }
748 }
749
750 .progress-vertical-top {
751 .progress-bar {
752 bottom: auto;
753 }
754 }
755
756 .progress-sm {
757 height: rem(8) !important;
758
759 .progress-bar {
760 font-size: rem(8);
761 line-height: rem(8);
762 }
763 }
764
765 .progress-md {
766 height: rem(15) !important;
767
768 .progress-bar {
769 font-size: rem(11);
770 line-height: rem(15);
771 }
772 }
773
774 .progress-lg {
775 height: rem(20) !important;
776
777 .progress-bar {
778 font-size: rem(12);
779 line-height: rem(20);
780 }
781 }
782
783
784 /* Other Plugin Overrides
785 ========================*/
786 .main-wrapper .dropify-wrapper {
787 &, .dropify-preview {
788 padding-top: 0;
789 padding-bottom: 0;
790 }
791 }
792
793 /* Profile Pages
794 ========================*/
795 .container-min-full-height {
796 min-height: 100vh;
797 }
798
799 .container-max-full-height {
800 max-height: 100vh;
801 }
802
803 .login-center {
804 background: #fff;
805 min-width: rem(500);
806 padding: em(30) em(50);
807 border-radius: 5px;
808 margin: em(40) 0;
809 @include mobile { width: 80vw }
810 }
811
812 .login-right,
813 .login-left {
814 display: flex;
815 flex-direction: column;
816 align-items: center;
817 justify-content: center;
818 }
819
820 .login-left {
821 background: #fff;
822
823 .form-group {
824 margin-bottom: 2rem;
825 }
826
827 input[type="text"],
828 input[type="email"],
829 input[type="password"] {
830 text-align: center;
831 font-size: em(18,15);
832 border: 0;
833 letter-spacing: -1px;
834 font-family: $headings-font-family;
835 font-weight: 500;
836 color: $headings-color;
837 padding: 0 0 .9em;
838
839 background-color: rgba(0, 0, 0, 0);
840 background-position: center bottom, center calc(99%);
841 background-repeat: no-repeat;
842 background-size: 0 2px, 100% 3px;
843 transition: background 0s ease-out 0s;
844 background-image: linear-gradient($color-scheme, $color-scheme), linear-gradient($theme-border-color, $theme-border-color);
845
846 &:focus {
847 background-size: 100% 2px, 100% 3px;
848 outline: 0 none;
849 transition-duration: 0.3s;
850 }
851 }
852
853 label {
854 letter-spacing: 1px;
855 }
856 }
857
858 .login-right {
859 background-position: right;
860 background-repeat: no-repeat;
861 background-attachment: fixed;
862 background-size: cover;
863 position: relative;
864
865 font-size: em(18,15);
866 line-height: em(28,15);
867
868 .list-inline-item:not(:last-child) {
869 margin-right: 10px;
870 }
871 }