popup.css

/* SimpleCookie, a minimalist yet efficient cookie manager for Firefox */
/* Made with ❤ by micka from Paris */


/* Body style */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 13.5px;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
}

/* Light and dark theme settings */
:root {
    --background-color: #FFF;
    --text-color: #000;
    --highlight-color: #DFDFE4;
    --icon-color-light: #000;
    --icon-color-dark: #FFF;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #42414C;
        --text-color: #FCFCFF;
        --highlight-color: #5F5E68;
    }
}

/* Cookie container style */
#cookies-container {
    max-height: 500px;
    max-width: 100%;
    overflow-y: auto;
}

/* Cookie list style */
#cookies-container div {
    text-align: left;
    padding: 0.75px 5px 3.25px 5px;
    color: var(--text-color);
    white-space: nowrap;
}

#cookies-container div:hover {
    background-color: var(--highlight-color);
    cursor: pointer;
}

/* Favorite icon style */
.star-icon {
    font-size: 12px;
    margin-right: 3px;
    margin-left: -1px;
}

/* Dock icon colors based on theme */
@media (prefers-color-scheme: light) {
    #icon1, #icon2, #icon3, #icon4 {
        color: var(--icon-color-light);
    }
}

@media (prefers-color-scheme: dark) {
    #icon1, #icon2, #icon3, #icon4 {
        color: var(--icon-color-dark);
    }
}

/* Insights icon style */
.ghost-icon,
.container-icon,
.partition-icon {
    font-size: 12px;
    opacity: 0.8;
    margin-right: 2px;
    margin-left: 2px;
}

.active-tab-icon {
    font-size: 12px;
    opacity: 1;
    color: #F7CA18;
}

/* Dock style */
#dock {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 5px 0px;
    width: 100%; 
    position: sticky;
}

#dock i {
    margin: 0px 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Default opacity for icons 1, 2, 3 and 4 */
#icon1, #icon2, #icon3, #icon4 {
    opacity: 0.1;
}

/* Hover effects for icons 1, 2 and 3 */
#icon1:hover,
#icon2:hover,
#icon3:hover,
#icon5:hover {
    opacity: 1;
    color: #FE0179;
    transform: scale(1.2);
}

/* Icon 4 special hover effect */
#icon4:hover {
    opacity: 1;
    color: black;
    transform: scale(1.2);
}

/* Dark mode hover color for icon 4 */
@media (prefers-color-scheme: dark) {
    #icon4:hover {
        color: white;
    }
}

/* Icon 5 special style */
#icon5 {
    display: inline-flex;
    color: #FE0179;
    opacity: 1;
}

/* Vertical separator style */
.separator {
    width: 1px; 
    background-color: var(--separator-color);
    height: 15px; 
    margin: 0 7px;
}

/* Light and dark theme settings for separator */
:root {
    --separator-color: #DFDFE4;
}

@media (prefers-color-scheme: dark) {
    :root {
        --separator-color: #5F5E68;
    }
}

/* Cookie table style */
.cookie-table {
    border-collapse: collapse;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    table-layout: fixed;
    width: 100%;
}

.header-cell {
    padding: 4px;
    border: none;
    text-align: center;
    background-color: var(--header-background-color, #f2f2f2);
    color: var(--header-color, black);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.cell {
    padding: 4px;
    border: none;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dark mode support for the table */
@media (prefers-color-scheme: dark) {
    .cookie-table {
        color: white;
    }
    .header-cell {
        background-color: #333;
        color: white;
    }
}

/* Confirmation dialog box style */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: none;
    margin: auto;
    padding: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Confirmation button style */
.icon-button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 26px;
    margin: 2px;
}

#confirm-yes:hover i {
    color: #04A65D;
}

#confirm-no:hover i {
    color: #FE0179;
}