File manager

File manager - Edit - /var/www/html/observa/public/observa/assets/sass/main.scss

Back
@import 'libs/vars'; @import 'libs/functions'; @import 'libs/mixins'; @import 'libs/vendor'; @import 'libs/breakpoints'; @import 'libs/html-grid'; @import url("font-awesome.min.css"); @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic\|Open+Sans+Condensed:700"); /* TXT by HTML5 UP html5up.net \| @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) / // Breakpoints. @include breakpoints(( xlarge: ( 1281px, 1680px ), large: ( 981px, 1280px ), medium: ( 737px, 980px ), small: ( 361px, 736px ), xsmall: ( null, 360px ) )); // Reset. // Based on meyerweb.com/eric/tools/css/reset (v2.0 \| 20110126 \| License: public domain) html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style:none; } blockquote, q { quotes: none; &:before, &:after { content: ''; content: none; } } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-text-size-adjust: none; } mark { background-color: transparent; color: inherit; } input::-moz-focus-inner { border: 0; padding: 0; } input, select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; } / Basic / // Set box model to border-box. // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice html { box-sizing: border-box; } , :before, :after { box-sizing: inherit; } body { background: #f2f5f3; // Stops initial animations until page loads. &.is-preload { , :before, :after { @include vendor('animation', 'none !important'); @include vendor('transition', 'none !important'); } } } body, input, textarea, select { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #6b7770; font-size: 13pt; line-height: 2em; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; color: #6b7770; margin: 0 0 0.5em 0; line-height: 1.3; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { text-decoration: none; color: inherit; } h2 { font-size: 1.65em; &.major { position: relative; border-top: solid 5px #e7eae8; font-size: 1.65em; text-align: center; margin: 0 0 3em 0; top: 0.775em; span { background: #fff; position: relative; display: inline-block; top: -0.775em; padding: 0 1.25em 0 1.25em; } } } h3, h4 { font-size: 1.25em; } a { color: #006376; text-decoration: underline; &:hover { text-decoration: none; } } b, strong { font-weight: 700; color: #6b7770; } i, em { font-style: italic; } br.clear { clear: both; } sub { position: relative; top: 0.5em; font-size: 0.8em; } sup { position: relative; top: -0.5em; font-size: 0.8em; } hr { border: 0; border-top: solid 2px #E7EAE8; margin: 0 0 3em 0; } blockquote { border-left: solid 5px #E7EAE8; padding: 1em 0 1em 1.5em; font-style: italic; } p, ul, ol, dl, table { margin-bottom: 3em; } / Section/Article / section, article { margin-bottom: 6em; > :last-child, &:last-child { margin-bottom: 0; } } header { > p { display: block; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; color: #c1cac5; } } / Container / .container { margin: 0 auto; max-width: 100%; width: 64em; @include breakpoint('<=xlarge') { width: 75em; } @include breakpoint('<=large') { width: calc(100% - 100px); } @include breakpoint('<=medium') { width: calc(100% - 100px); } @include breakpoint('<=small') { width: calc(100% - 40px); } @include breakpoint('<=xsmall') { width: calc(100% - 30px); } } / Row / .row { @include html-grid((50px, 50px)); @include breakpoint('<=xlarge') { @include html-grid((50px, 50px), 'xlarge'); } @include breakpoint('<=large') { @include html-grid((40px, 40px), 'large'); } @include breakpoint('<=medium') { @include html-grid((50px, 50px), 'medium'); } @include breakpoint('<=small') { @include html-grid((20px, 20px), 'small'); } @include breakpoint('<=xsmall') { @include html-grid((15px, 15px), 'xsmall'); } } / Image / .image { position: relative; display: inline-block; border-radius: 8px; img { display: block; width: 100%; border-radius: 8px; } &:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('images/overlay.png'); border-radius: 8px; } &.fit { display: block; width: 100%; } &.featured { display: block; width: 100%; margin: 0 0 2em 0; } &.left { float: left; margin: 0 2em 2em 0; } &.centered { display: block; margin: 0 0 2em 0; img { margin: 0 auto; width: auto; } } } / Button / input[type="button"], input[type="submit"], input[type="reset"], button, .button { -webkit-appearance: none; display: inline-block; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; text-decoration: none; background: #b1ddab; color: #fff; border: 0; line-height: 1em; border-radius: 8px; outline: 0; cursor: pointer; -moz-transition: background-color .2s ease-in-out; -webkit-transition: background-color .2s ease-in-out; -o-transition: background-color .2s ease-in-out; -ms-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out; font-size: 1.25em; padding: 0.85em 1.85em; text-align: center; &:hover { background: #c1edbb; } &:active { background: #a1cd9b; } &.alt { background: #c1cac5; &:hover { background: #ccd5d0; } &:active { background: #b1bab5; } } &.large { font-size: 1.65em; } } / List / ul { list-style: disc; padding-left: 1em; li { padding-left: 0.5em; } } ol { list-style: decimal; padding-left: 1.25em; li { padding-left: 0.25em; } } / Divided / ul.divided { list-style: none; padding-left: 0; > li { border-top: solid 2px #e7eae8; padding-top: 2.35em; margin-top: 2.35em; padding-left: 0; &:first-child { border-top: 0; padding-top: 0; margin-top: 0; } } } / Actions / ul.actions { list-style: none; padding-left: 0; text-align: center; margin: 2em 0 0 0; li { display: inline-block; margin: 0 0 0 1em; padding-left: 0; &:first-child { margin-left: 0; } } } / Contact / ul.contact { list-style: none; padding-left: 0; cursor: default; li { @include vendor('transition', 'top .15s ease-in-out'); position: relative; display: inline-block; margin: 0 0.25em 0 0.25em; top: 0; padding-left: 0; a { @include vendor('transition', 'background-color .2s ease-in-out'); display: block; position: relative; width: 48px; height: 48px; border-radius: 6px; outline: 0; background: #c1cac5; text-align: center; &:before { color: #f2f5f3; font-size: 32px; line-height: 48px; } } &:hover { top: -5px; a { &.fa-facebook { background-color: #3C5A98; } &.fa-twitter { background-color: #2DAAE4; } &.fa-dribbble { background-color: #C4376B; } &.fa-linkedin { background-color: #006599; } &.fa-instagram { background-color: #2E5E86; } &.fa-google-plus { background-color: #DA2713; } } } &:active { top: 0; } } } / Special / ul.special { list-style: none; padding-left: 0; cursor: default; position: relative; margin: -2em 0 4em -2em; li { @include vendor('transition', 'top .15s ease-in-out'); position: relative; display: inline-block; top: 0; padding: 2em 0 0 2em; a { display: block; outline: 0; &:before { @include vendor('transition', 'background-color .2s ease-in-out'); display: block; text-align: center; background: #c1cac5; border-radius: 100%; width: 2.25em; height: 2.25em; line-height: 2.175em; font-size: 5em; color: #fff; } } &:hover { top: -1em; a { &:before { background: #b9d2ce; } } } } } / Meta / ul.meta { font-size: 0.85em; color: #a1aaa5; list-style: none; padding-left: 0; li { position: relative; display: inline-block; margin-left: 1em; padding-left: 0; a { color: inherit; outline: 0; } &:first-child { margin-left: 0; } &:before { opacity: 0.5; cursor: default; margin-right: 0.5em; } } } / Menu / ul.menu { list-style: none; padding-left: 0; li { border-left: solid 1px #E7EAE8; display: inline-block; padding: 0 0 0 0.75em; margin: 0 0 0 0.75em; &:first-child { border-left: 0; margin-left: 0; padding-left: 0; } } } / Forms / form { label { display: block; margin: 0 0 1em 0; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; color: #6b7770; } input[type="text"], input[type="email"], input[type="password"], select, textarea { -webkit-appearance: none; display: block; width: 100%; border-radius: 8px; border: solid 2px #E7EAE8; &:focus { border-color: #a1cd9b; } } input[type="text"], input[type="email"], input[type="password"], select { line-height: 3em; padding: 0 1em; } textarea { min-height: 9em; padding: 1em; } ::-webkit-input-placeholder { color: #555 !important; } :-moz-placeholder { color: #555 !important; } ::-moz-placeholder { color: #555 !important; } :-ms-input-placeholder { color: #555 !important; } ::-moz-focus-inner { border: 0; } } / Tables / table { width: 100%; &.default { width: 100%; tr { border-top: solid 2px #E7EAE8; &:first-child { border-top: 0; } } td { padding: 0.5em 1em 0.5em 1em; } th { text-align: left; padding: 0.5em 1em 0.5em 1em; margin: 0 0 1em 0; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; color: #6b7770; } thead { background: #E7EAE8; color: #fff; } } } / Box / .box { &.highlight { text-align: center; h2 { font-size: 3em; margin: 0 0 0.25em 0; } header { > p { font-size: 1.65em; margin: 0 0 1.5em 0; } } } &.feature { text-align: center; } &.post { header { margin: 0 0 2.5em 0; } h3 { font-size: 3em; margin: 0 0 0.25em 0; } header { > p { font-size: 1.65em; margin: 0 0 0.5em 0; } } ul { &.meta { margin: 0 0 0.5em 0; } } } &.post-summary { h3 { line-height: 1em; margin: 0 0 0.75em 0; } .meta { margin: 0; line-height: 1em; } } &.page-content { header { margin: 0 0 2.5em 0; } h2 { font-size: 3em; margin: 0 0 0.5em 0; } header { > p { font-size: 1.65em; margin: 0 0 0.5em 0; } } ul { &.meta { margin: 0 0 0.5em 0; } } } } / Icons / .icon { position: relative; text-decoration: none; &:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } > .label { display: none; } } / Page Wrapper / #page-wrapper { > section { margin-bottom: 0; } } / Header / #header { text-align: center; font-size: 2em; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; padding: 2em 0; background: #fff; margin: 0 auto; .logo { position: relative; text-align: center; border-top: solid 5px #e7eae8; top: 0.65em; div { background: #fff; position: relative; display: inline-block; padding: 0 1.5em 0 1.5em; top: -0.65em; } h1 { display: inline; } p { display: inline; color: #C1CAC5; } } } / Nav / body { padding-top: 3.25em; } #nav { position: fixed; top: 0; left: 0; z-index: 1000; background-color: rgba(255, 255, 255, 0.95); background-image: url('images/overlay.png'); width: 100%; height: 3.25em; line-height: 3.25em; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; cursor: default; ul { position: relative; z-index: 1001; } li { display: inline-block; margin: 0 0.5em 0 0.5em; top: 0; position: relative; -moz-transition: top .15s ease-in-out; -webkit-transition: top .15s ease-in-out; -o-transition: top .15s ease-in-out; -ms-transition: top .15s ease-in-out; transition: top .15s ease-in-out; > ul { display: none; } a, span { @include vendor('transition', ('background-color .075s ease-in-out', 'color .075s ease-in-out')); position: relative; display: block; text-decoration: none; color: #6b7770; top: -6px; padding: 6px 1.5em 0.25em 1.5em; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; outline: 0; } &:hover, &.active { top: 3px; } &:hover { a, span { background: #C1CAC5; color: #fff; } } &.active { a, span { background: #C1CAC5; color: #fff; } } &.current a { background: #b1ddab; color: #fff; } } } .dropotron { list-style: none; background: #6B7770; color: #fff; border-radius: 6px; line-height: 2.75em; text-align: center; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; padding: 1em 0; text-align: left; min-width: 14em; margin-top: -1em; box-shadow: 0 1em 2em 0 rgba(0, 0, 0, 0.1); li { padding-left: 0; > a, > span { display: block; color: #D7DAD8; text-decoration: none; padding: 0 1.25em; } &:hover { > a, > span { color: #fff; background: #7B8780; } } &.active { > a, > span { color: #fff; background: #7B8780; } } &:first-child { border-top: 0; } } &.level-0 { margin-top: 1em; font-size: 0.9em; &:before { content: ''; position: absolute; left: 50%; margin-left: -1em; top: -0.65em; border-bottom: solid 1em #6B7770; border-left: solid 1em transparent; border-right: solid 1em transparent; } } } / Banner / #banner { position: relative; background-image: url('images/overlay.png'), url('images/overlay.png'), url('../../images/banner.jpg'); background-position: top left, top left, center center; background-repeat: repeat, repeat, no-repeat; background-size: auto, auto, cover; z-index: 1; padding: 11em 0; .content { position: relative; background-color: rgba(21, 28, 23, 0.85); background-image: url('images/overlay.png'), url('images/highlight.png'); background-position: top left, center center; background-size: auto, 100% 250%; background-repeat: repeat, no-repeat; text-align: center; margin: 0; padding: 4em 0 3.5em 0; h2 { color: #fff; font-size: 2.75em; margin: 0 0 0.5em 0; } p { display: block; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; color: #575d59; font-size: 1.35em; margin: 0 0 1.25em 0; } .button { @include vendor('transition', ('border-color .2s ease-in-out', 'color .2s ease-in-out')); color: #b4b7b5; background: transparent !important; border: solid 4px #575d59; border-color: rgba(87, 93, 89, 0.35); font-size: 1.5em; &:hover { color: #e4e7e5; border-color: rgba(87, 93, 89, 0.75); } &:active { color: #fff; border-color: rgba(97, 103, 99, 1); } } } } / Main / #main { background: #fff; border-top: solid 5px #b1ddab; border-bottom: solid 5px #c1cac5; border-top-width: 35px; border-bottom-width: 10px; padding: 6em 0 6em 0; } / Sidebar + Content / .sidebar { h2 { &.major { text-align: left; margin: 0 0 1.5em 0; span { padding-left: 0; } } } } / Footer / #footer { text-align: center; padding: 8em 0 8em 0; a { color: inherit; } h2 { &.major { margin: 0 0 1.5em 0; span { background: #f2f5f3; } } } } / Copyright / #copyright { display: inline-block; background: #e7eae8; padding: 0.75em 2em 0.75em 2em; border-radius: 8px; color: #8b9790; margin: 4em 0 0 0; a { color: inherit; } .menu { margin: 0; li { border-color: #C1CAC5; border-width: 2px; line-height: 1em; } } } / XLarge / @include breakpoint('<=xlarge') { / Basic / body, input, textarea, select { font-size: 12pt; line-height: 1.75em; } } / Large / @include breakpoint('<=large') { / Basic / body, input, textarea, select { font-size: 11pt; } / Special / ul.special { li { a { &:before { font-size: 60px; } } } } / Box / .box { &.highlight { h2 { font-size: 2.5em; } header { > p { font-size: 1.25em; } } } &.post { h3 { font-size: 2.5em; } header { > p { font-size: 1.25em; } } } } / Header / #header { font-size: 1.5em; } / Banner / #banner { padding: 6em 0; .content { padding: 4em 0 3em 0; h2 { margin: 0 0 0.65em 0; } p { margin: 0 0 1em 0; } } } / Main / #main { border-top-width: 20px; border-bottom-width: 10px; } / Footer / #footer { padding: 6em 0 6em 0; } } / Medium / #navPanel, #titleBar { display: none; } @include breakpoint('<=medium') { / Basic / html, body { overflow-x: hidden; } / Box / .box { br { display: none; } } / Header / #header { display: none; } / Banner / #banner { padding: calc(14em + 44px) 0 14em 0; } / Nav / #nav { display: none; } / Main / #main { border-top-width: 0; } / Sidebar / .sidebar { border-top: solid 2px #e7eae8; padding-top: 50px; } / Nav / body { padding-top: 44px; &.homepage { padding-top: 0; } } #page-wrapper { @include vendor('backface-visibility', 'hidden'); @include vendor('transition', 'transform #{_duration(navPanel)} ease'); padding-bottom: 1px; } #titleBar { @include vendor('backface-visibility', 'hidden'); @include vendor('transition', 'transform #{_duration(navPanel)} ease'); display: block; height: 44px; left: 0; position: fixed; top: 0; width: 100%; z-index: _misc(z-index-base) + 1; background-color: rgba(21, 38, 23, 0.8); background-image: url('images/overlay.png'); .title { display: block; position: relative; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.25em; line-height: 44px; color: #fff; z-index: 1000; text-align: center; } .toggle { position: absolute; left: 0; top: 0; width: 80px; height: 60px; z-index: 1001; &:before { display: inline-block; font-family: FontAwesome; text-decoration: none; font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; left: 0; top: 0; background: #b1ddab; width: 44px; height: 44px; content: '\f0c9'; color: #fff; text-align: center; line-height: 44px; font-size: 20px; } &:active { &:before { background-color: #a1cd9b; } } } } #navPanel { @include vendor('backface-visibility', 'hidden'); @include vendor('transform', 'translateX(#{_size(navPanel) -1})'); @include vendor('transition', ('transform #{_duration(navPanel)} ease')); display: block; height: 100%; left: 0; overflow-y: auto; position: fixed; top: 0; width: _size(navPanel); z-index: _misc(z-index-base) + 2; background-color: #353c37; @include vendor('background-image', ('url("images/overlay.png")', 'linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5))')); background-repeat: repeat, no-repeat; background-size: auto, 100% 100%; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 1.25em; box-shadow: inset -3px 0px 10px 0px rgba(0, 0, 0, 0.25); nav { position: relative; z-index: 1000; } .link { display: block; color: inherit; text-decoration: none; height: 44px; line-height: 44px; padding: 0 1em 0 1em; color: #888; color: rgba(255, 255, 255, 0.5); border-top: solid 2px rgba(87, 93, 89, 0.15); font-size: 0.8em; &:first-child { border-top: 0; } } .indent-1 { display: inline-block; width: 1em; } .indent-2 { display: inline-block; width: 2em; } .indent-3 { display: inline-block; width: 3em; } .indent-4 { display: inline-block; width: 4em; } .indent-5 { display: inline-block; width: 5em; } .depth-0 { color: #fff; } } body { &.navPanel-visible { #page-wrapper { @include vendor('transform', 'translateX(#{_size(navPanel)})'); } #titleBar { @include vendor('transform', 'translateX(#{_size(navPanel)})'); } #navPanel { @include vendor('transform', 'translateX(0)'); } } } } /* Small / @include breakpoint('<=small') { / Basic / body, input, textarea, select { font-size: 11pt; } h2 { font-size: 1.25em; &.major { font-size: 1.25em; margin: 0 0 2em 0; span { padding: 0 1em; } } } / Section/Article / section, article { margin-bottom: 2em; } / Button / input[type="button"], input[type="submit"], input[type="reset"], button, .button { display: block; width: 100%; &.large { font-size: 1.25em; } } / Actions / ul.actions { li { display: block; margin: 1em 0 0 0; &:first-child { margin-top: 0; } } } / Special / ul.special { margin: -0.75em 0 2em -0.75em; li { padding: 0.75em 0 0 0.75em; a { &:before { font-size: 28px; } } } } / Box / .box { &.highlight { h2 { font-size: 2em; } header { > p { font-size: 1.25em; } } } &.post { h3 { font-size: 2em; } header { > p { font-size: 1.25em; } } } &.page-content { h2 { font-size: 2em; } header { > p { font-size: 1.25em; } } } } / Banner / #banner { padding: calc(6em + 44px) 0 6em 0; .content { padding: 4em 2.5em 3em 2.5em; h2 { font-size: 2em; } p { font-size: 1.25em; } } } / Main / #main { padding: 3em 0; } / Sidebar / .sidebar { border-top: solid 2px #e7eae8; padding-top: 50px; margin-top: 30px; } / Footer / #footer { padding: 3em 0; } / Copyright / #copyright { .menu { li { display: block; border-left: 0; padding-left: 0; line-height: 1.75em; } } } } / Small / @include breakpoint('<=xsmall') { / Basic */ body, input, textarea, select { font-size: 10pt; } }

| ver. 1.4 | Github | . | PHP 8.3.28 | Generation time: 0.02 | proxy | phpinfo | Settings