Greasy Fork is available in English.

DH3 Compact - Magic Fix

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