SA Settings Style Improvement.css

/* Make the logo bigger and the margin smaller */

.logo {
    margin-inline-end: 0.75rem;
    transform: scale(1.75);
}

/* No need hover effect on dropdown icons */

.addon-group > span > img:hover {
    background: none;
}

.btn-dropdown:hover {
    background: none;
}

/* A friendly padding on the addon names */

.btn-dropdown {
    padding: 0 7px 0 5px;
}

.addon-name {
    margin-inline-start: 0;
}

/* Solve buggy addon names */

.clickeable-area { /* [sic] */
    flex-shrink: 0;
}

/* Separators should cover the entire length of the addon boxes. */

.addon-group > span {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

/* Make the padding more compact the separator names */

.addon-group > span > img {
    margin-inline-end: 0;
}

/* A separator already separates the groups. No need for another padding. 
   Need more separation? Best to edit the separator thickness. */

.addon-group {
    margin-bottom: 20px;
}

/* Turn off animation on category openings for prefers-reduced-motion
   Also, this is the only instance in the WHOLE extension (excluding addons) that is animated. Why? */

@media (prefers-reduced-motion) {
    .category {
        transition: none;
    }
}