mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

black to white

Browse Source
This commit is contained in:
Philipp Kühn 2021-01-29 11:46:19 +01:00 committed by Hans Pagel
parent 238776c479
commit 60263ca0d0
6 changed files with 44 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,10 +12,11 @@
max-height: 50rem; max-height: 50rem;
overflow: auto; overflow: auto;
scroll-behavior: smooth; scroll-behavior: smooth;
border: 1px solid rgba($colorBlack, 0.1);
} }
&__source { &__source {
border: 1px solid rgba($colorWhite, 0.1); border: 1px solid rgba($colorBlack, 0.1);
background-color: $colorBlack; background-color: $colorBlack;
} }

6
docs/src/components/PageNavigation/style.scss
View File

@ -4,13 +4,13 @@
padding: 1.5rem 0; padding: 1.5rem 0;
&__link { &__link {
color: rgba($colorWhite, 0.6); color: rgba($colorBlack, 0.6);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: 5px; border-radius: 5px;
&:hover { &:hover {
color: $colorWhite; color: $colorBlack;
background-color: rgba($colorWhite, 0.05); background-color: rgba($colorBlack, 0.05);
} }
} }
} }

44
docs/src/layouts/App/base.scss
View File

@ -55,7 +55,7 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.7; line-height: 1.7;
font-feature-settings: 'cv05' 1; font-feature-settings: 'cv05' 1;
background-color: $colorBlack; background-color: $colorWhite;
color: $colorText; color: $colorText;
} }
@ -75,7 +75,7 @@ a {
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: $colorWhite; color: $colorBlack;
} }
} }
@ -91,46 +91,6 @@ code {
color: white; color: white;
} }
// TODO: Move to examples
// .ProseMirror {
// > * + * {
// margin-top: 0.75em;
// }
// ul,
// ol {
// padding: 0 1rem;
// }
// pre {
// background: $colorBlack;
// color: $colorWhite;
// font-family: 'JetBrainsMono', monospace;
// padding: 0.75rem 1rem;
// border-radius: 0.5rem;
// code {
// color: inherit;
// background: none;
// font-size: 0.8rem;
// }
// }
// img {
// max-width: 100%;
// height: auto;
// }
// hr {
// margin: 1rem 0;
// }
// blockquote {
// padding-left: 1rem;
// border-left: 2px solid rgba($colorBlack, 0.1);
// }
// }
.DocSearch, .DocSearch,
.DocSearch-Container { .DocSearch-Container {
filter: saturate(0); filter: saturate(0);

30
docs/src/layouts/App/style.scss
View File

@ -16,7 +16,7 @@ $menuBreakPoint: 800px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
font-weight: 600; font-weight: 600;
color: $colorWhite; color: $colorBlack;
font-size: 1.5rem; font-size: 1.5rem;
&::after { &::after {
@ -27,7 +27,7 @@ $menuBreakPoint: 800px;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
text-transform: uppercase; text-transform: uppercase;
border-radius: 5px; border-radius: 5px;
border: 1px solid $colorWhite; border: 1px solid $colorBlack;
padding: 0 0.4em; padding: 0 0.4em;
} }
} }
@ -51,13 +51,13 @@ $menuBreakPoint: 800px;
height: 3rem; height: 3rem;
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: transparent;
border: 1px solid rgba($colorWhite, 0.1); border: 1px solid rgba($colorBlack, 0.1);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
&::after { &::after {
content: 'Search'; content: 'Search';
color: rgba($colorWhite, 0.5); color: rgba($colorBlack, 0.5);
} }
} }
@ -90,7 +90,7 @@ $menuBreakPoint: 800px;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain; overscroll-behavior: contain;
border-right: 1px solid rgba($colorWhite, 0.1); border-right: 1px solid rgba($colorBlack, 0.1);
} }
} }
@ -121,7 +121,7 @@ $menuBreakPoint: 800px;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: $colorBlack; background-color: $colorWhite;
opacity: 0.8; opacity: 0.8;
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
pointer-events: none; pointer-events: none;
@ -146,7 +146,7 @@ $menuBreakPoint: 800px;
transition: color 0.2s $ease; transition: color 0.2s $ease;
&:hover { &:hover {
color: $colorWhite; color: $colorBlack;
} }
@media (min-width: $menuBreakPoint) { @media (min-width: $menuBreakPoint) {
@ -177,7 +177,7 @@ $menuBreakPoint: 800px;
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
color: rgba($colorWhite, 0.3); color: rgba($colorBlack, 0.3);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -209,16 +209,16 @@ $menuBreakPoint: 800px;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover {
color: $colorWhite; color: $colorBlack;
} }
&--exact { &--exact {
color: $colorWhite; color: $colorBlack;
background-color: rgba($colorWhite, 0.05); background-color: rgba($colorBlack, 0.05);
} }
&--draft { &--draft {
color: rgba($colorWhite, 0.4); color: rgba($colorBlack, 0.4);
&::after { &::after {
content: 'draft'; content: 'draft';
@ -268,7 +268,7 @@ $menuBreakPoint: 800px;
&--with-children::after { &--with-children::after {
content: '›'; content: '›';
font-weight: bold; font-weight: bold;
color: rgba($colorWhite, 0.2); color: rgba($colorBlack, 0.2);
position: absolute; position: absolute;
margin-left: -1.5em; margin-left: -1.5em;
} }
@ -287,14 +287,14 @@ $menuBreakPoint: 800px;
} }
&__page-navigation { &__page-navigation {
border-top: 1px solid rgba($colorWhite, 0.1); border-top: 1px solid rgba($colorBlack, 0.1);
} }
&__page-footer { &__page-footer {
font-size: 0.85rem; font-size: 0.85rem;
padding: 1.5rem 0; padding: 1.5rem 0;
text-align: center; text-align: center;
border-top: 1px solid rgba($colorWhite, 0.1); border-top: 1px solid rgba($colorBlack, 0.1);
a { a {
text-decoration: underline; text-decoration: underline;

50
docs/src/templates/DocPage/style.scss
View File

@ -27,8 +27,7 @@
> h4, > h4,
> h5, > h5,
> h6 { > h6 {
font-weight: 500; color: $colorBlack;
color: $colorWhite;
margin-top: 3 * $spacing; margin-top: 3 * $spacing;
margin-bottom: $spacing; margin-bottom: $spacing;
@ -54,7 +53,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 100%; right: 100%;
color: rgba($colorWhite, 0.4); color: rgba($colorBlack, 0.4);
text-decoration: none; text-decoration: none;
font-weight: 400; font-weight: 400;
padding-right: 0.5rem; padding-right: 0.5rem;
@ -80,7 +79,7 @@
} }
> pre { > pre {
border: 1px solid rgba($colorWhite, 0.1); border: 1px solid rgba($colorBlack, 0.1);
} }
> p code, > p code,
@ -88,8 +87,8 @@
> ol code, > ol code,
> .table-wrapper code, > .table-wrapper code,
> .remark-container code { > .remark-container code {
color: $colorYellow; color: rgba($colorBlack, 0.7);
background-color: rgba($colorYellow, 0.1); background-color: rgba($colorYellow, 0.3);
box-decoration-break: clone; box-decoration-break: clone;
} }
@ -110,9 +109,10 @@
& + ul { & + ul {
list-style: none; list-style: none;
border: 1px solid rgba($colorWhite, 0.1); background-color: rgba($colorBlack, 0.03);
padding: 1.25rem !important; padding: 1.25rem !important;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.85rem;
&::before { &::before {
display: block; display: block;
@ -121,7 +121,7 @@
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
color: rgba($colorWhite, 0.3); color: rgba($colorBlack, 0.3);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -157,7 +157,7 @@
display: inline-block; display: inline-block;
margin-right: 0.75rem; margin-right: 0.75rem;
content: "\2022"; content: "\2022";
color: $colorYellow; color: $colorBlack;
} }
} }
} }
@ -180,9 +180,9 @@
justify-content: center; justify-content: center;
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
background-color: rgba($colorYellow, 0.1); background-color: rgba($colorBlack, 0.1);
border-radius: 9999px; border-radius: 9999px;
color: $colorYellow; color: $colorBlack;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 700; font-weight: 700;
content: counter(item); content: counter(item);
@ -219,13 +219,13 @@
th { th {
white-space: nowrap; white-space: nowrap;
color: $colorWhite; color: $colorBlack;
font-weight: 500; font-weight: 500;
border-bottom: 1px solid rgba($colorWhite, 0.2); border-bottom: 1px solid rgba($colorBlack, 0.2);
} }
td { td {
border-bottom: 1px solid rgba($colorWhite, 0.1); border-bottom: 1px solid rgba($colorBlack, 0.1);
} }
tr:last-child td { tr:last-child td {
@ -238,7 +238,7 @@
} }
&:hover { &:hover {
background: rgba($colorWhite, 0.02); background: rgba($colorBlack, 0.02);
} }
} }
} }
@ -246,31 +246,23 @@
> .remark-container { > .remark-container {
padding: 1.25rem; padding: 1.25rem;
border: 1px solid rgba($colorWhite, 0.1);
border-radius: 0.5rem; border-radius: 0.5rem;
color: rgba($colorBlack, 0.7);
&.warning { &.warning {
border-color: rgba($colorYellow, 0.1); background-color: rgba($colorYellow, 0.3);
background-color: rgba($colorYellow, 0.1);
color: $colorYellow;
} }
&.info { &.info {
border-color: rgba($colorBlue, 0.1); background-color: rgba($colorBlue, 0.3);
background-color: rgba($colorBlue, 0.1);
color: $colorBlue;
} }
&.error { &.error {
border-color: rgba($colorRed, 0.1); background-color: rgba($colorRed, 0.3);
background-color: rgba($colorRed, 0.1);
color: $colorRed;
} }
&.pro { &.pro {
border-color: rgba($colorOrange, 0.1); background-color: rgba($colorOrange, 0.3);
background-color: rgba($colorOrange, 0.1);
color: $colorOrange;
} }
.remark-container-title { .remark-container-title {
@ -280,7 +272,7 @@
> blockquote { > blockquote {
border-left: 1px solid rgba($colorGrey, 0.5); border-left: 1px solid rgba($colorGrey, 0.5);
padding-left: 2*$spacing; padding-left: 2 * $spacing;
} }
} }

2
docs/src/variables.scss
View File

@ -1,6 +1,6 @@
$colorWhite: #FFF; $colorWhite: #FFF;
$colorBlack: #0D0D0D; $colorBlack: #0D0D0D;
$colorText: rgba($colorWhite, 0.75); $colorText: rgba($colorBlack, 0.8);
$colorGrey: #616161; $colorGrey: #616161;
$colorPurple: #A975FF; $colorPurple: #A975FF;
$colorRed: #FB5151; $colorRed: #FB5151;