/*********************************************************************************************************************************************************************************/
/* css/ivag_light.css */
/*********************************************************************************************************************************************************************************/
/* @import "all_sk_light.dark.colors.css"; */
@import "all_sk_light.css.titolo_sotto.css";
@charset "UTF-8"; /* Set the encoding of the style sheet to Unicode UTF-8 */
:root {
/* valori fissi */
--playlist_width: 440px; /* var(--playlist_width) se si cambia dimensione bisogna cambiare, nel file new.js riga 10905 , la dimensione min per lo swtich è 680px settata alla roga 317 (max-width: 679px)*/
--color_black: #000000;
--color_white: #FFFFFF;
--color_whiteBIGPLAY: 255,255,255;
--color_white_aliceblue: #FFF8F0;
--color_grigio_scuro1: #111111;
--color_grigio_scuro2: #222222;
--color_grigio_scuro2BIGPLAY: 34,34,34;
--color_grigio_scuro3: #333333;
--color_grigio_scuro4: #444444;
--color_grigio_scuro5: #555555;
--color_grigio_scuro6: #666666;
--color_grigio_medio7: #777777;
--color_grigio_medio8: #888888;
--color_grigio_medio9: #999999;
--color_grigio_chiaroA: #AAAAAA;
--color_grigio_chiaroB: #BBBBBB;
--color_grigio_chiaroC: #CCCCCC;
--color_grigio_chiaroD: #DDDDDD;
--color_grigio_chiaroE: #EEEEEE;
--color_cyano: #33CCFF;
--color_orange: #FFB521;
--color_orangeBIGPLAYHOVER: 255,181,33;
--color_red: #FA1100;
--color_yellow: #FFFF14;
--color_blu_spinner: #0077DD;
--color_blu_grigio_1: #9FAFC4;
--color_blu_scuro: #008CD0; /*#006EA4*/
--color_celeste_1: #D9EDFF;
--color_celeste_2: #D7EBF6;
--color_celeste_3: #F2F6FB;
--color_beige: #F5F5DC;
--color_beige_scuro: #996600;
--box_border_radius: 30px;
/* valori variabili*/
--body_bg: var(--color_white);
--player_holder_bg: var(--color_black);
--player_button_all_bg: var(--color_white);
--player_button_big_bg: var(--color_whiteBIGPLAY);
--menu_bg: var(--color_white);
--menu_button_bg: var(--color_white);
--menu_button_border_bg: var(--color_orange);
--menu_testo: var(--color_cyano);
--bandiera_bg: var(--color_celeste_3);
--buttonXclose: var(--color_white);
--dropdown_selector_button: var(--color_grigio_chiaroD);
--playlist_bg: var(--color_white);
--playlist_selected: var(--color_orange);
--playlist_selected_border: var(--color_cyano);
--playlist_non_selected: var(--color_white);
--playlist_non_selected_border: var(--color_orange);
--playlist_time_bg: var(--color_grigio_scuro3);
--playlist_time_testo: var(--color_white);
--playlist_time_border: var(--color_beige);
--playlist_testo_title: var(--color_grigio_scuro1);
--playlist_testo_desc: var(--color_grigio_scuro3);
--icon_player_selected: var(--color_orange);
--icon_player_non_selected: var(--color_orange);
--box_bg: var(--color_white);
--box_border: var(--color_grigio_chiaroD);
--box_testo: var(--color_grigio_scuro1);
--box_contact_testo: var(--color_celeste_3);
--box_info_details_bg: var(--color_cyano);
--box_info_details_testo: var(--color_celeste_3);
--box_info_summary_bg: var(--color_white);
--box_info_summary_testo: var(--color_celeste_3);
--box_playlist_ADS_bordo: var(--color_orange);
--tooltip_bg: var(--color_white);
--tooltip_border: var(--color_cyano);
--tooltip_testo: var(--color_blu_scuro);
--search_bg: var(--color_grigio_chiaroE);
--search_border: var(--color_grigio_chiaroE);
--search-testo: var(--color_grigio_chiaroA);
--search_erasebutton_bg: var(--color_grigio_chiaroC);
--search_erasebutton_border: var(--color_white);
--search_erasebutton_testo: var(--color_white);
--iframe_box_testo: invert(0);
}
/****************************************************************************************** media dark light screen */
body.theme-dark {
--body_bg: var(--color_grigio_scuro2);
--player_holder_bg: var(--color_black);
--player_button_all_bg: var(--color_grigio_scuro2);
--player_button_big_bg: var(--color_grigio_scuro2BIGPLAY);
--menu_bg: var(--color_grigio_scuro2);
--menu_button_bg: var(--color_grigio_scuro2);
--menu_button_border_bg: var(--color_orange);
--menu_testo: var(--color_blu_scuro);
--bandiera_bg: var(--color_grigio_scuro2);
--buttonXclose: var(--color_white_aliceblue);
--dropdown_selector_button: var(--color_grigio_medio7);
--playlist_bg: var(--color_grigio_scuro2);
--playlist_selected: var(--color_orange);
--playlist_selected_border: var(--color_cyano);
--playlist_non_selected: var(--color_grigio_scuro2);
--playlist_non_selected_border: var(--color_beige_scuro);
--playlist_time_bg: var(--color_grigio_scuro3);
--playlist_time_testo: var(--color_white_aliceblue);
--playlist_time_border: var(--color_beige_scuro);
--playlist_testo_title: var(--color_grigio_medio9);
--playlist_testo_desc: var(--color_grigio_chiaroA);
--icon_player_selected: var(--color_orange);
--icon_player_non_selected: var(--color_orange);
--box_bg: var(--color_grigio_scuro2);
--box_border: var(--color_grigio_scuro4);
--box_testo: var(--color_white_aliceblue);
--box_contact_testo: var(--color_celeste_3);
--box_info_details_bg: var(--color_blu_scuro);
--box_info_details_testo: var(--color_celeste_3);
--box_info_summary_bg: var(--color_white_aliceblue);
--box_info_summary_testo: var(--color_celeste_3);
--box_playlist_ADS_bordo: var(--color_orange);
--tooltip_bg: var(--color_white_aliceblue);
--tooltip_border: var(--color_cyano);
--tooltip_testo: var(--color_blu_scuro);
--search_bg: var(--color_grigio_scuro4);
--search_border: var(--color_grigio_chiaroE);
--search-testo: var(--color_grigio_chiaroE);
--search_erasebutton_bg: var(--color_grigio_scuro4);
--search_erasebutton_border: var(--color_grigio_scuro5);
--search_erasebutton_testo: var(--color_white_aliceblue);
--iframe_box_testo: invert(1);
}
@media (prefers-color-scheme: dark) {
body.theme-dark {
--body_bg: var(--color_grigio_scuro2);
--player_holder_bg: var(--color_black);
--player_button_all_bg: var(--color_grigio_scuro2);
--player_button_big_bg: var(--color_grigio_scuro2BIGPLAY);
--menu_bg: var(--color_grigio_scuro2);
--menu_button_bg: var(--color_grigio_scuro2);
--menu_button_border_bg: var(--color_orange);
--menu_testo: var(--color_blu_scuro);
--bandiera_bg: var(--color_grigio_scuro2);
--buttonXclose: var(--color_white_aliceblue);
--dropdown_selector_button: var(--color_grigio_medio7);
--playlist_bg: var(--color_grigio_scuro2);
--playlist_selected: var(--color_orange);
--playlist_selected_border: var(--color_cyano);
--playlist_non_selected: var(--color_grigio_scuro2);
--playlist_non_selected_border: var(--color_beige_scuro);
--playlist_time_bg: var(--color_grigio_scuro3);
--playlist_time_testo: var(--color_white_aliceblue);
--playlist_time_border: var(--color_beige_scuro);
--playlist_testo_title: var(--color_grigio_medio9);
--playlist_testo_desc: var(--color_grigio_chiaroA);
--icon_player_selected: var(--color_orange);
--icon_player_non_selected: var(--color_orange);
--box_bg: var(--color_grigio_scuro2);
--box_border: var(--color_grigio_scuro4);
--box_testo: var(--color_white_aliceblue);
--box_contact_testo: var(--color_celeste_3);
--box_info_details_bg: var(--color_blu_scuro);
--box_info_details_testo: var(--color_celeste_3);
--box_info_summary_bg: var(--color_white_aliceblue);
--box_info_summary_testo: var(--color_celeste_3);
--box_playlist_ADS_bordo: var(--color_orange);
--tooltip_bg: var(--color_white_aliceblue);
--tooltip_border: var(--color_cyano);
--tooltip_testo: var(--color_blu_scuro);
--search_bg: var(--color_grigio_scuro4);
--search_border: var(--color_grigio_chiaroE);
--search-testo: var(--color_grigio_chiaroE);
--search_erasebutton_bg: var(--color_grigio_scuro4);
--search_erasebutton_border: var(--color_grigio_scuro5);
--search_erasebutton_testo: var(--color_white_aliceblue);
--iframe_box_testo: invert(1);
}
}
body.theme-light {
/* valori fissi */
--playlist_width: 440px; /* var(--playlist_width) se si cambia dimensione bisogna cambiare, nel file new.js riga 10905 , la dimensione min per lo swtich è 680px settata alla roga 317 (max-width: 679px)*/
--color_black: #000000;
--color_white: #FFFFFF;
--color_whiteBIGPLAY: 255,255,255;
--color_white_aliceblue: #FFF8F0;
--color_grigio_scuro1: #111111;
--color_grigio_scuro2: #222222;
--color_grigio_scuro2BIGPLAY: 34,34,34;
--color_grigio_scuro3: #333333;
--color_grigio_scuro4: #444444;
--color_grigio_scuro5: #555555;
--color_grigio_scuro6: #666666;
--color_grigio_medio7: #777777;
--color_grigio_medio8: #888888;
--color_grigio_medio9: #999999;
--color_grigio_chiaroA: #AAAAAA;
--color_grigio_chiaroB: #BBBBBB;
--color_grigio_chiaroC: #CCCCCC;
--color_grigio_chiaroD: #DDDDDD;
--color_grigio_chiaroE: #EEEEEE;
--color_cyano: #33CCFF;
--color_orange: #FFB521;
--color_orangeBIGPLAYHOVER: 255,181,33;
--color_red: #FA1100;
--color_yellow: #FFFF14;
--color_blu_spinner: #0077DD;
--color_blu_grigio_1: #9FAFC4;
--color_blu_scuro: #008CD0; /*#006EA4*/
--color_celeste_1: #D9EDFF;
--color_celeste_2: #D7EBF6;
--color_celeste_3: #F2F6FB;
--color_beige: #F5F5DC;
--color_beige_scuro: #996600;
--box_border_radius: 30px;
/* valori variabili*/
--body_bg: var(--color_white);
--player_holder_bg: var(--color_black);
--player_button_all_bg: var(--color_white);
--player_button_big_bg: var(--color_whiteBIGPLAY);
--menu_bg: var(--color_white);
--menu_button_bg: var(--color_white);
--menu_button_border_bg: var(--color_orange);
--menu_testo: var(--color_cyano);
--bandiera_bg: var(--color_celeste_3);
--buttonXclose: var(--color_white);
--dropdown_selector_button: var(--color_grigio_chiaroD);
--playlist_bg: var(--color_white);
--playlist_selected: var(--color_orange);
--playlist_selected_border: var(--color_cyano);
--playlist_non_selected: var(--color_white);
--playlist_non_selected_border: var(--color_orange);
--playlist_time_bg: var(--color_grigio_scuro3);
--playlist_time_testo: var(--color_white);
--playlist_time_border: var(--color_beige);
--playlist_testo_title: var(--color_grigio_scuro1);
--playlist_testo_desc: var(--color_grigio_scuro3);
--icon_player_selected: var(--color_orange);
--icon_player_non_selected: var(--color_orange);
--box_bg: var(--color_white);
--box_border: var(--color_grigio_chiaroD);
--box_testo: var(--color_grigio_scuro1);
--box_contact_testo: var(--color_celeste_3);
--box_info_details_bg: var(--color_cyano);
--box_info_details_testo: var(--color_celeste_3);
--box_info_summary_bg: var(--color_white);
--box_info_summary_testo: var(--color_celeste_3);
--box_playlist_ADS_bordo: var(--color_orange);
--tooltip_bg: var(--color_white);
--tooltip_border: var(--color_cyano);
--tooltip_testo: var(--color_blu_scuro);
--search_bg: var(--color_grigio_chiaroE);
--search_border: var(--color_grigio_chiaroE);
--search-testo: var(--color_grigio_chiaroA);
--search_erasebutton_bg: var(--color_grigio_chiaroC);
--search_erasebutton_border: var(--color_white);
--search_erasebutton_testo: var(--color_white);
--iframe_box_testo: invert(0);
}
.dropdown_selector {
border-radius: 10px;
height: 24px;
width: 80px;
background-color: var(--menu_button_bg);
border: 1px solid;
border-color: var(--menu_button_border_bg);
color: var(--menu_testo);
/*box-shadow: 3px 4px var(--color_celeste_1);*/
}
.dropdown_selector:before,
.dropdown_selector:after {
border-color: var(--dropdown_selector_button) transparent;
pointer-events: none;
}
.dropdown_selector:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown_selector:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
@-webkit-keyframes bugfix {
/* aggiunta questa parte */
to {
padding: 0px;
}
}
body,
html {
background-color: var(--body_bg);
font-family: "Graphik web", sans-serif;
font-display: swap; /* aggiunta riga */
font-smooth: auto;
text-rendering: auto;
-webkit-font-family: "Graphik web", sans-serif;
-webkit-font-display: swap; /* aggiunta riga */
-khtml-font-family: "Graphik web", sans-serif;
-khtml-font-display: swap; /* aggiunta riga */
-moz-font-family: "Graphik web", sans-serif;
-moz-font-display: swap; /* aggiunta riga */
-ms-font-family: "Graphik web", sans-serif;
-ms-font-display: swap; /* aggiunta riga */
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
scroll-behavior: smooth;
overscroll-behavior: contain; /* aggiunta questa riga serve a non trasferire lo scroll fuori dal div */
-webkit-animation: bugfix infinite 1s; /* aggiunta questa riga */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
margin: 0px;
padding: 0px;
border: 0px;
outline: none;
}
/*********************** hide div after few sec ***/
.hideMe {
-moz-animation: cssAnimation 0s ease-in 3s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 3s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 3s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 3s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
@-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
/****************************************************************************************** media resize screen */
@media only screen and (min-width: 680px) and (max-width: 4096px) {
#ivag-main {
height: 100% !important;
}
#boxplaylist_ADS {
width: var(--playlist_width) !important;
/* left: calc(100% - var(--playlist_width)) !important; */
left: var(--playlist_width) !important;
z-index: 10 !important;
bottom: 0px !important;
}
#boxplaylist_ADS_bordo {
width: var(--playlist_width) !important;
left: var(--playlist_width);
z-index: 6 !important;
bottom: 60px !important;
}
.ivag-playlist {
height: calc(100vh - 160px) !important;
}
.ivag-category {
height: calc(100vh - 160px) !important;
}
.ivag-bottom-bar {
bottom: 70px !important;
}
.ivag-info-bar {
bottom: 70px !important;
}
input.ivag-search-filter[type="search"]:focus {
width: calc(var(--playlist_width) - 36px - 8px)!important; /* 36px è il pulsante mentre 8 px sono gli spazi ai bordi */
padding-left: 5px!important;
}
}
@media only screen and (min-width: 0px) and (max-width: 679px) {
#ivag-main {
height: 30% !important;
}
}
@media only screen and (min-width: 0px) and (max-width: 300px) {
.ivag-volume-seekbar {
display: none !important;
}
}
@media only screen and (min-width: 680px) and (max-width: 719px) {
.ivag-volume-seekbar {
display: none !important;
}
}
/****************************************************************************************** spinner loader */
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
.spinner:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 1px solid var(--color_grigio_chiaro);
border-top-color: var(--color_blu_spinner);
animation: spinner 0.6s linear infinite;
}
a {
text-decoration: none;
}
p {
padding: 5px 0px 0px 0px;
margin: 0px 0px 0px 0px;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
cite,
samp {
font-display: swap; /* aggiunta riga */
font-size: 12px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
font-family: "Graphik web", sans-serif;
}
/****************************************************************************************** immagini e testo in grigio menu */
a.si_grayscale {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
/* filter: none; */ /* IE6-9 */
-webkit-filter: grayscale(100%) opacity(15%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
filter: grayscale(100%) opacity(15%);
pointer-events: none !important;
cursor: default !important;
/* cursor: not-allowed !important; */
text-decoration: none !important;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
a.no_grayscale {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.cyano {
color: var(--menu_testo);
}
/*
#colore_testo_cyano {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
color: #FFFFFF;
background-color: #000000;
padding: 20px;
height: 20px;
width: 210px;
border: medium double #FFFF00;
}
*/
img#posterimg {
pointer-events: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
img.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
/* filter: none; */ /* IE6-9 */
-webkit-filter: grayscale(100%) opacity(15%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
filter: grayscale(100%) opacity(15%);
}
img.grayscale.disabled {
filter: url("data:image/svg+xml;utf8,#grayscale");
filter: none;
-webkit-filter: grayscale(0%) opacity(100%);
filter: grayscale(0%) opacity(100%);
}
.skip-link {
background-color: var(--color_orange);
color: var(--color_orange) !important;
}
a.skip-link_transparent {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
/* filter: none; */ /* IE6-9 */
-webkit-filter: grayscale(100%) opacity(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
filter: grayscale(100%) opacity(0%);
pointer-events: none !important;
cursor: default !important;
/* cursor: not-allowed !important; */
text-decoration: none !important;
}
a.hidelink {
cursor: pointer;
text-decoration: underline;
}
.iframe_boxabout,
.iframe_boxcontact,
.iframe_boxcopyright,
.iframe_boxhelp,
.iframe_boxprivacy
{
filter: var(--iframe_box_testo);
overflow-x: hidden;
overflow-y: hidden;
border: 0px;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
cursor: pointer;
}
/****************************************************************************************** bottoni in grigio menu */
button.si_grayscale {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
/* filter: none; */ /* IE6-9 */
-webkit-filter: grayscale(100%) opacity(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
filter: grayscale(100%) opacity(100%);
pointer-events: none !important;
cursor: none !important;
text-decoration: none !important;
}
button.no_grayscale {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
button.blink {
animation: myblinker 0.9s linear infinite;
-moz-animation: myblinker 0.9s linear infinite;
-webkit-animation: myblinker 0.9s linear infinite;
}
button.notifications {
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
background-color: var(--menu_button_bg);
padding: 8px 8px;
text-align: center;
color: var(--menu_testo);
font-size: 14px;
margin: 4px 2px;
cursor: pointer;
border: 1px solid var(--menu_button_border_bg);
/* bordi arrotondati */
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
}
@keyframes myblinker {
0% {
background: var(--color_red);
}
50% {
background: var(--color_yellow);
}
/* 100% {background:red};*/
}
/****************************************************************************************** contenitore principale */
.ivag-wrapper {
/* prima c'era un asterisco dopo wrapper * */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.ivag-wrapper {
position: inherit; /* prima era relative */
}
.ivag-wrapper-fs {
position: fixed;
top: 0px !important;
left: 0px !important;
width: 100% !important;
height: 100% !important;
margin: 0px !important;
padding: 0px !important;
z-index: 9999999 !important;
overflow: hidden !important;
}
/****************************************************************************************** contenitore video principale */
.ivag-player-holder {
position: relative;
float: left;
clear: both;
z-index: 11 !important; /* riga aggiunta */
}
.ivag-media-holder,
.ivag-image-holder,
.ivag-video-holder,
.ivag-video-poster,
.ivag-vimeo-holder,
.ivag-youtube-holder,
.ivag-iframe-event-blocker,
.ivag-sound-holder,
.ivag-sound-slideshow-holder,
.ivag-iframe-holder,
.ivag-flash-main {
position: absolute;
top: 0px;
left: 0px;
width: 100% !important;
height: 100% !important;
overflow: hidden;
display: flex;
}
.ivag-fs-overflow {
overflow: hidden !important;
}
.ivag-media {
max-width: none !important;
}
@keyframes ivag-player-loader {
to {
transform: rotate(360deg);
}
}
.ivag-player-loader:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 5px solid var(--color_grigio_chiaroD);
border-top-color: var(--color_blu_spinner);
animation: spinner 0.6s linear infinite;
}
/****************************************************************************************** share */
.ivag-contr-vert {
position: relative;
top: 17px;
right: 0px;
width: 44px;
height: 34px;
text-align: center;
margin-bottom: 0px;
margin-right: 0px;
}
.ivag-contr-vert:hover {
/* background: 00b6f0;*/
}
.ivag-contr-vert-i {
display: inline-block;
font-size: 1.4em !important; /* prima era 16px */
line-height: 32px !important;
}
/****************************************************************************************** player controls */
.ivag-player-controls {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 55px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
display: none;
}
.ivag-contr-right-wrap {
position: relative;
top: 8px;
float: right;
height: 40px;
/* min-width: 85px;*/
width: 44px !important;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto; /* auto render text */
}
.ivag-contr-right {
position: relative;
bottom: 0px;
left: 0px;
width: 44px;
height: 40px;
float: right;
text-align: center;
margin-right: 0px;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto; /* auto render text */
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-contr-right-i {
display: inline-block;
font-size: 1.3em !important;
line-height: 30px !important;
}
.ivag-contr-left {
position: relative;
top: 8px;
left: 0px;
width: 44px;
height: 40px;
float: left;
text-align: center;
margin-left: 0px;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto; /* auto render text */
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-contr-left-i {
display: inline-block;
font-size: 0.9em !important;
line-height: 30px !important;
}
/****************************************************************************************** barra del volume */
.ivag-vol {
font-size: 1.3em !important;
}
.ivag-volume-wrapper {
position: absolute;
/* top: 10px; */
left: 145px;
height: 40px;
width: auto; /* aggiunta - prima era 95px*/
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
/* bordi arrotondati */
/*
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
*/
}
.ivag-volume-seekbar {
display: inline-block;
position: relative;
top: 12px;
left: -15px; /* prima era -6px*/
width: 80px; /* prima era 58*/
height: 30px;
overflow: hidden;
/* background:#111 !important;*/ /*aggiunta - riga commentata per applicare lo sfondo trasparente*/
/* posizionare la barra in verticale */
/*
transform: rotate(270deg);
-moz-transform: rotate(270deg);
writing-mode: bt-lr;
-webkit-appearance: slider-vertical;
*/
/* bordi arrotondati */
/*
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
*/
}
.ivag-volume-bg {
position: absolute;
top: 8px;
left: 10px;
width: 70px; /*45*/
height: 5px;
/* bordi arrotondati */
/*
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
*/
}
.ivag-volume-level {
position: absolute;
top: 8px;
left: 10px;
width: 70px; /*45*/
height: 5px;
/* bordi arrotondati */
/*
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
*/
}
/****************************************************************************************** tempo durata */
.ivag-time-wrapper {
position: absolute;
top: 16px;
left: 40px;
height: 40px;
width: auto; /* aggiunta - prima era 95px*/
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
/* bordi arrotondati */
/*
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
*/
}
.ivag-media-time-current,
.ivag-media-time-separator,
.ivag-media-time-total {
position: relative;
top: 0px;
left: 10px;
height: 40px;
line-height: 40px !important;
text-align: center;
float: left;
/* background: #111 !important;*/
/* background-color: rgba(1,1,1,0.6) !important;*/
margin: 0 !important;
padding: 0 0 0 1px !important;
font-display: swap; /* aggiunta riga */
font-size: 15px !important;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto; /* auto render text */
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-media-time-current {
padding-left: 0 !important;
}
/****************************************************************************************** barra tempo */
.ivag-seekbar {
/*! position: relative; */
/*! bottom: -49px; */
/*! left: 0px; */
/*! width: calc(100% - 50px) !important; */
/*! width: 100%; */
height: 8px; /*aggiunta - prima era 10px*/
/*! display: block; */
/*! float: right - 30px; */
/*! margin-left: 23px; */
}
.ivag-seekbar-inner {
/*! position: relative; */
/*! bottom: 64px; */
/*! left: calc(100% - 50px) !important; */
/*! width: calc(100% - 50px) !important; */
/*! width: 100%; */
height: 8px; /*aggiunta - prima era 10px */
/*! overflow: hidden; */
}
.ivag-seekbar-inner-ad {
cursor: default !important;
}
/****************************************************************************************** barra progress */
.ivag-progress-bg {
position: absolute;
height: 8px;
}
.ivag-load-level {
position: absolute;
height: 8px;
}
.ivag-progress-level {
position: absolute;
height: 8px;
}
/****************************************************************************************** range */
.ivag-range-a-point {
position: absolute;
left: 0px;
bottom: 5px;
width: 1px !important;
height: 30px !important;
background: rgba(0, 0, 255, 0);
}
.ivag-range-handle-a-hit {
position: absolute;
bottom: 40px;
left: -10px;
width: 30px;
height: 30px;
background: var(--color_grigio_medio9);
opacity: 0.3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
.ivag-range-handle-a-pin {
position: absolute;
left: 0px;
bottom: 40px;
width: 0 !important;
height: 0 !important;
border-right: 10px solid transparent !important;
border-top: 25px solid green !important;
border-left: 0 !important;
border-bottom: 0 !important;
}
.ivag-range-b-point {
position: absolute;
left: 0px;
bottom: 5px;
width: 1px !important;
height: 30px !important;
background: rgba(0, 0, 255, 0);
}
.ivag-range-handle-b-hit {
position: absolute;
bottom: 40px;
left: -21px;
width: 30px;
height: 30px;
background: var(--color_grigio_medio9);
opacity: 0.3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
}
.ivag-range-handle-b-pin {
position: absolute;
left: -11px;
bottom: 40px;
width: 0 !important;
height: 0 !important;
border-left: 10px solid transparent !important;
border-top: 25px solid red !important;
border-right: 0 !important;
border-bottom: 0 !important;
}
.ivag-drag-hit {
position: absolute;
/* top:-30x;*/
left: 0px;
width: 100% !important;
height: 35px;
background: blue;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
display: none;
}
/****************************************************************************************** caption menu */
.ivag-captions {
position: relative;
top: 0px;
height: 30px;
width: 30px;
left: 0px;
line-height: 13px;
text-align: center;
float: right;
display: none;
}
.ivag-caption-holder {
position: absolute;
height: 100%;
display: none;
right: 0px;
}
.ivag-captions-menu {
background: #111;
padding: 0 !important;
margin: 0 !important;
}
.ivag-captions-menu li {
display: block;
width: 100%;
list-style: none;
text-align: left;
line-height: 20px;
font-size: 13px;
padding: 5px 10px !important;
margin: 0 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid var(--color_grigio_scurissimo) !important;
}
[dir="rtl"] .ivag-captions-menu li {
text-align: right;
}
.ivag-captions-menu li a {
color: var(--color_grigio_chiaro);
text-decoration: none !important;
white-space: nowrap;
pointer-events: none;
border: 0 !important;
}
.ivag-caption-over {
background: red;
cursor: pointer;
}
.ivag-caption-out {
background: #111;
cursor: default;
}
/****************************************************************************************** playback rate */
.ivag-playback-rate {
position: relative;
top: 0px;
height: 30px;
width: 40px;
left: 0px;
line-height: 25px;
text-align: center;
float: right;
/* z-index:1;*/ /* aggiunto asse z per elevare il livello */
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
opacity: 1 !important; /*aggiunta*/
font-display: swap; /* aggiunta riga */
}
.ivag-rate-holder {
position: absolute;
width: 121px;
top: -32px;
right: 0px;
border-bottom: 0 solid var(--color_grigio_scurissimo) !important;
display: none;
}
.ivag-rate-box {
position: relative;
top: 0px;
float: left;
width: 30px;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ivag-contr-rate-i {
position: relative;
top: 2px;
left: -2px;
width: 32px;
height: 30%;
line-height: 30px !important;
background: #5e6e71;
text-align: center !important;
font-size: 1.1em !important;
}
.ivag-rate-value {
background: var(--color_grigio_scuro3);
top: 2px;
left: -2px;
}
.ivag-rate-value p {
text-align: center;
line-height: 30px !important;
padding: 0 !important;
margin: 0 !important;
color: var(--color_white_aliceblue) !important;
font-size: 0.9em !important;
}
.ivag-rate-select {
border-left: 0 solid var(--color_grigio_scurissimo) !important;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.ivag-rate-select-holder {
position: absolute;
height: 100%;
display: none;
right: 0px;
}
.ivag-rate-menu {
background: #111;
padding: 0 !important;
margin: 2px 0 0 0 !important;
}
.ivag-rate-menu li {
display: block;
width: 35px;
list-style: none;
text-align: center;
line-height: 18px;
font-size: 15px; /*prima era 0.9em*/
padding: 4px 4px !important;
margin: 0 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-top: 1px solid #5e6e71 !important;
border-bottom: 1px solid #5e6e71 !important;
border-left: 1px solid #5e6e71 !important;
border-right: 1px solid #5e6e71 !important;
}
[dir="rtl"] .ivag-rate-menu li {
text-align: right;
}
.ivag-rate-menu li a {
color: var(--box_border);
text-decoration: none !important;
white-space: nowrap;
pointer-events: none;
border: 0 !important;
}
.ivag-rate-over {
cursor: pointer;
}
.ivag-rate-out {
background: var(--color_grigio_scuro3);
cursor: default;
}
/****************************************************************************************** quality menu */
.ivag-quality {
position: relative;
top: 0px;
height: 30px;
width: 30px;
left: 0px;
line-height: 13px;
text-align: center;
float: right;
display: none;
}
.ivag-quality-holder {
position: absolute;
height: 100%;
display: none;
right: 0px;
}
.ivag-quality-menu {
background: #111;
padding: 0 !important;
margin: 0 !important;
}
.ivag-quality-menu li {
display: block;
width: 100%;
list-style: none;
text-align: left;
line-height: 20px;
font-size: 13px;
padding: 5px 10px !important;
margin: 0 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid var(--color_grigio_scurissimo) !important;
}
[dir="rtl"] .ivag-quality-menu li {
text-align: right;
}
.ivag-quality-menu li a {
color: var(--color_grigio_chiaro);
text-decoration: none !important;
white-space: nowrap;
pointer-events: none;
border: 0 !important;
}
.ivag-quality-over {
background: red;
cursor: pointer;
}
.ivag-quality-out {
background: #111;
cursor: default;
}
/****************************************************************************************** posizione pulsante player grosso nel video*/
.ivag-big-play {
display: none;
position: absolute;
width: 73px; /* aggiunta modifica - prima era 76px */
height: 73px; /* aggiunta modifica - prima era 76px */
top: 50%;
left: 50%;
margin-left: -40px; /* aggiunta modifica - prima era 25px */
margin-top: -40px; /* aggiunta modifica - prima era 25px */
background: rgba(var(--player_button_big_bg),0.8); /* aggiunta modifica - prima era rgba(0,0,0,0.5) */
border-radius: 50% !important;
/*
position: absolute;
width: 76px;
height: 76px;
top: 50%;
left: 50%;
margin-left: -37px;
margin-top: -37px;
background: #111;
background: rgba(0,0,0,0.5);
border-radius: 50% !important;
*/
}
.ivag-big-play:hover {
background: rgba(var(--color_orangeBIGPLAYHOVER),0.8); /* aggiunta modifica - prima era rgba(0,0,0,0.6) */
}
.ivag-bplay-i {
font-size: 1.3em !important; /*aggiunta - prima era 30px*/
position: absolute;
top: 50%;
left: 50%;
margin-left: -6px; /*aggiunta - prima era 8px*/
margin-top: -10px; /*aggiunta - prima era 14px*/
}
/****************************************************************************************** context menu */
.ivag-context-menu {
display: none;
position: absolute;
padding: 10px;
/*font-size: 16px;*/
white-space: nowrap;
z-index: 999999;
background: var(--box_bg);
-webkit-box-shadow: 0 0 12px rgb(0 182 240);
-moz-box-shadow: 0 0 12px rgb(0 182 240);
box-shadow: 0 0 12px rgb(0 182 240);
-webkit-border-radius: 14px !important;
border-radius: 14px !important;
}
.ivag-context-menu ul {
padding: 0 !important;
margin: 0 !important;
}
.ivag-context-menu li {
line-height: 1 !important;
list-style: none !important;
margin: 0 !important;
border: 0 !important;
border-top: 1px solid var(--color_grigio_chiaroC) !important;
padding: 10px !important;
color: var(--color_grigio_medio7) !important;
font-size: 20px !important;
color: var(--menu_testo) !important;
}
.ivag-context-menu li:first-child {
border-top: none !important;
}
.ivag-context-menu li:last-child {
border-bottom: none !important;
}
.ivag-context-copyright span {
background-color: var(--box_testo) !important;
font-size: 10px !important;
}
.ivag-context-copyright span a {
color: var(--box_testo) !important;
}
.ivag-context-menu li:hover > span {
opacity: 0.5;
}
/****************************************************************************************** share */
.ivag-share-holder {
position: absolute;
top: 0px;
right: 30px;
width: 105px;
height: 30px;
display: none;
}
.ivag-share-holder-bg {
/* ie */
position: absolute;
top: 0px;
right: 0px;
width: 105px;
height: 30px;
background: green;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.ivag-share-btn {
position: relative;
top: 0px;
right: 0px;
width: 30px;
height: 30px;
float: right;
text-align: center;
margin-right: 5px;
}
.ivag-contr-share-i {
display: inline-block;
font-size: 16px !important;
line-height: 30px !important;
}
.ivag-facebook {
background: #3b5998;
}
.ivag-twitter {
background: #55acee;
}
.ivag-googleplus {
background: #ee5555;
}
.ivag-sh-icon-color {
color: var(--color_white_aliceblue) !important;
}
/****************************************************************************************** info */
.ivag-info-holder {
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0px;
left: 0px;
display: none;
overflow: hidden;
text-align: center;
z-index: 10000 !important; /*aggiunto asse z per elevare il livello sopra il menù */
}
.ivag-info-bg {
position: absolute;
width: 100% !important;
height: 100% !important;
top: 0px;
left: 0px;
background: var(--box_bg);
background: rgba(0, 0, 0, 0.4);
text-align: center;
}
.ivag-info-container {
/* text-align: center;*/
/* vertical-align: middle;*/
position: absolute;
width: calc(100% - 80px);
height: calc(100% - 140px);
background: var(--box_bg); /* aggiunta prima era var(--color_grigio_scuro4) poi #313d4c */
border: 1px solid var(--box_bg);
top: 40px;
left: 40px;
/* angoli_box*/
-moz-border-radius: var( --box_border_radius);
-webkit-border-radius: var( --box_border_radius);
border-radius: var( --box_border_radius);
box-shadow: 0px 0px 20px 8px rgba(0, 255, 255, 0.5);
}
.ivag-info-inner {
font-size: 15px;
padding: 3px;
color: var(--box_testo) !important;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
/* user-select: text;*/
text-align: center;
}
.ivag-info-title {
color: var(--menu_testo);
font-size: 16px;
font-weight: bold;
text-align: center;
}
.ivag-info-content {
color: var(--box_testo);
font-size: 13px;
text-align: center;
}
.ivag-info-content-texto {
color: #fff9bb;
font-display: swap; /* aggiunta riga */
font-size: 15px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
white-space: pre-line;
-ms-word-wrap: break-word;
word-wrap: break-word;
/* Non standard for webkit*/
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
text-align: center;
}
.ivag-info-content-textowiki {
color: #aaa;
font-display: swap; /* aggiunta riga */
font-size: 15px;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
/* white-space: pre-line;*/
-ms-word-wrap: break-word;
word-wrap: break-word;
text-rendering: auto;
/* Non standard for webkit */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
text-align: justify;
margin: 0 10px 0 10px;
}
.ivag-info-holder a {
color: #ff6;
}
.ivag-info-close {
position: absolute !important;
text-align: center;
right: 14px !important;
top: 14px !important;
cursor: pointer;
background-color: var(--color_orange);
/* angoli_box_pulsante_chiudi*/
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
height: 36px !important;
width: 36px !important;
display: flex !important; /* allineamento centrato */
display: -webkit-flex !important; /* allineamento centrato */
justify-content: center !important; /* align horizontal */
align-items: center !important; /* align vertical */
-webkit-justify-content: center !important; /* align horizontal */
-webkit-align-items: center !important; /* align vertical */
z-index: 2;
}
.ivag-info-close-i {
display: inline-block;
font-size: 25px !important;
line-height: 25px !important;
color: var(--color_white_aliceblue) !important;
}
.ivag-info-toggle {
display: none;
}
/****************************************************************************************** bottone like */
.buttonlike {
/* background-color: var(--color_cyano);*/
/* background-color: #4CAF50;*/
background-color: transparent;
border: none;
color: var(--color_white);
padding: 1px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-display: swap; /* aggiunta riga */
font-size: 16px;
margin: 10px 0px;
cursor: pointer;
/* bordi arrotondati */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0 10px 3px white;
-moz-box-shadow: 0 0 10px 3px white;
box-shadow: 0 0 10px 3px white;
}
.container-like-iframe {
position: relative;
overflow: hidden;
/* padding-bottom: 30%;*/
margin-top: 0px;
margin-bottom: 0px;
width: 135px;
height: 25px;
-webkit-box-shadow: 0 0 5px 2px var(--color_grigio_medio9);
-moz-box-shadow: 0 0 5px 2px var(--color_grigio_medio9);
box-shadow: 0 0 5px 2px var(--color_grigio_medio9);
}
/****************************************************************************************** bottoni in iframe */
section {
max-width: 95%;
}
details {
background: var(--box_info_details_bg);
color: var(--box_info_details_testo);
padding: 2px;
margin-bottom: 2px;
border-radius: 15px;
-webkit-box-shadow: 3px 3px 4px black;
-moz-box-shadow: 3px 3px 4px black;
box-shadow: 3px 3px 4px black;
}
summary {
cursor: pointer;
font-weight: 900;
font-size: 16px; /*prima era 1em*/
color: var(--box_info_summary_testo);
text-align: center;
}
.container-iframe {
position: relative;
overflow: hidden;
/*padding-bottom: 30%; */
margin-top: 3px;
margin-bottom: 15px;
}
.responsive-iframe {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
background-color: var(--color_celeste_2);
border: 0px;
color: var(--color_black);
/* scrolling: auto;
marginheight: 0px;
marginwidth: 0px;
*/
}
/****************************************************************************************** embed */
.ivag-embed-holder {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: none;
overflow: hidden;
}
.ivag-embed-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: var(--color_grigio_scuro1);
background: rgba(30, 30, 30, 0.9);
}
.ivag-embed-container {
position: absolute;
max-width: 70%;
max-height: 90%;
background: var(--color_grigio_scuro4);
border: 1px solid var(--color_grigio_scuro5);
padding: 5px;
overflow: hidden;
}
.ivag-embed-close {
position: absolute;
width: 30px;
height: 30px;
background: var(--color_grigio_scuro3);
text-align: center;
}
.ivag-embed-player-title,
.ivag-link-player-title {
font-size: 12px;
letter-spacing: normal !important;
line-height: normal !important;
text-align: left !important;
margin: 0 !important;
padding: 5px !important;
color: var(--color_cyano);
}
.ivag-embed-player-cont,
.ivag-link-player-cont {
height: auto;
word-wrap: break-word;
overflow: hidden;
}
.ivag-embed-player,
.ivag-link-player {
background: var(--color_grigio_scuro5);
border: 1px solid var(--color_grigio_medio9) !important;
color: var(--color_grigio_chiaroB) !important;
font-size: 12px !important;
margin: 5px !important;
padding: 5px !important;
width: auto;
overflow: hidden;
line-height: 1.5 !important;
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
/* user-select: text;*/
}
.ivag-embed-player {
max-height: 60px;
}
.ivag-embed-player-copy-btn,
.ivag-link-player-copy-btn {
font-size: 14px;
background: var(--color_grigio_scuro6);
margin: 5px !important;
padding: 3px 5px !important;
color: var(--color_white_aliceblue);
float: right;
}
/****************************************************************************************** playlist holder */
.ivag-playlist-holder {
position: relative;
float: left;
width: var(--playlist_width); /*era impostato a 520*/
height: 100%;
opacity: 1;
background: var(--playlist_bg); /* colore sfondo playlist */
display: block;
}
.ivag-playlist-holder-vb {
border-top: 0 solid var(--playlist_bg) !important; /* prima era 1p */
}
.ivag-force-hidden {
position: absolute !important;
left: -10000px !important;
}
[dir="rtl"] .ivag-force-hidden {
right: -10000px !important;
}
/****************************************************************************************** menu category */
.ivag-category-menu {
position: relative;
top: 0px;
width: calc(100% - 172px) !important; /* 44px sono per l'icona info + 44 per l'icona bandiera */
height: 44px;
/*! z-index: 8; */
cursor: pointer;
left: 81px;
background: var(--player_button_all_bg); /* colore barra playlist - prima era nero #111 */
/*! -webkit-box-shadow: 0 4px 2px -2px var(--box_border); */
/*! -moz-box-shadow: 0 4px 2px -2px var(--box_border); */
/*! box-shadow: 0 4px 2px -2px var(--box_border); */
/*! border-right: 1px solid var(--box_border); */
/*! border-bottom: 1px solid var(--box_border); */
}
.ivag-category-title {
position: absolute;
left: 40px;
margin: 0 !important;
padding: 0 !important;
line-height: 44px !important;
font-display: swap; /* aggiunta riga */
font-size: 16px !important;
font-weight: 900;
max-width: calc(100% - 43px);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-cat-menu-i {
position: absolute;
font-size: 20px !important;
line-height: 44px !important;
top: 0px;
left: 10px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-category {
position: absolute;
top: 44px;
left: 0px;
width: 100%;
overflow: hidden;
display: none;
}
.ivag-category-inner {
position: relative;
top: 0px;
left: 0px;
height: 100%;
}
/****************************************************************************************** menu info-category */
.ivag-info-category-menu {
position: absolute;
top: 0px;
width: 26px;
height: 44px;
z-index: 5;
cursor: pointer;
right: 26px;
}
.ivag-info-category-title {
position: absolute;
right: 0px;
margin: 0 !important;
padding: 0 !important;
line-height: 44px !important;
font-display: swap; /* aggiunta riga */
font-size: 16px !important;
font-weight: 900;
max-width: 26px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-info-cat-menu-i {
position: absolute;
font-size: 20px !important;
line-height: 44px !important;
top: 0px;
left: 5px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-info-category {
position: absolute;
top: 44px;
left: 0px;
width: 100%;
overflow: hidden;
display: none;
}
.ivag-info-category-inner {
position: relative;
top: 0px;
left: 0px;
height: 100%;
}
/****************************************************************************************** posizione della lista delle categorie */
.ivag-playlist {
position: relative;
top: 0px;
left: 0px;
width: 100%;
overflow: hidden;
}
.ivag-playlist-dim {
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
.ivag-playlist-inner {
position: relative;
top: 0px;
left: 0px;
height: 100%;
}
#ivag-playlist-list {
display: none;
}
/****************************************************************************************** playlist items */
.ivag-playlist-non-selected {
position: relative;
left: 10px;
width: calc(100% - 20px);
height: 100px;
-webkit-box-align: center;
/* border: 1px solid var(--playlist_non_selected_border); */
/* box-shadow: rgba(1, 14, 40, 0.05) 0px 2px 4px; */
/* -webkit-border-radius: 12px !important; */ /* aggiunta riga */
/* border-radius: 12px !important; */ /* aggiunta riga */
/* margin-bottom: 8px; */
text-rendering: auto;
background: var(--playlist_non_selected); /* prima era grigio 373737*/
color: var(--playlist_testo_desc);
}
.ivag-playlist-selected {
position: relative;
left: 10px;
width: calc(100% - 20px);
height: 100px;
-webkit-box-align: center;
/* border: 1px solid var(--playlist_selected_border); */
/* box-shadow: rgba(1, 14, 40, 0.05) 0px 2px 4px; */
-webkit-border-radius: 12px !important; /* aggiunta riga */
border-radius: 12px !important; /* aggiunta riga */
/* margin-bottom: 8px; */
text-rendering: auto;
background: var(--playlist_selected); /* var(--color_cyano) > celeste - prima ancora era arancione FA7C00*/
/*color: var(--playlist_bg); */
}
.ivag-playlist-selected:hover {
background: var(--playlist_selected); /* aggiunta modifica - rgba(var(--color_orangeBIGPLAYHOVER),0.5); - prima era rgba(0,0,0,0.6) */
}
.ivag-playlist-selected .ivag-playlist-info .ivag-playlist-title .ivag-playlist-desc{
color: var(--player_holder_bg);
}
.ivag-playlist-disabled {
cursor: default;
}
.ivag-playlist-selected:last-child,
.ivag-playlist-non-selected:last-child {
margin-bottom: 0px;
}
.ivag-playlist-thumb {
position: relative;
top: 6px;
left: 6px;
width: 120px; /* prima era 110 */
height: 88px;
float: left;
overflow: hidden;
-webkit-border-radius: 12px !important; /* aggiunta riga */
border-radius: 12px !important; /* aggiunta riga */
}
@keyframes ivag-thumb-loader {
to {
transform: rotate(360deg);
}
}
.ivag-thumb-loader:before {
content: "";
box-sizing: border-box;
position: absolute;
/* top: 50%; */
/* left: 50%; */
width: 100%;
height: 100%;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 5px solid var(--color_grigio_chiaro);
border-top-color: var(--color_blu_spinner);
animation: spinner 0.6s linear infinite;
display: none;
}
.ivag-youtube-preview {
position: absolute;
width: 100%;
height: 100%;
}
.ivag-flash-preview {
position: absolute;
width: 100%;
height: 100%;
outline: none;
}
.ivag-thumbvid {
position: absolute;
width: 100%;
height: 100%;
}
.ivag-hitdiv {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 4;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
}
.ivag-thumbimg {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: 100%;
/* -webkit-border-radius: 4px !important; */ /* aggiunta riga */
/* border-radius: 4px !important; */ /* aggiunta riga */
}
.ivag-hidden {
opacity: 0;
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
}
.ivag-visible {
opacity: 1;
-webkit-transition: opacity 500ms ease-out;
-moz-transition: opacity 500ms ease-out;
-o-transition: opacity 500ms ease-out;
-ms-transition: opacity 500ms ease-out;
transition: opacity 500ms ease-out;
/* bordi arrotondati */
/*
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
*/
}
/****************************************************************************************** playlist pannello informazioni */
.ivag-playlist-info {
position: absolute;
left: 130px;
top: 2px;
height: 95px;
margin-right: 1px;
text-overflow: ellipsis;
overflow: hidden;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
float: left;
}
.ivag-playlist-info-full {
position: relative;
left: 15px;
top: 10px;
height: 60px;
margin-right: 20px;
text-overflow: ellipsis;
overflow: hidden;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
[dir="rtl"] .ivag-playlist-info,
.ivag-playlist-info-full {
margin-right: 30px;
}
.ivag-playlist-info p,
.ivag-playlist-info-full p {
margin: 0 !important;
padding: 0 !important;
line-height: 18px !important;
}
/****************************************************************************************** playlist titolo e descrizione */
.ivag-playlist-title {
font-display: swap; /* aggiunta riga */
font-size: 14px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-playlist-desc {
font-display: swap; /* aggiunta riga */
font-size: 12px;
font-weight: bold;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
/****************************************************************************************** playlist time */
.ivag-playlist-time {
position: absolute;
top: 72px;
left: 76px;
width: 45px;
height: 18px;
font-display: swap; /* aggiunta riga */
font-size: 14px;
font-weight: bold;
color: var(--playlist_time_testo);
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
overflow: auto;
background-color: var(--playlist_time_bg);
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
/* border-color: var(--playlist_time_border); */
/* border-style: solid; */
/* border-width: 1px; */
-webkit-border-radius: 6px !important; /* aggiunta riga */
border-radius: 6px !important; /* aggiunta riga */
}
.disableScroll { /* usato nel file new.js riga 9484 */
overflow-y: hidden;
overflow-x: hidden;
}
/* Hide scrollbar for IE, Edge and Firefox */
* {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
/****************************************************************************************** logo */
.ivag-logo {
position: absolute;
width: 95px;
height: 44px;
top: 5px;
left: 5px;
}
/****************************************************************************************** advert */
.ivag-ad-skip-btn {
position: absolute;
width: 160px;
height: 52px;
left: 10px;
bottom: 43px;
background: #111;
background: rgba(0, 0, 0, 0.8) !important;
border: 1px solid var(--color_grigio_scuro5) !important;
display: none;
}
.ivag-ad-skip-msg {
position: absolute;
left: 0px;
width: 82px;
height: 100%;
display: table;
}
.ivag-ad-skip-msg p {
font-size: 13px !important;
color: var(--box_border) !important;
text-align: center !important;
vertical-align: middle !important;
display: table-cell !important;
line-height: 1.4 !important;
padding: 0 !important;
margin: 0 !important;
}
.ivag-ad-thumb {
position: absolute;
display: block;
right: 0px;
margin: 4px !important;
width: 70px !important;
height: 44px !important;
}
.ivag-ad-skip-msg-end {
position: absolute;
width: 100%;
height: 52px;
display: none;
}
.ivag-ad-skip-msg-end p {
font-size: 22px !important;
color: var(--box_border) !important;
text-align: center !important;
line-height: 52px !important;
margin: 0 !important;
padding: 0 !important;
}
/****************************************************************************************** download confirm */
.ivag-download-confirm {
position: absolute;
width: 200px;
left: 50%;
top: 50%;
margin-left: -100px;
border: 1px solid var(--color_grigio_scuro5);
opacity: 0;
z-index: 1000;
display: none;
}
.ivag-download-confirm p {
padding: 10px 5px !important;
font-size: 14px;
color: var(--color_white_aliceblue);
background: var(--color_grigio_scuro3);
text-align: center;
}
/****************************************************************************************** bottom bar */
.ivag-bottom-bar {
position: absolute;
bottom: 0px;
width: 100%;
height: 44px; /* altezza barra in basso */
z-index: 6;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
/*! left: 54px; */
background: var(--player_button_all_bg);
-webkit-box-shadow: 0px 1px 4px 2px var(--box_border); /* 0px 0px 4px 2px var(--box_border); */
-moz-box-shadow: 0px 1px 4px 2px var(--box_border); /* 0px 0px 4px 2px var(--box_border); */
box-shadow: 0px 1px 4px 2px var(--box_border); /* 0px 0px 4px 2px var(--box_border); */
border-top: 1px solid var(--box_border);
}
.ivag-pl-buttons {
position: relative;
height: 44px;
top: 0px;
margin-right: 0px;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-around; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: space-around; /* align horizontal */
-webkit-align-items: center; /* align vertical */
width: 100%;
}
.ivag-contr-bar {
position: relative;
top: 0px;
left: 0px;
float: left;
width: 48px;
height: 44px;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-contr-bar-i {
/*display: inline-block;*/
font-size: 1.3em !important;
line-height: 44px !important;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-playlist-filter-msg {
opacity: 0;
position: absolute;
/* top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: table;
*/
top: 50px; /* spostato di 50 punti in basso */
width: 100%;
height: 100%;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
/* align-items: center;*/ /* align vertical */
-webkit-justify-content: center; /* align horizontal */
/* -webkit-align-items: center;*/ /* align vertical */
}
.ivag-playlist-filter-msg span {
font-size: 15px !important;
font-weight: bold;
display: table-cell !important;
vertical-align: middle !important;
text-align: center !important;
padding: 0 !important;
margin: 0 !important;
}
.ivag-info-bar {
position: absolute;
bottom: 0px;
width: 54px;
height: 44px; /* altezza barra in basso */
left: 0px;
z-index: 6;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
/****************************************************************************************** filtro canzoni */
.ivag-filter-wrap {
height: 44px; /* altezza barra filtro canzoni */
margin: 0 0 0 0 !important;
position: absolute; /* aggiunta riga */
z-index: 6; /* aggiunta riga */
width: calc(124px - 44px); /* aggiunta riga */
top: 0px;
/*! -webkit-box-shadow: 0 2px 4px var(--box_border); */
/*! -moz-box-shadow: 0 2px 4px var(--box_border); */
/*! box-shadow: 0 2px 4px var(--box_border); */
/*! border-bottom: 1px solid var(--box_border); */
/*! border-right: 1px solid var(--box_border); */
}
.search-button-toggle {
position: absolute;
top: 0px;
left: 0px;
width: 21px;
height: 38px;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
-webkit-align-self: center; /* Safari 7.0+ */
align-self: center;
text-align: center;
}
.ivag-search-toggle {
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 32px;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-sr-bar-i {
display: block;
font-size: 0.9em !important;
line-height: 35px !important;
/* display: flex;*/ /* allineamento centrato */
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
/****************************************************************************************** filtro search */
input.ivag-search-filter[type="search"] {
position: absolute;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
top: 5px;
left: 38px;
width: 38px;
height: 34px !important;
padding: 2px !important;
margin: 0 0 0 0 !important;
border: 0 !important;
-webkit-border-radius: 4px !important;
border-radius: 4px !important;
background: var(--search_bg);
color: var(--search-testo) !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
line-height: 0 !important;
/* font-size: 0.9em !important;*/
font-size: 15px !important;
/* font-weight: bold;*/
}
input.ivag-search-filter[type="search"]:focus {
background-color: rgba(255, 255, 0, 1);
/* background: rgba(255,255,0,1.0) url('../media/category/jivag/searchiconX.png') no-repeat left 0 center; */
width: calc(100vw - 44px);
/* transition: width 0.4s ease-in-out; */
outline: none !important;
border: 1px solid var(--color_cyano) !important;
-webkit-box-shadow: 0 0 10px #719ece !important;
-moz-box-shadow: 0 0 10px #719ece !important;
box-shadow: 0 0 10px #719ece !important;
color: var(--color_red) !important;
padding-left: 5px!important;
}
input.ivag-search-filter[type="search"]:focus:hover {
background-color: rgba(255, 255, 0, 1);
outline: none !important;
border: 1px solid var(--color_cyano) !important;
-webkit-box-shadow: 0 0 10px #719ece !important;
-moz-box-shadow: 0 0 10px #719ece !important;
box-shadow: 0 0 10px #719ece !important;
color: var(--color_red) !important;
padding-left: 5px!important;
}
/* button clear 'X' for Internet Explorer */
input.ivag-search-filter[type="search"]::-ms-clear {
display: none;
width: 0px;
height: 0px;
padding-left: 5px!important;
}
input.ivag-search-filter[type="search"]::-ms-reveal {
display: none;
width: 0px;
height: 0px;
padding-left: 5px!important;
}
/* button clear 'X' for Chrome */
input.ivag-search-filter[type="search"]::-webkit-search-decoration,
input.ivag-search-filter[type="search"]::-webkit-search-cancel-button,
input.ivag-search-filter[type="search"]::-webkit-search-results-button,
input.ivag-search-filter[type="search"]::-webkit-search-results-decoration,
input.ivag-search-filter[type="search"]::-moz-search-decoration,
input.ivag-search-filter[type="search"]::-moz-search-cancel-button,
input.ivag-search-filter[type="search"]::-moz-search-results-button,
input.ivag-search-filter[type="search"]::-moz-search-results-decoration {
display: none;
}
/* input.ivag-search-filter[type="search"]:hover { background-color: rgba(255,255,0,1.0); } */
.erasebutton {
position: absolute;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important;
/*
height: 25px;
width: 25px;
right: 7px;
top: 10px;
*/
height: 36px;
width: 36px;
left: 4px;
top: 4px;
font-display: swap; /* aggiunta riga */
font-size: 22px;
font-weight: bold;
cursor: pointer;
color: var(--search_erasebutton_testo);
background-color: var(--search_erasebutton_bg); /* colore grigio */
border-color: var(--search_erasebutton_border);
display: flex !important; /* allineamento centrato */
display: -webkit-flex !important; /* allineamento centrato */
justify-content: center !important; /* align horizontal */
align-items: center !important; /* align vertical */
-webkit-justify-content: center !important; /* align horizontal */
-webkit-align-items: center !important; /* align vertical */
}
.container-bar-top {
-webkit-box-shadow: 0 1px 2px 0px var(--box_border); /* 0 4px 4px -1px var(--box_border) */
-moz-box-shadow: 0 1px 2px 0px var(--box_border); /* 0 4px 4px -1px var(--box_border) */
box-shadow: 0 1px 2px 0px var(--box_border); /* 0 4px 4px -1px var(--box_border) */
border-bottom: 1px solid var(--box_border);
position: relative;
z-index: 6;
}
/****************************************************************************************** start search panel */
.ivag-search-panel-wrap * {
padding: 0 !important;
margin: 0 !important;
border-spacing: 0 !important;
line-height: 1px !important;
font-weight: normal !important;
text-transform: none !important;
}
.ivag-search-panel-wrap {
position: absolute;
left: 0px;
bottom: 40px;
width: 280px;
padding: 10px;
background: var(--menu_button_border_bg);
color: var(--color_white_aliceblue);
font-size: 14px;
display: none;
z-index: 7;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ivag-search-panel-wrap table {
margin: 0 0 5px 0 !important;
border: 0 !important;
width: auto !important;
background: none !important;
}
.ivag-search-panel-wrap table tr {
background: none !important;
border: 0 !important;
}
.ivag-search-mess {
width: 100px !important;
border: none !important;
text-align: left !important;
background: none !important;
vertical-align: middle !important;
}
[dir="rtl"] .ivag-search-mess {
text-align: right !important;
}
.ivag-search-mess label {
height: 15px;
color: var(--color_white_aliceblue) !important;
font-size: 15px !important;
font-weight: normal !important;
}
.ivag-search-inp {
border: none !important;
}
.ivag-search-inp input {
width: 150px !important;
height: 18px !important;
border: 0 !important;
border-radius: 0 !important;
line-height: 18px;
background: var(--color_white_aliceblue) !important;
color: #111 !important;
margin: 0 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.ivag-search-inp select {
width: inherit;
max-width: 150px !important;
min-width: 0 !important;
height: 18px !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--color_white_aliceblue) !important;
color: #111 !important;
margin: 0 !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.ivag-search-query,
.ivag-results-limit {
-webkit-touch-callout: text !important;
-webkit-user-select: text !important;
-khtml-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
}
.ivag-search-execute,
.ivag-search-close {
position: relative;
float: left;
height: 20px !important;
margin: 0 10px 0 0 !important;
padding: 3px 4px !important;
border: 0 !important;
border-radius: 0 !important;
cursor: pointer;
color: #111 !important;
background: var(--box_border) !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* button::-moz-focus-inner{
border: 0px;
padding: 0px;
} */
.ivag-search-execute:hover,
.ivag-search-close:hover {
background: red !important;
color: var(--color_white_aliceblue) !important;
}
@keyframes ivag-playlist-loader {
to {
transform: rotate(360deg);
}
}
.ivag-playlist-loader:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-top: -15px;
margin-left: -15px;
border-radius: 50%;
border: 5px solid var(--color_grigio_chiaro);
border-top-color: var(--color_blu_spinner);
animation: spinner 0.6s linear infinite;
z-index: 9999;
display: none;
}
.ivag-search-error label {
color: var(--color_red) !important;
}
.ivag-search-sort {
display: none;
}
/* end search panel */
/****************************************************************************************** tooltip */
.ivag-tooltip {
position: absolute;
background: var(--tooltip_bg);
text-align: center;
z-index: 10000;
border: 1px solid var(--tooltip_border);
border-radius: 3px !important;
pointer-events: none;
}
.ivag-tooltip p {
width: inherit;
font-size: 12px !important;
color: var(--tooltip_testo) !important;
margin: 0 5px !important;
padding: 0 !important;
line-height: 15px !important;
white-space: nowrap;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
-webkit-justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-tooltip-num {
direction: ltr !important;
}
/****************************************************************************************** captions */
/* vtt - srt */
.arduino {
color: red;
text-transform: uppercase !important;
font-weight: lighter !important;
}
.captionator-title a {
text-decoration: none;
font-weight: bold;
letter-spacing: 5pt;
color: red;
}
q.voice:before {
content: attr(title);
color: red;
margin-right: 8px; /*prima era 0.5em*/
}
q.voice:after {
content: "";
}
/****************************************************************************************** div captions */
.ivag-sub {
position: absolute;
bottom: 40px;
left: 0px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
line-height: 25px !important;
margin: 0 !important;
padding: 10px 20px !important;
font-display: swap; /* aggiunta riga */
font-size: 20px !important;
color: var(--color_white_aliceblue) !important;
background: #111 !important;
background: rgba(0, 0, 0, 0.5) !important;
text-align: center !important;
display: none;
}
.ivag-red {
color: red !important;
text-transform: uppercase !important;
font-weight: lighter !important;
}
.ivag-sub a {
color: #FF0px !important;
}
/****************************************************************************************** timed events */
.ivag-elem {
display: none;
opacity: 0.7;
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";*/
/* filter: alpha(opacity=70);*/ /* aggiunta per IE 5-*/
border: 1px solid transparent;
clear: both;
float: left;
}
.ivag-elem p {
padding: 0 !important;
margin: 0 !important;
font-size: 13px !important;
}
.ivag-elem-hover {
opacity: 1;
/* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";*/
/* filter: alpha(opacity=100);*/ /* aggiunta per IE 5-*/
border: 1px solid #aaa;
z-index: 9999999;
}
.ivag-elem-close {
display: none;
}
.ivag-crb {
position: absolute;
right: -9px;
bottom: -9px;
width: 18px;
height: 18px;
}
.ivag-crt {
position: absolute;
right: -9px;
top: -9px;
width: 18px;
height: 18px;
}
.ivag-clt {
position: absolute;
left: -9px;
top: -9px;
width: 18px;
height: 18px;
}
.ivag-clb {
position: absolute;
left: -9px;
bottom: -9px;
width: 18px;
height: 18px;
}
#elem1 {
position: absolute;
top: 0px;
left: 130px;
background: var(--color_grigio_chiaro);
color: white;
padding: 5px;
}
#elem2 {
position: absolute;
bottom: 100px;
left: 0px;
background: #669;
color: white;
padding: 5px;
}
#elem3 {
position: absolute;
top: 0px;
right: 50px;
background: #606;
color: white;
padding: 5px;
}
#elem4 {
position: absolute;
top: 200px;
right: 0px;
background: #699;
color: white;
padding: 5px;
}
#elem5 {
position: absolute;
top: 120px;
left: 10px;
background: #ec4d4d;
color: white;
padding: 5px;
}
#elem6 {
position: absolute;
top: 160px;
left: 10px;
background: #81f12f;
color: white;
padding: 5px;
}
#elema1 {
position: relative;
top: 50px;
left: 5px;
background: #7f8cee;
color: white;
padding: 5px;
margin-top: 5px;
}
#elema2 {
position: relative;
top: 50px;
left: 5px;
background: #7f6ad8;
color: white;
padding: 5px;
margin-top: 5px;
}
#elema3 {
position: relative;
top: 50px;
left: 5px;
background: #6849b6;
color: white;
padding: 5px;
margin-top: 5px;
}
#elema4 {
position: relative;
top: 50px;
left: 5px;
background: #59379c;
color: white;
padding: 5px;
margin-top: 5px;
}
#elema5 {
position: relative;
top: 50px;
left: 5px;
background: #1c094d;
color: white;
padding: 5px;
margin-top: 5px;
}
#elemb1 {
position: relative;
top: 50px;
left: 5px;
background: #e84fff;
color: white;
padding: 10px;
margin-top: 5px;
}
/****************************************************************************************** api */
#api-panel {
position: fixed;
top: 0px;
right: 0px;
height: 100%;
overflow-y: auto;
z-index: 999999;
display: none;
}
#api-panel li a {
color: var(--color_white_aliceblue);
}
#api-panel li a:hover,
#api-panel li .current {
text-decoration: underline;
}
.api-panel-inner {
padding: 30px;
background: var(--color_grigio_scuro3);
font-size: 16px;
color: var(--box_border);
}
.toggle-panel {
position: fixed;
top: 0px;
right: 0px;
width: 40px;
height: 40px;
background: var(--color_grigio_scuro4) url("../data/api_open.png") no-repeat center center;
z-index: 999999;
display: none;
}
.toggle-panel-close {
position: fixed;
top: 0px;
right: 0px;
width: 40px;
height: 40px;
background: var(--color_grigio_scuro4) url("../data/api_close.png") no-repeat center center;
z-index: 999999;
}
/****************************************************************************************** icons */
.ivag-icon-color-bottom {
color: var(--menu_testo); /* var(--color_cyano) colore icone celeste*/
}
.ivag-icon-color {
color: var(--color_white_aliceblue); /* var(--color_cyano) colore icone celeste - prima era var(--color_grigio_medio7) e anche #BBBBBB*/
}
.ivag-icon-rollover-color {
color: var(--color_grigio_chiaroD) !important;
}
.ivag-icon-color-on {
color: var(--color_orange) !important; /* colore icone arancione */
}
.ivag-icon-color-arrow-player-on {
color: var(--menu_testo) !important; /* celeste */
}
.ivag-player-addon {
position: absolute;
top: 0px;
right: 0px;
width: 44px;
display: none;
height: 60px;
}
/****************************************************************************************** colore wrapper fs */
.ivag-wrapper-fs {
background: var(--color_black) !important;
}
/****************************************************************************************** colore sfondo video */
.ivag-player-holder {
background: var(--player_holder_bg);
}
/****************************************************************************************** colore share */
.ivag-contr-vert {
/* background: #595959; */
/*
background-color: rgb(0, 0, 0) !important;
background-color: rgba(0, 0, 0, 0.2) !important; */
}
/****************************************************************************************** colore player controls */
.ivag-player-controls {
/* opacity: 0.7 !important;*/ /*aggiunta riga per sovrascrive la regola della trasparenza*/
/* filter: alpha(opacity=30);*/
/* background:#111 !important;*/ /*aggiunta - riga commentata per applicare lo sfondo trasparente*/
/*
background-color: rgb(0, 0, 0) !important;
background-color: rgba(0, 0, 0, 0.2) !important;*/
}
/****************************************************************************************** colore barra del volume */
.ivag-volume-bg {
background: rgba(5, 5, 5, 0.3); /* prima era var(--color_grigio_scuro5) */
}
.ivag-volume-level {
background: var(--color_white_aliceblue); /* prima era var(--color_cyano) */
}
/****************************************************************************************** colore tempo durata */
.ivag-media-time-current {
color: var(--color_white_aliceblue) !important; /* prima era #ffa500 */
}
.ivag-media-time-separator {
color: var(--color_white_aliceblue) !important; /* prima era var(--color_cyano) */
}
.ivag-media-time-total {
color: var(--color_white_aliceblue) !important; /* prima era var(--color_cyano) */
font-weight: bold;
}
/****************************************************************************************** colore tempo barra */
.ivag-progress-bg {
/* background: var(--color_grigio_chiaroD);*/
background: rgb(200, 200, 200) !important;
background: rgba(200, 200, 200, 0.4) !important;
}
.ivag-load-level {
/* background: #AAAAAA;*/
background: rgb(207, 207, 207) !important;
background: rgba(207, 207, 207, 0.3) !important;
}
.ivag-progress-level {
background: var(--color_cyano);
}
.ivag-progress-level-ad {
background: #fc0;
}
/****************************************************************************************** colore playback rate */
.ivag-rate-over {
background: var(--menu_testo);
}
/****************************************************************************************** colore menu playlist */
.ivag-category-title {
color: var(--menu_testo); /* colore testo playlist - prima era grigio #AAA */
}
.ivag-category-title-on {
color: var(--color_orange); /* colore testo playlist-on - prima era var(--color_white_aliceblue) */
}
/****************************************************************************************** colore playlist items */
.ivag-playlist-thumb {
background: var(--box_border);
border: 0 solid var(--color_grigio_scurissimo); /* bordo thumb nessuno - prima era grigio 222*/
}
.ivag-thumbvid {
background: var(--color_black);
}
/****************************************************************************************** colore playlist titolo e descrizione */
.ivag-playlist-title {
/* color: var(--playlist_testo_title); */ /* nero - prima era bianco - prima era 325E33*/
}
.ivag-playlist-desc {
/* color: var(--playlist_testo_desc); */ /* grigio - prima era verde 416E00 - prima era 325E33*/
}
/****************************************************************************************** colore bottom bar */
.ivag-playlist-filter-msg span {
color: RED !important;
/* aggiunta righe inizio */
font-display: swap;
font-size: 18px !important;
text-rendering: auto;
/* aggiunta righe fine */
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
}
.ivag-info-bar {
background: var(--player_button_all_bg);
-webkit-box-shadow: 0px 0px 4px 2px var(--box_border);
-moz-box-shadow: 0px 0px 4px 2px var(--box_border);
box-shadow: 0px 0px 4px 2px var(--box_border);
border-top: 1px solid var(--box_border);
}
/****************************************************************************************** pulsante bandiera */
.ivag-boxbandiera-bar {
position: absolute;
cursor: pointer;
top: 0px;
width: 92px; /* prima era 44px per il solo tasto bandiera */
height: 44px; /* altezza barra in basso */
right: 0px;
background: var(--player_button_all_bg);
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
/*! -webkit-box-shadow: 0 2px 4px var(--box_border); */
/*! -moz-box-shadow: 0 2px 4px var(--box_border); */
/*! box-shadow: 0 2px 4px var(--box_border); */
/*! border-bottom: 1px solid var(--box_border); */
/*! border-left: 1px solid var(--box_border); */
/*! z-index: 6; */
}
.ivag-boxbandiera-toggle {
display: none;
}
.ivag-boxbandiera-contr-bar {
position: relative;
top: 0px;
right: 0px;
float: right;
width: 44px;
height: 44px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
}
.ivag-boxbandiera-contr-bar-i {
font-size: 1.3em !important;
line-height: 44px !important;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
font-smooth: auto;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
}
/****************************************************************************************** pulsante overlay */
.apri_boxbandiera {
font-display: swap; /* aggiunta riga */
font-size: 16px;
margin-right: 0px;
/*border: solid 3px var(--color-arancione);*/
border-radius: 4px;
background-color: var(--bandiera_bg) !important; // aliceblue
}
.apri_boxabout,
.apri_boxprivacy,
.apri_boxcopyright,
.apri_boxhelp,
.apri_boxpaypal,
.apri_boxcontact {
font-display: swap; /* aggiunta riga */
font-size: 16px;
margin-right: 0px;
}
.apri_boxbandiera:hover,
.apri_boxabout:hover,
.apri_boxprivacy:hover,
.apri_boxcopyright:hover,
.apri_boxhelp:hover,
.apri_boxpaypal:hover,
.apri_boxcontact:hover {
font-display: swap; /* aggiunta riga */
font-size: 16px;
cursor: pointer;
}
.chiudi_boxbandiera,
.chiudi_boxabout,
.chiudi_boxprivacy,
.chiudi_boxcopyright,
.chiudi_boxhelp,
.chiudi_boxpaypal,
.chiudi_boxcontact,
.chiudi_boxinfo_ADS {
position: absolute;
right: 0px;
top: 12px;
cursor: pointer;
background-color: var(--color_orange);
height: 36px;
width: 36px;
/* bordi arrotondati */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
}
/****************************************************************************************** box overlay */
.overlay_boxbandiera,
.overlay_boxabout,
.overlay_boxprivacy,
.overlay_boxcopyright,
.overlay_boxhelp,
.overlay_boxpaypal,
.overlay_boxcontact,
.overlay_boxinfo {
background: var(--color_black);
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
cursor: pointer;
/* Trasperenza cross browser*/
opacity: 0.4;
/* filter: alpha(opacity=40);*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
background-color: rgba(0, 0, 0, 0.4);
background-color: rgb(0, 0, 0);
z-index: 10000;
}
.overlay_closebtn_boxbandiera,
.overlay_closebtn_boxabout,
.overlay_closebtn_boxprivacy,
.overlay_closebtn_boxcopyright,
.overlay_closebtn_boxhelp,
.overlay_closebtn_boxpaypal,
.overlay_closebtn_boxcontact {
position: absolute;
top: 2px;
right: 14px;
font-size: 44px;
cursor: pointer;
z-index: 11000;
}
.overlay_closebtn_X_info-i {
color: var(--buttonXclose) !important;
background-color: opacity(0%) !important;
}
.overlay_closebtn_boxbandiera-i,
.overlay_closebtn_boxabout-i,
.overlay_closebtn_boxprivacy-i,
.overlay_closebtn_boxcopyright-i,
.overlay_closebtn_boxhelp-i,
.overlay_closebtn_boxpaypal-i,
.overlay_closebtn_boxcontact-i {
/*display: inline-block;*/
font-size: 25px !important;
line-height: 35px !important;
color: var(--buttonXclose) !important;
background-color: opacity(0%) !important;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
}
/****************************************************************************************** box bandiera, about, privacy, copyright, help, contact ecc */
#boxbandiera {
text-align: left !important;
}
#boxbandiera,
#boxabout,
#boxprivacy,
#boxcopyright,
#boxhelp,
#boxpaypal,
#boxcontact {
position: absolute;
margin: 0px 0px 0px 0px;
width: calc(100% - 80px);
height: calc(100% - 140px);
top: 40px;
left: 40px;
background-color: var(--box_bg);
/* border: 1px solid var(--color_white_aliceblue);*/
font-display: swap;
font-size: 13px;
color: var(--box_testo);
text-rendering: auto;
text-align: justify;
/* bordi arrotondati */
-webkit-border-radius: var(--box_border_radius);
-moz-border-radius: var(--box_border_radius);
-o-border-radius: var(--box_border_radius);
border-radius: var(--box_border_radius);
box-shadow: 0px 0px 20px 8px rgba(0, 255, 255, 0.5);
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
display: none;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow-y: auto;
z-index: 10010;
}
#boxbandiera li:hover {
background-color: var(--color_cyano);
border-left: 5px solid var(--color_orange);
}
#boxbandiera li,
#boxabout li,
#boxprivacy li,
#boxcopyright li,
#boxhelp li,
#boxpaypal li,
#boxcontact li {
padding: 5px 10px 0 10px !important;
display: block !important;
/* float: left;*/
margin: 0 !important;
list-style: none !important;
}
#boxbandiera ul,
#boxabout ul,
#boxprivacy ul,
#boxcopyright ul,
#boxhelp ul,
#boxpaypal ul,
#boxcontact ul {
padding: 0 0 0 0 !important;
display: block !important;
/* float: left;*/
margin: 0 !important;
list-style: none !important;
}
#boxbandiera a,
#boxabout a,
#boxprivacy a,
#boxcopyright a,
#boxhelp a,
#boxpaypal a,
#boxcontact a {
padding: 0px;
text-decoration: none;
font-size: 16px;
color: var(--box_testo);
display: block;
transition: 0.3s;
}
/****************************************************************************************** titolo titolosotto testo testobold */
/****************************************************************************************** ADS box top */
#boxbandiera_ADS_top,
#boxabout_ADS_top,
#boxprivacy_ADS_top,
#boxcopyright_ADS_top,
#boxhelp_ADS_top,
#boxpaypal_ADS_top,
#boxcontact_ADS_top {
position: absolute;
margin: 0px 0px 0px 0px;
width: calc(100% - 0px);
height: 60px;
top: 0px;
left: 0px;
/* background-color: var(--color_grigio_chiaro);*/
background: var(--menu_bg);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
/* border: 1px solid var(--color_white_aliceblue);*/
font-display: swap; /* aggiunta riga */
font-size: 12px;
color: var(--menu_bg);
text-rendering: auto;
text-align: justify;
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
display: none;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow: hidden;
z-index: 10010;
}
/****************************************************************************************** ADS box bottom */
#boxbandiera_ADS,
#boxabout_ADS,
#boxprivacy_ADS,
#boxcopyright_ADS,
#boxhelp_ADS,
#boxpaypal_ADS,
#boxcontact_ADS {
position: absolute;
margin: 0px 0px 0px 0px;
width: calc(100% - 0px);
height: 60px;
bottom: 0px;
left: 0px;
/* background-color: var(--color_grigio_chiaro);*/
background: var(--menu_bg);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
/* border: 1px solid var(--color_white_aliceblue);*/
font-display: swap; /* aggiunta riga */
font-size: 12px;
color: var(--menu_bg);
text-rendering: auto;
text-align: justify;
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
display: none;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow: hidden;
z-index: 10010;
}
#boxplaylist_ADS {
position: absolute;
margin: 0px 0px 0px 0px;
width: 100%;
height: 60px;
bottom: -70px;
left: 0px;
/* background-color: var(--color_grigio_chiaro);*/
background: var(--menu_bg);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
/* border: 1px solid var(--color_white_aliceblue);*/
font-display: swap; /* aggiunta riga */
font-size: 12px;
color: var(--menu_bg);
text-rendering: auto;
text-align: center;
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow: hidden;
z-index: 11 !important; /* per nascondere il pezzettino di seekbar */
}
#boxplaylist_ADS_bordo {
position: absolute;
margin: 0px 0px 0px 0px;
width: 100%;
height: 10px;
bottom: -10px;
left: 0px;
background-color: var(--box_playlist_ADS_bordo);
/* border: 1px solid var(--color_white_aliceblue);*/
display: block;
z-index: 6;
}
#boxinfo_ADS {
position: absolute;
margin: 0px 0px 0px 0px;
width: calc(100% - 0px);
height: 60px;
bottom: 0px;
left: 0px;
/* background-color: var(--color_grigio_chiaro);*/
background: var(--menu_bg);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
/* border: 1px solid var(--color_white_aliceblue);*/
font-display: swap; /* aggiunta riga */
font-size: 12px;
color: var(--menu_bg);
text-rendering: auto;
text-align: center;
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
display: none;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow: hidden;
z-index: 10010;
}
#boxinfo_ADS_top {
position: absolute;
margin: 0px 0px 0px 0px;
width: calc(100% - 0px);
height: 60px;
top: 0px;
left: 0px;
/* background-color: var(--color_grigio_chiaro);*/
background: var(--menu_bg);
background-size: auto;
background-repeat: no-repeat;
background-position: center;
/* border: 1px solid var(--color_white_aliceblue);*/
font-display: swap; /* aggiunta riga */
font-size: 12px;
color: var(--menu_bg);
text-rendering: auto;
text-align: center;
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
display: none;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow: hidden;
z-index: 10010;
}
#push_notifications {
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
width: 100%;
height: 30px;
bottom: 0px;
/* left: 0;*/
/* background-color: var(--color_grigio_chiaro);*/
text-rendering: auto;
text-align: center;
color: var(--menu_testo);
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow: hidden;
z-index: 10000;
}
#navfooter {
position: relative;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
width: 100%;
bottom: 0px;
/* left: 0;*/
/* background-color: var(--color_grigio_chiaro);*/
text-rendering: auto;
text-align: center;
color: var(--menu_testo);
font-size: 12px;
-webkit-word-wrap: break-word;
-moz-word-wrap: break-word;
-ms-word-wrap: break-word;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
/* allineamento centrato */
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center; /* align horizontal */
justify-content: center; /* align horizontal */
-webkit-align-items: center; /* align vertical */
align-items: center; /* align vertical */
overflow: hidden;
z-index: 10000;
}
.MyScroolBOX {
position: absolute;
top: 50%;
right: 0px;
transform: translate(10px, -50%);
padding-right: 50px;
display: -ms-flexbox;
display: -webkit-flex;
display: none;
justify-content: space-between;
align-items: center;
-webkit-justify-content: space-between;
-webkit-align-items: center;
z-index: 15;
flex-direction: column;
}
.MyScroolBOX_UP,
.MyScroolBOX_DOWN {
position: relative;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
align-items: center;
-webkit-justify-content: space-between;
-webkit-align-items: center;
z-index: 15;
flex-direction: row;
}
.MyScroolBtnTop,
.MyScroolBtnActiveSong,
.MyScroolBtnDown,
.MyScroolBtnPageUP,
.MyScroolBtnPageDown,
.MyScroolBtnItemUP,
.MyScroolBtnItemDown {
position: relative;
z-index: 15;
font-size: 18px;
border: none;
outline: none;
background-color: var(--menu_testo); /* prima rgba(0, 0, 0, 0.2); */
color: white;
cursor: pointer;
padding: 10px;
border-radius: 4px;
width: 36px;
height: 36px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
-webkit-justify-content: center;
-webkit-align-items: center;
text-rendering: auto;
margin: 2px;
}
.MyScroolBtnTop:hover {
background-color: var(--color_orange); /* prima rgba(0, 0, 0, 0.2); prima era var(--color_grigio_scuro5) */
}
.MyScroolBtnActiveSong:hover {
background-color: var(--color_orange); /* prima rgba(0, 0, 0, 0.2); prima era var(--color_grigio_scuro5) */
}
.MyScroolBtnDown:hover {
background-color: var(--color_orange); /* prima rgba(0, 0, 0, 0.2); prima era var(--color_grigio_scuro5) */
}
.MyScroolBtnPageUP:hover {
background-color: var(--color_orange); /* prima rgba(0, 0, 0, 0.2); prima era var(--color_grigio_scuro5) */
}
.MyScroolBtnPageDown:hover {
background-color: var(--color_orange); /* prima rgba(0, 0, 0, 0.2); prima era var(--color_grigio_scuro5) */
}
.MyScroolBtnItemUP:hover {
background-color: var(--color_orange); /* prima rgba(0, 0, 0, 0.2); prima era var(--color_grigio_scuro5) */
}
.MyScroolBtnItemDown:hover {
background-color: var(--color_orange); /* prima rgba(0, 0, 0, 0.2); prima era var(--color_grigio_scuro5) */
}
.Mydropleft {
position: absolute;
display: block;
padding-top: 6px;
padding-right: 18px;
padding-bottom: 6px;
padding-left: 6px;
border-radius: 4px;
background-color: rgba(0, 182, 240, 0.2);
color: white;
font-size: 16px;
border: none;
top: 50%;
right: 10px;
transform: translate(10px, -50%);
margin-right: 0px;
z-index: 15;
}
.MyScrooldropbtn {
position: absolute;
display: block;
background-color: var(--menu_testo);
color: white;
/*padding: 10px;*/
font-size: 16px;
border: none;
border-radius: 4px;
top: 50%;
right: 10px;
transform: translate(10px, -50%);
margin-right: 0px;
z-index: 15;
width: 26px;
height: 36px;
}
/* .Mydropleft:hover #MyScroolBOX {display: flex;} */
.Mydropleft:hover .MyScrooldropbtn {background-color: var(--menu_testo);}
/*********************************************************************************************************************************************************************************/
/* js/scrollbar/scroll/jquery.scrollbar.css */
/*********************************************************************************************************************************************************************************/
/****************************************************************************************** SCROLLBAR BASE CSS */
.scroll-wrapper {
overflow: hidden !important;
padding: 0 !important;
position: relative;
}
.scroll-wrapper > .scroll-content {
border: none !important;
box-sizing: content-box !important;
height: auto;
left: 0px;
margin: 0px;
max-height: none;
max-width: none !important;
overflow: scroll !important;
padding: 0px;
position: relative !important;
top: 0px;
width: auto !important;
}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
height: 0px;
width: 0px;
}
.scroll-wrapper.scroll--rtl {
direction: rtl;
}
.scroll-element {
box-sizing: content-box;
display: none;
}
.scroll-element div {
box-sizing: content-box;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
cursor: default;
}
.scroll-element.scroll-x .scroll-scrollx_visible,
.scroll-element.scroll-y .scroll-scrolly_visible {
display: block;
}
.scroll-textarea {
border: 1px solid var(--color_grigio_chiaro);
border-top-color: var(--color_grigio_medio9);
}
.scroll-textarea > .scroll-content {
overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
border: none !important;
box-sizing: border-box;
height: 100% !important;
margin: 0px;
max-height: none !important;
max-width: none !important;
overflow: scroll !important;
outline: none;
padding: 2px;
position: relative !important;
top: 0px;
width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
height: 0px;
width: 0px;
}
/****************************************************************************************** SIMPLE INNER SCROLLBAR ***************/
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div {
border: none;
margin: 0px;
padding: 0px;
position: absolute;
z-index: 10;
}
.scrollbar-inner > .scroll-element div {
display: block;
height: 100%;
left: 0px;
top: 0px;
width: 100%;
}
.scrollbar-inner > .scroll-element .scroll-x {
bottom: 2px;
height: 8px;
left: 0px;
width: 100%;
}
.scrollbar-inner > .scroll-element .scroll-y {
height: 100%;
right: 2px;
top: 0px;
width: 8px;
}
.scrollbar-inner > .scroll-element .scroll-element_outer {
overflow: hidden;
}
.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
/* bordi arrotondati */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
-ms-filter: "progid:DXImageTransform .Microsoft.Alpha(Opacity=40)";
filter: alpha(opacity=40);
opacity: 0.4;
}
.scrollbar-inner > .scroll-element .scroll-element_track {
background-color: #e0e0e0;
}
.scrollbar-inner > .scroll-element .scroll-bar {
background-color: #c2c2c2;
}
.scrollbar-inner > .scroll-element:hover .scroll-bar {
background-color: #919191;
}
.scrollbar-inner > .scroll-element .scroll-draggable .scroll-bar {
background-color: #919191;
}
/* update scrollbar offset if both scrolls are visible */
.scrollbar-inner
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_track {
left: -12px;
}
.scrollbar-inner
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_track {
top: -12px;
}
.scrollbar-inner
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_size {
left: -12px;
}
.scrollbar-inner
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_size {
top: -12px;
}
/****************************************************************************************** SIMPLE OUTER SCROLLBAR ***************/
.scrollbar-outer > .scroll-element,
.scrollbar-outer > .scroll-element div {
border: none;
margin: 0px;
padding: 0px;
position: absolute;
z-index: 10;
}
.scrollbar-outer > .scroll-element {
background-color: var(--color_white_aliceblue);
}
.scrollbar-outer > .scroll-element div {
display: block;
height: 100%;
left: 0px;
top: 0px;
width: 100%;
}
.scrollbar-outer > .scroll-element .scroll-x {
bottom: 0px;
height: 12px;
left: 0px;
width: 100%;
}
.scrollbar-outer > .scroll-element .scroll-y {
height: 100%;
right: 0px;
top: 0px;
width: 12px;
}
.scrollbar-outer > .scroll-element .scroll-x .scroll-element_outer {
height: 8px;
top: 2px;
}
.scrollbar-outer > .scroll-element .scroll-y .scroll-element_outer {
left: 2px;
width: 8px;
}
.scrollbar-outer > .scroll-element .scroll-element_outer {
overflow: hidden;
}
.scrollbar-outer > .scroll-element .scroll-element_track {
background-color: var(--box_border);
}
.scrollbar-outer > .scroll-element .scroll-element_outer,
.scrollbar-outer > .scroll-element .scroll-element_track,
.scrollbar-outer > .scroll-element .scroll-bar {
/* bordi arrotondati */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-o-border-radius: 8px;
border-radius: 8px;
}
.scrollbar-outer > .scroll-element .scroll-bar {
background-color: #d9d9d9;
}
.scrollbar-outer > .scroll-element .scroll-bar:hover {
background-color: #c2c2c2;
}
.scrollbar-outer > .scroll-element .scroll-draggable .scroll-bar {
background-color: #919191;
}
/* scrollbar height/width & offset from container borders */
.scrollbar-outer > .scroll-content .scroll-scrolly_visible {
left: -12px;
margin-left: 12px;
}
.scrollbar-outer > .scroll-content .scroll-scrollx_visible {
top: -12px;
margin-top: 12px;
}
.scrollbar-outer > .scroll-element .scroll-x .scroll-bar {
min-width: 10px;
}
.scrollbar-outer > .scroll-element .scroll-y .scroll-bar {
min-height: 10px;
}
/* update scrollbar offset if both scrolls are visible */
.scrollbar-outer
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_track {
left: -14px;
}
.scrollbar-outer
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_track {
top: -14px;
}
.scrollbar-outer
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_size {
left: -14px;
}
.scrollbar-outer
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_size {
top: -14px;
}
/****************************************************************************************** SCROLLBAR MAC OS X ***************/
.scrollbar-macosx > .scroll-element,
.scrollbar-macosx > .scroll-element div {
background: none;
border: none;
margin: 0px;
padding: 0px;
position: absolute;
z-index: 10;
}
.scrollbar-macosx > .scroll-element div {
display: block;
height: 100%;
left: 0px;
top: 0px;
width: 100%;
}
.scrollbar-macosx > .scroll-element .scroll-element_track {
display: none;
}
.scrollbar-macosx > .scroll-element .scroll-bar {
background-color: #6c6e71;
display: block;
-ms-filter: "progid:DXImageTransform .Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
/* bordi arrotondati */
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.scrollbar-macosx:hover > .scroll-element .scroll-bar,
.scrollbar-macosx > .scroll-element .scroll-draggable .scroll-bar {
-ms-filter: "progid:DXImageTransform .Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
.scrollbar-macosx > .scroll-element .scroll-x {
bottom: 0px;
height: 0px;
left: 0px;
min-width: 100%;
overflow: visible;
width: 100%;
}
.scrollbar-macosx > .scroll-element .scroll-y {
height: 100%;
min-height: 100%;
right: 0px;
top: 0px;
width: 0px;
}
/****************************************************************************************** scrollbar height/width & offset from container borders */
.scrollbar-macosx > .scroll-element .scroll-x .scroll-bar {
height: 7px;
min-width: 10px;
top: -9px;
}
.scrollbar-macosx > .scroll-element .scroll-y .scroll-bar {
left: -9px;
min-height: 10px;
width: 7px;
}
.scrollbar-macosx > .scroll-element .scroll-x .scroll-element_outer {
left: 2px;
}
.scrollbar-macosx > .scroll-element .scroll-x .scroll-element_size {
left: -4px;
}
.scrollbar-macosx > .scroll-element .scroll-y .scroll-element_outer {
top: 2px;
}
.scrollbar-macosx > .scroll-element .scroll-y .scroll-element_size {
top: -4px;
}
/* update scrollbar offset if both scrolls are visible */
.scrollbar-macosx
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_size {
left: -11px;
}
.scrollbar-macosx
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_size {
top: -11px;
}
/****************************************************************************************** SCROLLBAR LIGHT ***************/
.scrollbar-light > .scroll-element,
.scrollbar-light > .scroll-element div {
border: none;
margin: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
z-index: 10;
}
.scrollbar-light > .scroll-element {
background-color: var(--color_white_aliceblue);
}
.scrollbar-light > .scroll-element div {
display: block;
height: 100%;
left: 0px;
top: 0px;
width: 100%;
}
.scrollbar-light > .scroll-element .scroll-element_outer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.scrollbar-light > .scroll-element .scroll-element_size {
background: #dbdbdb;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZGJkYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOGU4ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
background: -moz-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, #dbdbdb),
color-stop(100%, #e8e8e8)
);
background: -webkit-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
background: -o-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
background: -ms-linear-gradient(left, #dbdbdb 0%, #e8e8e8 100%);
background: linear-gradient(to right, #dbdbdb 0%, #e8e8e8 100%);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.scrollbar-light > .scroll-element .scroll-x {
bottom: 0px;
height: 17px;
left: 0px;
min-width: 100%;
width: 100%;
}
.scrollbar-light > .scroll-element .scroll-y {
height: 100%;
min-height: 100%;
right: 0px;
top: 0px;
width: 17px;
}
.scrollbar-light > .scroll-element .scroll-bar {
background: #fefefe;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmVmZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNWY1ZjUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+");
background: -moz-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, #fefefe),
color-stop(100%, #f5f5f5)
);
background: -webkit-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
background: -o-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
background: -ms-linear-gradient(left, #fefefe 0%, #f5f5f5 100%);
background: linear-gradient(to right, #fefefe 0%, #f5f5f5 100%);
border: 1px solid #dbdbdb;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
/****************************************************************************************** scrollbar height/width & offset from container borders */
.scrollbar-light > .scroll-content .scroll-scrolly_visible {
left: -17px;
margin-left: 17px;
}
.scrollbar-light > .scroll-content .scroll-scrollx_visible {
top: -17px;
margin-top: 17px;
}
.scrollbar-light > .scroll-element .scroll-x .scroll-bar {
height: 10px;
min-width: 10px;
top: 0px;
}
.scrollbar-light > .scroll-element .scroll-y .scroll-bar {
left: 0px;
min-height: 10px;
width: 10px;
}
.scrollbar-light > .scroll-element .scroll-x .scroll-element_outer {
height: 12px;
left: 2px;
top: 2px;
}
.scrollbar-light > .scroll-element .scroll-x .scroll-element_size {
left: -4px;
}
.scrollbar-light > .scroll-element .scroll-y .scroll-element_outer {
left: 2px;
top: 2px;
width: 12px;
}
.scrollbar-light > .scroll-element .scroll-y .scroll-element_size {
top: -4px;
}
/* update scrollbar offset if both scrolls are visible */
.scrollbar-light
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_size {
left: -19px;
}
.scrollbar-light
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_size {
top: -19px;
}
.scrollbar-light
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_track {
left: -19px;
}
.scrollbar-light
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_track {
top: -19px;
}
/****************************************************************************************** SCROLLBAR RAIL ***************/
.scrollbar-rail > .scroll-element,
.scrollbar-rail > .scroll-element div {
border: none;
margin: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
z-index: 10;
}
.scrollbar-rail > .scroll-element {
background-color: var(--color_white_aliceblue);
}
.scrollbar-rail > .scroll-element div {
display: block;
height: 100%;
left: 0px;
top: 0px;
width: 100%;
}
.scrollbar-rail > .scroll-element .scroll-element_size {
background-color: var(--color_grigio_medio9);
background-color: rgba(0, 0, 0, 0.3);
}
.scrollbar-rail
> .scroll-element
.scroll-element_outer:hover
.scroll-element_size {
background-color: var(--color_grigio_scuro6);
background-color: rgba(0, 0, 0, 0.5);
}
.scrollbar-rail > .scroll-element .scroll-x {
bottom: 0px;
height: 12px;
left: 0px;
min-width: 100%;
padding: 3px 0 2px;
width: 100%;
}
.scrollbar-rail > .scroll-element .scroll-y {
height: 100%;
min-height: 100%;
padding: 0 2px 0 3px;
right: 0px;
top: 0px;
width: 12px;
}
.scrollbar-rail > .scroll-element .scroll-bar {
background-color: #d0b9a0;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.scrollbar-rail > .scroll-element .scroll-element_outer:hover .scroll-bar {
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
/****************************************************************************************** scrollbar height/width & offset from container borders */
.scrollbar-rail > .scroll-content .scroll-scrolly_visible {
left: -17px;
margin-left: 17px;
}
.scrollbar-rail > .scroll-content .scroll-scrollx_visible {
margin-top: 17px;
top: -17px;
}
.scrollbar-rail > .scroll-element .scroll-x .scroll-bar {
height: 10px;
min-width: 10px;
top: 1px;
}
.scrollbar-rail > .scroll-element .scroll-y .scroll-bar {
left: 1px;
min-height: 10px;
width: 10px;
}
.scrollbar-rail > .scroll-element .scroll-x .scroll-element_outer {
height: 15px;
left: 5px;
}
.scrollbar-rail > .scroll-element .scroll-x .scroll-element_size {
height: 2px;
left: -10px;
top: 5px;
}
.scrollbar-rail > .scroll-element .scroll-y .scroll-element_outer {
top: 5px;
width: 15px;
}
.scrollbar-rail > .scroll-element .scroll-y .scroll-element_size {
left: 5px;
top: -10px;
width: 2px;
}
/* update scrollbar offset if both scrolls are visible */
.scrollbar-rail
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_size {
left: -25px;
}
.scrollbar-rail
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_size {
top: -25px;
}
.scrollbar-rail
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_track {
left: -25px;
}
.scrollbar-rail
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_track {
top: -25px;
}
/****************************************************************************************** SCROLLBAR DYNAMIC ***************/
.scrollbar-dynamic > .scroll-element,
.scrollbar-dynamic > .scroll-element div {
background: none;
border: none;
margin: 0px;
padding: 0px;
position: absolute;
z-index: 10;
}
.scrollbar-dynamic > .scroll-element div {
display: block;
height: 100%;
left: 0px;
top: 0px;
width: 100%;
}
.scrollbar-dynamic > .scroll-element .scroll-x {
bottom: 2px;
height: 7px;
left: 0px;
min-width: 100%;
width: 100%;
}
.scrollbar-dynamic > .scroll-element .scroll-y {
height: 100%;
min-height: 100%;
right: 2px;
top: 0px;
width: 7px;
}
.scrollbar-dynamic > .scroll-element .scroll-element_outer {
opacity: 0.3;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.scrollbar-dynamic > .scroll-element .scroll-element_size {
background-color: var(--color_grigio_chiaro);
opacity: 0;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.scrollbar-dynamic > .scroll-element .scroll-bar {
background-color: #6c6e71;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
/****************************************************************************************** scrollbar height/width & offset from container borders */
.scrollbar-dynamic > .scroll-element .scroll-x .scroll-bar {
bottom: 0px;
height: 7px;
min-width: 24px;
top: auto;
}
.scrollbar-dynamic > .scroll-element .scroll-y .scroll-bar {
left: auto;
min-height: 24px;
right: 0px;
width: 7px;
}
.scrollbar-dynamic > .scroll-element .scroll-x .scroll-element_outer {
bottom: 0px;
top: auto;
left: 2px;
-webkit-transition: height 0.2s;
-moz-transition: height 0.2s;
-o-transition: height 0.2s;
-ms-transition: height 0.2s;
transition: height 0.2s;
}
.scrollbar-dynamic > .scroll-element .scroll-y .scroll-element_outer {
left: auto;
right: 0px;
top: 2px;
-webkit-transition: width 0.2s;
-moz-transition: width 0.2s;
-o-transition: width 0.2s;
-ms-transition: width 0.2s;
transition: width 0.2s;
}
.scrollbar-dynamic > .scroll-element .scroll-x .scroll-element_size {
left: -4px;
}
.scrollbar-dynamic > .scroll-element .scroll-y .scroll-element_size {
top: -4px;
}
/* update scrollbar offset if both scrolls are visible */
.scrollbar-dynamic
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_size {
left: -11px;
}
.scrollbar-dynamic
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_size {
top: -11px;
}
/****************************************************************************************** hover & drag */
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element .scroll-draggable .scroll-element_outer {
overflow: hidden;
-ms-filter: "progid:DXImageTransform .Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
}
.scrollbar-dynamic
> .scroll-element:hover
.scroll-element_outer
.scroll-element_size,
.scrollbar-dynamic
> .scroll-element
.scroll-draggable
.scroll-element_outer
.scroll-element_size {
opacity: 1;
}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
.scrollbar-dynamic
> .scroll-element
.scroll-draggable
.scroll-element_outer
.scroll-bar {
height: 100%;
width: 100%;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.scrollbar-dynamic > .scroll-element .scroll-x:hover .scroll-element_outer,
.scrollbar-dynamic
> .scroll-element
.scroll-x
.scroll-draggable
.scroll-element_outer {
height: 20px;
min-height: 7px;
}
.scrollbar-dynamic > .scroll-element .scroll-y:hover .scroll-element_outer,
.scrollbar-dynamic
> .scroll-element
.scroll-y
.scroll-draggable
.scroll-element_outer {
min-width: 7px;
width: 20px;
}
/****************************************************************************************** SCROLLBAR GOOGLE CHROME ***************/
.scrollbar-chrome > .scroll-element,
.scrollbar-chrome > .scroll-element div {
border: none;
margin: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
z-index: 10;
}
.scrollbar-chrome > .scroll-element {
background-color: var(--color_white_aliceblue);
}
.scrollbar-chrome > .scroll-element div {
display: block;
height: 100%;
left: 0px;
top: 0px;
width: 100%;
}
.scrollbar-chrome > .scroll-element .scroll-element_track {
background: #f1f1f1;
border: 1px solid #dbdbdb;
}
.scrollbar-chrome > .scroll-element .scroll-x {
bottom: 0px;
height: 16px;
left: 0px;
min-width: 100%;
width: 100%;
}
.scrollbar-chrome > .scroll-element .scroll-y {
height: 100%;
min-height: 100%;
right: 0px;
top: 0px;
width: 16px;
}
.scrollbar-chrome > .scroll-element .scroll-bar {
background-color: #d9d9d9;
border: 1px solid #bdbdbd;
cursor: default;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.scrollbar-chrome > .scroll-element .scroll-bar:hover {
background-color: #c2c2c2;
border-color: #a9a9a9;
}
.scrollbar-chrome > .scroll-element .scroll-draggable .scroll-bar {
background-color: #919191;
border-color: #7e7e7e;
}
/****************************************************************************************** scrollbar height/width & offset from container borders */
.scrollbar-chrome > .scroll-content .scroll-scrolly_visible {
left: -16px;
margin-left: 16px;
}
.scrollbar-chrome > .scroll-content .scroll-scrollx_visible {
top: -16px;
margin-top: 16px;
}
.scrollbar-chrome > .scroll-element .scroll-x .scroll-bar {
height: 8px;
min-width: 10px;
top: 3px;
}
.scrollbar-chrome > .scroll-element .scroll-y .scroll-bar {
left: 3px;
min-height: 10px;
width: 8px;
}
.scrollbar-chrome > .scroll-element .scroll-x .scroll-element_outer {
border-left: 1px solid #dbdbdb;
}
.scrollbar-chrome > .scroll-element .scroll-x .scroll-element_track {
height: 14px;
left: -3px;
}
.scrollbar-chrome > .scroll-element .scroll-x .scroll-element_size {
height: 14px;
left: -4px;
}
.scrollbar-chrome > .scroll-element .scroll-y .scroll-element_outer {
border-top: 1px solid #dbdbdb;
}
.scrollbar-chrome > .scroll-element .scroll-y .scroll-element_track {
top: -3px;
width: 14px;
}
.scrollbar-chrome > .scroll-element .scroll-y .scroll-element_size {
top: -4px;
width: 14px;
}
/* update scrollbar offset if both scrolls are visible */
.scrollbar-chrome
> .scroll-element
.scroll-x
.scroll-scrolly_visible
.scroll-element_size {
left: -19px;
}
.scrollbar-chrome
> .scroll-element
.scroll-y
.scroll-scrollx_visible
.scroll-element_size {
top: -19px;
}
.scrollbar-chrome
> .scroll-element.scroll-x
.scroll-scrolly_visible
.scroll-element_track {
left: -19px;
}
.scrollbar-chrome
> .scroll-element
.scroll-y.scroll-scrollx_visible
.scroll-element_track {
top: -19px;
}
/*********************************************************************************************************************************************************************************/
/* */
/*********************************************************************************************************************************************************************************/