Mercurial > nebulaweb3
diff default/assets/scss/layout/_content.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/assets/scss/layout/_content.scss Sat May 31 09:21:51 2025 +0800 @@ -0,0 +1,871 @@ +// main: ../style.scss +/******************************** +********************************* +Content Area +********************************* +*********************************/ +.widget-bg { border: 0 !important; } + +.jqstooltip{ + box-sizing: content-box; +} + +.dropdown-toggle::after { + display: none; +} + +ul.wysihtml5-toolbar { + display: flex; + flex-wrap: wrap; +} + +.wysihtml5-toolbar { + .dropdown { + .dropdown-menu { + box-shadow: 0 6px 12px rgba(0,0,0,.175); + li { + a { + display: block; + width: 100%; + padding: em(5) 1.42857em; + color: #888; + + &:hover, + &:focus { + color: #514d6a; + background: #f7fafc; + } + } + } + } + } + + .btn-default:active { + color: #555; + background-color: #d6dadf; + border-color: #d6dadf; + } + + .btn { + cursor: pointer; + span{ + &::before, + &::after { + font-family: "FontAwesome"; + display: block; + line-height: 1; + font-style: normal; + font-size: em(18,15); + font-weight: 300; + display: inline; + vertical-align: middle; + } + } + + .glyphicon-font::before { + content: "\f031"; + vertical-align: baseline; + } + + .glyphicon-quote::before { + display: none; + } + + .glyphicon-quote::after { + content: "\f10d"; + } + + .glyphicon-list::before { + content: "\f03a"; + } + + .glyphicon-th-list::before { + content: "\f00b"; + } + + .glyphicon-indent-right::before { + content: "\f03b"; + } + + .glyphicon-indent-left::before { + content: "\f03c"; + } + + .glyphicon-share::before { + content: "\f045"; + } + + .glyphicon-picture::before { + content: "\f03e"; + } + } +} + +.search-results { + .form-control { box-shadow: none; } + .col-md-3 { + h5 { + letter-spacing: 0.2rem; + opacity: .8; + } + } +} + + +/* Bootstrap UI +========================*/ +.badge { + &.up { + position: absolute; + top: rem(10); + right: rem(4); + } +} + +.badge-sm { + font-size: rem(11); + padding: rem(2) rem(5); +} + +.badge-border { + background: transparent !important; + border-width: 2px; + border-style: solid; + padding: rem(3) rem(6); + border-radius: 200px; + color: $color-scheme; + font-weight: 700; + + &.bg-color-scheme { color: $color-scheme; } + &.bg-primary { color: $primary; } + &.bg-danger { color: $danger; } + &.bg-warning { color: $warning; } + &.bg-success { color: $success; } + &.bg-info { color: $info; } + &.bg-facebook { color: map-get($colors, facebook); } + &.bg-twitter { color: map-get($colors, twitter); } + &.bg-googleplus { color: map-get($colors, googleplus); } + &.bg-linkedin { color: map-get($colors, linkedin); } + &.bg-instagram { color: map-get($colors, instagram); } + &.bg-pinterest { color: map-get($colors, pinterest); } + &.bg-dribbble { color: map-get($colors, dribbble); } + &.bg-youtube { color: map-get($colors, youtube); } + &.badge-border-inverted { color: #fff; } +} + +/* Basic Icons Styles +========================*/ +.icons-page .main-wrapper { + .material-icons { font-size: em(48); } + + .fa { font-size: em(36); } + + [class^="feather-"], + [class*=" feather-"] { + font-size: em(36); + } + + .linea { + font-size: em(36); + vertical-align: bottom; + } + + .col-md-2, + .col-md-3 { + cursor: pointer; + opacity: .7; + margin: em(20) 0; + &:hover { + opacity: 1; + } + } + + .social-icons { + font-size: em(60); + } + + .wi { + font-size: em(40); + } +} + +.list-icon { + &.pull-left { + margin-right: rem(7); + } + &.pull-right { + margin-left: rem(5); + } +} + + +/* Page Title Area +========================*/ +.page-title { + height: em(62); + line-height: em(62); + margin: 0 em(-30); + padding: 0 em(30); + border-bottom: 1px solid $theme-border-color; + position: relative; + background: white; + + .page-title-left { + flex: 1; + } + + .page-title-right { + .btn { + color: #fff; + } + } + + .header-light &, + .sidebar-horizontal & { + background: transparent; + } + + .page-title-description, + .page-title-heading { + display: inline-block; + letter-spacing: -0.08em; + font-family: $headings-font-family; + } + + .page-title-description { + font-size: $font-size-base; + font-weight: 400; + } + + ol { + line-height: em(62); + margin: 0; + padding: 0; + background: transparent; + display: inline-block; + } +} + +/* Breadcrumbs */ +.breadcrumb { + font-weight: 300; + letter-spacing: -.06em; + + a { + color: $nav-sub-link-color; + &:hover { color: #000; } + } + + > .active { + color: $color-scheme; + } + + body.rtl & { + direction: ltr; + text-align: right; + } +} + + + +/* Widget Boxes +========================*/ +.widget-list { + // margin-top: $widget-list-margin-top; + // margin-bottom: $widget-list-margin-bottom; + + .page-title + & { + margin-top: $wrapper-top-padding; + } + + &.widget-list-full-width { + @include margin(null #{-$wrapper-pd-x}); + } +} + +.widget-holder { + margin-bottom: $grid-gutter-width; + &.widget-full-content { + .widget-body { + padding: 0; + } + } + &.widget-no-padding { + .widget-body { + padding: 0; + } + } + &.widget-full-height { + display: flex; + .widget-bg-transparent, + .widget-bg { + flex: 1; + width: 100%; + } + } + &.widget-flex { + display: flex; + .widget-bg-transparent, + .widget-bg { + display: flex; + flex-flow: column; + } + .widget-body { + display: flex; + flex-flow: column; + flex: 1; + } + } + &.widget-sm { + .widget-heading { + padding: em(13) em(20) em(13) em(20); + border-bottom: 1px solid $theme-border-color; + color: $text-muted; + } + } + &.widget-border-radius { + &, .widget-heading { + border-top-left-radius: 3px; + border-top-right-radius: 3px; + } + } +} +.widget-bg { + background: $widget-bg; + width: 100%; + .widget-heading + & { + border-top: 0; + } +} + +.widget-body { + padding: $widget-padding-y $widget-padding-x; + > .full-row { + margin-left: em(-$widget-padding-x); + margin-right: em(-$widget-padding-x); + } +} + +.box-title, +.widget-heading h5, +.widget-heading .widget-title { + font-family: $headings-font-family; + line-height: em(30,15); + margin: 0; + letter-spacing: -.05em; + font-weight: 500; + line-height: 1.5; + flex: 1; + + small { + font-weight: 400; + text-transform: none; + } +} + +.box-title { + margin-bottom: rem(20); +} + +.widget-heading { + display: flex; + align-items: center; + position: relative; + + h5 { + float: left; + margin: 0; + } + + .widget-bg & { + padding: #{$widget-padding-y} #{$widget-padding-x} 0; + } + + .widget-bg &[class*='bg-'] { + .widget-title { + color: #fff; + } + } + + &.widget-heading-border { + min-height: rem(75); + display: flex; + align-items: flex-end; + @include margin(null $widget-padding-y); + @include padding(0 0 em(15)); + border-bottom: 1px solid $theme-border-color; + } + + [class*=bg-] &.widget-heading-border { + border-color: rgba(255,255,255,.2); + } +} + +.widget-graph-info { + float: right; + + .arrow-icon { + position: relative; + &:after { + font-family: 'feather'; + content: '\e931'; + @include position(absolute, 50% 50% null null); + transform: translateY(-50%) translateX(50%); + font-size: 1.3em; + color: inherit; + } + } +} + +.widget-heading-icon { + float: right; + font-size: rem(18); + color: $gray-200; + + .widget-bg .widget-heading[class*='bg-'] & { + color: #fff; + background: rgba(255,255,255,0.1); + @include position(absolute, 0 0 0 null); + display: flex; + justify-content: center; + align-items: center; + @include padding(null rem(15)); + + body.rtl & { + right: auto; + left: 0; + } + } +} + +.widget-actions { + margin: em(5) 0 0; + float: right; + + > li { display: inline-block; } + > li > a { + color: #333; + .list-icon { + position: relative; + top: rem(-2); + } + } + + .list-icon { + vertical-align: middle; + font-size: em(18,13); + } + + .dropdown-menu { + left: auto; + right: 0; + padding-top: em(10); + } + + @include tablet { + float: left; + } +} + + + +/* Full Width BG Pages +========================*/ +.body-bg-full { + background-position: center; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + height: 100%; + overflow: hidden; + + .wrapper, + #app { + margin: 0; + display: table; + width: 100%; + height: 100%; + overflow: hidden; + } + + .content-wrapper { + padding: em(24); + display: table-cell; + text-align: center; + vertical-align: middle; + min-height: auto; + width: 25rem; + } + + .main-wrapper { + background: transparent; + max-width: 30rem; + margin: 0 auto; + } +} + +.error-page, +.profile-page { + .page-title { + height: auto; + margin: 0; + padding: 0; + background: transparent; + border: 0; + } +} + +.profile-page { + overflow: visible; + + h2 { + letter-spacing: -3px; + } + + .navbar-header { + float: none; + width: auto; + } + + .login-links { + margin-top: em(40,16); + font-size: em(16); + font-weight: 300; + opacity: .8; + } +} + +.error-page { + + h1 { + font-size: rem(120); + font-weight: 600; + text-shadow: 4px 4px 0 $color-scheme-dark, 6px 6px 0 #fff; + margin: 0 0 em(24,120); + letter-spacing: em(-7,120); + } + + h3 { + letter-spacing: em(-1,24); + } +} + + + +/* Search Results Page +========================*/ +.search-listing { + > li { + border-bottom: 1px solid #eee; + padding: em(10) 0; + } + + img { + width: em(150); + } + + h5 { + font-weight: 300; + margin-bottom: em(5,18); + // margin-top: em(20,18); + + a { color: $info; } + a:hover { text-decoration: underline; } + } + + .media-body { + h5 { margin-top: em(5,18); } + } + + p { + margin-top: em(5); + } +} + + + + + + +/* Notifications / Alerts +========================*/ +.alert { + position: relative; + .close { + color: inherit; + opacity: .7; + + &:focus, + &:hover { + color: #000; + opacity: .9; + } + } +} + +.alert-icon { + padding-left: em(50); + + i { + position: absolute; + left: 5px; + height: em(50,24); + width: em(50,24); + text-align: center; + top: 5px; + line-height: em(50,24); + } +} + +/* Sweet Alerts */ +.swal2-modal { + padding: em(40) !important; + + .swal2-title { + font-family: $tertiary-font-family; + font-weight: 400; + } + + .swal2-content { + font-size: em(16); + color: #8d9ea7; + } + + .btn { + min-width: em(150,18); + border-radius: 3px; + margin: em(10,18) em(5,18) 0; + border: none!important; + padding: em(5,18) em(20,18); + font-size: em(18); + display: inline; + } +} + +/* Toastr */ +body { + .jq-toast-single { + border-radius: 0; + background-color: #313a46; + font-family: $font-family-base; + font-size: em(13); + line-height: em(22,13); + + h2 { + font-family: $headings-font-family; + font-size: em(14,13); + font-weight: 700; + } + } + + .jq-toast-heading { + font-family: $headings-font-family; + } + + .jq-icon-info { + background-color: $info; + color: #fff; + } + .jq-icon-success { + background-color: $success; + color: #fff; + } + .jq-icon-error { + background-color: $danger; + color: #fff; + } + .jq-icon-warning { + background-color: $warning; + color: #fff; + } + + .close-jq-toast-single { + background: #313a46; + color: #fff; + border-radius: 50%; + height: em(32,20); + width: em(32,20); + line-height: em(32,20); + text-align: center; + top: em(-12,20); + right: em(-12,20); + font-size: em(20,13); + + &:hover { background: #666; } + } +} + + + +/* Progress Bars +========================*/ +.progress { + -webkit-box-shadow: none !important; + box-shadow: none !important; + background-color: rgba(120, 130, 140, 0.13); + height: em(4,12); + border-radius: 0px; + margin-bottom: em(18,12); + overflow: hidden; +} + +.progress-bar { + box-shadow: none; + font-size: em(8,12); + font-weight: 600; + line-height: em(12,8); +} + +.progress-vertical, +.progress-vertical-top { + min-height: em(250,12); + height: em(250,12); + width: em(4,12); + position: relative; + display: inline-block; + margin-bottom: 0; + margin-right: em(20,12); + + .progress-bar { + width: 100%; + position: absolute; + bottom: 0; + } + + &.progress-sm { + margin: 0; + margin-right: rem(20); + width: rem(8) + } + + &.progress-md { + width: rem(15); + } + + &.progress-lg { + width: rem(20); + } +} + +.progress-vertical-top { + .progress-bar { + bottom: auto; + } +} + +.progress-sm { + height: rem(8) !important; + + .progress-bar { + font-size: rem(8); + line-height: rem(8); + } +} + +.progress-md { + height: rem(15) !important; + + .progress-bar { + font-size: rem(11); + line-height: rem(15); + } +} + +.progress-lg { + height: rem(20) !important; + + .progress-bar { + font-size: rem(12); + line-height: rem(20); + } +} + + +/* Other Plugin Overrides +========================*/ +.main-wrapper .dropify-wrapper { + &, .dropify-preview { + padding-top: 0; + padding-bottom: 0; + } +} + +/* Profile Pages +========================*/ +.container-min-full-height { + min-height: 100vh; +} + +.container-max-full-height { + max-height: 100vh; +} + +.login-center { + background: #fff; + min-width: rem(500); + padding: em(30) em(50); + border-radius: 5px; + margin: em(40) 0; + @include mobile { width: 80vw } +} + +.login-right, +.login-left { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.login-left { + background: #fff; + + .form-group { + margin-bottom: 2rem; + } + + input[type="text"], + input[type="email"], + input[type="password"] { + text-align: center; + font-size: em(18,15); + border: 0; + letter-spacing: -1px; + font-family: $headings-font-family; + font-weight: 500; + color: $headings-color; + padding: 0 0 .9em; + + background-color: rgba(0, 0, 0, 0); + background-position: center bottom, center calc(99%); + background-repeat: no-repeat; + background-size: 0 2px, 100% 3px; + transition: background 0s ease-out 0s; + background-image: linear-gradient($color-scheme, $color-scheme), linear-gradient($theme-border-color, $theme-border-color); + + &:focus { + background-size: 100% 2px, 100% 3px; + outline: 0 none; + transition-duration: 0.3s; + } + } + + label { + letter-spacing: 1px; + } +} + +.login-right { + background-position: right; + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + position: relative; + + font-size: em(18,15); + line-height: em(28,15); + + .list-inline-item:not(:last-child) { + margin-right: 10px; + } +}