Token Status Marker Menu - Add Labels & Active Flashing (Players)
This moves the Status Marker menu to the top of the screen, widens it to the width of the window and automatically resizes it based on the number of status markers you have.
When a status marker is applied to a token, it gets moved to the top left of the list, and is bordered in green, blue, or red (the three types of status markers I use), and then flashes with a yellow border. The coloring is heavily specific to the markers that I use.
There's also some optional code to adjust the layout when any markers are active to move them onto their own row at the top. Just un-comment the 'Put Active Buttons on Top Line and move Inactive Markers to separate line below' section.
@-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: 908px; 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="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;} }
}(Link back to Index)
