custom.css

/* Remove the Foundry VTT Logo */
#logo{
    display: none;
}

/* Move controls up now that the logo is gone */
#controls{
    top: 0px !important;
}

/* Make background opaque and remove unnecessary drop shadows */
#controls .scene-control,
#controls .control-tool{
    background-color: #4c4c4c;
    box-shadow: none;
}

/* Make background opaque and remove unnecessary drop shadows */
#controls .control-tool.toggle{
    background: rgba(30, 0, 60, 1) !important;
    box-shadow: none;
}

/* Make background opaque and remove unnecessary drop shadows */
#controls .control-tool.toggle{
    background: rgba(60, 0, 120, 1) !important;
    box-shadow: 0 0 5px #9b8dff;
}

/* Hide Players Listing. Doesn't really matter who the hell is logged in */
#players{
    /* display: none; */
}

/* Remove box shadow */
#players.app{
    box-shadow: none;   
}

/* Adjust sidebar display */
#sidebar{
    background-color: #4c4c4c;
    border-color: #4c4c4c;
    right: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    border-radius: 0;
}

/* Remove box shadow */
#sidebar.app{
    box-shadow: none;
}

/* Add ordering that the items in the Chat Tab */
[data-tab="chat"] > *{
    order: 1;
}

/* Force the Private GM Roll Select Dropdown to be at the bottom of the page */
#chat-controls{
    order: 2
}

/* Remove the D20 Icon from Chat Controls*/
#chat-controls .roll-type-select label{
    display: none;
}

/* Set the Private GM Rolls Select Dropdown to span the full width of its area */
#chat-controls div.roll-type-select select{
    width: 100% !important;
}

/* Remove Chat Save and Chat Delete Buttons */
#sidebar #chat-controls .control-buttons{
    display: none;
}

/* Vertically Center the Polygot Label and Select Dropdown */
#polyglot.polyglot-lang-select {
    align-items: center;
}

/* Remove the "Language" Label */
#polyglot.polyglot-lang-select label{
    display: none;
}

/* Resize the Polygot Select Dropdown */
#polyglot.polyglot-lang-select select{
        flex-basis: auto;
        height: auto;
}

/* Move the Pack entries to be on a single line */
#compendium li.compendium-pack{
    display: flex;
}

/* Move the Pack title to be first in its appearance */
#compendium h4.pack-title {
    order: 1;
    display: flex;
    margin-right: 0.25rem;
}

/* Move the Compendium footer to be second in its appearance */
#compendium footer.compendium-footer {
    order: 2;
    opacity: 0.5;
}

/* No need for the compendium Entity type */
#compendium span.entity-type {
    display: none;
}

/* Now that we are hiding part of each Compendium listing, this will vertically center the label with the icons */
#compendium h4.pack-title {
    display: flex;
    margin: 0 0.5rem 0 0;
}

/* Make the Compendium entries more compact */
#compendium h3{
    border: none !important;
}

/* Make the Compendium entries more compact */
#compendium li.compendium-pack{
    padding: 0;
    border: none !important;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

/* Add some space between compendium groups */
#compendium ol.compendium-list{
    margin-bottom: 0.5rem;
}


/*
 **************************************************
 * Music Controls to make the playlist responsive
 **************************************************
 */

/* Ensure Playlist titles are always visible */
#playlists li.playlist .playlist-header .playlist-name{
    max-width: calc(100% - 100px);
    background-image: linear-gradient(90deg,#f0f0e0 92.5%,rgba(0,0,0,0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Ensure the Playlist collapse button is never faded */
#playlists li.playlist .playlist-header .playlist-name i.fa{
    -webkit-text-fill-color: #999999;
}

/* The playlist should never be wider than the are it's contained within */
#playlists li.playlist .playlist-sounds{
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Fade Trac text at the end of the row and ensure its width never exceeds what's possible */
#playlists li.sound .sound-name{
    background-image: linear-gradient(90deg,#ffffff 92.5%,rgba(0,0,0,0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: calc(100% - 152px);
}

#playlists li.sound .sound-controls{
    display: inline-flex;
    max-width: 152px;
}

/* Makes the stop button red */
#playlists .fa-square:before{
    color: red;
}