fix: break long words in code tag, combine all styles in one file, move styles to correct place
This commit is contained in:
Paul Mineev
Umputun
@@ -1,5 +1,3 @@
|
||||
import 'components/raw-content';
|
||||
|
||||
import './comment-form.css';
|
||||
|
||||
import './__actions/comment-form__actions.css';
|
||||
|
||||
@@ -0,0 +1,243 @@
|
||||
.raw-content {
|
||||
word-wrap: break-word;
|
||||
|
||||
& > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& > *:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--color9);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
padding: 12px 8px 12px 16px;
|
||||
border-left: 2px solid;
|
||||
border-left-color: var(--color45);
|
||||
}
|
||||
|
||||
& p,
|
||||
& blockquote {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
& table {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
& th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& th,
|
||||
& td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid var(--color16);
|
||||
}
|
||||
|
||||
& tr {
|
||||
border-top: 1px solid var(--color43);
|
||||
background-color: var(--color6);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--color21);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& sup,
|
||||
& sub {
|
||||
& sup,
|
||||
& sub {
|
||||
vertical-align: middle; /* to prevent some visual cheats */
|
||||
}
|
||||
}
|
||||
|
||||
& hr {
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: var(--color21);
|
||||
}
|
||||
|
||||
& code {
|
||||
background-color: var(--chroma-bg);
|
||||
border-radius: 3px;
|
||||
color: var(--chroma-base);
|
||||
line-height: 1.45;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 0.05em 0.3em;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
& pre {
|
||||
padding: 0.75em 1em;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
tab-size: 2;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
border-radius: 3px;
|
||||
background-color: var(--chroma-bg);
|
||||
}
|
||||
|
||||
/* Syntax Highlight Colors */
|
||||
& pre > code {
|
||||
font-size: 100%;
|
||||
padding: 0;
|
||||
color: var(--chroma-base);
|
||||
background-color: transparent;
|
||||
|
||||
/* Comments */
|
||||
& .c1,
|
||||
& .cm,
|
||||
& .c,
|
||||
& .ch,
|
||||
& .cp,
|
||||
& .cpf,
|
||||
& .cs {
|
||||
color: var(--chroma-c);
|
||||
}
|
||||
|
||||
& .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .gr,
|
||||
& .gs {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
& .kd {
|
||||
color: var(--chroma-07);
|
||||
}
|
||||
|
||||
& .kn,
|
||||
& .k,
|
||||
& .kc,
|
||||
& .kp,
|
||||
& .kr,
|
||||
& .kt,
|
||||
& .ow {
|
||||
color: var(--chroma-01);
|
||||
}
|
||||
|
||||
& .nb,
|
||||
& .nc {
|
||||
color: var(--chroma-02);
|
||||
}
|
||||
|
||||
& .bp,
|
||||
& .n,
|
||||
& .na,
|
||||
& .fm,
|
||||
& .nd,
|
||||
& .ne,
|
||||
& .nf,
|
||||
& .ni,
|
||||
& .nl,
|
||||
& .nn,
|
||||
& .no,
|
||||
& .nt,
|
||||
& .nv,
|
||||
& .nx,
|
||||
& .py,
|
||||
& .vc,
|
||||
& .vg,
|
||||
& .vi,
|
||||
& .vm {
|
||||
color: var(--chroma-03);
|
||||
}
|
||||
|
||||
& .dl,
|
||||
& .il,
|
||||
& .l,
|
||||
& .ld,
|
||||
& .m,
|
||||
& .mb,
|
||||
& .mf,
|
||||
& .mh,
|
||||
& .mi,
|
||||
& .mo,
|
||||
& .s,
|
||||
& .s1,
|
||||
& .s2,
|
||||
& .sa,
|
||||
& .sb,
|
||||
& .sc,
|
||||
& .sd,
|
||||
& .se,
|
||||
& .sh,
|
||||
& .si,
|
||||
& .sr,
|
||||
& .ss,
|
||||
& .sx {
|
||||
color: var(--chroma-04);
|
||||
}
|
||||
|
||||
& .g,
|
||||
& .gd,
|
||||
& .ge,
|
||||
& .gh,
|
||||
& .gi,
|
||||
& .gl,
|
||||
& .go,
|
||||
& .gp,
|
||||
& .gr,
|
||||
& .gs,
|
||||
& .gt,
|
||||
& .gu {
|
||||
color: var(--chroma-06);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark .raw-content {
|
||||
/* Syntax Highlight Colors */
|
||||
--chroma-bg: rgba(255, 255, 255, 0.05);
|
||||
--chroma-base: #a0b2b2;
|
||||
--chroma-c: #586e75;
|
||||
--chroma-01: #9ef203;
|
||||
--chroma-03: rgb(80, 180, 252);
|
||||
--chroma-05: #a7ec07;
|
||||
--chroma-06: #ed403d;
|
||||
--chroma-07: #a1e6fb;
|
||||
|
||||
& blockquote {
|
||||
border-left-color: var(--color44);
|
||||
}
|
||||
|
||||
& table {
|
||||
& th,
|
||||
& td {
|
||||
border: 1px solid var(--color24);
|
||||
}
|
||||
|
||||
& tr {
|
||||
background-color: var(--color8);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--color23);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& hr {
|
||||
border-color: var(--color22);
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import 'components/raw-content';
|
||||
import './raw-content.css';
|
||||
|
||||
import './comment.css';
|
||||
import './__body/comment__body.css';
|
||||
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
.raw-content_theme_dark {
|
||||
& blockquote {
|
||||
border-left-color: var(--color44);
|
||||
}
|
||||
|
||||
& table {
|
||||
& th,
|
||||
& td {
|
||||
border: 1px solid var(--color24);
|
||||
}
|
||||
|
||||
& tr {
|
||||
background-color: var(--color8);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--color23);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& hr {
|
||||
border-color: var(--color22);
|
||||
}
|
||||
}
|
||||
-24
@@ -1,24 +0,0 @@
|
||||
.raw-content_theme_light {
|
||||
& blockquote {
|
||||
border-left-color: var(--color45);
|
||||
}
|
||||
|
||||
& table {
|
||||
& th,
|
||||
& td {
|
||||
border: 1px solid var(--color16);
|
||||
}
|
||||
|
||||
& tr {
|
||||
background-color: var(--color6);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-color: var(--color21);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& hr {
|
||||
border-color: var(--color21);
|
||||
}
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
pre {
|
||||
color: var(--chroma-base);
|
||||
background-color: var(--chroma-bg);
|
||||
|
||||
/* Comments */
|
||||
& .c1,
|
||||
& .cm,
|
||||
& .c,
|
||||
& .ch,
|
||||
& .cp,
|
||||
& .cpf,
|
||||
& .cs {
|
||||
color: var(--chroma-c);
|
||||
}
|
||||
|
||||
& .ge {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& .gr,
|
||||
& .gs {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
& .kd {
|
||||
color: var(--chroma-07);
|
||||
}
|
||||
|
||||
& .kn,
|
||||
& .k,
|
||||
& .kc,
|
||||
& .kp,
|
||||
& .kr,
|
||||
& .kt,
|
||||
& .ow {
|
||||
color: var(--chroma-01);
|
||||
}
|
||||
|
||||
& .nb,
|
||||
& .nc {
|
||||
color: var(--chroma-02);
|
||||
}
|
||||
|
||||
& .bp,
|
||||
& .n,
|
||||
& .na,
|
||||
& .fm,
|
||||
& .nd,
|
||||
& .ne,
|
||||
& .nf,
|
||||
& .ni,
|
||||
& .nl,
|
||||
& .nn,
|
||||
& .no,
|
||||
& .nt,
|
||||
& .nv,
|
||||
& .nx,
|
||||
& .py,
|
||||
& .vc,
|
||||
& .vg,
|
||||
& .vi,
|
||||
& .vm {
|
||||
color: var(--chroma-03);
|
||||
}
|
||||
|
||||
& .dl,
|
||||
& .il,
|
||||
& .l,
|
||||
& .ld,
|
||||
& .m,
|
||||
& .mb,
|
||||
& .mf,
|
||||
& .mh,
|
||||
& .mi,
|
||||
& .mo,
|
||||
& .s,
|
||||
& .s1,
|
||||
& .s2,
|
||||
& .sa,
|
||||
& .sb,
|
||||
& .sc,
|
||||
& .sd,
|
||||
& .se,
|
||||
& .sh,
|
||||
& .si,
|
||||
& .sr,
|
||||
& .ss,
|
||||
& .sx {
|
||||
color: var(--chroma-04);
|
||||
}
|
||||
|
||||
& .g,
|
||||
& .gd,
|
||||
& .ge,
|
||||
& .gh,
|
||||
& .gi,
|
||||
& .gl,
|
||||
& .go,
|
||||
& .gp,
|
||||
& .gr,
|
||||
& .gs,
|
||||
& .gt,
|
||||
& .gu {
|
||||
color: var(--chroma-06);
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
import './raw-content.css';
|
||||
import './code-highlight.css';
|
||||
|
||||
import './_theme/_dark/raw-content_theme_dark.css';
|
||||
import './_theme/_light/raw-content_theme_light.css';
|
||||
@@ -1,129 +0,0 @@
|
||||
.raw-content {
|
||||
& .root_theme_dark {
|
||||
--chroma-bg: rgba(255, 255, 255, 0.1);
|
||||
--chroma-base: #93a1a1;
|
||||
--chroma-c: #586e75;
|
||||
--chroma-01: #8ad200;
|
||||
--chroma-03: #3af;
|
||||
--chroma-05: #8eca03;
|
||||
--chroma-06: #dc322f;
|
||||
--chroma-07: #95d5e8;
|
||||
}
|
||||
|
||||
word-break: break-word;
|
||||
|
||||
& p,
|
||||
& blockquote {
|
||||
margin: 0.5rem 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& a {
|
||||
color: var(--color9);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
& img {
|
||||
max-width: 100%;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6 {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
& blockquote {
|
||||
padding: 12px 8px 12px 16px;
|
||||
border-left: 2px solid;
|
||||
}
|
||||
|
||||
& table {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
& th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& th,
|
||||
& td {
|
||||
padding: 6px 13px;
|
||||
}
|
||||
|
||||
& tr {
|
||||
border-top: 1px solid var(--color43);
|
||||
}
|
||||
}
|
||||
|
||||
& code {
|
||||
background-color: var(--chroma-bg);
|
||||
border-radius: 3px;
|
||||
color: var(--chroma-base);
|
||||
display: inline-block;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
padding: 0 0.4em;
|
||||
white-space: pre;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
& pre {
|
||||
padding: 12px 16px 12px 18px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
tab-size: 2;
|
||||
word-wrap: normal;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
border-radius: 3px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& > code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& sup,
|
||||
& sub {
|
||||
& sup,
|
||||
& sub {
|
||||
vertical-align: middle; /* to prevent some visual cheats */
|
||||
}
|
||||
}
|
||||
|
||||
& hr {
|
||||
border-width: 0 0 1px 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user