groupList.css

html {
    /* Max extension popup size is now 800x600px */
    --popup-width: 320px;
    --list-columns: 1;

    --popup-width-2col: 600px;
    --list-columns-2col: 2;
    --popup-width-3col: 800px;
    --list-columns-3col: 3;

    width: var(--popup-width); 
    height: auto;
    min-height: 200px;
}

body {
    --back-color: #f0f0ea;
    --text-color: #0f0f0f;
    --subdued-text-color: #686868;
    
    font-size: 100%;
    margin: 0;
    padding: 0.25em 0.5em;
    
    color: var(--text-color);
    background-color: var(--back-color);
}

div#header {
    display: flex;
    justify-content: space-between;
}

summary {
    font-size: 90%;
    color: var(--subdued-text-color);
}

ul#tabGroupsList {
    list-style-type: none;
    columns: var(--list-columns);
    column-gap: 0.5em;
    padding-left: 0px;
    margin: 0.5rem 0;
}

#tabGroupsList li {                
    --group-color: silver;      
    --left-border-def: solid 0.4em color-mix(in srgb, var(--group-color) 70%, var(--back-color));
    cursor: pointer;        
    padding: 0.2em;
    padding-left: 0.3em;
    background-color: color-mix(in srgb, var(--group-color) 10%, var(--back-color));
    border-radius: 6px;
    border: solid 1px color-mix(in srgb, var(--group-color) 20%, var(--back-color));    
    border-left: var(--left-border-def);
}

#tabGroupsList li span.title {                
    color: var(--text-color);         
}

#tabGroupsList li span.detail {                
    margin-left: 0.3em;
    font-size: 75%;
    color: gray;
}

#tabGroupsList li span.title.no-name {           
    color: var(--subdued-text-color);     
}

#tabGroupsList li:hover { 
    background-color: color-mix(in srgb, var(--group-color) 15%, var(--back-color));
    border-color: color-mix(in srgb, var(--group-color) 40%, var(--back-color));     
    border-left: var(--left-border-def);
}               

#tabGroupsList li:not(:last-child) {
    margin-bottom: 0.3em;
}

span#info-btn:before {
    content: "\2139";
    font-family: serif;
    display: inline-block;
    text-align: center;
    cursor: pointer;    
    color: white;
    background-color: cornflowerblue;
    border-radius: 50%;
    width: 1em;
    height: 1em;
}

dialog {    
    flex-direction: column;
    align-items: center;
    padding: 0.6em 3em;
    background-color:ivory;
    border: solid 2px steelblue;
    border-radius: 0.5em;      
}

dialog[open] {
    display: flex;
}

dialog h4 { 
    margin: 0.2em;   
}

dialog a {
    color: royalblue;
}

dialog a, dialog span {
    font-size: 90%;
}

dialog::backdrop {    
    background: rgba(0, 0, 0, 0.33);
}

dialog form {
    margin-top: 0.7em;
    font-size: large;
    text-align: end;
}