From 2529b9b76fd1e1b7305ba1cd91c0ffce0cbe82dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 18 Apr 2020 17:42:32 +0200 Subject: [PATCH] improve colors --- docs/src/components/Demo/style.scss | 24 ++--- docs/src/layouts/App/prism.scss | 155 ++++++++++++++-------------- 2 files changed, 88 insertions(+), 91 deletions(-) diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss index 44789b77..a5ab48b4 100644 --- a/docs/src/components/Demo/style.scss +++ b/docs/src/components/Demo/style.scss @@ -1,24 +1,23 @@ .demo { background-color: $colorWhite; overflow: hidden; - border-radius: 12px; - box-shadow: - 0px 6.6501px 5.32008px rgba($colorBlack, 0.0161557), - 0px 22.3363px 17.869px rgba($colorBlack, 0.0238443), - 0px 100px 80px rgba($colorBlack, 0.04), - 0 0 0 1px rgba($colorBlack, 0.05), - ; - + border-radius: 0.5rem; + &__preview { padding: 1.5rem; + border: 1px solid rgba($colorBlack, 0.1); + border-bottom-width: 0; + border-top-left-radius: inherit; + border-top-right-radius: inherit; } &__source { - background-color: $colorBlack; + // background-color: $colorBlack; } &__tabs { padding: 1rem 1.5rem 0 1.5rem; + background-color: rgba($colorBlack, 0.9); } &__tab { @@ -44,10 +43,9 @@ } &__code { - padding: 0.75rem 1.5rem; - - code, pre { - padding: 0; + pre { + margin: 0; + border-radius: 0; } } } \ No newline at end of file diff --git a/docs/src/layouts/App/prism.scss b/docs/src/layouts/App/prism.scss index 75e9cd4d..efc91836 100644 --- a/docs/src/layouts/App/prism.scss +++ b/docs/src/layouts/App/prism.scss @@ -1,4 +1,4 @@ -$codeBg: $colorBlack; +$codeBg: rgba($colorBlack, 0.9); $codeSelection: #363636; $codeText: #eee; $codeGrey: #616161; @@ -11,217 +11,216 @@ $codeTeal: #80cbc4; $codePurple: #c792ea; code[class*="language-"], pre[class*="language-"] { - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - hyphens: none; - color: inherit; - text-shadow: none; - font-family: 'JetBrainsMono', monospace; - font-size: 1em; - line-height: 1.8; - tab-size: 2; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + hyphens: none; + color: inherit; + text-shadow: none; + font-family: 'JetBrainsMono', monospace; + font-size: 1em; + line-height: 1.8; + tab-size: 2; } code[class*="language-"]::-moz-selection, pre[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection, pre[class*="language-"] ::-moz-selection { - text-shadow: none; - opacity: 1; - color: $codeText; - background: $codeSelection; + text-shadow: none; + opacity: 1; + color: $codeText; + background: $codeSelection; } code[class*="language-"]::selection, pre[class*="language-"]::selection, code[class*="language-"] ::selection, pre[class*="language-"] ::selection { - text-shadow: none; - opacity: 1; - color: $codeText; - background: $codeSelection; + text-shadow: none; + opacity: 1; + color: $codeText; + background: $codeSelection; } @media print { - code[class*="language-"], pre[class*="language-"] { - text-shadow: none !important; - } + code[class*="language-"], pre[class*="language-"] { + text-shadow: none !important; + } } :not(pre) > code[class*="language-"] { - white-space: normal; - color: $codeText; - background: $codeBg; - border-radius: 0.2em; - padding: 0.1em; + white-space: normal; + color: $codeText; + background: $codeBg; + border-radius: 0.2em; + padding: 0.1em; } pre > code[class*="language-"] { - background: none; + background: none; } pre[class*="language-"] { - overflow: auto; - position: relative; - color: $codeText; - background: $codeBg; - border-radius: 0; - margin: 0.5em 0; - padding: 1.25em 1em; - border-radius: 12px; + overflow: auto; + position: relative; + color: $codeText; + background: $codeBg; + margin: 0.5em 0; + padding: 1.2rem 1.5rem; + border-radius: 0.5rem; } pre[class*="language-"].language-css > code, pre[class*="language-"].language-sass > code, pre[class*="language-"].language-scss > code { - color: $codeOrange; + color: $codeOrange; } [class*="language-"] .namespace { - opacity: 0.7; + opacity: 0.7; } .token.atrule { - color: $codePurple; + color: $codePurple; } .token.attr-name { - color: $colorYellow; + color: $colorYellow; } .token.attr-value { - color: $codeGreen; + color: $codeGreen; } .token.attribute { - color: $codeGreen; + color: $codeGreen; } .token.boolean { - color: $codePurple; + color: $codePurple; } .token.builtin { - color: $colorYellow; + color: $colorYellow; } .token.cdata { - color: $codeTeal; + color: $codeTeal; } .token.char { - color: $codeTeal; + color: $codeTeal; } .token.class { - color: $colorYellow; + color: $colorYellow; } .token.class-name { - color: $colorYellow; + color: $colorYellow; } .token.comment { - color: $codeGrey; + color: $codeGrey; } .token.constant { - color: $codePurple; + color: $codePurple; } .token.deleted { - color: $codeRed; + color: $codeRed; } .token.doctype { - color: $codeGrey; + color: $codeGrey; } .token.entity { - color: $codeRed; + color: $codeRed; } .token.function { - color: $codePurple; + color: $codePurple; } .token.hexcode { - color: $colorYellow; + color: $colorYellow; } .token.id { - color: $codePurple; - font-weight: bold; + color: $codePurple; + font-weight: bold; } .token.important { - color: $codePurple; - font-weight: bold; + color: $codePurple; + font-weight: bold; } .token.inserted { - color: $codeTeal; + color: $codeTeal; } .token.keyword { - color: $codePurple; + color: $codePurple; } .token.number { - color: $codeOrange; + color: $codeOrange; } .token.operator { - color: $codeBlue; + color: $codeBlue; } .token.prolog { - color: $codeGrey; + color: $codeGrey; } .token.property { - color: $codeTeal; + color: $codeTeal; } .token.pseudo-class { - color: $codeGreen; + color: $codeGreen; } .token.pseudo-element { - color: $codeGreen; + color: $codeGreen; } .token.punctuation { - color: $codeBlue; + color: $codeBlue; } .token.regex { - color: $colorYellow; + color: $colorYellow; } .token.selector { - color: $codeRed; + color: $codeRed; } .token.string { - color: $codeGreen; + color: $codeGreen; } .token.symbol { - color: $codePurple; + color: $codePurple; } .token.tag { - color: $codeRed; + color: $codeRed; } .token.unit { - color: $codeOrange; + color: $codeOrange; } .token.url { - color: $codeRed; + color: $codeRed; } .token.variable { - color: $codeRed; + color: $codeRed; } \ No newline at end of file