chuijs 3.6.2 → 3.6.4

package/framework/components/chui_media/audio_styles.css

@@ -1,459 +1,459 @@
-chui_ap_main {
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--border_radius);
-    --seek-before-width: 0%;
-    --volume-before-width: 0%;
-    min-width: 450px;
-    height: max-content;
-}
-
-chui_ap_block {
-    display: flex;
-    flex-direction: column;
-    width: -webkit-fill-available;
-    backdrop-filter: var(--global_blur);
-    border-radius: var(--border_radius);
-    background: var(--ap_main_background);
-    border: none;
-    height: max-content;
-}
-
-/* Блок информация */
-chui_ap_info {
-    display: flex;
-    margin: 8px;
-}
-
-chui_ap_track_title {
-    color: var(--text_color);
-    margin: var(--margin);
-}
-
-chui_ap_seek_block {
-    display: flex;
-    width: -webkit-fill-available;
-    align-items: center;
-    margin: 3px;
-}
-
-chui_ap_seek_buf {
-    width: 0;
-    height: 8px;
-    border-radius: 8px;
-    background: var(--ap_slider_buf_background);
-    position: absolute;
-}
-
-#chui_ap_seek {
-    margin: 0;
-    position: relative;
-    -webkit-appearance: none;
-    border-radius: 8px;
-    width: 100%;
-    height: 8px;
-    cursor: pointer;
-    outline: none;
-    background: var(--ap_slider_background);
-    float: left;
-    z-index: 1
-}
-
-#chui_ap_seek::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    border-radius: 8px
-}
-
-#chui_ap_seek::before {
-    transition: all 0s;
-    position: absolute;
-    content: '';
-    left: 0;
-    width: var(--seek-before-width);
-    height: 8px;
-    border-radius: 8px;
-    background: var(--blue_prime_background);
-    cursor: pointer;
-}
-
-#chui_ap_seek::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: none;
-    height: 0px;
-    width: 0px;
-    border-radius: 50%;
-    background-color: var(--blue_prime_background);
-    cursor: pointer;
-    margin: -4px 0 0 0
-}
-
-#chui_ap_seek:focus {
-    outline: none;
-    border: none;
-}
-
-#chui_ap_seek:focus::-webkit-slider-runnable-track {
-    outline: none;
-    border: none;
-}
-
-/* УПРАВЛЕНИЕ ГРОМКОСТЬЮ */
-chui_ap_volume_block {
-    display: flex;
-    margin-left: auto
-}
-
-#chui_ap_volume {
-    position: relative;
-    -webkit-appearance: none;
-    border-radius: 8px;
-    width: 100px;
-    height: 8px;
-    cursor: pointer;
-    outline: none;
-    background: var(--ap_slider_background);
-    float: left;
-    z-index: 1;
-    margin: auto 6px;
-}
-
-#chui_ap_volume:disabled:before {
-    background: var(--ap_slider_buf_background)
-}
-
-#chui_ap_volume::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    border-radius: 8px
-}
-
-#chui_ap_volume::before {
-    transition: all 0s;
-    position: absolute;
-    content: '';
-    left: 0;
-    width: var(--volume-before-width);
-    height: 8px;
-    border-radius: 8px;
-    background: var(--blue_prime_background);
-    cursor: pointer;
-}
-
-#chui_ap_volume::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    border: none;
-    height: 0px;
-    width: 0px;
-    border-radius: 50%;
-    background-color: var(--blue_prime_background);
-    cursor: pointer;
-    margin: -4px 0 0 0
-}
-
-#chui_ap_volume:focus {
-    outline: none;
-    border: none;
-}
-
-#chui_ap_volume:focus::-webkit-slider-runnable-track {
-    outline: none;
-    border: none;
-}
-
-/* Блок управления */
-chui_ap_controls {
-    display: flex;
-    justify-content: left;
-    margin: 8px 12px 0 12px;
-    align-items: center
-}
-
-/* КНОПКИ */
-chui_ap_play_pause, chui_ap_next, chui_ap_prev {
-    display: flex
-}
-
-.pin_bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: var(--margin);
-}
-
-.pin_top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    margin: var(--margin);
-}
-
-/* Плейлист */
-chui_playlist_main {
-    display: flex;
-    height: calc(100% - 114px);
-    flex-direction: column;
-    width: -webkit-fill-available;
-    backdrop-filter: var(--global_blur);
-    border-radius: var(--border_radius);
-    background: var(--ap_main_background);
-    border: none;
-    margin-top: var(--margin);
-    padding: 10px;
-}
-chui_playlist_search {
-    display: flex;
-    min-height: max-content;
-    flex-direction: row;
-    width: -webkit-fill-available;
-    border: none;
-    height: 35px;
-}
-.chui_playlist_search_input {
-    display: flex;
-    width: -webkit-fill-available;
-    height: max-content;
-    margin-right: 10px;
-    color: var(--text_color);
-    align-items: center;
-    position: relative;
-    padding: var(--main_padding);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_2);
-    background: var(--ap_main_background_2);
-    border-radius: var(--border_radius);
-}
-.chui_playlist_search_input:focus {
-    border: none;
-    box-shadow: 0 0 2px 1px var(--blue_prime_background);
-}
-
-chui_playlist_list {
-    overflow: hidden overlay;
-    display: flex;
-    height: -webkit-fill-available;
-    flex-direction: column;
-    width: -webkit-fill-available;
-    border-radius: var(--border_radius);
-    background: var(--ap_main_background_2);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_2);
-    margin-top: 10px;
-    padding: 8px;
-}
-
-chui_playlist_list::-webkit-scrollbar {
-    width: 6px;
-}
-
-chui_playlist_list::-webkit-scrollbar-track {
-    background-color: transparent;
-    margin: var(--border_radius);
-}
-
-chui_playlist_list::-webkit-scrollbar-thumb {
-    border-radius: var(--border_radius);
-    background: var(--blue_prime_background_trans);
-}
-
-chui_playlist_list::-webkit-scrollbar-thumb:hover {
-    background: var(--blue_prime_background)
-}
-
-.chui_track_active {
-    color: var(--text_color_hover);
-    background: var(--blue_prime_background_trans);
-}
-
-chui_track {
-    display: flex;
-    padding: var(--test_padding);
-    color: var(--text_color);
-    border-radius: var(--border_radius);
-    height: max-content;
-    align-items: center;
-    justify-content: space-between;
-}
-
-chui_track:hover {
-    background: var(--blue_prime_background);
-}
-
-chui_track:hover chui_track_duration {
-    color: var(--text_color_hover);
-}
-
-chui_track:hover chui_track_name {
-    color: var(--text_color_hover);
-}
-
-chui_track_name {
-    margin-left: 2px;
-}
-
-chui_track_duration {
-    margin-right: 2px;
-}
-
-chui_playlist_open_folder {
-    display: flex;
-    height: 35px;
-    width: 35px;
-    justify-content: center;
-    align-items: center;
-    border-radius: var(--border_radius);
-    background: var(--ap_main_background_2);
-}
-
-chui_playlist_open_folder:hover {
-    background: var(--blue_prime_background);
-}
-
-chui_playlist_open_folder:hover chui_icon {
-    color: var(--text_color_hover);
-}
-
-chui_ap_equalizer_main {
-    display: flex;
-    flex-direction: column;
-    width: max-content;
-    height: max-content;
-}
-
-chui_eq_slider_main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 200px;
-    width: 40px;
-}
-
-chui_ap_equalizer_controls {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-
-chui_ap_equalizer_block {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
-chui_ap_equalizer_preamp_block {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--element_background);
-    border: none;
-    border-radius: var(--border_radius);
-    padding: 0 8px;
-    margin: var(--margin);
-}
-
-chui_ap_equalizer_band_block {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    background: var(--element_background);
-    border: none;
-    border-radius: var(--border_radius);
-    padding: 0 8px;
-    margin: var(--margin);
-}
-
-slider_label {
-    color: var(--text_color);
-    font-size: var(--font_labels_size);
-    font-weight: 500;
-}
-
-/* DISABLED STYLES */
-.chui_ap_equalizer_disabled {
-    cursor: not-allowed;
-    background: var(--element_background_disabled);
-    border: none;
-    box-shadow: 0 0 1px 0 var(--element_background_disabled_2);
-}
-
-/* УПРАВЛЕНИЕ ГРОМКОСТЬЮ */
-chui_ap_volume_block {
-    display: flex;
-    margin-left: auto
-}
-
-.eq_slider_test {
-    position: relative;
-    border-radius: 8px;
-    cursor: pointer;
-    outline: none;
-    background: var(--ap_slider_background);
-    margin: 70px 8px;
-    -webkit-appearance: none;
-    width: auto;
-    transform: rotate(-90deg);
-}
-
-.eq_slider_test::before {
-    transition: all 0s;
-    position: absolute;
-    content: '';
-    height: 100%;
-    border-radius: 8px;
-    background: var(--blue_prime_background);
-    cursor: pointer;
-    width: var(--fx-before-width);
-    left: 0;
-}
-
-.eq_slider_test:disabled:before {
-    background: var(--ap_slider_buf_background)
-}
-
-.eq_slider_test::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 8px;
-    border-radius: 8px
-}
-
-
-
-.eq_slider_test::-webkit-slider-thumb {
-    border: none;
-    -webkit-appearance: none;
-    height: 0px;
-    width: 0px;
-    border-radius: 50%;
-    background-color: var(--blue_prime_background);
-    cursor: pointer;
-    margin: -4px 0 0 0
-}
-
-.eq_slider_test:focus {
-    outline: none;
-    border: none;
-}
-
-.eq_slider_test:focus::-webkit-slider-runnable-track {
-    outline: none;
-    border: none;
-}
-
-chui_ap_fx_icon, chui_ap_volume_icon, chui_ap_next, chui_ap_play_pause, chui_ap_prev {
-    border-radius: var(--border_radius);
-    padding: 2px;
-}
-
-chui_ap_fx_icon:hover, chui_ap_volume_icon:hover, chui_ap_next:hover, chui_ap_play_pause:hover, chui_ap_prev:hover {
-    background: var(--blue_prime_background);
-}
-
-chui_ap_fx_icon:hover chui_icon, chui_ap_volume_icon:hover chui_icon, chui_ap_next:hover chui_icon, chui_ap_play_pause:hover chui_icon, chui_ap_prev:hover chui_icon {
-    color: var(--text_color_hover);
+chui_ap_main {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border_radius);
+    --seek-before-width: 0%;
+    --volume-before-width: 0%;
+    min-width: 450px;
+    height: max-content;
+}
+
+chui_ap_block {
+    display: flex;
+    flex-direction: column;
+    width: -webkit-fill-available;
+    backdrop-filter: var(--global_blur);
+    border-radius: var(--border_radius);
+    background: var(--ap_main_background);
+    border: none;
+    height: max-content;
+}
+
+/* Блок информация */
+chui_ap_info {
+    display: flex;
+    margin: 8px;
+}
+
+chui_ap_track_title {
+    color: var(--text_color);
+    margin: var(--margin);
+}
+
+chui_ap_seek_block {
+    display: flex;
+    width: -webkit-fill-available;
+    align-items: center;
+    margin: 3px;
+}
+
+chui_ap_seek_buf {
+    width: 0;
+    height: 8px;
+    border-radius: 8px;
+    background: var(--ap_slider_buf_background);
+    position: absolute;
+}
+
+#chui_ap_seek {
+    margin: 0;
+    position: relative;
+    -webkit-appearance: none;
+    border-radius: 8px;
+    width: 100%;
+    height: 8px;
+    cursor: pointer;
+    outline: none;
+    background: var(--ap_slider_background);
+    float: left;
+    z-index: 1
+}
+
+#chui_ap_seek::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    border-radius: 8px
+}
+
+#chui_ap_seek::before {
+    transition: all 0s;
+    position: absolute;
+    content: '';
+    left: 0;
+    width: var(--seek-before-width);
+    height: 8px;
+    border-radius: 8px;
+    background: var(--blue_prime_background);
+    cursor: pointer;
+}
+
+#chui_ap_seek::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 0px;
+    width: 0px;
+    border-radius: 50%;
+    background-color: var(--blue_prime_background);
+    cursor: pointer;
+    margin: -4px 0 0 0
+}
+
+#chui_ap_seek:focus {
+    outline: none;
+    border: none;
+}
+
+#chui_ap_seek:focus::-webkit-slider-runnable-track {
+    outline: none;
+    border: none;
+}
+
+/* УПРАВЛЕНИЕ ГРОМКОСТЬЮ */
+chui_ap_volume_block {
+    display: flex;
+    margin-left: auto
+}
+
+#chui_ap_volume {
+    position: relative;
+    -webkit-appearance: none;
+    border-radius: 8px;
+    width: 100px;
+    height: 8px;
+    cursor: pointer;
+    outline: none;
+    background: var(--ap_slider_background);
+    float: left;
+    z-index: 1;
+    margin: auto 6px;
+}
+
+#chui_ap_volume:disabled:before {
+    background: var(--ap_slider_buf_background)
+}
+
+#chui_ap_volume::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    border-radius: 8px
+}
+
+#chui_ap_volume::before {
+    transition: all 0s;
+    position: absolute;
+    content: '';
+    left: 0;
+    width: var(--volume-before-width);
+    height: 8px;
+    border-radius: 8px;
+    background: var(--blue_prime_background);
+    cursor: pointer;
+}
+
+#chui_ap_volume::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 0px;
+    width: 0px;
+    border-radius: 50%;
+    background-color: var(--blue_prime_background);
+    cursor: pointer;
+    margin: -4px 0 0 0
+}
+
+#chui_ap_volume:focus {
+    outline: none;
+    border: none;
+}
+
+#chui_ap_volume:focus::-webkit-slider-runnable-track {
+    outline: none;
+    border: none;
+}
+
+/* Блок управления */
+chui_ap_controls {
+    display: flex;
+    justify-content: left;
+    margin: 8px 12px 0 12px;
+    align-items: center
+}
+
+/* КНОПКИ */
+chui_ap_play_pause, chui_ap_next, chui_ap_prev {
+    display: flex
+}
+
+.pin_bottom {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: var(--margin);
+}
+
+.pin_top {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: var(--margin);
+}
+
+/* Плейлист */
+chui_playlist_main {
+    display: flex;
+    height: calc(100% - 114px);
+    flex-direction: column;
+    width: -webkit-fill-available;
+    backdrop-filter: var(--global_blur);
+    border-radius: var(--border_radius);
+    background: var(--ap_main_background);
+    border: none;
+    margin-top: var(--margin);
+    padding: 10px;
+}
+chui_playlist_search {
+    display: flex;
+    min-height: max-content;
+    flex-direction: row;
+    width: -webkit-fill-available;
+    border: none;
+    height: 35px;
+}
+.chui_playlist_search_input {
+    display: flex;
+    width: -webkit-fill-available;
+    height: max-content;
+    margin-right: 10px;
+    color: var(--text_color);
+    align-items: center;
+    position: relative;
+    padding: var(--main_padding);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+    background: var(--ap_main_background_2);
+    border-radius: var(--border_radius);
+}
+.chui_playlist_search_input:focus {
+    border: none;
+    box-shadow: 0 0 2px 1px var(--blue_prime_background);
+}
+
+chui_playlist_list {
+    overflow: hidden overlay;
+    display: flex;
+    height: -webkit-fill-available;
+    flex-direction: column;
+    width: -webkit-fill-available;
+    border-radius: var(--border_radius);
+    background: var(--ap_main_background_2);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+    margin-top: 10px;
+    padding: 8px;
+}
+
+chui_playlist_list::-webkit-scrollbar {
+    width: 6px;
+}
+
+chui_playlist_list::-webkit-scrollbar-track {
+    background-color: transparent;
+    margin: var(--border_radius);
+}
+
+chui_playlist_list::-webkit-scrollbar-thumb {
+    border-radius: var(--border_radius);
+    background: var(--blue_prime_background_trans);
+}
+
+chui_playlist_list::-webkit-scrollbar-thumb:hover {
+    background: var(--blue_prime_background)
+}
+
+.chui_track_active {
+    color: var(--text_color_hover);
+    background: var(--blue_prime_background_trans);
+}
+
+chui_track {
+    display: flex;
+    padding: var(--test_padding);
+    color: var(--text_color);
+    border-radius: var(--border_radius);
+    height: max-content;
+    align-items: center;
+    justify-content: space-between;
+}
+
+chui_track:hover {
+    background: var(--blue_prime_background);
+}
+
+chui_track:hover chui_track_duration {
+    color: var(--text_color_hover);
+}
+
+chui_track:hover chui_track_name {
+    color: var(--text_color_hover);
+}
+
+chui_track_name {
+    margin-left: 2px;
+}
+
+chui_track_duration {
+    margin-right: 2px;
+}
+
+chui_playlist_open_folder {
+    display: flex;
+    height: 35px;
+    width: 35px;
+    justify-content: center;
+    align-items: center;
+    border-radius: var(--border_radius);
+    background: var(--ap_main_background_2);
+}
+
+chui_playlist_open_folder:hover {
+    background: var(--blue_prime_background);
+}
+
+chui_playlist_open_folder:hover chui_icon {
+    color: var(--text_color_hover);
+}
+
+chui_ap_equalizer_main {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    height: max-content;
+}
+
+chui_eq_slider_main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    width: 40px;
+}
+
+chui_ap_equalizer_controls {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+chui_ap_equalizer_block {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+chui_ap_equalizer_preamp_block {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--element_background);
+    border: none;
+    border-radius: var(--border_radius);
+    padding: 0 8px;
+    margin: var(--margin);
+}
+
+chui_ap_equalizer_band_block {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background: var(--element_background);
+    border: none;
+    border-radius: var(--border_radius);
+    padding: 0 8px;
+    margin: var(--margin);
+}
+
+slider_label {
+    color: var(--text_color);
+    font-size: var(--font_labels_size);
+    font-weight: 500;
+}
+
+/* DISABLED STYLES */
+.chui_ap_equalizer_disabled {
+    cursor: not-allowed;
+    background: var(--element_background_disabled);
+    border: none;
+    box-shadow: 0 0 1px 0 var(--border_color);
+}
+
+/* УПРАВЛЕНИЕ ГРОМКОСТЬЮ */
+chui_ap_volume_block {
+    display: flex;
+    margin-left: auto
+}
+
+.eq_slider_test {
+    position: relative;
+    border-radius: 8px;
+    cursor: pointer;
+    outline: none;
+    background: var(--ap_slider_background);
+    margin: 70px 8px;
+    -webkit-appearance: none;
+    width: auto;
+    transform: rotate(-90deg);
+}
+
+.eq_slider_test::before {
+    transition: all 0s;
+    position: absolute;
+    content: '';
+    height: 100%;
+    border-radius: 8px;
+    background: var(--blue_prime_background);
+    cursor: pointer;
+    width: var(--fx-before-width);
+    left: 0;
+}
+
+.eq_slider_test:disabled:before {
+    background: var(--ap_slider_buf_background)
+}
+
+.eq_slider_test::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 8px;
+    border-radius: 8px
+}
+
+
+
+.eq_slider_test::-webkit-slider-thumb {
+    border: none;
+    -webkit-appearance: none;
+    height: 0px;
+    width: 0px;
+    border-radius: 50%;
+    background-color: var(--blue_prime_background);
+    cursor: pointer;
+    margin: -4px 0 0 0
+}
+
+.eq_slider_test:focus {
+    outline: none;
+    border: none;
+}
+
+.eq_slider_test:focus::-webkit-slider-runnable-track {
+    outline: none;
+    border: none;
+}
+
+chui_ap_fx_icon, chui_ap_volume_icon, chui_ap_next, chui_ap_play_pause, chui_ap_prev {
+    border-radius: var(--border_radius);
+    padding: 2px;
+}
+
+chui_ap_fx_icon:hover, chui_ap_volume_icon:hover, chui_ap_next:hover, chui_ap_play_pause:hover, chui_ap_prev:hover {
+    background: var(--blue_prime_background);
+}
+
+chui_ap_fx_icon:hover chui_icon, chui_ap_volume_icon:hover chui_icon, chui_ap_next:hover chui_icon, chui_ap_play_pause:hover chui_icon, chui_ap_prev:hover chui_icon {
+    color: var(--text_color_hover);
 }