settings.css

@media (prefers-color-scheme: dark) {
     body {
         background-color: dimgrey;
    }
}
@media (prefers-color-scheme: light) {
     body {
         background-color: whitesmoke;
    }
}
 body {
     width: 300px;
     font-family:verdana;
     display: flex;
     flex-direction: column;
     padding: 20px;
}
 a:link,a:active,a:visited {
     color: inherit;
}
/* Grid */
 .grid-wrapper {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 2fr));
     gap: 10px;
}
 .grid-reset {
     grid-column: 1/3;
     grid-row: 1;
}
 .grid-switch {
     grid-column: 3/5;
     grid-row: 1;
}
 .grid-verified {
     grid-column: 1/3;
     grid-row: 2/7;
}
 .grid-non-verified {
     grid-column: 3/5;
     grid-row: 2/7;
}
 .grid-verified-rv {
     grid-column: 1/3;
     grid-row: 7;
}
 .grid-non-verified-rv {
     grid-column: 3/5;
     grid-row: 7;
}
/* Toggle status */
 #ext-status {
     background-color: indianred;
}
 #ext-status.ext-enabled {
     background-color: darkseagreen;
}
 #ext-status:hover {
     background-color: darkgrey;
}
 #ext-status:active {
     background-color: lightgreen;
}
 #ext-status.ext-enabled:active {
     background-color: orangered;
}
/* Buttons and options */
 .btn {
     padding: 10px;
     border-radius: 20px;
     background-color: cornflowerblue;
     cursor: pointer;
     display: flex;
     align-content: center;
     justify-content: center;
}
 .btn:hover {
     background-color: darkgrey;
}
 .btn:active {
     background-color: lightgreen;
}
 .opt {
     display: flex;
     flex-direction: column;
     align-self: flex-start;
}
/* Replacement text */
 .repl {
     width: 0px;
     opacity:0;
     transition: width 1s ease 0s, opacity 1s step-end;
     pointer-events:none;
     border-radius: 10px;
     border-width: 1px;
     padding: 4px;
}
 .repl.enabled {
     opacity:1;
     width: 100px;
     transition: width 1s ease 0s, opacity 1s step-start;
     pointer-events:all;
}