mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-06-24 21:10:40 +08:00
add toc style
This commit is contained in:
parent
4cd4c7527b
commit
801912be5d
@ -60,7 +60,6 @@
|
|||||||
border-bottom-right-radius: inherit;
|
border-bottom-right-radius: inherit;
|
||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
background-color: $colorBlack;
|
background-color: $colorBlack;
|
||||||
color: $colorWhite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
|
@ -56,7 +56,6 @@ export default {
|
|||||||
&__editor {
|
&__editor {
|
||||||
border: 1px solid rgba($colorWhite, 0.1);
|
border: 1px solid rgba($colorWhite, 0.1);
|
||||||
background-color: $colorBlack;
|
background-color: $colorBlack;
|
||||||
color: $colorText;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__editor ::v-deep {
|
&__editor ::v-deep {
|
||||||
|
@ -48,11 +48,6 @@
|
|||||||
border-bottom-right-radius: inherit;
|
border-bottom-right-radius: inherit;
|
||||||
border-top-width: 0;
|
border-top-width: 0;
|
||||||
background-color: $colorBlack;
|
background-color: $colorBlack;
|
||||||
color: $colorWhite;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__link {
|
|
||||||
// text-align: right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__error {
|
&__error {
|
||||||
|
@ -53,7 +53,7 @@ body {
|
|||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
font-feature-settings: 'cv05' 1;
|
font-feature-settings: 'cv05' 1;
|
||||||
background-color: $colorBlack;
|
background-color: $colorBlack;
|
||||||
color: $colorWhite;
|
color: $colorText;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -27,7 +27,7 @@ pre[class*="language-"] {
|
|||||||
|
|
||||||
:not(pre) > code[class*="language-"] {
|
:not(pre) > code[class*="language-"] {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
color: $colorText;
|
color: $colorWhite;
|
||||||
background: $codeBackground;
|
background: $codeBackground;
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
padding: 0.1em;
|
padding: 0.1em;
|
||||||
@ -42,7 +42,7 @@ pre > code[class*="language-"] {
|
|||||||
pre[class*="language-"] {
|
pre[class*="language-"] {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: $colorText;
|
color: $colorWhite;
|
||||||
background: $codeBackground;
|
background: $codeBackground;
|
||||||
padding: 1.2rem 1.5rem !important;
|
padding: 1.2rem 1.5rem !important;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
@ -201,19 +201,21 @@ $menuBreakPoint: 750px;
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
overscroll-behavior: contain;
|
overscroll-behavior: contain;
|
||||||
|
border-right: 1px solid rgba($colorWhite, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
min-width: 0;
|
||||||
padding: 0 2rem 2rem 2rem;
|
padding: 0 2rem 2rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__top-bar {
|
&__top-bar {
|
||||||
padding: 2rem;
|
padding: 1rem 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: rgba($colorBlack, 0.7);
|
background-color: rgba($colorBlack, 0.8);
|
||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -248,12 +250,11 @@ $menuBreakPoint: 750px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__link {
|
&__link {
|
||||||
display: block;
|
display: flex;
|
||||||
padding: 0.1rem 0.5rem;
|
justify-content: space-between;
|
||||||
|
padding: 0.25rem 0.5rem;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-weight: 500;
|
font-size: 0.85rem;
|
||||||
color: rgba($colorWhite, 0.6);
|
|
||||||
margin-bottom: 0.2rem;
|
|
||||||
margin-left: -0.5rem;
|
margin-left: -0.5rem;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -262,7 +263,7 @@ $menuBreakPoint: 750px;
|
|||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
color: $colorWhite;
|
color: $colorWhite;
|
||||||
background-color: rgba($colorWhite, 0.05);
|
background-color: rgba($colorWhite, 0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
&--draft {
|
&--draft {
|
||||||
@ -270,8 +271,12 @@ $menuBreakPoint: 750px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
&--with-children::after {
|
&--with-children::after {
|
||||||
content: '→';
|
content: '↓';
|
||||||
color: rgba($colorWhite, 0.2);
|
color: rgba($colorWhite, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__main {
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -12,9 +12,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> ul li,
|
> ul li,
|
||||||
> ol li {
|
> ol li,
|
||||||
margin-top: $spacing;
|
> ul ul,
|
||||||
margin-bottom: $spacing;
|
> ul ol,
|
||||||
|
> ol ol,
|
||||||
|
> ol ul {
|
||||||
|
margin-top: 0.5 * $spacing;
|
||||||
|
margin-bottom: 0.5 * $spacing;
|
||||||
}
|
}
|
||||||
|
|
||||||
> h1,
|
> h1,
|
||||||
@ -23,6 +27,7 @@
|
|||||||
> h4,
|
> h4,
|
||||||
> h5,
|
> h5,
|
||||||
> h6 {
|
> h6 {
|
||||||
|
color: $colorWhite;
|
||||||
margin-top: 3 * $spacing;
|
margin-top: 3 * $spacing;
|
||||||
margin-bottom: $spacing;
|
margin-bottom: $spacing;
|
||||||
|
|
||||||
@ -61,18 +66,14 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> :first-child {
|
:first-child {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> :last-child {
|
:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
> p {
|
|
||||||
color: rgba($colorWhite, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
> pre {
|
> pre {
|
||||||
border: 1px solid rgba($colorWhite, 0.1);
|
border: 1px solid rgba($colorWhite, 0.1);
|
||||||
}
|
}
|
||||||
@ -92,13 +93,32 @@
|
|||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#table-of-contents + ul {
|
||||||
|
border: 1px solid rgba($colorWhite, 0.1);
|
||||||
|
padding: 1.2rem 1.5rem !important;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
|
||||||
|
li {
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// a::before {
|
||||||
|
// content: '→ ';
|
||||||
|
// opacity: 0.2;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
> ul {
|
> ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
||||||
> * + * {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 1.25rem;
|
padding-left: 1.25rem;
|
||||||
@ -117,10 +137,6 @@
|
|||||||
> ol {
|
> ol {
|
||||||
counter-reset: item;
|
counter-reset: item;
|
||||||
|
|
||||||
> * + * {
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
li {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 2.5rem;
|
padding-left: 2.5rem;
|
||||||
@ -151,7 +167,6 @@
|
|||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
color: rgba($colorWhite, 0.8);
|
|
||||||
|
|
||||||
th,
|
th,
|
||||||
td {
|
td {
|
||||||
|
Loading…
Reference in New Issue
Block a user