aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText/FormattedTextBox.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/formattedText/FormattedTextBox.scss')
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss553
1 files changed, 451 insertions, 102 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 27817f317..d3d8c47c0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -1,4 +1,4 @@
-@import "../../global/globalCssVariables";
+@import '../../global/globalCssVariables';
.ProseMirror {
width: 100%;
@@ -11,13 +11,13 @@
}
audiotag {
- left: 0;
- position: absolute;
- cursor: pointer;
- border-radius: 10px;
- width: 10px;
- margin-top: -2px;
- font-size: 4px;
+ left: 0;
+ position: absolute;
+ cursor: pointer;
+ border-radius: 10px;
+ width: 10px;
+ margin-top: -2px;
+ font-size: 4px;
background: lightblue;
}
audiotag:hover {
@@ -63,12 +63,11 @@ audiotag:hover {
.formattedTextBox-outer-selected {
cursor: text;
}
-
+
.formattedTextBox-sidebar-handle {
position: absolute;
top: 0;
- left: 17px;
- //top: calc(50% - 17.5px); // use this to center vertically -- make sure it looks okay for slide views
+ right: 0;
width: 17px;
height: 17px;
font-size: 11px;
@@ -79,15 +78,14 @@ audiotag:hover {
display: flex;
justify-content: center;
align-items: center;
- cursor:grabbing;
+ cursor: grabbing;
box-shadow: $standard-box-shadow;
// transition: 0.2s;
opacity: 0.3;
- &:hover{
+ &:hover {
opacity: 1 !important;
filter: brightness(0.85);
}
-
}
.formattedTextBox-sidebar,
@@ -117,14 +115,15 @@ audiotag:hover {
left: 10%;
}
-.formattedTextBox-inner-rounded, .formattedTextBox-inner-rounded-selected,
-.formattedTextBox-inner,
+.formattedTextBox-inner-rounded,
+.formattedTextBox-inner-rounded-selected,
+.formattedTextBox-inner,
.formattedTextBox-inner-minimal,
.formattedTextBox-inner-selected {
height: 100%;
white-space: pre-wrap;
.ProseMirror:hover {
- background: rgba(200,200,200,0.2);
+ background: rgba(200, 200, 200, 0.2);
}
hr {
display: block;
@@ -141,7 +140,7 @@ audiotag:hover {
.formattedTextBox-inner-rounded-selected,
.formattedTextBox-inner-selected {
> .ProseMirror {
- padding:10px;
+ padding: 10px;
}
}
.formattedTextBox-outer-selected {
@@ -236,18 +235,17 @@ footnote::after {
position: absolute;
top: -5px;
left: 27px;
- content: " ";
+ content: ' ';
height: 0;
width: 0;
}
-
.formattedTextBox-inlineComment {
position: relative;
width: 40px;
height: 20px;
&::before {
- content: "→";
+ content: '→';
}
&:hover {
background: orange;
@@ -260,7 +258,7 @@ footnote::after {
width: 40px;
height: 20px;
&::after {
- content: "←";
+ content: '←';
}
}
@@ -270,21 +268,21 @@ footnote::after {
width: 40px;
height: 20px;
&::after {
- content: "...";
+ content: '...';
}
}
.prosemirror-anchor {
- overflow:hidden;
- display:inline-grid;
+ overflow: hidden;
+ display: inline-grid;
}
.prosemirror-linkBtn {
- background:unset;
- color:unset;
- padding:0;
+ background: unset;
+ color: unset;
+ padding: 0;
text-transform: unset;
letter-spacing: unset;
- font-size:unset;
+ font-size: unset;
}
.prosemirror-links {
display: none;
@@ -294,28 +292,28 @@ footnote::after {
z-index: 1;
padding: 5;
border-radius: 2px;
- }
- .prosemirror-hrefoptions{
- width:0px;
- border:unset;
- padding:0px;
- }
-
- .prosemirror-links a {
+}
+.prosemirror-hrefoptions {
+ width: 0px;
+ border: unset;
+ padding: 0px;
+}
+
+.prosemirror-links a {
float: left;
color: white;
text-decoration: none;
border-radius: 3px;
- }
+}
- .prosemirror-links a:hover {
+.prosemirror-links a:hover {
background-color: #eee;
color: black;
- }
+}
- .prosemirror-anchor:hover .prosemirror-links {
+.prosemirror-anchor:hover .prosemirror-links {
display: grid;
- }
+}
.ProseMirror {
padding: 0px;
@@ -334,7 +332,8 @@ footnote::after {
border-left: solid 2px dimgray;
}
- ol, ul {
+ ol,
+ ul {
counter-reset: deci1 0 multi1 0;
padding-left: 1em;
font-family: inherit;
@@ -342,42 +341,231 @@ footnote::after {
ol {
font-family: inherit;
}
- .bullet { p { font-family: inherit} margin-left: 0; }
- .bullet1 { p { font-family: inherit} }
- .bullet2,.bullet3,.bullet4,.bullet5,.bullet6 { p { font-family: inherit} font-size: smaller; }
+ .bullet {
+ p {
+ font-family: inherit;
+ }
+ margin-left: 0;
+ }
+ .bullet1 {
+ p {
+ font-family: inherit;
+ }
+ }
+ .bullet2,
+ .bullet3,
+ .bullet4,
+ .bullet5,
+ .bullet6 {
+ p {
+ font-family: inherit;
+ }
+ font-size: smaller;
+ }
- .decimal1-ol { counter-reset: deci1; p {display: inline-block; font-family: inherit} margin-left: 0; }
- .decimal2-ol { counter-reset: deci2; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2.1em;}
- .decimal3-ol { counter-reset: deci3; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2.85em;}
- .decimal4-ol { counter-reset: deci4; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 3.85em;}
- .decimal5-ol { counter-reset: deci5; p {display: inline-block; font-family: inherit} font-size: smaller; }
- .decimal6-ol { counter-reset: deci6; p {display: inline-block; font-family: inherit} font-size: smaller; }
- .decimal7-ol { counter-reset: deci7; p {display: inline-block; font-family: inherit} font-size: smaller; }
+ .decimal1-ol {
+ counter-reset: deci1;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ margin-left: 0;
+ }
+ .decimal2-ol {
+ counter-reset: deci2;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 2.1em;
+ }
+ .decimal3-ol {
+ counter-reset: deci3;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 2.85em;
+ }
+ .decimal4-ol {
+ counter-reset: deci4;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 3.85em;
+ }
+ .decimal5-ol {
+ counter-reset: deci5;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ }
+ .decimal6-ol {
+ counter-reset: deci6;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ }
+ .decimal7-ol {
+ counter-reset: deci7;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ }
- .multi1-ol { counter-reset: multi1; p {display: inline-block; font-family: inherit} margin-left: 0; padding-left: 1.2em }
- .multi2-ol { counter-reset: multi2; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2em;}
- .multi3-ol { counter-reset: multi3; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 2.85em;}
- .multi4-ol { counter-reset: multi4; p {display: inline-block; font-family: inherit} font-size: smaller; padding-left: 3.85em;}
+ .multi1-ol {
+ counter-reset: multi1;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ margin-left: 0;
+ padding-left: 1.2em;
+ }
+ .multi2-ol {
+ counter-reset: multi2;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 2em;
+ }
+ .multi3-ol {
+ counter-reset: multi3;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 2.85em;
+ }
+ .multi4-ol {
+ counter-reset: multi4;
+ p {
+ display: inline-block;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 3.85em;
+ }
//.bullet:before, .bullet1:before, .bullet2:before, .bullet3:before, .bullet4:before, .bullet5:before { transition: 0.5s; display: inline-block; vertical-align: top; margin-left: -1em; width: 1em; content:" " }
- .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; vertical-align: top; margin-left: -1em; width: 1em; content: counter(deci1) ". "; }
- .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; vertical-align: top; margin-left: -2.1em; width: 2.1em; content: counter(deci1) "."counter(deci2) ". "; }
- .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; vertical-align: top; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
- .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; vertical-align: top; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
- .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; vertical-align: top; margin-left: -2em; width: 5em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
- .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; vertical-align: top; margin-left: -2em; width: 6em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
- .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; vertical-align: top; margin-left: -2em; width: 7em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
+ .decimal1:before {
+ transition: 0.5s;
+ counter-increment: deci1;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -1em;
+ width: 1em;
+ content: counter(deci1) '. ';
+ }
+ .decimal2:before {
+ transition: 0.5s;
+ counter-increment: deci2;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -2.1em;
+ width: 2.1em;
+ content: counter(deci1) '.' counter(deci2) '. ';
+ }
+ .decimal3:before {
+ transition: 0.5s;
+ counter-increment: deci3;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -2.85em;
+ width: 2.85em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '. ';
+ }
+ .decimal4:before {
+ transition: 0.5s;
+ counter-increment: deci4;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -3.85em;
+ width: 3.85em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '. ';
+ }
+ .decimal5:before {
+ transition: 0.5s;
+ counter-increment: deci5;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -2em;
+ width: 5em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '. ';
+ }
+ .decimal6:before {
+ transition: 0.5s;
+ counter-increment: deci6;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -2em;
+ width: 6em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '. ';
+ }
+ .decimal7:before {
+ transition: 0.5s;
+ counter-increment: deci7;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -2em;
+ width: 7em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '.' counter(deci7) '. ';
+ }
- .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; vertical-align: top; margin-left: -1.3em; width: 1.2em; content: counter(multi1, upper-alpha) ". "; }
- .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; vertical-align: top; margin-left: -2em; width: 2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
- .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; vertical-align: top; margin-left: -2.85em; width:2.85em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
- .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; vertical-align: top; margin-left: -4.2em; width: 4.2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+ .multi1:before {
+ transition: 0.5s;
+ counter-increment: multi1;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -1.3em;
+ width: 1.2em;
+ content: counter(multi1, upper-alpha) '. ';
+ }
+ .multi2:before {
+ transition: 0.5s;
+ counter-increment: multi2;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -2em;
+ width: 2em;
+ content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '. ';
+ }
+ .multi3:before {
+ transition: 0.5s;
+ counter-increment: multi3;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -2.85em;
+ width: 2.85em;
+ content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '. ';
+ }
+ .multi4:before {
+ transition: 0.5s;
+ counter-increment: multi4;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: -4.2em;
+ width: 4.2em;
+ content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '.' counter(multi4, lower-roman) '. ';
+ }
}
-
@media only screen and (max-width: 1000px) {
- @import "../../global/globalCssVariables";
+ @import '../../global/globalCssVariables';
.ProseMirror {
width: 100%;
@@ -425,7 +613,7 @@ footnote::after {
width: 100%;
height: 100%;
}
-
+
.formattedTextBox-sidebar-handle {
position: absolute;
background: lightgray;
@@ -562,18 +750,17 @@ footnote::after {
position: absolute;
top: -5px;
left: 27px;
- content: " ";
+ content: ' ';
height: 0;
width: 0;
}
-
.formattedTextBox-inlineComment {
position: relative;
width: 40px;
height: 20px;
&::before {
- content: "→";
+ content: '→';
}
&:hover {
background: orange;
@@ -586,7 +773,7 @@ footnote::after {
width: 40px;
height: 20px;
&::after {
- content: "←";
+ content: '←';
}
}
@@ -596,7 +783,7 @@ footnote::after {
width: 40px;
height: 20px;
&::after {
- content: "...";
+ content: '...';
}
}
@@ -606,7 +793,8 @@ footnote::after {
font-family: inherit;
}
- ol, ul {
+ ol,
+ ul {
counter-reset: deci1 0 multi1 0;
padding-left: 1em;
font-family: inherit;
@@ -616,30 +804,191 @@ footnote::after {
font-family: inherit;
}
- .decimal1-ol { counter-reset: deci1; p {display: inline; font-family: inherit} margin-left: 0; }
- .decimal2-ol { counter-reset: deci2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1em;}
- .decimal3-ol { counter-reset: deci3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
- .decimal4-ol { counter-reset: deci4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3em;}
- .decimal5-ol { counter-reset: deci5; p {display: inline; font-family: inherit} font-size: smaller; }
- .decimal6-ol { counter-reset: deci6; p {display: inline; font-family: inherit} font-size: smaller; }
- .decimal7-ol { counter-reset: deci7; p {display: inline; font-family: inherit} font-size: smaller; }
-
- .multi1-ol { counter-reset: multi1; p {display: inline; font-family: inherit} margin-left: 0; padding-left: 1.2em }
- .multi2-ol { counter-reset: multi2; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 1.4em;}
- .multi3-ol { counter-reset: multi3; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 2em;}
- .multi4-ol { counter-reset: multi4; p {display: inline; font-family: inherit} font-size: smaller; padding-left: 3.4em;}
-
- .decimal1:before { transition: 0.5s;counter-increment: deci1; display: inline-block; margin-left: -1em; width: 1em; content: counter(deci1) ". "; }
- .decimal2:before { transition: 0.5s;counter-increment: deci2; display: inline-block; margin-left: -2.1em; width: 2.1em; content: counter(deci1) "."counter(deci2) ". "; }
- .decimal3:before { transition: 0.5s;counter-increment: deci3; display: inline-block; margin-left: -2.85em;width: 2.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) ". "; }
- .decimal4:before { transition: 0.5s;counter-increment: deci4; display: inline-block; margin-left: -3.85em;width: 3.85em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) ". "; }
- .decimal5:before { transition: 0.5s;counter-increment: deci5; display: inline-block; margin-left: -2em; width: 5em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) ". "; }
- .decimal6:before { transition: 0.5s;counter-increment: deci6; display: inline-block; margin-left: -2em; width: 6em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) ". "; }
- .decimal7:before { transition: 0.5s;counter-increment: deci7; display: inline-block; margin-left: -2em; width: 7em; content: counter(deci1) "."counter(deci2) "."counter(deci3) "."counter(deci4) "."counter(deci5) "."counter(deci6) "."counter(deci7) ". "; }
-
- .multi1:before { transition: 0.5s;counter-increment: multi1; display: inline-block; margin-left: -1em; width: 1.2em; content: counter(multi1, upper-alpha) ". "; }
- .multi2:before { transition: 0.5s;counter-increment: multi2; display: inline-block; margin-left: -2em; width: 2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) ". "; }
- .multi3:before { transition: 0.5s;counter-increment: multi3; display: inline-block; margin-left: -2.85em; width:2.85em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) ". "; }
- .multi4:before { transition: 0.5s;counter-increment: multi4; display: inline-block; margin-left: -4.2em; width: 4.2em; content: counter(multi1, upper-alpha) "."counter(multi2, decimal) "."counter(multi3, lower-alpha) "."counter(multi4, lower-roman) ". "; }
+ .decimal1-ol {
+ counter-reset: deci1;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ margin-left: 0;
+ }
+ .decimal2-ol {
+ counter-reset: deci2;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 1em;
+ }
+ .decimal3-ol {
+ counter-reset: deci3;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 2em;
+ }
+ .decimal4-ol {
+ counter-reset: deci4;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 3em;
+ }
+ .decimal5-ol {
+ counter-reset: deci5;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ }
+ .decimal6-ol {
+ counter-reset: deci6;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ }
+ .decimal7-ol {
+ counter-reset: deci7;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ }
+
+ .multi1-ol {
+ counter-reset: multi1;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ margin-left: 0;
+ padding-left: 1.2em;
+ }
+ .multi2-ol {
+ counter-reset: multi2;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 1.4em;
+ }
+ .multi3-ol {
+ counter-reset: multi3;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 2em;
+ }
+ .multi4-ol {
+ counter-reset: multi4;
+ p {
+ display: inline;
+ font-family: inherit;
+ }
+ font-size: smaller;
+ padding-left: 3.4em;
+ }
+
+ .decimal1:before {
+ transition: 0.5s;
+ counter-increment: deci1;
+ display: inline-block;
+ margin-left: -1em;
+ width: 1em;
+ content: counter(deci1) '. ';
+ }
+ .decimal2:before {
+ transition: 0.5s;
+ counter-increment: deci2;
+ display: inline-block;
+ margin-left: -2.1em;
+ width: 2.1em;
+ content: counter(deci1) '.' counter(deci2) '. ';
+ }
+ .decimal3:before {
+ transition: 0.5s;
+ counter-increment: deci3;
+ display: inline-block;
+ margin-left: -2.85em;
+ width: 2.85em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '. ';
+ }
+ .decimal4:before {
+ transition: 0.5s;
+ counter-increment: deci4;
+ display: inline-block;
+ margin-left: -3.85em;
+ width: 3.85em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '. ';
+ }
+ .decimal5:before {
+ transition: 0.5s;
+ counter-increment: deci5;
+ display: inline-block;
+ margin-left: -2em;
+ width: 5em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '. ';
+ }
+ .decimal6:before {
+ transition: 0.5s;
+ counter-increment: deci6;
+ display: inline-block;
+ margin-left: -2em;
+ width: 6em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '. ';
+ }
+ .decimal7:before {
+ transition: 0.5s;
+ counter-increment: deci7;
+ display: inline-block;
+ margin-left: -2em;
+ width: 7em;
+ content: counter(deci1) '.' counter(deci2) '.' counter(deci3) '.' counter(deci4) '.' counter(deci5) '.' counter(deci6) '.' counter(deci7) '. ';
+ }
+
+ .multi1:before {
+ transition: 0.5s;
+ counter-increment: multi1;
+ display: inline-block;
+ margin-left: -1em;
+ width: 1.2em;
+ content: counter(multi1, upper-alpha) '. ';
+ }
+ .multi2:before {
+ transition: 0.5s;
+ counter-increment: multi2;
+ display: inline-block;
+ margin-left: -2em;
+ width: 2em;
+ content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '. ';
+ }
+ .multi3:before {
+ transition: 0.5s;
+ counter-increment: multi3;
+ display: inline-block;
+ margin-left: -2.85em;
+ width: 2.85em;
+ content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '. ';
+ }
+ .multi4:before {
+ transition: 0.5s;
+ counter-increment: multi4;
+ display: inline-block;
+ margin-left: -4.2em;
+ width: 4.2em;
+ content: counter(multi1, upper-alpha) '.' counter(multi2, decimal) '.' counter(multi3, lower-alpha) '.' counter(multi4, lower-roman) '. ';
+ }
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-15 06:12:12 +0000