Add accordion and fix minor issues (#742)

* Add docs v0.0.1 * Add icon size warning * Fix sourcenover caution * Fix semver descriptions * Filters fix * Quickfix quickstart * Add icon warning v2 * Fix typos * Add NovelItem * Update plugins host * Update plugins host * Remove unnecesarry .js and .dist * Update plugins host * Add host.ps1 * Fix readme.txt * Fix READNE.txt, again * Remove .js and .dist * Add accordion * Working pagination * readme update with ost * Add linux/windows hosting functions * Add tswatch * Fix fetch function * Change plugin versions * Fix chrome * Fix workflows * Fix search not showing results * remove unnecesarry code * Revert novelupdates changes * Reverted NobleMTL instead of novelupdates, fixing that * Revert nobleMTL to e346c7d0 * WTF NobleMTL?
2024-02-04 17:39:07 +01:00
parent fc52a6e665
commit e1207c172a
16 changed files with 4339 additions and 1872 deletions
@@ -0,0 +1,72 @@
+:root {
+    --accordion-animation: 0.4s ease;
+}
+
+/** Accordion header button styles */
+accordion-box {
+    display: grid;
+    margin: 0.2rem 1rem;
+    padding: 0.5rem;
+    background-color: aliceblue;
+    &:not([collapsed]) {
+        accordion-header {
+            button {
+                color: #000;
+                background-color: white;
+            }
+
+            button:after {
+                background-image: var(--mdb-accordion-btn-active-icon);
+                transform: var(--mdb-accordion-btn-icon-transform);
+            }
+        }
+        accordion-content {
+            grid-template-rows: 1fr;
+        }
+    }
+    accordion-content {
+        display: grid;
+        grid-template-rows: 0fr;
+        padding-inline: 5px;
+        transition: grid-template-rows var(--accordion-animation);
+        .accordion-animation-content {
+            overflow-y: hidden;
+        }
+    }
+    accordion-header {
+        display: block;
+        button {
+            font-weight: bolder;
+            position: relative;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding: 5px;
+            font-size: 1rem;
+            text-align: left;
+            background-color: white;
+            color: #aaaa;
+            border: 0;
+            border-radius: 0;
+            overflow-anchor: none;
+            &:after {
+                flex-shrink: 0;
+                width: var(--mdb-accordion-btn-icon-width);
+                height: var(--mdb-accordion-btn-icon-width);
+                margin-left: auto;
+                content: "";
+                background-image: var(--mdb-accordion-btn-icon);
+                background-repeat: no-repeat;
+                background-size: var(--mdb-accordion-btn-icon-width);
+                transition: var(--mdb-accordion-btn-icon-transition);
+            }
+            &:hover {
+                z-index: 2;
+            }
+            &:focus {
+                z-index: 3;
+                box-shadow: var(--mdb-accordion-btn-focus-box-shadow);
+            }
+        }
+    }
+}