Roll20 Player View Enhancements by kinchj

/* ==UserStyle==
@name         Roll20 Player View Enhancements
@version      20231207.17.36
@namespace    userstyles.world/user/kinchj
@description  Roll20 CSS enhancements for players in my game
@author       kinchj
@license      No License
==/UserStyle== */

@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Token - Radial Menu */
/* Radial Menu Location */
#radial-menu {
    position: fixed;
    top: 80px !important;
    left: 95px !important;
}

/* Remove Edit Token Button and Set Location if visible*/
#radial-menu .button.button-1 {
    position: fixed;
    /* Fixed placement for Edit Token Button */
    top: 165px;
    /* top: 218px; */
    /* Vertical placement for Edit Token Button */
    left: 54px;
    /* Horizontal placement for Edit Token Button */
    display: none;
    /* Remove Edit Token Button */
}

/* Status Marker Button Location */
#radial-menu .button.button-2 {
    position: fixed;
    /* Fixed placement for Status Marker Button */
    top: 1px;
    /* 175px; */
    /* Vertical placement for Status Marker Button */
    left: 50px;
    /* Horizontal placement for Status Marker buttons */
    border-radius: 25px 25px 25px 25px;
    /* Round Status Marker menu button */
    width: 100%;
    /* Extend width so Status Marker Menu will fill horizontal */
    background-color: transparent;
    /* Transparent background so no bar is visible */
}

/* Remove Outline From Status Marker Button */
#radial-menu > div.button.button-2.action.open.animcomplete[data-action-type="show_marker_menu"] {
    width: 40px;
}
#radial-menu .button.button-2,
.markermenu {
    --color-element-bg: transparent;
    -webkit-box-shadow: none;
    width: 100%;
}

/* Removes transparent outline from Status Marker button */
#radial-menu .button.button-3,
#radial-menu .button.button-4,
#radial-menu .button.button-5 {
    left: -45px;
    width: 38px;
}

/* Removes white outline from all buttons */
#radial-menu .button {
    border: 0px;
}

/* Brighter colors */
#radial-menu {
    --color-text-primary: #b3b3b3;
    --color-bg-dark: #1c1111;
    --color-text-disabled: #150d0d;
    --color-element-bg: #372828;
    --color-red: #f85212;
    --color-green: #78ff10;
    --color-blue: #0c6be7;
    --color-yellow: #fc0;
    --font-number: "Ruda", sans-serif;
    --StatusMarkerButton: .button.button-2
}

/* Font Size Inside Colored Buttons */
#radial-menu .button div.inner span {
    font-size: 18px !important;
}

/* Colored Button Input Box Size & Location */
#radial-menu .popupvalue {
    position: absolute;
    top: 5px;
    left: 45px;
    width: 35px;
    height: 30px;
    z-index: 1005
}

/* Colored Button Input Fields Font Size */
#radial-menu .popupvalue input {
    width: 100%;
    font-size: 16px
}

/* Shadow for red bar button */
#radial-menu .button.button-3 {
    box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-red), inset 0px 0px 10px var(--color-red), inset 0px 0px 15px var(--color-red) !important;
    top: -42px;
}

/* Shadow for blue bar button */
#radial-menu .button.button-4 {
    box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-blue), inset 0px 0px 10px var(--color-blue), inset 0px 0px 15px var(--color-blue) !important;
    top: -1px;
}

/* Shadow for green bar button */
#radial-menu .button.button-5 {
    box-shadow: 0px 0px 5px var(--color-text-disabled), inset 0px 0px 5px var(--color-green), inset 0px 0px 10px var(--color-green), inset 0px 0px 15px var(--color-green) !important;
    top: 42px;
}
}

@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Token - Status Marker Labels & Flashing */
/* Status Marker Menu Width Override: 100% - 385px is from 54px location for GM placement */
/* Status Marker Menu Width Override: 100% - 435px is for PC placement */
/* Status Marker Menu Width */
#radial-menu div.markermenu.open {
    min-width: 195px;
    width: calc(100% - 453px) !important;
    max-width: 955px;
    min-height: 167px;
    height: auto;
    border-radius: 15px;
    top: 1px;
    left: 42px;
    padding: 5px 0px 5px 5px;
    display: flex;
    flex-wrap: wrap;
}

/* Keep buttons on top */
#radial-menu .button.button-1 #radial-menu .button.button-2,
#radial-menu .button.button-3,
#radial-menu .button.button-4,
#radial-menu .button.button-5 {
    z-index: 1;
}

/* Remove Transition from Status Marker Window */
#radial-menu,
#radial-menu .button.button-2,
.markermenu.open {
    -webkit-transition: none !important;
    transition: none !important;
}
#radial-menu > div.button.button-2.action.open.animcomplete > div.markermenu:not([class = "open"]) {
    width: 0px;
}

/* Unneeded?  Maybe need to change to #radial-menu .markermenu.open */
#radial-menu .markermenu {
    padding-left: 0px;
}

/* Undo the default dead "X" styling */
#radial-menu .markermenu .markercolor.dead {
    font-weight: normal;
    height: 34px;
    margin-left: 0;
    padding: 0;
    top: 0 !important;
    width: 34px;
}

/* Recreate the dead "X" without disrupting the layout */
#radial-menu .markermenu .markercolor.dead::before {
    content: "X";
    display: block;
    font-size: 34px;
    font-weight: bold;
    position: absolute;
    text-align: center;
    top: 7px;
    width: 100%;
}

/* Resize Status Marker Icons */
#radial-menu div.markermenu.open div.markericon {
    height: 40px;
    width: 40px;
    background-size: 40px;
}

/* Prevent the icons from taking up extra space, allow space for the label text */
#radial-menu .markermenu.open .statusicon {
    font-size: 0;
    margin-bottom: 6px;
}

/* Show the icon titles as labels */
#radial-menu .markermenu.open .statusicon::after {
    color: black;
    content: attr(title);
    display: inline-block;
    font-size: 8px;
    line-height: 1em;
    overflow: hidden;
    position: relative;
    text-align: center;
    top: 41px;
    white-space: nowrap;
    width: 40px;
    height: 10px;
}
#radial-menu .markermenu.open .statusicon.active::after {
    top: 45px;
    font-weight: bold;
}

/* Move Active Buttons to Top Left */
div.statusicon.markericon.action.active {
    display: flex;
    align-self: flex-start;
    order: 0;
}
div.statusicon.markericon.action:not(active) {
    order: 1;
}


/* Put Active Buttons on Top Line and move Inactive Markers to separate line below */
/*
div.markermenu.open > div:first-child:not(active) { flex-basis: 100%; display: flex !important; height: 0px !important; order: 1; margin: 0px !important; padding: 0px !important; border: 0px !important; border-radius: 0px !important; }
div.markermenu.open > div:first-child:not(active)::after { display: none !important; }
*/
/* Blinking Green Neutral Status Markers */
.active[title = "Concentrating"],
.active[title = "Held-Action"],
.active[title = "FlyHeight"],
.active[title = "ClimbHeight"],
.active[title = "BurrowDepth"],
.active[title = "SwimDepth"] {
    animation: blinkingGreenStatusMarker 1.5s infinite;
}
@keyframes blinkingGreenStatusMarker {
    0% {
        border: 4px solid #0a0;
        border-radius: 4px;
    }
    25% {
        border: 4px solid #0a0;
        border-radius: 4px;
    }
    50% {
        border: 4px solid #ff0;
        border-radius: 4px;
    }
    75% {
        border: 4px solid #0a0;
        border-radius: 4px;
    }
    100% {
        border: 4px solid #0a0;
        border-radius: 4px;
    }
}

/* Blinking Blue Helpful Status Markers */
.active[title = "Aid"],
.active[title = "Aura"],
.active[title = "Blessed"],
.active[title = "Burrowing"],
.active[title = "Climbing"],
.active[title = "Enlarged"],
.active[title = "Flying"],
.active[title = "Hasted"],
.active[title = "Heroism"],
.active[title = "Hidden"],
.active[title = "Inspiration"],
.active[title = "Invisible"],
.active[title = "MirrorImage"],
.active[title = "Raging"],
.active[title = "Ritual"],
.active[title = "Sacred-Weapon"],
.active[title = "Shrunken"],
.active[title = "Stable"],
.active[title = "Swimming"],
.active[title = "Warded"] {
    animation: blinkingBlueStatusMarkers 1.5s infinite;
}
@keyframes blinkingBlueStatusMarkers {
    0% {
        border: 4px solid #00f;
        border-radius: 4px;
    }
    25% {
        border: 4px solid #00f;
        border-radius: 4px;
    }
    50% {
        border: 4px solid #ff0;
        border-radius: 4px;
    }
    75% {
        border: 4px solid #00f;
        border-radius: 4px;
    }
    100% {
        border: 4px solid #00f;
        border-radius: 4px;
    }
}

/* Blinking Red Harmful Status Markers */
.active[title = "Bane"],
.active[title = "Banished"],
.active[title = "Blind"],
.active[title = "Charmed"],
.active[title = "Confused"],
.active[title = "Cursed"],
.active[title = "Dead"],
.active[title = "Deafened"],
.active[title = "Drowning"],
.active[title = "Dying"],
.active[title = "Encumbered"],
.active[title = "Exhaustion"],
.active[title = "Frightened"],
.active[title = "Frozen"],
.active[title = "Grappled"],
.active[title = "Hexed"],
.active[title = "Incapacitated"],
.active[title = "Marked"],
.active[title = "MockingBlade"],
.active[title = "On-Fire"],
.active[title = "Paralyzed"],
.active[title = "Petrified"],
.active[title = "Poisoned"],
.active[title = "Prone"],
.active[title = "Restrained"],
.active[title = "Silenced"],
.active[title = "Slowed"],
.active[title = "Stunned"],
.active[title = "Suffocating"],
.active[title = "Unconscious"] {
    animation: blinkingRedStatusMarkers 1.5s infinite;
}
@keyframes blinkingRedStatusMarkers {
    0% {
        border: 4px solid #f00;
        border-radius: 4px;
    }
    25% {
        border: 4px solid #f00;
        border-radius: 4px;
    }
    50% {
        border: 4px solid #ff0;
        border-radius: 4px;
    }
    75% {
        border: 4px solid #f00;
        border-radius: 4px;
    }
    100% {
        border: 4px solid #f00;
        border-radius: 4px;
    }
}
}

@-moz-document regexp("https://app.roll20.*.net/editor/.*") {
/* Token - Hide Unused Status Markers */
/* 
https://app.roll20.net/forum/post/7841113/show-off-your-...