spotizerr-dev/static/css/main/icons.css

/* ICON STYLES */
.settings-icon img,
#queueIcon img {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    filter: invert(1);
    transition: opacity 0.3s;
}

.settings-icon:hover img,
#queueIcon:hover img {
    opacity: 0.8;
}

#queueIcon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

/* Style for the skull icon in the Cancel all button */
.skull-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    filter: brightness(0) invert(1); /* Makes icon white */
    transition: transform 0.3s ease;
}

#cancelAllBtn:hover .skull-icon {
    transform: rotate(-10deg) scale(1.2);
    animation: skullShake 0.5s infinite alternate;
}

@keyframes skullShake {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}

/* Style for the X that appears when the queue is visible */
.queue-x {
    font-size: 28px;
    font-weight: bold;
    color: white;
    line-height: 24px;
    display: inline-block;
    transform: translateY(-2px);
}

/* Queue icon with red tint when X is active */
.queue-icon-active {
    background-color: #d13838 !important; /* Red background for active state */
    transition: background-color 0.3s ease;
}

.queue-icon-active:hover {
    background-color: #e04c4c !important; /* Lighter red on hover */
}

.download-icon,
.type-icon,
.toggle-chevron {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 6px;
}

.toggle-chevron {
    transition: transform 0.2s ease;
}

.option-btn .type-icon {
    width: 18px;
    height: 18px;
    margin-right: 0.3rem;
}

/* Container for Title and Buttons */
.title-and-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 1rem; /* Extra right padding so buttons don't touch the edge */
}

/* Container for the buttons next to the title */
.title-buttons {
    display: flex;
    align-items: center;
}

/* Small Download Button Styles */
.download-btn-small {
    background-color: #1db954;      /* White background */
    border: none;
    border-radius: 50%;             /* Circular shape */
    padding: 6px;                   /* Adjust padding for desired size */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-left: 8px;               /* Space between adjacent buttons */
}

.download-btn-small img {
    width: 20px;                    /* Slightly bigger icon */
    height: 20px;
    filter: brightness(0) invert(1); /* Makes the icon white */
}

.download-btn-small:hover {
    background-color: #1db954b4;      /* Light gray on hover */
    transform: translateY(-1px);
}

/* View Button Styles (unchanged) */
.view-btn {
    background-color: #1db954;
    border: none;
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-left: 8px;
}

.view-btn img {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}

.view-btn:hover {
    background-color: #1db954b0;
    transform: translateY(-1px);
}

/* Mobile Compatibility Tweaks */
@media (max-width: 600px) {
    .view-btn,
    .download-btn-small {
        padding: 6px 10px;
        font-size: 13px;
        margin: 4px;
    }
}


/* Mobile compatibility tweaks */
@media (max-width: 600px) {
    .view-btn {
        padding: 6px 10px;   /* Slightly larger padding on mobile for easier tap targets */
        font-size: 13px;     /* Ensure readability on smaller screens */
        margin: 4px;         /* Reduce margins to better fit mobile layouts */
    }
}

/* Positioning for floating action buttons */
/* Base .floating-icon style is now in base.css */

/* Left-aligned buttons (Home, Settings, Back, History) */
.home-btn, .settings-icon, .back-button, .history-nav-btn {
    left: 20px;
}

.settings-icon { /* Covers config, main */
    bottom: 20px;
}

.home-btn { /* Covers album, artist, playlist, track, watch, history */
    bottom: 20px;
}

.back-button { /* Specific to config page */
    bottom: 20px; 
}

/* New History button specific positioning - above other left buttons */
.history-nav-btn {
    bottom: 80px; /* Positioned 60px above the buttons at 20px (48px button height + 12px margin) */
}


/* Right-aligned buttons (Queue, Watch) */
.queue-icon, .watch-nav-btn {
    right: 20px;
    z-index: 1002; /* Ensure these are above the sidebar (z-index: 1001) and other FABs (z-index: 1000) */
}

.queue-icon {
    bottom: 20px;
}

/* Watch button specific positioning - above Queue */
.watch-nav-btn {
    bottom: 80px; /* Positioned 60px above the queue button (48px button height + 12px margin) */
}