chuijs 3.6.2 → 3.6.4

package/framework/components/chui_slideshow/styles.css

@@ -1,86 +1,95 @@
-chui_slides_list {
-    width: 100%;
-    height: 100%;
-    display: flex;
-}
-
-chui_slides_main {
-    position: relative;
-    margin: var(--margin);
-    border-radius: var(--border_radius);
-}
-
-chui_next_slide, chui_prev_slide {
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    width: auto;
-    color: var(--text_color);
-    font-weight: bold;
-    font-size: 18px;
-    user-select: none;
-    border-radius: var(--border_radius);
-    padding: var(--main_padding);
-    height: -webkit-fill-available;
-    display: flex;
-    align-items: center;
-    justify-content: center
-}
-
-chui_next_slide {
-    right: 0
-}
-
-chui_next_slide:hover, chui_prev_slide:hover {
-    background-color: var(--blue_prime_background)
-}
-
-.text {
-    color: #f2f2f2;
-    font-size: 15px;
-    padding: var(--main_padding);
-    position: absolute;
-    bottom: 8px;
-    width: 100%;
-    text-align: center
-}
-
-.numbertext {
-    color: #f2f2f2;
-    font-size: 12px;
-    padding: var(--main_padding);
-    position: absolute;
-    top: 0
-}
-
-.dot {
-    cursor: pointer;
-    height: 15px;
-    width: 15px;
-    margin: 0 2px;
-    background-color: #bbb;
-    border-radius: 50%;
-    display: inline-block
-}
-
-.active, .dot:hover {
-    background-color: #717171;
-}
-
-/* SLIDES */
-chui_slide {
-    display: none;
-    color: var(--text_color);
-    border-radius: var(--border_radius);
-    width: 100%;
-    height: -webkit-fill-available
-}
-
-chui_slide_content {
-    display: flex;
-    color: var(--text_color);
-    border-radius: var(--border_radius);
-    width: -webkit-fill-available;
-    height: -webkit-fill-available;
-    overflow: auto
+chui_slides_list {
+    width: 100%;
+    height: 100%;
+    display: flex;
+}
+
+chui_slides_main {
+    position: relative;
+    margin: var(--margin);
+    border-radius: var(--border_radius);
+}
+
+chui_next_slide, chui_prev_slide {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    width: auto;
+    color: var(--text_color);
+    font-weight: bold;
+    font-size: 18px;
+    user-select: none;
+    border-radius: var(--border_radius);
+    padding: var(--main_padding);
+    height: -webkit-fill-available;
+    display: flex;
+    align-items: center;
+    justify-content: center
+}
+
+chui_next_slide {
+    right: 0
+}
+
+chui_next_slide:hover, chui_prev_slide:hover {
+    background-color: var(--blue_prime_background);
+    color: var(--text_color_hover)
+}
+
+chui_next_slide:active, chui_prev_slide:active {
+    background-color: var(--element_background_prime)
+}
+
+chui_next_slide:hover chui_icon, chui_prev_slide:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+.text {
+    color: var(--text_color);
+    font-size: 15px;
+    padding: var(--main_padding);
+    position: absolute;
+    bottom: 8px;
+    width: 100%;
+    text-align: center
+}
+
+.numbertext {
+    color: var(--text_color);
+    font-size: var(--font_labels_size);
+    padding: var(--main_padding);
+    position: absolute;
+    top: 0
+}
+
+.dot {
+    cursor: pointer;
+    height: 15px;
+    width: 15px;
+    margin: 0 2px;
+    background-color: var(--element_background);
+    border-radius: var(--radius_circle);
+    display: inline-block
+}
+
+.active, .dot:hover {
+    background-color: var(--blue_prime_background);
+}
+
+/* SLIDES */
+chui_slide {
+    display: none;
+    color: var(--text_color);
+    border-radius: var(--border_radius);
+    width: 100%;
+    height: -webkit-fill-available
+}
+
+chui_slide_content {
+    display: flex;
+    color: var(--text_color);
+    border-radius: var(--border_radius);
+    width: -webkit-fill-available;
+    height: -webkit-fill-available;
+    overflow: auto
 }

package/framework/components/chui_spinner/spinner.js

@@ -1,46 +1,46 @@
-let {Animation} = require('../../modules/chui_animations/animations');
-
-class Spinner {
-    #spinner_main = document.createElement('chui_spiner')
-    #spinner = document.createElement('spinner')
-    #spinner_2 = document.createElement('spinner')
-    #spinner_3 = document.createElement('spinner')
-    constructor(size = Spinner.SIZE, margin = String()) {
-        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Spinner');
-        this.#spinner_main.style.margin = margin;
-        //
-        let size_1 = size.SIZE;
-        this.#spinner.style.width = `${size_1}px`;
-        this.#spinner.style.height = `${size_1}px`;
-        this.#spinner.style.borderTop = `${size.BORDER}px solid var(--blue_prime_background)`;
-        //
-        let size_2 = size_1 - size.BORDER * 2;
-        this.#spinner_2.style.width = `${size_2}px`;
-        this.#spinner_2.style.height = `${size_2}px`;
-        this.#spinner_2.style.borderTop = `${size.BORDER}px solid var(--blue_prime_background)`;
-        //
-        let size_3 = size_2 - size.BORDER * 2;
-        this.#spinner_3.style.width = `${size_3}px`;
-        this.#spinner_3.style.height = `${size_3}px`;
-        this.#spinner_3.style.borderTop = `${size.BORDER}px solid var(--blue_prime_background)`;
-        //ADDS
-        this.#spinner_2.appendChild(this.#spinner_3)
-        this.#spinner.appendChild(this.#spinner_2)
-        this.#spinner_main.appendChild(this.#spinner);
-    }
-    remove() {
-        new Animation(this.#spinner_main).fadeOutAndRemove();
-    }
-    set() {
-        return this.#spinner_main;
-    }
-    static SIZE = {
-        V_SMALL: { SIZE: 30, BORDER: 3 },
-        SMALL: { SIZE: 45, BORDER: 3 },
-        DEFAULT: { SIZE: 60, BORDER: 4 },
-        BIG: { SIZE: 75, BORDER: 5 },
-        V_BIG: { SIZE: 90, BORDER: 5 }
-    }
-}
-
+let {Animation} = require('../../modules/chui_animations/animations');
+
+class Spinner {
+    #spinner_main = document.createElement('chui_spiner')
+    #spinner = document.createElement('spinner')
+    #spinner_2 = document.createElement('spinner')
+    #spinner_3 = document.createElement('spinner')
+    constructor(size = Spinner.SIZE, margin = String()) {
+        require('../../modules/chui_functions').setStyles(__dirname + "/styles.css", 'chUiJS_Spinner');
+        this.#spinner_main.style.margin = margin;
+        //
+        let size_1 = size.SIZE;
+        this.#spinner.style.width = `${size_1}px`;
+        this.#spinner.style.height = `${size_1}px`;
+        this.#spinner.style.borderTop = `${size.BORDER}px solid var(--blue_prime_background)`;
+        //
+        let size_2 = size_1 - size.BORDER * 2;
+        this.#spinner_2.style.width = `${size_2}px`;
+        this.#spinner_2.style.height = `${size_2}px`;
+        this.#spinner_2.style.borderTop = `${size.BORDER}px solid var(--blue_prime_background)`;
+        //
+        let size_3 = size_2 - size.BORDER * 2;
+        this.#spinner_3.style.width = `${size_3}px`;
+        this.#spinner_3.style.height = `${size_3}px`;
+        this.#spinner_3.style.borderTop = `${size.BORDER}px solid var(--blue_prime_background)`;
+        //ADDS
+        this.#spinner_2.appendChild(this.#spinner_3)
+        this.#spinner.appendChild(this.#spinner_2)
+        this.#spinner_main.appendChild(this.#spinner);
+    }
+    remove() {
+        new Animation(this.#spinner_main).fadeOutAndRemove();
+    }
+    set() {
+        return this.#spinner_main;
+    }
+    static SIZE = {
+        V_SMALL: { SIZE: 30, BORDER: 3 },
+        SMALL: { SIZE: 45, BORDER: 3 },
+        DEFAULT: { SIZE: 60, BORDER: 4 },
+        BIG: { SIZE: 75, BORDER: 5 },
+        V_BIG: { SIZE: 90, BORDER: 5 }
+    }
+}
+
 exports.Spinner = Spinner

package/framework/components/chui_spinner/styles.css

@@ -1,23 +1,23 @@
-chui_spiner {
-    width: max-content;
-    height: max-content;
-    display: flex;
-}
-
-spinner {
-    border-radius: 50%;
-    animation: spinner 2s linear infinite;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-@keyframes spinner {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-
+chui_spiner {
+    width: max-content;
+    height: max-content;
+    display: flex;
+}
+
+spinner {
+    border-radius: 50%;
+    animation: spinner 2s linear infinite;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes spinner {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+

package/framework/components/chui_table/styles.css

@@ -1,43 +1,43 @@
-table {
-    border: 1px solid var(--element_background);
-    border-radius: var(--border_radius);
-    margin: var(--margin);
-    display: grid;
-    width: inherit;
-    height: max-content;
-    overflow: auto
-}
-
-thead {
-    background: var(--element_background);
-    font-weight: 500;
-    height: max-content;
-    width: 100%
-}
-
-tbody {
-    overflow: visible;
-    height: max-content;
-    width: 100%
-}
-
-tr {
-    display: grid;
-    height: max-content;
-    width: 100%;
-    margin: 0;
-    grid-row-start: 1;
-    grid-row-end: 3
-}
-
-td {
-    color: var(--text_color);
-    white-space: break-spaces;
-    word-break: break-all;
-    align-items: center;
-    padding: var(--main_padding);
-}
-
-cell_title, sort_button {
-    color: var(--blue_prime_background);
+table {
+    border: 1px solid var(--element_background);
+    border-radius: var(--border_radius);
+    margin: var(--margin);
+    display: grid;
+    width: inherit;
+    height: max-content;
+    overflow: auto
+}
+
+thead {
+    background: var(--element_background);
+    font-weight: 500;
+    height: max-content;
+    width: 100%
+}
+
+tbody {
+    overflow: visible;
+    height: max-content;
+    width: 100%
+}
+
+tr {
+    display: grid;
+    height: max-content;
+    width: 100%;
+    margin: 0;
+    grid-row-start: 1;
+    grid-row-end: 3
+}
+
+td {
+    color: var(--text_color);
+    white-space: break-spaces;
+    word-break: break-all;
+    align-items: center;
+    padding: var(--main_padding);
+}
+
+cell_title, sort_button {
+    color: var(--blue_prime_background);
 }