ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

improve colors

Browse Source
This commit is contained in:
Philipp Kühn
2020-04-18 17:42:32 +02:00
parent 173accaa52
commit 2529b9b76f
2 changed files with 88 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/src/components/Demo/style.scss
View File

@@ -1,24 +1,23 @@
.demo { .demo {
background-color: $colorWhite; background-color: $colorWhite;
overflow: hidden; overflow: hidden;
border-radius: 12px; border-radius: 0.5rem;
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),
;
&__preview { &__preview {
padding: 1.5rem; 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 { &__source {
background-color: $colorBlack; // background-color: $colorBlack;
} }
&__tabs { &__tabs {
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
background-color: rgba($colorBlack, 0.9);
} }
&__tab { &__tab {
@@ -44,10 +43,9 @@
} }
&__code { &__code {
padding: 0.75rem 1.5rem; pre {
margin: 0;
code, pre { border-radius: 0;
padding: 0;
} }
} }
} }

155
docs/src/layouts/App/prism.scss
View File

@@ -1,4 +1,4 @@
$codeBg: $colorBlack; $codeBg: rgba($colorBlack, 0.9);
$codeSelection: #363636; $codeSelection: #363636;
$codeText: #eee; $codeText: #eee;
$codeGrey: #616161; $codeGrey: #616161;
@@ -11,217 +11,216 @@ $codeTeal: #80cbc4;
$codePurple: #c792ea; $codePurple: #c792ea;
code[class*="language-"], pre[class*="language-"] { code[class*="language-"], pre[class*="language-"] {
text-align: left; text-align: left;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;
word-break: normal; word-break: normal;
word-wrap: normal; word-wrap: normal;
hyphens: none; hyphens: none;
color: inherit; color: inherit;
text-shadow: none; text-shadow: none;
font-family: 'JetBrainsMono', monospace; font-family: 'JetBrainsMono', monospace;
font-size: 1em; font-size: 1em;
line-height: 1.8; line-height: 1.8;
tab-size: 2; tab-size: 2;
} }
code[class*="language-"]::-moz-selection, pre[class*="language-"]::-moz-selection, code[class*="language-"]::-moz-selection, pre[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection, code[class*="language-"] ::-moz-selection,
pre[class*="language-"] ::-moz-selection { pre[class*="language-"] ::-moz-selection {
text-shadow: none; text-shadow: none;
opacity: 1; opacity: 1;
color: $codeText; color: $codeText;
background: $codeSelection; background: $codeSelection;
} }
code[class*="language-"]::selection, pre[class*="language-"]::selection, code[class*="language-"]::selection, pre[class*="language-"]::selection,
code[class*="language-"] ::selection, code[class*="language-"] ::selection,
pre[class*="language-"] ::selection { pre[class*="language-"] ::selection {
text-shadow: none; text-shadow: none;
opacity: 1; opacity: 1;
color: $codeText; color: $codeText;
background: $codeSelection; background: $codeSelection;
} }
@media print { @media print {
code[class*="language-"], pre[class*="language-"] { code[class*="language-"], pre[class*="language-"] {
text-shadow: none !important; text-shadow: none !important;
} }
} }
:not(pre) > code[class*="language-"] { :not(pre) > code[class*="language-"] {
white-space: normal; white-space: normal;
color: $codeText; color: $codeText;
background: $codeBg; background: $codeBg;
border-radius: 0.2em; border-radius: 0.2em;
padding: 0.1em; padding: 0.1em;
} }
pre > code[class*="language-"] { pre > code[class*="language-"] {
background: none; background: none;
} }
pre[class*="language-"] { pre[class*="language-"] {
overflow: auto; overflow: auto;
position: relative; position: relative;
color: $codeText; color: $codeText;
background: $codeBg; background: $codeBg;
border-radius: 0; margin: 0.5em 0;
margin: 0.5em 0; padding: 1.2rem 1.5rem;
padding: 1.25em 1em; border-radius: 0.5rem;
border-radius: 12px;
} }
pre[class*="language-"].language-css > code, pre[class*="language-"].language-sass > code, pre[class*="language-"].language-scss > code { 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 { [class*="language-"] .namespace {
opacity: 0.7; opacity: 0.7;
} }
.token.atrule { .token.atrule {
color: $codePurple; color: $codePurple;
} }
.token.attr-name { .token.attr-name {
color: $colorYellow; color: $colorYellow;
} }
.token.attr-value { .token.attr-value {
color: $codeGreen; color: $codeGreen;
} }
.token.attribute { .token.attribute {
color: $codeGreen; color: $codeGreen;
} }
.token.boolean { .token.boolean {
color: $codePurple; color: $codePurple;
} }
.token.builtin { .token.builtin {
color: $colorYellow; color: $colorYellow;
} }
.token.cdata { .token.cdata {
color: $codeTeal; color: $codeTeal;
} }
.token.char { .token.char {
color: $codeTeal; color: $codeTeal;
} }
.token.class { .token.class {
color: $colorYellow; color: $colorYellow;
} }
.token.class-name { .token.class-name {
color: $colorYellow; color: $colorYellow;
} }
.token.comment { .token.comment {
color: $codeGrey; color: $codeGrey;
} }
.token.constant { .token.constant {
color: $codePurple; color: $codePurple;
} }
.token.deleted { .token.deleted {
color: $codeRed; color: $codeRed;
} }
.token.doctype { .token.doctype {
color: $codeGrey; color: $codeGrey;
} }
.token.entity { .token.entity {
color: $codeRed; color: $codeRed;
} }
.token.function { .token.function {
color: $codePurple; color: $codePurple;
} }
.token.hexcode { .token.hexcode {
color: $colorYellow; color: $colorYellow;
} }
.token.id { .token.id {
color: $codePurple; color: $codePurple;
font-weight: bold; font-weight: bold;
} }
.token.important { .token.important {
color: $codePurple; color: $codePurple;
font-weight: bold; font-weight: bold;
} }
.token.inserted { .token.inserted {
color: $codeTeal; color: $codeTeal;
} }
.token.keyword { .token.keyword {
color: $codePurple; color: $codePurple;
} }
.token.number { .token.number {
color: $codeOrange; color: $codeOrange;
} }
.token.operator { .token.operator {
color: $codeBlue; color: $codeBlue;
} }
.token.prolog { .token.prolog {
color: $codeGrey; color: $codeGrey;
} }
.token.property { .token.property {
color: $codeTeal; color: $codeTeal;
} }
.token.pseudo-class { .token.pseudo-class {
color: $codeGreen; color: $codeGreen;
} }
.token.pseudo-element { .token.pseudo-element {
color: $codeGreen; color: $codeGreen;
} }
.token.punctuation { .token.punctuation {
color: $codeBlue; color: $codeBlue;
} }
.token.regex { .token.regex {
color: $colorYellow; color: $colorYellow;
} }
.token.selector { .token.selector {
color: $codeRed; color: $codeRed;
} }
.token.string { .token.string {
color: $codeGreen; color: $codeGreen;
} }
.token.symbol { .token.symbol {
color: $codePurple; color: $codePurple;
} }
.token.tag { .token.tag {
color: $codeRed; color: $codeRed;
} }
.token.unit { .token.unit {
color: $codeOrange; color: $codeOrange;
} }
.token.url { .token.url {
color: $codeRed; color: $codeRed;
} }
.token.variable { .token.variable {
color: $codeRed; color: $codeRed;
} }