diff --git a/web/assets/css/accordions.css b/web/assets/css/accordions.css
new file mode 100644
index 0000000..f46ac5c
--- /dev/null
+++ b/web/assets/css/accordions.css
@@ -0,0 +1,73 @@
+.editor__output-result {
+ list-style: none;
+ display: none;
+ flex-direction: column;
+ gap: 1rem;
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ margin: 0;
+ padding: 1rem;
+ max-height: 370px;
+ width: 100%;
+ height: 100%;
+ background-color: #1d1f21;
+ overflow-y: auto;
+}
+
+.editor__output-result .editor__output-result-accordion {
+ width: calc(100% - 4rem);
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ padding: 1rem;
+ background-color: #25282c;
+ border-radius: 8px;
+ cursor: pointer;
+}
+
+.editor__output-result .editor__output-result-accordion[data-open="false"] {
+ height: 24px;
+}
+
+.editor__output-result .editor__output-result-accordion[data-open="true"] {
+ background-color: #33373d;
+ border: 1px solid #41464e;
+}
+
+.editor__output-result .editor__output-result-accordion:hover {
+ background-color: #33373d;
+}
+
+.editor__output-result-accordion .result-accordion-content {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: relative;
+}
+
+.editor__output-result-accordion .result-arrow {
+ transition: transform 300ms;
+}
+
+.editor__output-result-accordion .result-accordion-expansible-content {
+ transition: max-height 400ms, visibility 50ms;
+}
+
+.editor__output-result-accordion[data-open="false"]
+ .result-accordion-expansible-content {
+ max-height: 0;
+ visibility: hidden;
+}
+
+.editor__output-result-accordion[data-open="true"]
+ .result-accordion-expansible-content {
+ max-height: 250px;
+ visibility: visible;
+}
+
+.editor__output-result-accordion[data-open="true"] .result-arrow {
+ transform: rotate(90deg);
+}
diff --git a/web/assets/css/styles.css b/web/assets/css/styles.css
index 6840cb2..40bb363 100644
--- a/web/assets/css/styles.css
+++ b/web/assets/css/styles.css
@@ -367,80 +367,6 @@ a {
width: 100%;
}
-.editor__output-holder .editor__output-result {
- list-style: none;
- display: none;
- flex-direction: column;
- gap: 1rem;
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- margin: 0;
- padding: 1rem;
- max-height: 370px;
- width: 100%;
- height: 100%;
- background-color: #1d1f21;
- overflow-y: auto;
-}
-
-.editor__output-result .editor__output-result-accordion {
- width: calc(100% - 4rem);
- display: flex;
- flex-direction: column;
- gap: 10px;
- padding: 1rem;
- background-color: #25282c;
- border-radius: 8px;
- cursor: pointer;
-}
-
-.editor__output-result .editor__output-result-accordion[data-open="false"] {
- height: 24px;
-}
-
-.editor__output-result .editor__output-result-accordion[data-open="true"] {
- background-color: #33373d;
- border: 1px solid #41464e;
-}
-
-.editor__output-result .editor__output-result-accordion:hover {
- background-color: #33373d;
-}
-
-.editor__output-result-accordion .result-accordion-content {
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: space-between;
- position: relative;
-}
-
-.editor__output-result-accordion .result-arrow {
- transition: transform 300ms;
-}
-
-.editor__output-result-accordion .result-accordion-expansible-content {
- transition: max-height 400ms, visibility 50ms;
-}
-
-.editor__output-result-accordion[data-open="false"]
- .result-accordion-expansible-content {
- max-height: 0;
- visibility: hidden;
-}
-
-.editor__output-result-accordion[data-open="true"]
- .result-accordion-expansible-content {
- max-height: 250px;
- visibility: visible;
-}
-
-.editor__output-result-accordion[data-open="true"] .result-arrow {
- transform: rotate(90deg);
-}
-
.editor > .editor__output::placeholder {
color: #e1e7ea;
}
diff --git a/web/index.html b/web/index.html
index 47f4cce..60fb6c8 100644
--- a/web/index.html
+++ b/web/index.html
@@ -24,6 +24,7 @@
+