a.couleurs-player-open,
button.couleurs-player-open {
cursor: pointer;
}
button.couleurs-player-open {
appearance: none;
background: transparent;
border: 0;
color: inherit;
font: inherit;
padding: 0;
}
.couleurs-player {
--couleurs-station-color: #f4c542;
--couleurs-station-contrast: #17140d;
--couleurs-station-rgb: 244, 197, 66;
bottom: 0;
box-sizing: border-box;
color: #ffffff;
font-family: inherit;
left: 0;
position: fixed;
right: 0;
transform: translateY(110%);
transition: transform 190ms ease;
z-index: 99999;
}
.couleurs-player *,
.couleurs-player *::before,
.couleurs-player *::after {
box-sizing: border-box;
}
.couleurs-player.is-open {
transform: translateY(0);
}
.couleurs-player-shell {
align-items: center;
background:
linear-gradient(135deg, rgba(var(--couleurs-station-rgb), 0.18) 0%, rgba(var(--couleurs-station-rgb), 0.05) 38%, transparent 72%),
linear-gradient(135deg, #15181d 0%, #20242b 58%, #111316 100%);
border-top: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 -18px 38px rgba(0, 0, 0, 0.32);
display: grid;
gap: 16px;
grid-template-columns: 68px minmax(0, 1fr) minmax(220px, auto);
min-height: 104px;
padding: 14px clamp(14px, 4vw, 36px);
}
.couleurs-player-cover,
.couleurs-player-station-cover {
align-items: center;
aspect-ratio: 1;
background: #2b3038;
display: flex;
justify-content: center;
overflow: hidden;
}
.couleurs-player-cover {
border: 1px solid rgba(var(--couleurs-station-rgb), 0.4);
border-radius: 8px;
box-shadow: 0 0 0 3px rgba(var(--couleurs-station-rgb), 0.11);
height: 68px;
width: 68px;
}
.couleurs-player-cover img,
.couleurs-player-station-cover img {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.couleurs-player-cover span,
.couleurs-player-station-cover span {
color: #ffffff;
font-size: 18px;
font-weight: 800;
letter-spacing: 0;
}
.couleurs-player-meta {
display: grid;
gap: 7px;
min-width: 0;
}
.couleurs-player-topline {
align-items: center;
display: flex;
gap: 8px;
min-width: 0;
}
.couleurs-player-live-dot {
background: var(--couleurs-station-color);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(var(--couleurs-station-rgb), 0.18);
display: inline-block;
flex: 0 0 auto;
height: 8px;
width: 8px;
}
.couleurs-player-radio-name {
color: #ffffff;
font-size: 15px;
font-weight: 800;
letter-spacing: 0;
line-height: 1.2;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.couleurs-player-title {
color: rgba(255, 255, 255, 0.76);
font-size: 14px;
line-height: 1.35;
max-width: 100%;
min-height: 19px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.couleurs-player-stations {
display: flex;
gap: 8px;
max-width: 100%;
overflow-x: auto;
padding: 2px 2px 4px;
scrollbar-width: thin;
}
.couleurs-player-station {
--station-color: var(--couleurs-station-color);
--station-contrast: var(--couleurs-station-contrast);
--station-rgb: var(--couleurs-station-rgb);
align-items: center;
appearance: none;
background: rgba(var(--station-rgb), 0.08);
border: 1px solid rgba(var(--station-rgb), 0.26);
border-radius: 8px;
box-shadow: inset 3px 0 0 rgba(var(--station-rgb), 0.86);
color: #ffffff;
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
gap: 9px;
max-width: 220px;
min-height: 46px;
min-width: 140px;
padding: 6px 10px 6px 6px;
text-align: left;
transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease, transform 150ms ease;
}
.couleurs-player-station:hover,
.couleurs-player-station:focus {
background: rgba(var(--station-rgb), 0.17);
border-color: rgba(var(--station-rgb), 0.48);
outline: 0;
}
.couleurs-player-station.is-active {
background: var(--station-color);
border-color: var(--station-color);
box-shadow: 0 8px 18px rgba(var(--station-rgb), 0.2);
color: var(--station-contrast);
}
.couleurs-player-station-cover {
border-radius: 6px;
flex: 0 0 32px;
height: 32px;
width: 32px;
}
.couleurs-player-station.is-active .couleurs-player-station-cover {
background: rgba(0, 0, 0, 0.14);
}
.couleurs-player-station-cover span {
font-size: 12px;
}
.couleurs-player-station-text {
display: grid;
gap: 1px;
min-width: 0;
}
.couleurs-player-station-text span {
font-size: 13px;
font-weight: 800;
line-height: 1.15;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.couleurs-player-station-text small {
color: inherit;
font-size: 11px;
line-height: 1.1;
opacity: 0.72;
}
.couleurs-player-controls {
align-items: center;
display: flex;
gap: 10px;
justify-content: end;
}
.couleurs-player-control,
.couleurs-player-close,
.couleurs-player-message-toggle,
.couleurs-player-message-form button {
align-items: center;
appearance: none;
border: 0;
cursor: pointer;
display: inline-flex;
font: inherit;
justify-content: center;
}
.couleurs-player-control {
background: #ffffff;
border-radius: 999px;
color: #121417;
font-size: 14px;
font-weight: 900;
height: 44px;
letter-spacing: 0;
min-width: 78px;
padding: 0 18px;
}
.couleurs-player-control.is-playing {
background: var(--couleurs-station-color);
color: var(--couleurs-station-contrast);
}
.couleurs-player-message-toggle {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
color: #ffffff;
font-size: 13px;
font-weight: 800;
height: 38px;
letter-spacing: 0;
padding: 0 14px;
white-space: nowrap;
}
.couleurs-player-message-toggle:hover,
.couleurs-player-message-toggle:focus,
.couleurs-player-message-toggle.is-active {
background: rgba(var(--couleurs-station-rgb), 0.18);
border-color: rgba(var(--couleurs-station-rgb), 0.62);
outline: 0;
}
.couleurs-player-close {
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: #ffffff;
font-size: 24px;
height: 38px;
line-height: 1;
width: 38px;
}
.couleurs-player-close:hover,
.couleurs-player-close:focus {
background: rgba(255, 255, 255, 0.18);
outline: 0;
}
.couleurs-player-volume {
--volume-level: 80%;
align-items: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
display: flex;
flex: 0 0 156px;
height: 38px;
padding: 0 7px;
width: 156px;
}
.couleurs-player-volume input {
-webkit-appearance: none;
accent-color: var(--couleurs-station-color);
appearance: none;
background: transparent;
cursor: pointer;
display: block;
margin: 0;
width: 100%;
}
.couleurs-player-volume input::-webkit-slider-runnable-track {
background: linear-gradient(to right, var(--couleurs-station-color) 0%, var(--couleurs-station-color) var(--volume-level), rgba(255, 255, 255, 0.24) var(--volume-level), rgba(255, 255, 255, 0.24) 100%);
border-radius: 999px;
height: 4px;
}
.couleurs-player-volume input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: var(--couleurs-station-color);
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
height: 16px;
margin-top: -6px;
width: 16px;
}
.couleurs-player-volume input::-moz-range-track {
background: rgba(255, 255, 255, 0.24);
border-radius: 999px;
height: 4px;
}
.couleurs-player-volume input::-moz-range-progress {
background: var(--couleurs-station-color);
border-radius: 999px;
height: 4px;
}
.couleurs-player-volume input::-moz-range-thumb {
background: var(--couleurs-station-color);
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
height: 14px;
width: 14px;
}
.couleurs-player-message-panel {
border-top: 1px solid rgba(255, 255, 255, 0.12);
grid-column: 1 / -1;
overflow: visible;
padding-top: 2px;
}
.couleurs-player-message-form {
align-items: end;
display: grid;
gap: 10px;
grid-template-columns: minmax(130px, 190px) minmax(220px, 1fr) auto;
}
.couleurs-player-message-form label {
display: grid;
gap: 5px;
margin: 0;
min-width: 0;
}
.couleurs-player-message-form label span {
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
font-weight: 700;
line-height: 1.2;
}
.couleurs-player-message-form input,
.couleurs-player-message-form textarea {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 8px;
color: #ffffff;
font: inherit;
font-size: 14px;
min-height: 40px;
padding: 9px 10px;
width: 100%;
}
.couleurs-player-message-form input:focus,
.couleurs-player-message-form textarea:focus {
border-color: rgba(244, 197, 66, 0.75);
outline: 0;
}
.couleurs-player-message-form textarea {
height: 42px;
line-height: 1.35;
min-height: 42px;
overflow: hidden;
resize: none;
}
.couleurs-player-message-actions {
align-items: center;
display: flex;
gap: 8px;
justify-content: flex-end;
}
.couleurs-player-message-actions small {
color: rgba(255, 255, 255, 0.68);
font-size: 12px;
white-space: nowrap;
}
.couleurs-player-message-form button {
background: #f4c542;
border-radius: 999px;
color: #17140d;
font-size: 13px;
font-weight: 900;
height: 40px;
padding: 0 16px;
}
.couleurs-player-message-form button:disabled {
cursor: wait;
opacity: 0.68;
}
.couleurs-player-message-status {
align-items: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 8px;
color: rgba(255, 255, 255, 0.86);
display: flex;
font-size: 13px;
font-weight: 800;
grid-column: 1 / -1;
line-height: 1.25;
min-height: 0;
padding: 9px 11px;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.couleurs-player-message-status:empty {
display: none;
}
.couleurs-player-message-status.is-info {
background: rgba(244, 197, 66, 0.14);
border-color: rgba(244, 197, 66, 0.34);
color: #ffe28a;
}
.couleurs-player-message-status.is-success {
background: rgba(34, 197, 94, 0.14);
border-color: rgba(134, 239, 172, 0.38);
color: #bbf7d0;
}
.couleurs-player-message-status.is-error {
background: rgba(239, 68, 68, 0.14);
border-color: rgba(252, 165, 165, 0.4);
color: #fecaca;
}
.couleurs-player-honey {
display: none !important;
}
.couleurs-player .screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
@media (max-width: 820px) {
.couleurs-player-shell {
gap: 12px;
grid-template-columns: 56px minmax(0, 1fr);
min-height: 154px;
padding: 12px;
}
.couleurs-player-cover {
height: 56px;
width: 56px;
}
.couleurs-player-controls {
flex-wrap: wrap;
grid-column: 1 / -1;
justify-content: flex-start;
width: 100%;
}
.couleurs-player-message-toggle {
flex: 1 1 190px;
}
.couleurs-player-close {
margin-left: auto;
}
.couleurs-player-volume {
flex: 1 1 156px;
max-width: none;
min-width: 138px;
width: auto;
}
.couleurs-player-title {
white-space: normal;
}
.couleurs-player-stations {
grid-column: 1 / -1;
}
.couleurs-player-message-form {
align-items: stretch;
grid-template-columns: 1fr;
}
.couleurs-player-message-actions {
justify-content: space-between;
}
}
@media (max-width: 480px) {
.couleurs-player-shell {
min-height: 168px;
}
.couleurs-player-station {
min-width: 128px;
}
.couleurs-player-control {
min-width: 70px;
padding: 0 14px;
}
.couleurs-player-message-toggle {
font-size: 12px;
padding: 0 10px;
}
}.meks-ap-timestamp{margin-bottom:25px;display:block;clear:both}.meks-ap-timestamp a{margin-right:10px}