@hiddenmarket/styleguide/my-theme/style/app.css

[](https://styleguide.hidden.market/index.html)

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700,900");
@font-face {
    font-family: "icons";
    src: url("../fonts/icons.eot");
    src: url("../fonts/icons.eot?#iefix") format("eot"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.svg#icons") format("svg");
    font-weight: normal;
    font-style: normal;
}
.ico:before, .split-pane .split-pane__handle:before {
    display: inline-block;
    font-family: "icons";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ico-lg {
    font-size: 1.3333333333333333em;
    line-height: 0.75em;
    vertical-align: -15%}
.ico-2x {
    font-size: 2em;
}
.ico-3x {
    font-size: 3em;
}
.ico-4x {
    font-size: 4em;
}
.ico-5x {
    font-size: 5em;
}
.ico-fw {
    width: 1.2857142857142858em;
    text-align: center;
}
.ico--logo:before {
    content: "\EA01"}
.ico--github:before {
    content: "\EA03"}
.ico--tools:before {
    content: "\EA04"}
.ico--molecule:before {
    content: "\EA05"}
.ico--rescue:before {
    content: "\EA06"}
.ico--search:before {
    content: "\EA07"}
.ico--glide:before, .split-pane .split-pane__handle:before {
    content: "\EA08"}
body::before {
    opacity: 0.3;
}
html, body {
    min-width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Montserrat',  sans-serif;
    font-weight: 400;
    padding-bottom: 200px;
}
body::after {
    content: "";
    display: table;
    clear: both;
}
*, *::before, *::after {
    box-sizing: border-box;
}
.SG-page {
    margin: 0;
    padding: 0 0 100px;
    overflow-x: hidden;
}
.SG-component code[class*="language-"], .SG-component pre[class*="language-"] {
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Consolas,  Monaco,  'Andale Mono',  'Ubuntu Mono',  monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.SG-component pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: 0.3em;
}
.SG-component :not(pre)>code[class*="language-"], .SG-component pre[class*="language-"] {
    background: #272822;
}
.SG-component :not(pre)>code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}
.SG-component .token.comment, .SG-component .token.prolog, .SG-component .token.doctype, .SG-component .token.cdata {
    color: slategray;
}
.SG-component .token.punctuation {
    color: #f8f8f2;
}
.SG-component .namespace {
    opacity: .7;
}
.SG-component .token.property, .SG-component .token.tag, .SG-component .token.constant, .SG-component .token.symbol, .SG-component .token.deleted {
    color: #f92672;
}
.SG-component .token.boolean, .SG-component .token.number {
    color: #ae81ff;
}
.SG-component .token.selector, .SG-component .token.attr-name, .SG-component .token.string, .SG-component .token.char, .SG-component .token.builtin, .SG-component .token.inserted {
    color: #a6e22e;
}
.SG-component .token.operator, .SG-component .token.entity, .SG-component .token.url, .SG-component .language-css .token.string, .SG-component .style .token.string, .SG-component .token.variable {
    color: #f8f8f2;
}
.SG-component .token.atrule, .SG-component .token.attr-value, .SG-component .token.function {
    color: #e6db74;
}
.SG-component .token.keyword {
    color: #66d9ef;
}
.SG-component .token.regex, .SG-component .token.important {
    color: #fd971f;
}
.SG-component .token.important, .SG-component .token.bold {
    font-weight: bold;
}
.SG-component .token.italic {
    font-style: italic;
}
.SG-component .token.entity {
    cursor: help;
}
.SG-code {
    background: #4a4a4a;
    color: white;
    font-family: monospace;
    padding: 20px;
    white-space: pre;
    max-height: 100%;
    margin-bottom: 1em;
    overflow-x: auto;
    border-radius: 3px;
    box-shadow: 0 2px 0 1px #333;
}
.SG-code.SG-code--hidden {
    display: none;
}
.SG-code__title {
    display: none;
}
.SG-code-nucleus {
    font-family: 'Montserrat',  monospace;
    font-weight: 400;
    background-color: #f9f9f9;
    display: block;
    white-space: pre;
    color: #4a4a4a;
    padding: 15px;
    margin: 2em 0;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 3px;
    overflow-y: auto;
    box-shadow: 0 2px 0 1px #e8e8e8;
}
.SG-code-nucleus.language-nucleus {
    color: #d8d8d8;
}
.SG-code-nucleus.language-nucleus .token.docblock {
    color: #9b9b9b;
}
.SG-code-nucleus.language-nucleus .token.annotation {
    color: #f15f79;
}
.SG-code-nucleus.language-nucleus .token.value {
    color: red;
}
.window {
    background-color: #efefef;
    padding-top: 25px;
    border-radius: 5px;
    position: relative;
    max-width: 620px;
    margin: auto;
    box-shadow: 0 8px 11px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.window::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    left: -11px;
    top: 7px;
    border-radius: 100%;
    box-shadow: 20px 0 0 0 #FF6058,  20px 0 0 1px #E1453E,  35px 0px 0 0 #FFBE2E,  35px 0px 0 1px #E4A413,  50px 0 0 0 #28C940,  50px 0 0 1px #19B12C;
}
.split-pane {
    position: relative;
    overflow: hidden;
    height: 400px;
}
.split-pane .split-pane__handle {
    width: 30px;
    height: 30px;
    background-color: #f4c021;
    border-radius: 100%;
    position: absolute;
    right: -15px;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    line-height: 33px;
    color: white;
    font-size: 7px;
}
.split-pane .split-pane__code.code {
    height: 100%;
    padding: 20px 20px 20px 40%}
.split-pane .split-pane__preview {
    position: absolute;
    width: 50%;
    min-width: 10%;
    max-width: 90%;
    height: 100%;
    background-image: url("../images/split-preview.png");
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 30px 0 30px 0 rgba(45, 45, 45, 0.6);
}
@media (max-width: 37.3025em) {
    .split-pane {
        height: 350px;
    }
}@media (max-width: 26.5525em) {
    .split-pane {
        height: 250px;
    }
    .split-pane .split-pane__code {
        font-size: 12px;
    }
}@media (max-width: 21.865em) {
    .split-pane .split-pane__code {
        font-size: 12px;
        padding-left: 20%}
}.SG-button {
     color: #9b9b9b;
     background: none;
     border: 1px solid #d8d8d8;
     border-radius: 5px;
     padding: 10px 14px;
     display: inline-block;
     cursor: pointer;
     outline: none;
     text-decoration: none;
 }
.SG-button:hover {
    border-color: #f4c021;
    color: #f4c021;
}
.SG-button:active {
    background: linear-gradient(to bottom,  #f2f2f2 0%,  #fff 10%);
    border-color: #d8d8d8;
}
.SG-button.SG-button--large {
    font-size: 16px;
    padding: 16px 36px;
}
.SG-button.SG-button--white {
    color: white;
    border-color: white;
}
.SG-button.SG-button--white:hover {
    background: white;
    color: #f4c021;
}
.SG-button.SG-button--white:active {
    background: linear-gradient(to bottom,  #f2f2f2 0%,  #fff 10%);
}
.SG-h1 {
    font-family: 'Montserrat',  sans-serif;
    font-weight: 300;
    padding: 0;
    margin: 0;
    font-size: 42px;
    color: #f4c021;
    margin-bottom: 1em;
}
.SG-h2 {
    color: #f4c021;
    font-size: 21px;
    border-bottom: 1px solid #d8d8d8;
    padding: 20px 0;
    margin-bottom: 1.5em;
}
.SG-h3 {
    color: #4a4a4a;
    font-size: 21px;
    margin: 2.5em 0  1.5em;
}
.SG-h4 {
    color: #f4c021;
    padding-bottom: 1em;
    margin: 1em 0;
    border-bottom: 1px dashed #d8d8d8;
}
.SG-h5 {
    color: #4a4a4a;
    font-size: 14px;
    margin: 1em 0;
}
.SG-p {
    all: initial;
    display: block;
    box-sizing: border-box;
    font-family: 'Montserrat',  sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #4a4a4a;
    margin-bottom: 1.5em;
    line-height: 1.75;
}
.SG-hint {
    border-radius: 5px;
    border-left: 2px solid #ffeb8d;
    padding: 1em;
    margin-left: -1em;
    background: #fff8da;
}
.SG-strong {
    font-family: 'Montserrat',  sans-serif;
    font-weight: 600;
    color: #4a4a4a;
}
.SG-a {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid transparent;
}
.SG-a:hover {
    cursor: pointer;
    border-bottom-color: inherit;
}
.SG-a.SG-a--pink {
    color: #f15f79;
}
.SG-a.SG-a--pink:hover {
    border-bottom-color: #f15f79;
}
.SG-i {
    font-style: italic;
}
.SG-anchor {
    margin-top: -20px;
    padding-top: 20px;
    display: inline-block;
}
.hero code[class*="language-"], .hero pre[class*="language-"] {
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: Consolas,  Monaco,  'Andale Mono',  'Ubuntu Mono',  monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}
.hero pre[class*="language-"] {
    padding: 1em;
    margin: .5em 0;
    overflow: auto;
    border-radius: 0.3em;
}
.hero :not(pre)>code[class*="language-"], .hero pre[class*="language-"] {
    background: #272822;
}
.hero :not(pre)>code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}
.hero .token.comment, .hero .token.prolog, .hero .token.doctype, .hero .token.cdata {
    color: slategray;
}
.hero .token.punctuation {
    color: #f8f8f2;
}
.hero .namespace {
    opacity: .7;
}
.hero .token.property, .hero .token.tag, .hero .token.constant, .hero .token.symbol, .hero .token.deleted {
    color: #f92672;
}
.hero .token.boolean, .hero .token.number {
    color: #ae81ff;
}
.hero .token.selector, .hero .token.attr-name, .hero .token.string, .hero .token.char, .hero .token.builtin, .hero .token.inserted {
    color: #a6e22e;
}
.hero .token.operator, .hero .token.entity, .hero .token.url, .hero .language-css .token.string, .hero .style .token.string, .hero .token.variable {
    color: #f8f8f2;
}
.hero .token.atrule, .hero .token.attr-value, .hero .token.function {
    color: #e6db74;
}
.hero .token.keyword {
    color: #66d9ef;
}
.hero .token.regex, .hero .token.important {
    color: #fd971f;
}
.hero .token.important, .hero .token.bold {
    font-weight: bold;
}
.hero .token.italic {
    font-style: italic;
}
.hero .token.entity {
    cursor: help;
}
.hero .code {
    font-family: 'Montserrat',  monospace;
    font-weight: 400;
    background-color: #333;
    display: block;
    white-space: pre;
    color: white;
    padding: 1em;
}
.hero .code .token.variable {
    color: #66d9ef;
}
code {
    font-family: 'Montserrat',  monospace;
    font-weight: 400;
    background-color: #f9f9f9;
    display: block;
    white-space: pre;
    color: #4a4a4a;
    padding: 15px;
    margin: 2em 0;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 3px;
    box-shadow: 0px 2px 0px 1px #e8e8e8;
}
.language-nucleus {
    color: #d8d8d8;
}
.language-nucleus .token.docblock {
    color: #9b9b9b;
}
.language-nucleus .token.annotation {
    color: #f15f79;
}
.language-nucleus .token.value {
    color: red;
}
.SG-config {
    border: 1px solid #d8d8d8;
    margin-bottom: 1em;
    border-radius: 3px;
    border-left-width: 3px;
    font-size: 14px;
}
.SG-config .SG-config__row::after {
    content: "";
    display: table;
    clear: both;
}
.SG-config .SG-config__row:not(:last-of-type) {
    border-bottom: 1px solid #d8d8d8;
}
.SG-config .SG-config__label {
    font-family: 'Montserrat',  sans-serif;
    font-weight: 600;
    padding: 10px 20px;
    min-width: 150px;
    display: block;
    background-color: #efefef;
}
.SG-config .SG-config__value {
    font-family: 'Montserrat',  monospace;
    font-weight: 400;
    padding: 10px 20px;
    display: inline-block;
}
.SG-config .SG-config__value .SG-pill {
    padding: 2px 9px;
    top: -1px;
}
.SG-logo {
    display: inline-block;
    color: #f4c021;
}
.SG-logo .SG-logo__icon {
    height: 58px;
    display: inline-block;
    vertical-align: middle;
}
.SG-logo .SG-logo__name {
    font-family: 'Montserrat',  sans-serif;
    font-weight: 700;
    font-size: 22px;
    display: inline-block;
    vertical-align: baseline;
    margin-left: 1.5em;
}
.SG-nav {
    all: initial;
    display: block;
    box-sizing: border-box;
    font-family: 'Montserrat',  sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}
.SG-nav li {
    display: inline-block;
}
.SG-nav .SG-nav__item {
    text-decoration: none;
    display: inline-block;
    padding: 22px 10px 24px;
    margin: 0 15px;
    color: #9b9b9b;
    font-size: 16px;
}
.SG-nav .SG-nav__item:hover {
    color: #4a4a4a;
    border-bottom: 2px solid #d8d8d8;
}
.SG-nav .SG-nav__item--active {
    border-bottom: 3px solid #f4c021;
    margin-bottom: -1px;
    color: #4a4a4a;
}
.SG-nav .SG-nav__item--active:hover {
    border-bottom: 3px solid #f4c021;
}
.SG-nav-icons {
    all: initial;
    display: block;
    box-sizing: border-box;
    font-family: 'Montserrat',  sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 67px;
    text-align: right;
}
.SG-nav-icons li {
    display: inline-block;
}
.SG-nav-icons li:not(:last-child) {
    margin-right: 2em;
}
.SG-nav-icons .SG-nav-icons__item {
    color: #d8d8d8;
}
.SG-nav-icons .SG-nav-icons__item:hover {
    color: #9b9b9b;
}
.SG-nav-icons .SG-nav-icons__item.SG--active {
    color: #4a4a4a;
}
.SG-toc {
    margin-bottom: 4em;
}
.SG-toc ul {
    padding-left: 0em;
    line-height: 30px;
    margin: 0;
}
.SG-toc>ul>li {
    list-style-type: none;
    font-size: 14px;
}
.SG-toc>ul>li>ul {
    padding-left: 1.5em;
    font-size: 14px;
    list-style-type: disc;
    color: #4a4a4a;
    margin-bottom: 1em;
}
.SG-toc>ul>li>ul>li>ul {
    font-size: 12px;
}
.SG-toc .SG-toc__category {
    color: #f4c021;
    border-bottom: 1px dashed #d8d8d8;
    padding-bottom: 0.5em;
    margin-bottom: 0.5em;
    font-size: 16px;
}
.SG-toc .SG-toc__category:not(:first-child) {
    margin-top: 2em;
}
.feature {
    padding: 40px 10px;
    text-align: center;
    height: 330px;
    position: relative;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}
.feature:hover {
    background-color: #f15f79;
}
.feature:hover .ico::before, .feature:hover .split-pane .split-pane__handle::before, .split-pane .feature:hover .split-pane__handle::before, .feature:hover .feature__description {
    color: white;
}
.feature:hover .SG-button {
    color: white;
    border-color: white;
}
.feature .SG-button {
    position: absolute;
    bottom: 20px;
    width: 86%;
    left: 7%}
.feature .ico, .feature .split-pane .split-pane__handle, .split-pane .feature .split-pane__handle {
    display: block;
    font-size: 70px;
    color: #f15f79;
}
.feature .feature__description {
    font-family: 'Montserrat',  sans-serif;
    font-weight: 600;
    color: #4a4a4a;
    font-size: 21px;
    display: block;
    margin: 1.5em 0 2em 0;
}
.sponsors {
    text-align: center;
}
.sponsors::before {
    content: 'Made by pirates from';
    display: block;
    margin-bottom: 2em;
    color: #d8d8d8;
    font-size: 12px;
}
.sponsors .sponsors__sponsor {
    display: inline-block;
    border: none;
}
.sponsors .sponsors__sponsor.sponsors--hp {
    background-image: url("../images/sprite.png?v=3f804--1");
    background-position: 0px -42px;
    width: 200px;
    height: 41px;
    margin-right: 40px;
}
@media (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi) {
    .sponsors .sponsors__sponsor.sponsors--hp {
        background-image: url("../images/sprite@2x.png?v=3f804--1");
        background-size: 242px 83px;
    }
}.sponsors .sponsors__sponsor.sponsors--pt {
     background-image: url("../images/sprite.png?v=3f804--1");
     background-position: 0px 0px;
     width: 242px;
     height: 42px;
 }
@media (-webkit-min-device-pixel-ratio: 2),  (min-resolution: 192dpi) {
    .sponsors .sponsors__sponsor.sponsors--pt {
        background-image: url("../images/sprite@2x.png?v=3f804--1");
        background-size: 242px 83px;
    }
}.hero {
     width: 100%;
     position: relative;
     background: #B24592;
     background: linear-gradient(-45deg,  #F15F79 20%,  #B24592 80%);
 }
.hero::after, .hero::before {
    content: "";
    display: block;
    height: 1px;
    clear: both;
}
.hero::after {
    content: '';
    background: linear-gradient(to bottom,  #ffccd5,  #fff 50%);
    height: 39px;
    border-top: 1px solid #ffffff;
    display: block;
    background-size: 131%;
    border-radius: 0 0 100% 100%;
    position: absolute;
    bottom: -39px;
    width: 100%;
    box-shadow: 0 -23px 14px white inset;
}
.hero h1 {
    font-family: 'Montserrat',  sans-serif;
    font-weight: 300;
    font-size: 46px;
    color: white;
    text-align: center;
    text-shadow: 0px 1px #f4c021;
    margin-top: 1.5em;
}
.hero h1 small {
    font-size: 0.5em;
    display: block;
    margin: 1em 0;
}
.hero nav {
    text-align: center;
    padding: 40px 0;
    text-transform: uppercase;
}
.hero nav .SG-button:not(:last-child) {
    margin-right: 10px;
}
.hero .SG-nav {
    display: none;
}
.hero .SG-logo, .hero .SG-nav-icons__item {
    color: white;
}
.hero .SG-logo:hover, .hero .SG-nav-icons__item:hover {
    color: white !important;
}
.hero .SG-header {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.hero .SG-header::before {
    display: none;
}
.SG-layout {
    all: initial;
    display: block;
    box-sizing: border-box;
    font-family: 'Montserrat',  sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 937px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}
.SG-layout--two-columns .SG-layout__sidebar {
    float: left;
    width: 20%}
.SG-layout--two-columns .SG-layout__content {
    float: right;
    width: 75%}
@media (max-width: 47.99em) {
    .SG-layout--two-columns .SG-layout__sidebar, .SG-layout--two-columns .SG-layout__content {
        float: none;
        width: 100%}
}.SG-header {
     all: initial;
     display: block;
     box-sizing: border-box;
     font-family: 'Montserrat',  sans-serif;
     font-size: 14px;
     margin: 0;
     padding: 0;
     border-bottom: 1px solid #efefef;
     padding: 0 40px;
     margin-bottom: 100px;
     position: relative;
 }
.SG-header::after {
    content: "";
    display: table;
    clear: both;
}
.SG-header::before {
    content: '';
    background: linear-gradient(to bottom,  #fbfbfb,  #fff 50%);
    height: 39px;
    display: block;
    background-size: 131%;
    border-radius: 0 0 100% 100%;
    position: absolute;
    bottom: -40px;
    width: calc(100% - 80px);
    box-shadow: 0 -23px 14px white inset;
}
.SG-header .SG-logo {
    float: left;
    margin-top: 8px;
}
.SG-header .SG-nav-icons {
    float: right;
}
.SG-header .SG-nav {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 270px;
}
.feature-list {
    margin: 100px 0 50px 0;
    padding: 0;
}
.feature-list::after {
    content: "";
    display: table;
    clear: both;
}
.feature-list .feature {
    float: left;
    width: 22%}
.feature-list .feature:not(:last-of-type) {
    margin-right: 1%}
@media (max-width: 26.5525em) {
    .feature-list .feature {
        width: 100%}
}@media (min-width: 26.5625em) and (max-width: 47.99em) {
    .feature-list .feature {
        width: 50%}
}.ui-resizable-e {
     cursor: e-resize;
     width: 7px;
     right: -5px;
     top: 0;
     height: 100%}
.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
}
.ui-resizable-e {
    width: 30px;
    right: -15px;
}
.sweet-alert .confirm {
    background-color: #f4c021 !important;
}