The compact look for DH3 - Magic Fix
/* ==UserStyle==
@name DH3 Compact - Magic Fix
@description The compact look for DH3 - Magic Fix
@namespace https://github.com/lbrustad
@version 1.1.0
@author Lasse Brustad
@preprocessor stylus
@var range gridGap "Gap between spells" [4, 0, 16, 2, 'px']
@var range gridBoxPadding "Space between box & spells" [4, 0, 16, 2, 'px']
@var range gridColumns "Spells per row" [4, 3, 10, 1]
@var range magicMinRows "Magic min rows (0 = auto)" [0, 0, 6, 1]
@var range magicWidth "Magic width" [60, 30, 100, 5, '%']
@var range cooldownSize "Cooldown timer size" [16, 4, 28, 2, 'pt']
@var checkbox forceShowTimer "Force timer to be visible" 0
@var select textLocation "Timer location" {
"Top left": "start",
"Top center": "start center",
"Top right": "start end",
"Center left": "center start",
"Center": "center",
"Center right": "center end",
"Bottom left": "end start",
"Bottom center": "end center",
"Bottom right": "end"
}
==/UserStyle== */
@-moz-document domain("dh3.diamondhunt.co")
#fighting-screen-magic-area
> .fighting-screen-magic-area
display: grid
grid-template-columns: repeat(gridColumns, 1fr)
if magicMinRows == 0
grid-auto-rows: min-content
else
grid-template-rows: repeat(magicMinRows, 1fr)
grid-gap: gridGap
gap: gridGap
padding: gridBoxPadding
float: right
width: magicWidth
min-height: auto
[id^="combat-spell-"]
&[onclick]
display: grid
grid-template-columns: 1fr
grid-template-rows: min-content
float: none
height: auto
> div
position: static
text-align: right
width: auto
height: auto
place-self: textLocation
margin: 4px
padding: 4px
grid-area: 1 / 1 / -1 / -1
text-shadow: 2px 1px 4px black
font-size: cooldownSize
if forceShowTimer
display: block !important
> *
margin: 0
padding: 0
> [id$="icon"]
width: 100%
height: auto
grid-area: 1 / 1 / -1 / -1