dd-wrt-trac-inspired-themes.user.styl

/* ==UserStyle==
@name           DD-WRT Trac Inspired Themes
@namespace      github.com/style-it-themes/dd-wrt-trac-inspired-themes
@description    Customizable dark themes for the DD-WRT SVN Trac
@author         Style-it Themes: the-j0k3r
@homepageURL    https://github.com/style-it-themes/dd-wrt-trac-inspired-themes
@supportURL     https://github.com/style-it-themes/dd-wrt-trac-inspired-themes/issues/new/choose
@updateURL      https://github.com/style-it-themes/dd-wrt-trac-inspired-themes/raw/main/dd-wrt-trac-inspired-themes.user.styl
@version        1.3.2
@license        MIT
@preprocessor stylus

@var checkbox sdetails     'Show style details'     1

@var select   cg_theme     'Preset themes toggle'   {

    'Custom colors ⬎  ' :  'custom-style'  ,
    'Antigua          ' :  'antigua'       ,
    'Dracula          ' :  'dracula'       ,
    'Duo Cocoa        ' :  'duo-cocoa'     ,
    'Gruvbox Dark     ' :  'gruvbox-dark'  ,
    'Material         ' :  'material'      ,
    'Material Darker  ' :  'material-dkr'  ,
    'Seti             ' :  'seti'          ,
    'Solarized Dark   ' :  'solarized-dark',
    'Tango Dark       ' :  'tango-dark'    ,
    'Twilight         ' :  'twilight'      ,
    'The Matrix       ' :  'the-matrix'    ,
    'Ubuntu           ' :  'ubuntu'        ,
}

@var color    cg_bg        'Custom background       ' #111a22
@var color    cg_fg        'Custom foreground       ' #f2f4ff
@var color    cg_ac        'Custom accent           ' #4f74e3

@var range    cg_sat       'Saturation of RGB colors' [0, -50, 40, 0.01]
@var range    cg_lig       'Lightness of gray colors' [0, -30, 30, 0.01]
@var checkbox align-left   'Left align navigation   ' 1
@var checkbox logalgnlft   'Left align logo         ' 1
@var checkbox sticky_prefs 'Sticky timeline prefs   ' 1

@var text     transition   'Define transition value ' 'all 0.2s cubic-bezier( 0.3, 0, 0.5, 1)'

==/UserStyle== */
// Helpers.
rq        = unquote
stinfo    = 'DD-WRT Trac Inspired Themes v1.3.0'
copyright = '© 2021 Style-it-themes: the-j0k3r'
license   = 'MIT'
homeURL   = 'https://github.com/style-it-themes/dd-wrt-trac-inspired-themes'
t         = transparent
i         = !important
vendors   = official

// Convert colors to HSLA format.
// NOTE: This is done just for consistency of generated colors.
to_hsla(input) {
  $h = {}
  $h.hue = rq(split('deg', '%s' % ceil(hue(input), 2))[0])
  $h.saturation = ceil(saturation(input), 2)
  $h.lightness = ceil(lightness(input), 2)
  s('hsla(%s,%s,%s,1)', $h.hue, $h.saturation, $h.lightness)
}

// SVG-friendly colors mixin.
// NOTE: Compiler does not like HSLA format, so we convert back to HEX.
to_hex(input) {
  s('\%23%s', rq(substr(s('%s', convert(input)), 1, 6)))
}

// Color mixin.
// All colors: `c: fg bd bg`
// Only border-color: `c: 0 bd`
c(x, y = 0, z = 0, xi = 1, yi = 1, zi = 1) {
  if x != 0 && x != '_' {            color: xi is 0 ? x : x i }
  if y != 0 && y != '_' {     border-color: yi is 0 ? y : y i }
  if z != 0 && z != '_' { background-color: zi is 0 ? z : z i }
}

// SVG colors.
g(x, y = 0, xi = 1, yi = 1) {
  if x != 0 && x != '_' {   fill: xi is 0 ? x : x i }
  if y != 0 && y != '_' { stroke: yi is 0 ? y : y i }
}

// border radius mixin.
rad() { border-radius: arguments }

// box-shadow mixin.
bsh() { box-shadow: arguments }

// text-shadow mixin.
tsh() { text-shadow: arguments }

// Color generator.
// NOTE: Fix the scope to avoid conflicts.
/{
  // Generator -> Color-schemes.
  ColorSchemes = {
    'custom-style'   : { BG:   cg_bg, FG:   cg_fg, AC:   cg_ac }
    'antigua'        : { BG: #14191f, FG: #f1f6fb, AC: #89a90a }
    'duo-cocoa'      : { BG: #28231f, FG: #ffdac2, AC: #dfb249 }
    'gruvbox-dark'   : { BG: #282828, FG: #ebdbb2, AC: #b8bb26 }
    'dracula'        : { BG: #282A36, FG: #f8f8f2, AC: #bd93f9 }
    'material'       : { BG: #263238, FG: #eeffff, AC: #82aaff }
    'material-dkr'   : { BG: #212121, FG: #eeffff, AC: #82aaff }
    'seti'           : { BG: #0D1011, FG: #ffd200, AC: #7292a1 }
    'solarized-dark' : { BG: #002b36, FG: #fdf6e3, AC: #268bd2 }
    'tango-dark'     : { BG: #303436, FG: #729fcf, AC: #babdb6 }
    'twilight'       : { BG: #141414, FG: #f7f7f7, AC: #8f9d6a }
    'the-matrix'     : { BG: #000000, FG: #ffffff, AC: #00ff00 }
    'ubuntu'         : { BG: #2c071a, FG: #f2f1ef, AC: #ef7847 }
  }

  // Select active color-scheme.
  for color-scheme in ColorSchemes {
    if (color-scheme == cg_theme) {
      define('BG', ColorSchemes[color-scheme].BG, global)
      define('FG', ColorSchemes[color-scheme].FG, global)
      define('AC', ColorSchemes[color-scheme].AC, global)
    }
  }

  // Color values and hues.
  // NOTE: List with anonymous hashes.
  colors = (
    { key: bg, color:   BG } \
    { key: fg, color:   FG } \
    { key: v0, color:   AC } \
    { key: v1, hue:   0deg } \
    { key: v2, hue:  30deg } \
    { key: v3, hue:  60deg } \
    { key: v4, hue: 120deg } \
    { key: v5, hue: 180deg } \
    { key: v6, hue: 210deg } \
    { key: v7, hue: 270deg } \
    { key: v8, hue: 300deg } \
    { key: v9, hue:   0deg } \
  )

  // Alias colors.
  $bg = colors[0]
  $fg = colors[1]

  for num in 0..5 {
    $color = $bg.color
    if num == 1 {} // Skip base BG color.
    else if num == 0 { $color = darken($color, 10%) }
    else { $color = lighten($color, (num + 2) * num / 2%) }
    $color = to_hsla($color)

    $key = s('%s%s', $bg.key, num)
    $val = 'var(--%s-%s)' % (($bg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
  }

  // Generate foreground colors.
  for num in 0..5 {
    $color = $fg.color
    if num == 1 {} // Skip base FG color.
    else if num == 0 { $color = lighten($color, 10%) }
    else { $color = darken($color, (num + num / 1.25) * 5%) }

    $color = to_hsla($color)

    $key = s('%s%s', $fg.key, num)
    $val = 'var(--%s-%s)' % (($fg.key) (num))
    define('$' + $key, $color, global)
    define('' + $key, $val, global)
  }

  // Generate all other colors.
  for c, i in colors[2..length(colors)] {
    $sel  = colors[i + 2]

    for num in 0..9 {
      // Case for accent colors.
      if ($sel.key == v0) {
        $color = darken($sel.color, (80% - ((num + num / 3) * 7.5)))
        $color = darken($sel.color, (100% - (num + 3) * 7.5))
        $color = lightness($color, lightness($color) + num)
      }

      // Case for gray colors.
      else if ($sel.key == v9) {
        $color = hsl($sel.hue, 0%, 50% + cg_lig)
        $color = darken($color, (100% - (num + 2) * 17))
      }

      // Case for RGB colors.
      else {
        $hue   = $sel.hue
        $color = hsl($hue, 60% + cg_sat, 60% + cg_lig)
        $color = darken($color, (100% - (num + 2) * 7.5))
        $color = lightness($color, lightness($color) + num)
      }

      // Convert to HSLA format.
      $color = to_hsla($color)

      $key = s('%s%s', $sel.key, num)
      $val = 'var(--%s-%s)' % (($sel.key) (num))
      define('$' + $key, $color, global)
      define(''  + $key, $val, global)
    }
  }
}
@-moz-document regexp('https?://(svn|ftp|download1).dd-wrt.com.*(/.*)?') {
  // global section triggers and variables
  :root {
    // show style name/version/copyright
    // when inspecting the code or using compiled CSS this info is auto added now.
    --style-name: rq(stinfo)
    --copyright: rq(copyright)
    --license: rq(license)
    --home-url : rq(homeURL)

    // Generate CSS color variables.
    colors = (bg fg v0 v1 v2 v3 v4 v5 v6 v7 v8 v9)
    for color in colors[0..1] {
      for tone in 0..5 {
        { '--%s-%s' % ((color) (tone)) }: $ + color + tone
      }
    }
    for color in colors[2..length(colors)] {
      for tone in 0..9 {
        { '--%s-%s' % ((color) (tone)) }: $ + color + tone
      }
    }
    // remap generated accent colors + keep v09 as 1:1 AC
    shade = (dark(BG)) ? darken : lighten

    --v0-0: to_hsla(mix(shade(BG, 90%), AC, 90%))
    --v0-1: to_hsla(mix(shade(BG, 80%), AC, 80%))
    --v0-2: to_hsla(mix(shade(BG, 70%), AC, 70%))
    --v0-3: to_hsla(mix(shade(BG, 60%), AC, 60%))
    --v0-4: to_hsla(mix(shade(BG, 50%), AC, 50%))
    --v0-5: to_hsla(mix(shade(BG, 40%), AC, 40%))
    --v0-6: to_hsla(mix(shade(BG, 30%), AC, 30%))
    --v0-7: to_hsla(mix(shade(BG, 20%), AC, 20%))
    --v0-8: to_hsla(mix(shade(BG, 10%), AC, 10%))
    --v0-9: to_hsla(mix(shade(BG, 0%), AC, 0%))

    // rgba BG/AC vars
    --txt-shadow: darken(convert($bg0), 40%)
    --code-pr-bg: #141414
    --code-pr-tc: #f7f7f7
    --rgba-bg2-1: rgba(convert($bg2), .1)
    --rgba-bg2-5: rgba(convert($bg2), .5)
    --box-shadow: rgba(convert($v09), .9)

    --font_family_1: Helvetica, Verdana, 'Bitstream Vera Sans', Roboto, Segoe UI, sans-serif
    --font_family_2: inherit
    --font_family_3: sans-serif
    --font_family_4: monospace
    --font_family_5: Helvetica, Verdana, Arial, 'Bitstream Vera Sans', Roboto, Segoe UI, sans-serif
  }
  ::selection {
    background: v06
    color: v99
  }
  * {
    text-rendering: optimizeLegibility
  }
  html {
    max-width: 1000px
    margin: 0 auto
  }
  body {
    background: bg1
    color: v98
    padding: .362em
    width: 1000px
    font: normal 16px var(--font_family_1)
  }
  th, tr {
    font: normal 14px var(--font_family_1)
  }
  h1 {
    font-family: var(--font_family_5)
    margin: .15em 1em 0.5em 0
    :link {
      color: v08
      border: 0 solid t
    }
    :visited {
      color: inherit
    }
    &:hover {
      .anchor {
        visibility: visible
      }
    }
    &:target {
      background: v02
      bsh: none
      rad: 0
    }
    .first:link {
      color: v97
    }
  }
  h2 {
    font-family: var(--font_family_1)
    font-weight: bold
    letter-spacing: -0.018em
    page-break-after: avoid
    &:target {
      background: v02
      bsh: none
      rad: 0
    }
    .trac-count {
      margin-left: .2em
      vertical-align: baseline
      color: v97
      font-size: 90%
    }
  }
  h3 {
    font-family: var(--font_family_1)
    font-weight: bold
    letter-spacing: -0.018em
    page-break-after: avoid
    font-size: 14px
    :link {
      color: inherit
    }
    :visited {
      color: inherit
    }
    &:target {
      background: v02
      bsh: none
      rad: 0
    }
    .trac-count {
      margin-left: .2em
      color: v97
      font-size: 90%
    }
  }
  h4 {
    font-family: var(--font_family_1)
    :link {
      color: inherit
    }
    :visited {
      color: inherit
    }
    &:hover {
      .anchor {
        visibility: visible
      }
    }
    &:target {
      background: v02
      bsh: none
      rad: 4px
    }
  }
  hr {
    border: none
    border-top: 1px solid bg4
    margin: 2em 0
  }
  address {
    font-style: normal
  }
  img {
    border: none
  }
  :link {
    text-decoration: none
    color: v09
    border-bottom: 0
    transition: transition
    &:hover {
      background-color: t
      color: v07
      bsh: none
      border-bottom: 0
    }
    &:focus, &:focus-visible {
      outline: 0
      color: inherit
    }
  }
  :visited {
    text-decoration: none
    color: v15
    border-bottom: 1px dotted bg4
    &:hover {
      background-color: t
      color: v95
    }
  }
  h5 {
    :link {
      color: inherit
    }
    :visited {
      color: inherit
    }
    :target {
      background: v02
      bsh: none
      rad: 0
    }
  }
  h6 {
    &:link {
      color: inherit
    }
    &:visited {
      color: inherit
    }
    &:target {
      background: v02
      bsh: none
      rad: 0
    }
  }
  .anchor {
    &:link {
      border: none
      color: v09
      font-size: .8em
      vertical-align: text-top
    }
    &:visited {
      border: none
      color: v97
      font-size: .8em
      vertical-align: text-top
    }
  }
  * {
    >.anchor {
      &:link {
        visibility: hidden
      }
      &:visited {
        visibility: hidden
      }
    }
    html {
      .suggestions {
        ul {
          height: 10em
        }
      }
    }
  }
  span {
    &:hover {
      .anchor {
        visibility: visible
      }
    }
    &:target {
      background: v02
      bsh: none
      rad: 4px
    }
  }
  .tracini {
    table.wiki {
      tbody {
        tr {
          :target {
            background: v02
          }
        }
      }
    }
    .tracini-option {
      border: none
      position: relative
      &:link {
        &:hover {
          background-color: t
        }
      }
      &:visited {
        &:hover {
          background-color: t
        }
      }
    }
    tr[id] {
      &:hover {
        .tracini-option {
          &:before {
            content: "\00b6"
            position: absolute
            display: block
            left: -1em
            width: 1em
            color: v97
            z-index: 1
          }
        }
      }
    }
  }
  input {
    margin: 2px
    font-family: var(--font_family_1)
    font-size: 100%
    vertical-align: middle
    transition: transition
  }
  textarea {
    margin: .2em
    border: 1px solid bg4
    rad: 4px 4px 0 0
    &:focus {
      border: 1px solid v08
      bsh: 0 0 10px 0 v04
      outline: 0
    }
    &:hover {
      border: 1px solid v08
    }
  }
  select {
    margin: 2px
    font-family: var(--font_family_1)
    font-size: 100%
    vertical-align: middle
  }
  .trac-button {
    margin: 2px
    vertical-align: middle
    background: bg4
    color: v98
    border: 1px solid bg4
    rad: 4px
    padding: .1em 1em .2em
    tsh: none
    bsh: none
    cursor: pointer
    &:hover {
      background: bg5
      tsh: none
      bsh: none
    }
    &:active {
      position: relative
      top: .1em
      left: .1em
    }
  }
  button {
    font-family: var(--font_family_1)
    font-size: 100%
  }
  input[type='button'] {
    color: bg1
    rad: 4px
    padding: .1em .5em .2em
    tsh: none
    bsh: none
    cursor: pointer
    &:hover {
      tsh: none
      bsh: none
    }
    &:active {
      position: relative
      top: .1em
      left: .1em
    }
  }
  input[type='submit'] {
    rad: 4px
    tsh: none
    bsh: none
    &:hover {
      tsh: none
      bsh: none
    }
    &:active {
      position: relative
      top: .1em
      left: .1em
    }
  }
  input[type=reset] {
    rad: 4px
    tsh: none
    bsh: none
    &:hover {
      tsh: none
      bsh: none
    }
    &:active {
      position: relative
      top: .1em
      left: .1em
    }
  }
  button.trac-revert {
      border-bottom: 2px dotted bg5
      color: v69
      &:hover {
        background-color: t
        border-bottom: 2px dotted v09
        color: v09
      }
    }
  .inlinebuttons {
    a {
      transition: transition
      &:active {
        position: relative
        top: .1em
        left: .1em
      }
      rad: 4px
      padding: 0 .4em .1em
      font-size: 70%
      bsh: none
      margin: 0 .1em .1em
      background: none
      color: v98
      &:hover {
        color: v98
        tsh: none
        bsh: none
      }
    }
    input {
      border: 1px solid bg4
      rad: 4px
      height: 1.5rem
      padding: 0 .4em .1em
      font-size: 70%
      margin-top: .4rem
      background: none
      bsh: none
      color: v98
    }
    .trac-button {
      border: 1px solid bg4
      rad: 1em
      height: 1.6em
      padding: 0 .4em .1em
      font-size: 70%
      bsh: none
      margin: 0 .1em .1em
      background: none
      color: v98
      cursor: pointer
      &:hover {
        background: v04
        color: v99
        tsh: 0 1px 0 bg0
        bsh: none
      }
    }
    input[type='button'] {
      tsh: 0 1px 0 bg0
      &:hover {
        background: v04
        color: v99
        tsh: 0 1px 0 bg0
        bsh: none
      }
    }
    input[type='submit'] {
      &[title*="reply" i], &[title*="edit" i] {
        font-size: 14px
        padding: .2em .6em 1.6em
        margin-bottom: .2rem
      }
      &:hover {
        background: v08
        border: 1px solid v09
        color: v99
        tsh: 0 1px 0 bg0
        bsh: 0 0 10px 0 v04
      }
    }
  }
  input.textwidget {
    border: 1px solid bg4
    rad: 4px
    padding: .25em .5em
    &:focus {
      border: 1px solid v09
      outline: 0
    }
  }
  option {
    border-bottom: 1px dotted bg5
  }
  fieldset {
    border: 1px solid bg4
    rad: 4px
    margin: 1em 0
    background: bg2
    bsh: none
    padding: 1em
    color: v98
    > legend.foldable {
      :link {
        color: v98
        font-size: 14px
        tsh: none
      }
      &:visited {
        color: v98
        font-size: 110%
        tsh: none
      }
    }
    &#columns.collapsed {
      height: 30px
      border: 1px solid bg5 i
    }
  }
  p.hint {
    color: v98
    font-size: 85%
    margin: .5em 0
    padding-left: 1em
  }
  span.hint {
    color: v98
    font-size: 85%
    font-style: italic
    margin: .5em 0
    padding-left: 1em
    vertical-align: middle
  }
  span.trac-datetimehint {
    color: v98
    font-size: 85%
    font-style: italic
    margin: .5em 0
    padding-left: 1em
  }
  p.help {
    color: v98
    font-size: 90%
    margin: 1em .5em .5em
  }
  legend {
    color: v09
    margin-left: -.6em
    font-size: 100%
  }
  label {
    &.disabled { color: v97 }
    &.trac-textarea-hint { color: v95 }
  }
  .disabled {
    span.hint,
    p.help,
    legend,
    input,
    select {
      color: v97
    }
  }
  .readonly {
    span.hint {
      color: v97
    }
    p.help {
      color: v97
    }
  }
  .buttons {
    margin: .5em .5em .5em 0
    transition: transition
    form {
      display: inline
      div {
        display: inline
      }
    }
    input {
      margin: 1em .362em .1em auto
    }
    [name='update'] {
      padding-bottom: .15rem
    }
  }
  .uisymbols {
    .inlinebuttons {
      input[type='button'],
      input[type='submit'],
      .trac-button a {
        font-size: 100%
        transition: transition
      }
    }
    #fieldhist {
      .inlinebuttons {
        a {
          font-size: 85%
        }
      }
    }
    div.system-message {
      .trac-close-msg {
        > span {
          display: none
        }
        &::after {
          content: '\0078'
        }
      }
    }
  }
  input[type='button'].trac-delete {
    color: v98
    &:hover {
      color: v98
    }
  }
  input[type='submit'].trac-delete {
    color: v98
    &:hover {
      color: v98
    }
  }
  .trac-button.trac-delete {
    color: v98
    &:hover {
      color: v98
    }
  }
  .trac-shade {
    background-color: bg2
  }
  textarea.trac-fullwidth,
  #trac-comment-editor textarea {
    background: bg0
    color: v98
    bsh: none
    &:focus, &:focus-within {
      bsh: 0 0 10px 0 v04
    }
  }
  input.trac-fullwidth {
    -moz-box-sizing: border-box
    box-sizing: border-box
    margin-left: 0
    margin-right: 0
    width: 100%
  }
  button {
    &.trac-fullwidth {
      -moz-box-sizing: border-box
      box-sizing: border-box
      margin-left: 0
      margin-right: 0
      width: 100%
    }
  }
  form.mod {
    margin: 1em 0
    .field {
      margin: .5em 0
      label {
        padding-left: .2em
      }
    }
    .field.description {
      margin-top: 1em
    }
    #changeinfo {
      .field {
        margin: 0.25em 0 0.75em 0
      }
      .options {
        padding: 0 0 0.5em 1em
      }
    }
  }
  #header {
    if (logalgnlft) {
      text-align: left
      margin-left: -.1rem
      margin-right: auto
    }
    else {
      text-align: right
      margin-right: -1.3rem
      margin-left: auto
    }
    #logo img {
      &[src*='trac_banner.png'] {
        prefix = 'data:image/png;base64,'
        path   = 'iVBORw0KGgoAAAANSUhEUgAAAkQAAACMCAMAAACqGkaYAAAAY1BMVEX///8kX5T///8kX5T///8kX5T/'
        path  += '//8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T/'
        path  += '//8kX5T///8kX5T///8kX5T///+iTMr8AAAAH3RSTlMAEBAgIDAwQEBQUGBgcHCAgJCQoKCwsMDA0NDg'
        path  += '4PDwFagsVAAACudJREFUeNrs2oEGwzAUheEYqo8w4PT9n3JMEOm1KUY63wc4l4AfkLYaAAAAAAAAAAAA'
        path  += 'AAAAkny6JRcOqfdc2pNyT7ln8HVOyj31ntm0F4f6dJwVcz22t3nsynGc26AcW7X1tU3OD/5jRCISkYhE'
        path  += 'JCIRiUhEIhKRiEQkIhGJSEQiEpGIRCQiEYlIRCISkYhEJCIRiUhEIhKRiEQkIhGJSEQiEhEA8Ni7bZWH'
        path  += 'uJ396J4/eggRiQgRISJEhIhEhIgQESJCRCJCRIhoAfUnHkQkIhGJSEQiEpGIEJGIRCQiEYlIRCJCRCIS'
        path  += 'kYhEJKJ72V7smlGL5SAMhUVEQglFRCSUUvb//8p92un1tDap87TjnMehPffq+Uiid4iIOIGIKFqyR6MF'
        path  += 'jRYi+t8gwnWsRDQjRLoCJ5E/jzokL17NPiypyvHsJIV1o0X+KTmTVvlUcYrwU4Qu0XvO0t8M9sjNsNwP'
        path  += 'EJXdutwSn7KP2WxUSYHInyQGZxGQa3tpP1eGEFHV1iA8L0QgVoIH1dDLnrdXRoJGoPz1ZDbVFLBfX74U'
        path  += 'WoiCWNawxSkhQhEgpOtYbrOP22sjfoQonA96p6uA++4MkhNp10DEh3ER/AuRyyNr5pvsecQoo1EHi2Tq'
        path  += 'ZqDoVMXzaWogerEanh6iMrboBbIfNuIniIKxqnQgzm+WL+4TIn61GZNDVAYXfTBkv45u3wpGnWbDTlMF'
        path  += 'Ywt5oSHhhIjebUaYF6JO9IeI1NQoi3QP7YLzaWMkV6P9wQhFdiB8p0QYe/nefhrQ+Lkj+boXZWaIIqRe'
        path  += 'EwXXVaBUj/vsPfxdHo08rT2jfikiczfb2nA7gq/NDUTalnjK++NtAn7tH6wN7zx0sWD2l1ayszdd8ikQ'
        path  += 'ARpiPmb57QsBcyHe3Q1ER4muIzi+5XkhYji2D10JCOz+sZqNttZIuQuMxummulXvZ2iebiCqQalj28ng'
        path  += 'vBB90LB5Z5avmL18GIXRsV4U0IuxqHAD1JMY7qHo5V1lOJDw+SBagCG7apt9HDYqKkTO+NvHdvLQtDZb'
        path  += 'N08wxhtvphISNx9EFS+EzfJ7k30+jeL4VCZaUNnUzUpTYlj/J5STNUKk7SfCMitE7dFktIgJjBbvFNXY'
        path  += '/GFBPTdjkDexUBEB6p239Gle5oNIv4Oxj1Ni+4lLT1JUPpLh+xzQJoPlojHgjuAwpfezSSHS+oRxjhVl'
        path  += '9jXXNFHD3g0FLYPrapjHyrW/Lc4knh2iajo8q8mKy2NtEbdb9LRZ72YRWvVmuOGm3pCkiuaFCDvSt94W'
        path  += '/SxkHytGS9GBTyBVV6UrvaQD/QuRXgKGst8HZyuIWwyX0aT1xHTtbxp3pym9bvBxboiUbbZPVPJNGlfl'
        path  += 'ba1CdOZojWy+KW+ELOqaHCJlx+zZh+/RSAYEpd+cehPQqsR4NnP+S9556LeuwmBc3vEmy3vc93/JO9qQ'
        path  += '4IQPQx1y3N/V2amMT+FvSUYCJF2S/E6InOghwWchSraN/UYaQw2IEvj+B9/FfN1LBlmXHHYCkReX17qf'
        path  += 'Ranrcxk5r6rxsZ1l0l7L4Okg04iIKMiPdc2V+v9ajRetRuW5rsd7K3V9zCNFYHl4F0TZptis0XoJ8JXv'
        path  += 'ma7Eek1q25btFiInbWckbb7kqOxnhfSl8wRRKtVv05ueU46zRMaz91aIQglEh+0QgXqtTOUyXekUYaay'
        path  += 'tKEwP7pXiGIlF/OYP1QDThvGKBAhcmrYavx16xE2dHTkEIXbxj77AEQ0oElxlCnDeS28AmDL4/B2iM7z'
        path  += 'mlwdztA4r0v8gChWMVcSpap2WkcKEW0be/YJiB43YdibTdjJ4bVIUojCz0OEGcIU3XyPwFAPzdcY3CFS'
        path  += 'MxdH86ym6LdC5L5MJ66G0AmO1Zj0Ejx1+HmI8jsV1zKNvoQo+PozfUTQ6ZfulavmgeR1Lefa7Q0irn3O'
        path  += 'I++hF5dcb7xxWJdxRFyCqLwKtup3QkQMIgHrGO/cVYr12fuEiBuXa0Ay8c43EIiIotvYpwQkGh/I3c1J'
        path  += 'JGm1hrHPMtp2fitEOPfRoS/AVH4BbNd+ICrnLzlDhfQR6Fy5t0LCY6b2AdF5zYemqobSXwqRiMQBeLMT'
        path  += 'fAUrYN32TiH69ii1CjMOg4NHnQs3Vh6HqMX3/ZZc6WWP73rFd+9jn1iGSFI3AN8yASwdXEHypyGS3zHg'
        path  += 'g77GWc9tUk9KaTlo3w1HKwauV7vZ2uZkox2IQOkKSJLJ+fJxPnePEJUv9gKNN9FRMA5rdou/na2ZLNza'
        path  += 'WYAIJpc+n/bw8Yw1GuIL9lnY0+F07v4gumqAEd0gqiX+B7ihmkjtJrlvjFYaIi4bsxUJgMjino2NzLCc'
        path  += 'JB+qY+4KfOMfhwjfkXsf/fApIg3ixhtEJVZcgyhCELFtpSBC1mEbjfqVtCcc94DoJwQlbp+GCMb+RkOp'
        path  += '1sVuShci0oVo49hf3lVPxLSuBrkPMKMIUh+g2HZ/7swyRNHbICLTxR7AUzTUber7CkOEDQt7RcJVNj5J'
        path  += 'ViAR7dWd7Rcievp6t6U0WlzZVW0K0ScNiMCbGJ6Vxql8nISzA1H2GYicz0IE7PqGlT6b1h6F2BmqF9wj'
        path  += 'bwYQvTx/MLk2IZowqtoQeQYQBZ+GSLJ0bNOaw02rIE/6/wtJGvaCfdOzgos8ohWIGkOIBgDG3t1ZaLJm'
        path  += 'GK8ebcjVX/OHscAQgUo6FDgjLjJcImkToov5/Mb+YyKwFNq8j4Rrm5+bopPQkFkoBqoXYRhV4QlLCxAx'
        path  += 'vR5hfwSiYDtEsgEsfr7VY7P45+Xn22w1ZnvRhKJTHTQoddF8pQ2INMs9O7nXazkYdiYbaStEYMfGzLiH'
        path  += 'uDSifTCkKFk2ZORHL+J9TxoXFOJ3XJFdiIQ40dXRyiRpj9wg7VGapD02QwSc0l+VS5rinl52ybuI//bN'
        path  += 'bb4aIlQkJFjAUONh70A5iRWICDxWaL++UJov1U/AXlWqXOlsA6KDOIYT87UQKobX/Tr9SfzkoodRJmnI'
        path  += '5BE/CXxouV4fVJNYgagCjxXY8xF4HyjcWhHF37qOfinIdohURzJURbgygkUl3zm4WH7WFYfVhiZJQ0Yx'
        path  += '/aSzf8zC5wk7YVmCCLj8S+K++lkm9AB7yoCMq/7M49UiDi98Xq/Y9qxA5HYvTHTNibHssJBM3AJcPvaN'
        path  += 'vKFCaIUfPYe2Q29Mow3NKYrqVX8gqxDJdvbuKsYS3g+MVcs+8J8gOvOS11UHxXXndLU8tiYrEFE4bT+W'
        path  += 'AeCoK8YnLw76+KGDazKrEJmfU8HoCSJefB+v2Jb4oTufwQy3U94UIksQcYo2nuuygSJGphBlgAlsE4Ah'
        path  += 'sgsR6XdI95rQv96XS0vQCNKal7EuyuuveeQ8q8ZnvsqsJlsQkd+96agqt/lJQxeCEOmbItfwEJzCMkSG'
        path  += 'j1XnLiF6WZAIFqxyF+a0s4aMnj2IiNgPGJJO2BfmVu1E+hBBR1EZnsg4ufYhwhQhhkSINJdGn4m0KRoD'
        path  += 'sgkR+YbnVQ0HkPVxL5PxCY76EEH/lBiaLka2IeLC1vtjYqA+Leg1GOJSriFXe2QXIiK36PQRyhSpQzer'
        path  += '9BtiLulDhG3nZHq4pGsTItyxuA9AkWOuxKiPl9GzSrnmupYg4uImrBlWx71i4Vp9vXvQaahhB7A/kXYa'
        path  += 'Vj/REgJ9qxBx8YsKdEfDwpVK2aC81lIq2mNEz+KlZV2PL5r1MXaIrEAEJPyeyrk0S/nvs+Tgm3Td4YAb'
        path  += 'Cun/Jl+90XCpGCtwbwL5p507FgAAAAAY5G89i10F0vvofQAAAAAAAAAI+UD6fNsbckgAAAAASUVORK5C'
        path  += 'YII='
        background: s("url('%s%s') %s", rq(prefix), rq(path))

        background-size: 300px
        padding-left: 300px
        padding-top: 69px
        height: 0
        width: 0
        margin-top: .2rem
      }
    }
  }
  #banner {
    height: 3rem
  }
  .nav {
    margin-top: 0
    margin-bottom: 1rem
    ul {
      font-size: 10px
      margin: 0
      padding: 0
    }
    li {
      font-size: 15px
      border-color: bg5
    }
    &#metanav {
      ul {
        if (align-left) {
          text-align: left
          margin-left: -.7rem
        }
        else {
          text-align: right
          margin-right: -1.9rem
        }
        margin-top: -3.133rem
      }
      li {
        font-size: 14px
      }
      form.trac-logout {
        button {
          background: t
          font-family: var(--font_family_2)
          font-size: 100%
          color: v19
          border-bottom: .1rem dotted v98
          cursor: pointer
          &::-moz-focus-inner {
            border: 0
            padding: 0
          }
          &:hover {
            background-color: t
            color: v96
            bsh: none
          }
          &:active {
            position: static
          }
        }
      }
      .first {
        color: v96
      }
    }
  }
  @keyframes wut {
    0% { padding-bottom: 1.8rem }
    50%, 100% { padding-bottom: .55rem }
  }
  #main {
    width: 1000px
  }
  #mainnav {
    border-color: t
    margin-top: 4rem
    bsh:none
    ul {
      if (align-left) {
        text-align: left
        margin-left: .01rem
      }
      else {
        text-align: right
        margin-right: -1.4rem
      }
      font-size: 12px
    }
    li {
      background: bg4
      border: 1px solid bg0
      font-size: 120%
      padding: .6em 0
      &:hover {
        border-width: 1px
      }
      &:nth-child(3) {
        display: none
      }
    }
    .first {
      border-top-left-radius: 4px
      border-bottom-left-radius: 4px
      :link {
        border-top-left-radius: 4px
        border-bottom-left-radius: 4px
      }
    }
    .last {
      border-top-right-radius: 4px
      border-bottom-right-radius: 4px
      margin-right: 0
      :link {
        border-top-right-radius: 4px
        border-bottom-right-radius: 4px
      }
    }
    :link {
      border: 1px solid bg0
      border-left: 0
      border-right: 0
      bsh: none
      color: v98
      padding: .6em 1.5em
      margin-bottom: 1rem
      tsh: 0 1px 0 var(--txt-shadow)
      &:hover {
        background: t
        color: v09
        bsh: none
        border-bottom: 4px solid v06
        padding: .6em 1.5em
        animation: wut .5s ease
      }
    }
    .active {
      border-left: 1px solid bg0
      border-right: 1px solid bg0
      border-top: 0
      border-bottom: 0
      :link {
        background: none
        border-bottom: 4px solid v06
        color: v09
        tsh: -3px solid v99
        padding: .6em 1.5em
        tsh: 0 1px 0 var(--txt-shadow)
        &:hover {
          color: v98
          tsh: 0 2px 0 var(--txt-shadow)
          animation: none
        }
      }
    }
  }
  #banner form#search {
    padding-bottom: 4rem
    input, label {
      display: none
    }
  }
  #pagepath {
    display: none
  }
  #ctxtnav {
    ul {
      if (align-left) {
        text-align: left
        margin-left: -.5rem
      }
      else {
        text-align: right
        margin-right: -1.6rem
      }
      .next, .prev, .missing {
        font-size: 15px
        vertical-align: middle
      }
    }
    li {
      margin: .5rem 0 .8rem
      color: v98
      ul {
        background: t
        color: v97
        border: 1px solid
        padding: 0
        display: inline
        margin: 0
      }
      li {
        padding: 0
        :link {
          padding: 0 1em
          &:hover {
            background: bg4
            color: v95
          }
        }
        :visited {
          padding: 0 1em
          &:hover {
            background: bg4
            color: v95
          }
        }
      }
    }
  }
  .trac-nav {
    font-size: 80%
  }
  .trac-topnav {
    font-size: 14px
  }
  .trac-workflow-graph canvas {
    filter: invert(.9) hue-rotate(180deg)
    mix-blend-mode: lighten
  }
  .trac-ticket-buttons {
    margin-top: -.8rem
  }
  #altlinks {
    margin-top: 1em
    h3 {
      font-size: 14px
    }
    ul {
      list-style: none
      margin: 0
      padding: 0
    }
    li {
      border-right: 1px solid bg5

      :link {
        color: v96
        border: none
        font-size: 75%
        &:hover {
          color: v09
        }
      }
      &:visited {
        background-repeat: no-repeat
        color: v98
        border: none
      }
      a.ics {
        padding-left: 22px
      }
      a.rss {
        padding-left: 20px
      }
    }
    li.last {
      border-right: none
    }
  }
  #footer {
    color: v98
    font-size: 10px
    width: 1000px
    :link {
      color: v97
      &:hover{ color: v09 }
    }
    :visited {
      color: v86
    }
    hr {
      display: block
    }
    #tracpowered {
      &:hover {
        background: t
      }
      img {
        filter: invert(.9) hue-rotate(180deg) saturate(5)
        mix-blend-mode: lighten
      }
    }
    p {
      margin: 0
    }
    p.left {
      float: left
      margin-left: 1em
      padding: 0 1em
      border-left: 1px solid bg4
      border-right: 1px solid bg4
    }
    if (sdetails) {
      p.right {
        &::before {
          content: 'Styled by:' + stinfo + '\00A0\|\00A0'
          color: v97
        }
      }
    }
  }
  #diffrev, #jumprev, #jumploc {
    float: left
    margin: .5rem .2rem
  }
  #content {
    min-width: 1000px
    .paging {
      font-size: 110%
      .current {
        background: v04
        border: 1px solid v05
        color: v99
        padding: .1rem .3rem
        tsh: 0 1px 0 bg0
        bsh: 0 0 10px 0 v04
        rad: .2rem
      }
      :link {
        border: 1px solid bg5
        background: t
        color: v98
        padding: .1rem .3rem
        rad: .15rem
        tsh: 0 1px 0 bg0
        &:hover {
          background: v04
          color: v99
          border-color: v05
          tsh: 0 1px 0 bg0
        }
      }
      :visited {
        border: 1px solid bg4
        background: t
        color: v98
        padding: .1em .3em
        tsh: 0 1px 0 bg0
        &:hover {
          background: t
          color: v98
          border-color: bg4
          tsh: 0 1px 0 bg0
        }
      }
      .previous {
        a {
          font-size: 150%
          font-weight: bold
          border: none
          &:hover {
            background: t
            color: v98
          }
        }
      }
      .next {
        a {
          font-size: 150%
          font-weight: bold
          border: none
          &:hover {
            background: t
            color: v98
          }
        }
      }
    }
    &.search {
      // re-align this
      text-align: center
      #fullsearch {
        margin-top: -1rem
        padding: .2rem .2rem 1rem 2rem
        rad: 4px
        .filters {
          color: v97
          margin: 0 0 0 -7.7rem
          text-align: center
        }
        input#q {
          vertical-align: -.1433rem
        }
      }
      hr {
        max-width: 845px
        margin: 1rem auto
        border-color: bg5
      }
      #results {
        text-align: left
        max-width 780px
        width: @max-width
        margin: 0 auto
        dt a {
          color: v07
          &:hover { color: v09 }
        }
        dd {
          font-size: 100%
          line-height: 1.4em
        }
        .trac-author, .date {
          color: v46
        }
      }
      .trac-help {
        margin-top: 1rem
        font-size: 12px
      }
      // lets do away with the obvious
      // really cant be placed before without a lot of hacking
      h1 {
        label[for="q"] {
          display: none
        }
      }
      h2 {
        max-width: 800px
        margin: .8rem auto
      }
      .paging {
        max-width: 800px
        margin: 1.3rem auto
        font-size: 96%
        line-height: 2em;
      }
    }
    &.changeset {
      margin: 0 auto 0
      max-width: 840px

      h1 {
        max-width: 835px
        margin: 0 auto  1rem
        font-size: 120%
      }
      #overview {
        max-width: 980px
        margin: 0 -2rem 0
        dt {
          max-width: 835px
          margin: auto .6rem auto auto
        }
        dd {
          max-width: 835px
          //margin: auto -4rem auto auto
        }
      }
    }
    &.ticket {
      width: 830px
      max-width: 830px
      margin: -1rem auto auto auto
      // fix images oveflowing out of bounds.
      p a[href*='/attachment/'] img {
        max-width: 99%
      }
      /.attachment .image-file img {
        max-width: 99%
      }
      #ticket {
        max-width: 1000px
        margin: .3rem auto auto auto
      }
      .trac-nav a {
        font-size: 14px
        margin-right: -6px
        &#trac-up-attachments {
          padding-right: 8px
        }
        &#trac-up-view {
          margin-left: -1px
          padding-right: 8px
        }
      }
    }
    &.timeline {
      margin: 0 auto
      max-width: 840px
      h1 {
        font-size: 120%
        margin-top: -1.2rem
        margin-bottom: -1rem
      }
      #prefs {
        &[action="#"] {
          padding: 1rem 1rem 1rem
          margin-right: 0
          margin-top: 5rem
          if (sticky_prefs) {
            top: 2rem
            position: sticky
          }
        }
        fieldset label:nth-child(3) {
          display: none
        }
      }
      dt.highlight {
        background-color: bg4
        border: 1px solid bg5
        rad: 4px
      }
    }
    &.roadmap {
      h1 { display: none }
      form#prefs {
        display: none
      }
    }
    &.browser {
      max-width: 980px
      margin-left: auto
      margin-right: auto
      h1 {
        font-size: 120%
        .pathentry:not(.first) {
          background: var(--code-pr-bg)
          rad: 4px
        }
      }
      .pathentry {
        &.sep {
          color: v97
        }
      }
    }
    &.log {
      h1 {
        font-size: 120%
        .pathentry:not(.first) {
          background: var(--code-pr-bg)
          rad: 4px
        }
      }
    }
    &.report {
      margin: 0 auto
      max-width: 880px
    }
    &.query {
      fieldset#filters {
        tr.actions {
          td.or {
            text-align: left
          }
        }
      }
    }
    &.prefs {
      margin: 0 auto
      width: 1000px
      h1 {
        max-width: 900px
        margin: 0 auto
        font-size: 120%
        margin-bottom: 1rem
      }
      p {
        max-width: 900px
        margin: 0 auto
      }
    }
    &.about {
      max-width: 900px
      margin: 0 auto
    }
    &.narrow #trac-wiki-expander {
      margin-top: .2rem
      &::before {
        content: '\01F81E'
        font-size: 1.4rem
      }
    }
    #trac-wiki-expander {
      margin-top: .2rem
      &::before {
        content: '\01F81C'
        font-size: 1.4rem
        color: v98
      }
    }
    h1, h2, h3, h4, h5, h6 {
      color: fg1
      &.section {
        background: t
        border-bottom: 1px solid bg5
        color: v97
        padding: .3em .3em .2em .5rem
        &:target {
          background: bg4
          bsh: none
          rad: 4px
          border-color: t
          margin-left: -1.6rem
          padding: .1em 0 .1em .5rem
        }
      }
      code {
        color: v69
      }
      .numresults {
        color: v98
        font-size: 90%
      }
    }
    &.prefs {
      #tabs li {
        background: v04
        border-color: v06
        border-bottom: 1px solid t
        padding: .5em 1.5em .4em
        rad: 4px .26em 0 0
        margin-top: .09em
        transition: transition
        tsh: 0 1px 0 bg0
        cursor: pointer
        &.active {
          background: bg2
          border: 1px solid bg5
          border-bottom: 1px solid t
          color: v99
          rad: 4px .26em 0 0
          &:hover {
            background: bg2
            border: 1px solid bg5
            border-bottom: 1px solid t
            color: v99
            margin-top: .09em
            rad: 4px .26em 0 0
          }
        }
        &:hover {
          background: v04
          border: 1px solid v06
          border-bottom: 1px solid t
          color: v99
          margin-top: 0
          rad: 4px .26em 0 0
        }
        :link {
          color: v99
          text-decoration: none
          &:hover {
            color: v99
          }
        }
      }
      #tabs :link {
        &:hover {
          border-color: bg4
          color: v97
        }
      }
      #tabcontent {
        background: bg2
        border: 1px solid bg4
        padding: 15px 10px 15px 10px
        margin-bottom: .5rem
        rad: 4px
      }
      #userprefs {
        padding-left: 1em
        div.code pre {
          width: 97% i
          margin-left: -.1rem
          margin-top: .1rem
        }
        .hint {
          margin-top: .2rem
          margin-bottom: 1rem
          margin-left: -.9rem
        }
        .field {
          width: 21rem
          box-sizing: border-box
          label {
            input {
              float: right
              margin-top: -.4rem
            }
          }
        }
      }
      /#acctmgr_passwd_reset, /#acctmgr_registerform {
        div {
          width: 21rem
          margin-bottom: 1rem
          label input {
            float: right
            margin-top: -.4rem
          }
        }
      }
      /#acctmgr_registerform {
        fieldset {
          width: 93%
            div {
             width: 21rem
            label input {
              float: right
              margin-top: -.4rem
              &[name='spf_homepage'] {
                width: 50%
              }
            }
          }
        }
        p.hint {
          margin-top: 2em
          padding: 8px
          background: v11
          rad: 4px
          border: 1px solid v16
          white-space: nowrap
          width: 163%
          margin-bottom: -.8em
        }
        .buttons {
          margin-top: -1em
          margin-bottom: -.5em
        }
      }
      #acctmgr_delete_account {
        .field {
          width: 21rem
          box-sizing: border-box
          label {
            margin-left: 1em
            input {
              float: right
              margin-top: -.4rem
            }
          }
        }
        /#tabcontent > h2:nth-child(3) {
          margin-left: .5em
        }
      }
    }
    &.wiki {
      width: 940px
      #wikipage {
        margin-left: -2rem
        max-width: 57rem
      }
      &.narrow {
        #wikipage {
           margin-left: -2rem
          max-width: 52rem
        }
      }
    }
    &.login {
      background: bg2
      border: 1px solid bg4
      margin: 0 auto
      margin-top: -1.5rem
      padding: .6rem 1.5rem 0 1rem
      min-width: 15rem
      if (align-left) {
        float: left
        margin-left: .1rem
      }
      else {
        float: right
        margin-right: -1.15rem
      }
      rad: 4px
      input.textwidget {
        width: 99%
        margin-left: -.1rem
      }
      h1 { font-size: 17px }
    }
    p, label { color: v98 }
    &.ticket .trac-topnav {
      text-align: left
      color: v98
      font-weight: 900
    }
    &.wiki {
      h1:not(.section) {
        margin-left: 3rem
        font-size: 14px
      }
    }
    &.register {
      padding-left: 1em i
      h1 {
        background: bg4
        font-size: 105%
        padding: .4em
        margin-left: -1em
        rad: 4px
        margin-top: -1.5em
      }
    }
  }
  #altlinks h3 {
    color: v96
  }
  div.trac-content {
    border: 0
    rad: 0
    bsh: none
    p, li {
      color: v97
      line-height: 1.8em
    }
    span[style="color: grey"] {
      color: v97 i
      font-style: italic i
    }
  }
  .trac-author-anonymous {
    font-style: italic
  }
  .trac-author-none {
    font-style: italic
  }
  .trac-author-user {
    font-weight: bold
    color: v67
  }
  .uinohelp {
    #help {
      display: none
    }
  }
  #help {
    clear: both
    color: v97
    font-size: 90%
    margin: 1em
    text-align: right
    &:link {
      cursor: help
    }
    &:visited {
      cursor: help
    }
    hr {
      display: none
    }
  }
  .trac-nodatetimehint {
    .trac-datetimehint {
      display: none
    }
  }
  .foldable {
    :link {
      border: 0
      bsh: none
      color: bg1
      tsh: none
      background: none
      &::before {
        content: '\23F7'
        margin-left: -1rem
      }
      &:hover {
        background-color: t
      }
    }
    :visited {
      border: none
      rad: 4px
      bsh: none
      color: bg1
      tsh: none
      &:hover {
        background-color: t
      }
    }
  }
  .collapsed {
    > .foldable {
      :link {
        background: none
        &::before {
          content: '\23F5'
          margin-left: -1rem
        }
      }
      :visited {
        background: none
        &::before {
          content: '\23F5'
          color: v85
          margin-left: -1rem
        }
      }
    }
    legend.foldable {
      background: t
    }
  }
  .expander {
    background: none i
    &::before {
      content: '\23F5'
      font-size: 130%
      color: v98
      margin-left: -1rem
      &:hover {
        color: v09 i
      }
    }
  }
  .expander.expanded {
    background: none i
    &::before {
      content: '\23F7'
      font-size: 130%
      margin-left: -.8rem
    }
  }
  #prefs {
    background: bg2
    border: 1px solid bg4
    rad: 4px
    bsh: none
    font-size: 85%
    margin: auto -.1em 1em
    input {
      font-size: 12px
      vertical-align: middle
    }
    select {
      vertical-align: middle
    }
    fieldset {
      background: t
      border: none
      bsh: none
      margin: .5em
      padding: 0
      legend {
        background: t
        color: v98
        font-size: 12px
        font-weight: normal
        margin: 0 0 0 -1.5em
        padding: 0
      }
      &#ignore legend {
        margin: 0 0 0 -.8em
        padding: .1rem 0 .4rem 0
      }
    }
    .buttons {
      text-align: right
    }
    &[action="#"] {
      padding: 1rem 1rem 1rem
    }
  }
  #ticketbox {
    background: bg2
    border: 1px solid bg4
    rad: 4px

    div.description h2 {
      border-bottom: 1px solid bg4
      color: fg1
    }
    > h1, > h2 {
      color: v07
    }
    table.properties {
      clear: both
      border-top: 2px solid bg5
      > tbody > tr > th {
        color: v07
        &.missing {
          color: v37
        }
      }
      > tbody > tr {
        border-bottom: 2px dotted bg5
      }
    }
    .date {
      color: v37
    }
    &.ticketdraft, /.ticketdraft {
      background: bg3
      border-color: bg4
      max-width: 96%
      margin: 2rem -.09em 2rem .09em
      rad: 4px
    }
  }
  #ticketchange {
    .changes {
      background: bg0
      border-color: bg4
      color: v18
      rad: 4px
      float: right
      bsh: none
      margin: 2em 0 2.5em 3em
      padding-top: .3rem
    }
    h3 {
      &.change {
        background: bg1
        color: v08
        font-size: 110%
        padding: 5px 0 10px 15px
      }
      &:target {
        background: v02
        color: v98
        padding: 8px
        font-size: 110%
      }
    }
    .comment {
      line-height: 1.4em
      font-size: 95%
    }
  }
  #changelog {
    .changes {
      background: bg0
      border-color: bg4
      rad: 4px
      bsh: none
      color: v18
      float: right
      font-size: 110%
      margin: 0 0 .8em 2em
    }
    .change {
      background-color: bg2
      border: 1px solid bg4
      margin-top: 15px
      rad: 4px
      padding: 2px
      h3 {
        padding: 5px 0 10px 15px
        &.change {
          background: bg1
          color: v08
          font-size: 110%
          padding: 5px 0 10px 15px
        }
        &:target {
          background: v02
          color: v98
          padding: 8px
          font-size: 110%
        }
      }
    }
    .comment {
      line-height: 1.4em
      font-size: 95%
      ol li { color: v97}
    }
    .trac-lastedit {
      color: v96
      :link {
        color: v09
        &:hover {
          color: v08
          text-decoration: underline
        }
      }
    }
  }
  .foldable :link, .foldable :visited {
    border-color: bg4
    rad: 4px
    bsh: none
    color: v98
    tsh: none
    padding: .2em .5em .3em 20px
  }
  .report {
    #prefs {
      margin-top: -2.5rem
    }
    div.reports {
      h2 {
        padding: 0.2em .3em .1em 0
        border-bottom: 2px solid bg4
        bsh: none
      }
      h3 {
        em {
          color: v08
        }
        :link, :visited { color: v97 }
      }
    }
    #trac-sort-order {
      padding-top: .6em
      a.desc {
        background-image: none
        font-size: 14px
        &::after {
          content: ' \2BC6'
        }
      }
      a.asc {
        background-image: none
        font-size: 14px
        &::after { content: ' \2BC5' }
      }
    }
  }
  h2.report-result {
    background: t
    bsh: none
    border-bottom: 2px solid bg4
    margin: 0 0 .8em 0
    rad: 0
  }
  .tickets {
    tbody tr {
      border-color: bg4
      &:hover {
        background: bg2
        color: v97
      }
    }
    tr.trac-columns th {
      border: 1px solid bg4
      border-bottom-color: bg4
      background: bg3
      font-size: 14px
    }
    tbody tr.fullrow td,
    tbody td.fullrow {
      color: v97
      line-height: 1.4em
    }
  }
  table.tickets caption.trac-group {
    border: 0
  }
  h1, h2 {
    .numrows { color: v97 }
  }
  #info {
    background: bg2
    border-color: bg4
    border-collapse: unset
    color: v98
    rad: 4px
    th {
      font-size: 100%
      padding: .8em .8em
      rad: 4px
    }
    td {
      font-size: 85%
      line-height: 1.4em
      padding: 2px .5em
      vertical-align: top
      &[colspan="2"] {
        strong { margin-left: .6rem }
      }
    }
    td.message {
      width: 100%
      p { padding: .1em .8em }
    }
    .message {
      ul {
        padding: 0
        margin: 0 2em
      }
      p {
        margin: 0
        padding: 0
      }
    }
    .props { color: v29 }
  }
  .trac-help {
    color: v96
    font-size: 65%
    text-align: center
    margin: 1rem 0
  }
  a.trac-diff {
    &::after { content: '\25B3' }
  }
  #diff-legend {
    margin-left: -1rem
    margin-bottom: .5rem
  }
  #file-legend {
    margin-left: -.9rem
  }
  .diff {
    margin-left: 1rem
    li.entry {
      background: bg2
      border: 1px solid bg4
      rad: 4px
      bsh: none
      min-width: 1000px
      margin: 1rem -2.09rem
    }
    pre {
      background: var(--code-pr-bg)
      border-color: bg4
      padding-left: .5em
      color: var(--code-pr-tc)
      font-size: 14px
      // unified diffs this goes out of box upstream bug
      // e.g. https://svn.dd-wrt.com/attachment/ticket/5853/initialize.fw.patch
      white-space: pre-wrap
    }
    h2 {
      color: v98
      .switch {
        color: fg0
        span {
          border-left: 1px solid bg5
          &.active {
            color: v08
          }
        }
      }
    }
    table.trac-diff {
      border: 1px solid bg4
      color: v98
      thead th {
        background: bg3
        border-top: 1px solid bg4
        color: v98
      }
      th {
        border-right-color: bg4
        border-top: 0
        &:hover {
          c: v99 0 bg3
        }
      }
      thead td {
        background: bg2
        border: 1px solid bg5
      }
      td {
        background: var(--code-pr-bg)
      }
      tr:hover th {
        background: bg3
      }
      tbody.mod tr:hover td,
      tbody.add tr:hover td,
      tbody.rem tr:hover td {
        background: var(--rgba-bg2-5)
        del {
          background: v16
        }
        ins {
          background: v43
        }
        &.r span {
          background: v43
        }
        &.l span {
          background: v16
        }
      }
      .unmod {
        tr:hover td {
          background: rgba(50, 50, 50, .5)
          &.r {
            background: rgba(50, 50, 50, .5)
          }
          &.l {
            background: rgba(50, 50, 50, .9)
          }
        }
        tr td span {
          padding: 2px 0
          margin-bottom: -4px
        }
      }
      tbody {
        &.skipped {
          td {
            background: bg3
            border: 1px solid bg4
          }
          tr th {
            background: bg4
            &:hover {
              background: bg4 i
            }
          }
        }
        // https://svn.dd-wrt.com/changeset/48756
        &.rem .l del, &.add .r ins {
          overflow: hidden
          text-overflow: ellipsis
          max-width: 100%
          display: inline-block
          padding: 2px 0
          margin-bottom: -4px
        }
      }
      &.inline {
        border: 0
      }
    }
    .l span, .r span {
      overflow: hidden
      text-overflow: ellipsis
      max-width: 100%
      display: inline-block
    }
    table.inline tbody {
      &.rem td.l, &.mod td.l {
        background: v11
        border-color: v11
      }
      &.mod td del {
        background: v13
        color: v99
      }
      &.mod td.r, &.add td.r {
        background: v40
        border-color: v40
      }
      &.mod td ins {
        background: v42
        color: v99
      }
      th {
        background: bg2
        color: v97
      }
      tr:hover td {
        background: bg2
      }
      &.mod span {
        padding: 2px 0
        margin-bottom: -4px
      }
    }
    table.sidebyside tbody {
      &.mod td.l, &.mod td.r {
        background: v31
      }
      &.mod del, &.mod ins {
        background: v35
        color: v99
      }
    }
    dd { color: v98 }
  }
  .chglist .edit, #overview .mod {
      background: v35
      rad: 4px
    }
  .chglist .delete, #overview .rem {
    background: v15
    rad: 4px
  }
  .chglist .add, #overview .add {
    background: v45
    rad: 4px
  }
  .diff .legend {
    dt[class*] {
      height: 14px
      width: @height
      border: 1px solid bg5
      rad: 4px
    }
    dd { margin-top: .1rem }
    dt.unmod {
      background: var(--code-pr-bg)
      rad: 4px
    }
    dt.mod {
      background: v35
      rad: 4px
    }
    dt.rem {
      background: v15
      rad: 4px
    }
    dt.add {
      background: v45
      rad: 4px
    }
    dt.cp {
      background: v75
      rad: 4px
    }
  }

  pre.diff {
    .rem {
      background: v11
      border: 1px solid v11
      &:hover {
        background: v12
      }
    }
    .add {
      background: v40
      border: 1px solid v40
      &:hover {
        background: v41
      }
    }
    span:hover {
      background: rgba(50, 50, 50, .5)
    }
  }
  table {
    &.code {
      border-color: bg4
      bsh: none
      thead th {
        background: bg2
        border-top: 1px solid bg4
        color: v98
      }
      th {
        border-right: 1px solid bg5
        border-bottom: 0
        font-size: 100%
        &.blame {
          padding: 6px 0
          &[style*='background-color: rgb(136\, 136, 255)'] {
            c: 0 0 v78
          }
          &[style*='background-color: rgb(255\, 136, 136)'] {
            c: 0 0 #4a100a
          }
          a { color: v99 }
        }
      }
      td {
        background: var(--code-pr-bg)
        color: var(--code-pr-tc)
        vertical-align: middle
      }
      tbody th {
        background: bg2
        color: v96
        &:hover {
          background: bg3
        }
        :link:not([href*="#"]) {
          color: v09
          &:hover {
            color: v07
          }
        }
        :link[href*="#"] {
          color: v95
          &:hover {
            color: v98
          }
        }
        :visited {
          &:hover {
            color: v75
          }
        }
      }
      tbody tr {
        &:hover td {
          background: rgba(50, 50, 50, .9)
        }
      }
      .gi, .gd {
        padding: 6px 0
        vertical-align: -.12rem
      }
      tr:hover .gi {
        background: var(--v4-3)
      }
      tr:hover .gd {
        background: v16
      }
    }
    .trac-clause .status .inlinebuttons {
      input[type="button"] {
        background: bg4
        border-color: bg5
        height: 24px
        width: @height
        font-weight: 900
        &:hover {
          background: v06
          border-color: v06
          bsh: 0 0 10px 0 v04
        }
      }
    }
  }
  .wikipage {
    padding-left: 18px
    h1, h2, h3 {
      margin-left: -18px
    }
    table {
      h1, h2, h3 {
        margin-left: 0px
      }
    }
  }
  div.compact {
    > p {
      &:first-child {
        margin-top: 0
      }
      &:last-child {
        margin-bottom: 0
      }
    }
  }
  .timeline {
    h2 {
      background: bg4
      border: 1px solid bg5
      bsh: none
      tsh: 0 1px 0 bg0
      rad: 4px
    }
    dt {
      .time {
        color: v97
        &:hover {
          color: v09
        }
      }
      em { color: v09 }
      :link, :visited {
        color: v98
        padding: 0 20px 20px 27px
      }
      :link:hover, :visited:hover {
        background-color: t
        color: v09 i
      }
      .trac-author {
        color: v95
      }
      > :link, > :visited {

      }
      &.changeset {
        background-image: none i
        a {
          background-image: none i
          margin-left: -25px
          &::before {
            content: '\00B1'
            font-size: 18px
            color: v98
            padding-right: 3px
            vertical-align: -.07rem
            font-weight: 900
          }
        }
      }
      &.closedticket {
        background-image: none i
        a {
          background-image: none i
          margin-left: -23px
          &::before {
            content: '\2714'
            font-size: 16px
            color: v47
            padding-right: 3px
            font-weight: 900
          }
        }
      }
      &.newticket, &.reopenedticket {
        a {
          background-image: none i
          margin-left: -23px
          &::before {
            content: '\2728'
            font-size: 16px
            color: v47
            margin-right: -4px
            rotation: 80deg
          }
        }
      }
    }
    dd {
      color: v97
      font-size: 90%
      margin: 0 0 auto 2.5em
    }
    dl.unread {
      border-left: .2rem solid v43
      rad: 2px
    }
  }

  #delete-confirm {
    li {
      list-style-type: square
    }
  }
  .wiki-toc {
    background: bg3
    rad: 3px
    border-color: bg4
    bsh: none
    font-size: .8rem
    ol {
      ol {
        padding-right: 1.2em
      }
    }
    .active {
      background: v02
      rad: 4px
      padding: 2px
      margin-left: -5px
      margin-right: -5px
      a { color: v98 }
    }
    &[style] {
      background: bg2 i
      rad: 3px i
      border-color: bg4 i
      margin-top: -8.5rem
      margin-right: -13.8rem
      margin-bottom: 9.5rem
    }
    h4.section {
      color: v98
    }
    li {
      padding-top: 3px
    }
    ul li {
      padding-top: 0
    }
  }
  a.missing {
    color: v97
    :link {
      color: v97
    }
    :visited {
      color: v97
    }
    &:hover {
      color: v98
    }
  }
  span.missing {
    color: v97
  }
  a.forbidden {
    color: v97
  }
  span.forbidden {
    color: v97
  }
  a.closed {
    :link {
      text-decoration: line-through
    }
    :visited {
      text-decoration: line-through
    }
  }
  span.closed {
    text-decoration: line-through
  }
  .important {
    background: v11
    border: 2px dashed v15
    color: v98
  }
  dl.wiki {
    dt {
      font-weight: bold
    }
  }
  dl.compact {
    dt {
      float: left
      padding-right: .5em
    }
    dd {
      margin: 0
      padding: 0
      color: v98
    }
  }
  pre.wiki {
    background: var(--code-pr-bg)
    border: 1px solid bg4
    bsh: none
    rad: 0.2em
    margin: 1em 1.8em 1em .8em
    padding: .55rem
    font-family: monospace
    clear: right
  }
  pre.literal-block {
    background: var(--code-pr-bg)
    border: 1px solid bg4
    bsh: none
    rad: 4px
    margin: 1em 1.75em
    padding: .25em
    overflow: auto
  }
  div.wiki-code {
    margin: 1em 1.75em
  }
  code {
    color: v98
    border: 1px solid bg5
    background: var(--code-pr-bg)
    padding: 2px 5px 2px 5px
    rad: 4px
  }
  tt {
    color: v98
    border: 1px solid bg4
    rad: 4px
    padding: 0 0.3em
    background: bg2
  }
  blockquote.citation {
    margin: -0.6em 0 0 0
    border-style: solid
    border-width: 0 0 0 3px
    padding-left: .5em
    border-color: bg5
  }
  .citation {
    blockquote.citation {
      border-color: bg4
    }
    .citation {
      blockquote.citation {
        border-color: bg4
      }
      .citation {
        blockquote.citation {
          border-color: bg4
        }
      }
    }
  }
  li {
    blockquote.citation {
      margin-top: 0
    }
  }
  table.wiki {
    border: 1px solid bg4
    bsh: none
    rad: 4px
    border-collapse: separate
    td {
      border: 1px solid bg4
      padding: .6em .25em
      &[style="background: #eef"] {
        background: bg0 i
      }
    }
    th {
      border: 1px solid bg4
      padding: .6em .25em
      background-color: bg2
      rad: 4px
    }
    tbody {
      tr.even {
        background-color: bg0
        rad: 4px
      }
      tr.odd {
        background-color: bg1
        rad: 4px
      }
    }
  }
  hr { border-color: bg5 }
  .fullrow .wikitoolbar {
    padding-top: .5em
  }
  .wikitoolbar {
    margin-top: .2em
    border: 1px solid t
    rad: 4px
    :link {
      border: 1px solid t
      border-left-color: t
      filter: invert(.8) contrast(2) brightness(2)
      mix-blend-mode: exclusion
      transition: transition
      // fix alignment of sprite
      height: 14px
      margin-top: -.3rem
      &:hover {
        background-color: t
        border: 1px solid t
        filter: invert(.9) sepia(1) saturate(2) contrast(4)
      }
    }
    :visited {
      border: 1px solid v75
      border-left-color: @border_left_color_1
      filter: none
      &:hover {
        background-color: t
        border: 0
        filter: hue-rotate(180deg)
      }
    }
    // fix upstream missalinmnet of sprite globe/url
    a.trac-wikitoolbar-link {
      background-position: 0 -49px
    }
  }
  .trac-change-panel {
    margin-top: 1em
  }
  div.trac-grip {
    background: bg0
    border: 1px solid bg4
    rad: 0
    transition: transition
    &::after {
      content: ''
      bottom: 1px
      margin: 1px 8px
      display: block
      border-top: 2px dotted v05
    }
    &:hover {
      border-color: v03
      bsh: 0 0 5px 0 v04
    }
  }
  #attachments {
    > div.attachments {
      padding: 0 0 1em 1em
      > p {
        float: right
        margin: .4em 0
      }
    }
    dl.attachments {
      margin-left: 2em
      padding: 0
    }
    dt {
      color: v98
      display: list-item
      list-style: square
    }
    dd {
      font-style: italic
      margin-left: 0
      padding-left: 0
    }
    p {
      margin-left: 2em
      font-size: 90%
      color: v98
    }
  }
  .attachment {
    #preview {
      margin-top: 1em
    }
  }
  #preview {
    background: bg1
    &.searchable {
      margin-top: 1rem
      .diff li.entry {
        margin-left: -1.3rem
      }
      .code {
        th { padding: 3px }
      }
    }
  }
  .chglist {
    td {
      color: v96
      rad: 0
      &.diff {
        padding: .3em .5em
      }
      &.author { color: v97 }
      &.rev :link {
        color: v09
      }
    }
    tr {
      rad: 0
    }
  }
  table.listing {
    border-collapse: unset
    border-bottom: 1px solid bg4
    bsh: none
    th:first-of-type { rad: 4px 0 0 0 }
    th:last-of-type { rad: 0 4px 0 0 }
    thead {
      tr {
        background: bg2
        height: 2rem
      }
      th {
        border-color: bg4
        border-bottom-color: bg5
        padding: .5em .7em
        color: v97
        vertical-align: middle
        &:link {
          &:hover {
            background-color: t
          }
        }
        &:visited {
          &:hover {
            background-color: t
          }
        }
        a {
          border: none
          padding-right: 12px
        }
      }
    }
    th.asc {
      a {
        background-image: none
        font-size: 14px
        &::after {
          content: '\00A0\2BC5'
        }
      }
    }
    th.desc {
      a {
        background-image: none
        font-size: 14px
        &::after {
          content: '\00A0\2BC6'
        }
      }
    }
    tbody {
      td {
        border: 1px solid bg2
        padding: .3em .5em
        vertical-align: top
        transition: transition
        a {
          &:hover {
            background-color: t
          }
        }
      }
      th {
        border: 1px dotted bg5
        padding: .3em .5em
        vertical-align: top
        a:hover {
          background-color: t
        }
      }
      tr {
        border-top: 1px solid bg5
        &:hover {
          td {
            background: bg2 i
          }
        }
      }
      tr.even, tr.color-even {
        background-color: bg0
      }
      tr.odd, tr.color-odd {
        background-color: bg1
      }
      tr.focus {
        background: v02 i
      }
    }
    pre {
      white-space: pre-wrap
    }
    &.tickets {
      td { color: v97 }
    }
  }
  .trac-loading {
    filter: invert(.9)
  }
  .threading {
    padding-top: 3px
    .trac-in-reply-to {
      padding-right: 10px
    }
  }

  table.dirlist {
    max-width: 1000px
    margin-left: auto
    margin-right: auto
    // stop showing the whole text inside td when string is looooooong
    // we want the
    .change {
      max-width: 350px
      text-overflow: ellipsis
      overflow: hidden
    }
    td span.loading {
      filter: invert(.9)
    }
    td.change, td.author, td.rev,
    td.age, td.size {
      color: v97
    }
    td.age {
      border-right-width: 4px
    }
    td.name {
      a.dir {
        background: t
        margin-left: -30px
        &::before {
          content: '\1F4C2'
          font-size: 18px
        }
      }
      a.file {
        background: t
        margin-left: -22px
        &::before {
          content: '\1F4C4'
          font-size: 16px
          padding-right: 1px
        }
      }
      a.parent {
        background: t
        margin-left: -22px
        &::before {
          content: '\2BA4'
          font-size: 20px
          font-weight: 900
          color: v97
        }
      }
    }
    td.rev {
        a.chgset {
        background: none
        &::before {
          content: '\00B1'
          font-size: 18px
          font-weight: 900
          color: v98
          margin-right: -4px
        }
      }
    }
    th.change {
      max-width: 10% i
      width: @max-width
    }
  }
  #fieldhist {
    td {
      padding: 0 .5em
    }
    td.date {
      white-space: nowrap
    }
    td.diff {
      white-space: nowrap
    }
    td.version {
      white-space: nowrap
      text-align: center
    }
    td.author {
      white-space: nowrap
    }
    td.comment {
      width: 100%
    }
    .inlinebuttons {
      display: none
      float: right
    }
  }
  .suggestions {
    background: bg0
    border: 1px solid bg4
    color: bg1
    ul {
      font-family: var(--font_family_3)
      max-height: 20em
      min-height: 3em
      list-style: none
      margin: 0
      overflow: auto
      padding: 0
      width: 440px
    }
    li {
      background: bg0
      cursor: pointer
      padding: 2px 5px
    }
    li.selected {
      background: t
      color: v08
    }
  }
  #content.error {
    max-width: 800px
    margin: 1rem auto
    h1 {
      margin-bottom: 1rem
      font-size: 1rem
    }
    .message {
      background: v11
      border: 1px solid v15
      color: v98
      padding: .8em
      margin: 1em 0
      rad: 4px
    }
    div.message {
      pre {
        margin-left: 1em
        overflow: hidden
        white-space: pre-wrap
      }
    }
    form.newticket {
      display: inline
      textarea {
        display: none
      }
    }
    #traceback {
      margin-left: 1em
      :link {
        border: none
        var {
          font-family: font_family_4
        }
      }
      :visited {
        border: none
        var {
          font-family: font_family_4
          font-style: normal
          font-weight: bold
        }
      }
      div {
        margin-left: 1em
      }
      h3 {
        font-size: 95%
        margin: .5em 0 0
      }
      span.file {
        color: v98
        font-size: 85%
      }
      ul {
        list-style: none
        margin: .5em 0
        padding: 0
      }
      table {
        margin: .5em 0 1em
        &.code {
          td {
            white-space: pre
            font-size: 90%
          }
          tr.current {
            td {
              background: bg1
            }
          }
        }
      }
      th {
        font-size: 85%
        padding: 1px
        var {
          font-family: var(--font_family_4)
          font-style: normal
        }
      }
      td {
        font-size: 85%
        padding: 1px
        code {
          white-space: pre
        }
      }
      pre {
        font-size: 95%
      }
    }
    #tbtoggle {
      font-size: 80%
    }
  }
  #description li {
      color: v98
  }
  div.system-message {
    color: v98
    padding: .8em
    margin: 1rem auto
    max-width: 770px
    bsh: none
    pre {
      margin-left: 1em
      overflow: hidden
      white-space: pre-wrap
    }
    .trac-close-msg {
      background: v05
      color: v98
      border: 1px solid v06
      font-size: 14px
      margin: -.1rem -.1em .1em 1em
      padding: 0 .8em 0
      height: 1.4em
      tsh: 0 1px 0 bg0
      rad: 4px
      &:hover {
        background: v08
        color: v99
        tsh: 0 1px 0 bg0
        bsh: 0 0 10px v04
      }
    }
  }
  span.system-message {
    float: left
    background: v11
    padding: .2em
    margin: 1px
    rad: 4px
  }
  #warning.system-message {
    background: v11
    border: 1px solid v15
    rad: 4px
    margin: 1rem auto;
    max-width: 940px;
    li {
      list-style-type: square
    }
  }
  .warning.system-message {
    background: v31
    border: 1px solid v34
    margin: 1rem auto;
    max-width: 940px;
  }
  #notice.system-message {
    background: v41
    border: 1px solid v44
    rad: 4px
    li {
      list-style-type: square
    }
  }
  .notice.system-message {
    background: v41
    border: 1px solid v44
  }
  #content.about {
    a.logo {
      &#trac-logo {
        filter: invert(.9) hue-rotate(180deg) saturate(5)
        mix-blend-mode: lighten
      }
      &#python-logo {
        filter: invert(.9) hue-rotate(180deg)
        mix-blend-mode: lighten
      }
    }
    p.copyright {
      color: v97
    }
  }
  #environmentinfo {
    h2 {
      margin-top: 2em
    }
    table {
      margin: 1em
      width: auto
      th {
        border: 1px solid bg4
        font-size: 90%
        background: bg2
        font-weight: bold
        white-space: nowrap
      }
      td {
        border: 1px solid bg0
        font-size: 90%
      }
      td.file {
        color: v98
      }
      tr.disabled {
        th {
          color: v97
        }
        td {
          color: v97
        }
      }
    }
    #config {
      th {
        padding: 3px
      }
      tr.modified {
        background: v31
      }
      td.doc {
        padding: 3px 1em
      }
    }
  }
  .trac-placeholder {
    background: v95
  }
  .trac-autofocus {
    outline: none
    bsh: 0 0 4px 0 var(--box-shadow)
  }
  @media screen {
    a.ext-link {
      .icon {
        background: url(../extlink.gif) left center no-repeat
        padding-left: 15px
      }
    }
    a.mail-link {
      .icon {
        background: url(../envelope.png) left center no-repeat
        padding-left: 16px
      }
    }
    a.trac-rawlink {
      background: url('../download.png') right center no-repeat
      padding-right: 16px
      border-bottom: none
    }
    a.trac-ziplink {
      background: url('../download.png') right center no-repeat
      padding-right: 16px
      border-bottom: none
    }
    .searchword0 {
      background: v32
      color: v98
    }
    .searchword1 {
      background: v42
      color: v98
    }
    .searchword2 {
      background: v62
      color: v98
    }
    .searchword3 {
      background: v72
      color: v98
    }
    .searchword4 {
      background: v82
      color: v98
    }
  }
  @media print {
    :link, :visited {
      border-bottom: none
    }
    div.trac-content {
      bsh: none
    }
    .foldable {
      &:link {
        tsh: none
        bsh: none
      }
      &:visited {
        tsh: none
        bsh: none
      }
    }
  }
  div.code {
    background: t
    border-color: bg4
    bsh: none
    color: v90
    rad: 4px
    font-family: monospace
    pre {
      background-color: var(--code-pr-bg)
      color: v99
      border-color: bg4
      rad: 4px
    }
  }
  #anydiff input:not([name*='_path']) {
    margin: 0 -.5em 0 0
  }
  .image-file {
    background: bg2
    rad: 0 0 4px 4px
    img { background: var(--rgba-bg2-1) }
  }
  // Better checkbox/radio inputs.
  input {
    prefix  = 'data:image/svg+xml;utf8,'
    prefix += '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">'

    &:autofill { background-image: linear-gradient(rgba(convert($v23), .5), rgba(convert($v23), .5)) }
    &[type='radio'],
    &[type='checkbox'] {
      &, &:focus, &:hover:active {
        -webkit-appearance: none
        -moz-appearance: none
        appearance: none
        cursor: pointer
        height: .88rem
        width: .88rem
        border: 1px solid bg5
        background-size: cover
        transition: transition
        c: v08 0 bg1
      }
      &:disabled, &:hover:active:disabled, &:disabled:hover {
        c: v94 bg5 bg4
        cursor: default
      }
    }

    &[type='radio'] {
      rad: 50%
      padding: 7px
      &:checked {
        path = '<circle cx="256" cy="256" r="128" fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path), i)
        c: 0 v08 v06
      }
      &:focus, &:hover { c: 0 v06 v04; bsh: 0 0 10px 0 v04 }
    }

    &[type='checkbox'] {
      rad: 4px
      padding: 7px
      &:checked {
        path ='<path fill="' + to_hex($v99) + '" d="M99 213l-1 89 104 102 205-201v-91L203 315 99 213z"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path), i)
        c: 0 v08 v06
        rad: 4px
      }
      &:focus, &:hover { c: 0 v06 v04; bsh: 0 0 10px 0 v04 }
      &:indeterminate {
        path = '<rect x="128" y="128" width="256" height="256" fill="' + to_hex($v99) + '"/>'
        background-image: s("url('%s%s</svg>') %s", rq(prefix), rq(path), i)
        c: 0 v08 v09
        &:hover { c: 0 v06 v04 }
      }
      &[name='wiki'] {
        display: none
      }
    }

    &[type='file'] {
      &::file-selector-button {
        background-color: bg5
        border: 2px solid bg5
        color: v98
        bsh: 0 1px 0 bg0
        tsh: 0 1px 0 bg0
        rad: 4px
        padding: .1rem .4rem
        cursor: pointer
        transition: transition
        &:hover {
          background-color: v08
          border: 2px solid v08
          color: v98
          bsh: 0 0 10px 0 v04
        }
      }
      &::-webkit-file-upload-button {
        background-color: bg5
        border: 2px solid bg5
        color: v98
        bsh: 0 1px 0 bg0
        tsh: 0 1px 0 bg0
        rad: 4px
        padding: .1rem .4rem
        cursor: pointer
        transition: transition
        &:hover {
          background-color: v08
          border: 2px solid v08
          color: v98
          bsh: 0 0 10px 0 v04
        }
      }
    }
    &[type='submit'] {
      background: v06
      border: 1px solid v04
      color: v98
      bsh: none
      padding: .25rem .8rem .25rem .8rem
      rad: 4px
      tsh: 0 1px 0 bg0
      &:hover {
        background: v08
        border: 1px solid v08
        color: v99
        bsh: 0 0 10px 0 v04
      }

      &[disabled], &[disabled]:hover {
        background: bg2
        border-color: bg3
        color: v94
        cursor: unset
        bsh: none
      }
      &:hover {
        background-color: v06
        border: 1px solid v08
        color: v99
        bsh: 0 0 10px 0 v04
        tsh: 0 1px 0 bg0
      }
      &#attachfilebutton {
        margin-left: -.8rem
      }
    }
    &[type='text'], &[type="password"] {
      background-color: bg0
      border: 1px solid bg4
      color: v98
      bsh: none
      padding: .25rem .8rem .25rem .2rem
      rad: 4px
      transition: transition
      &:focus, &:focus-within, &:focus-visible {
        c: 0 v08 bg1
        bsh: 0 0 10px 0 v04
        outline: 0
      }
      &:hover {
        border: 1px solid v08
      }
    }
  }

  // Better select element styles.
  /select {
    & {
      background: bg0
      // Override default colors.
      border: 1px solid bg4
      color: v98
      transition: transition
      &:not([disabled]) {
        c: 0 0 bg0
        padding: .243333rem .2rem
        &:hover { c: 0 v08 bg3 }
        &:active { c: 0 0 bg4 }
      }
      option {
        &[selected] {
          background: v05
        }
        &:hover { background-color: v02 }
        &:checked {
          background-color: v05 i
          bsh: 0 0 10px 100px v06 inset
        }
      }
    }
    &[disabled] {
      background: bg2
      padding: .243333rem .2rem
    }
  }
  // calendar
  .ui-widget-content {
    background: bg1
    border-color: bg4
    color: v98
  }
  .ui-widget.ui-widget-content {
    border-color: bg4
  }
  .ui-widget-header {
    border: 1px solid bg4
    background: bg2
    color: v98
    .ui-icon {
      filter: brightness(1.2)
    }
  }
  .ui-state-hover, .ui-widget-content .ui-state-hover,
  .ui-widget-header .ui-state-hover, .ui-state-focus,
  .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus,
  .ui-button:hover, .ui-button:focus {
    border: 1px solid bg4
    background: bg5
    color: v98
    cursor: pointer
    .ui-icon {
      filter: brightness(2.5)
    }
  }
  .ui-state-default, .ui-widget-content .ui-state-default,
  .ui-widget-header .ui-state-default, .ui-button,
  html .ui-button.ui-state-disabled:hover,
  html .ui-button.ui-state-disabled:active {
    border: 1px solid bg4
    background: bg4
    font-weight: normal;
    color: v49
  }
  .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid v49
    background: v49
    color: v90
  }
}
@-moz-document regexp('https?://svn.dd-wrt.com.*(/.*)?') {
  // syntax highlighting
  table.code td, div.code pre {
    .hll { background-color: rgba(50, 50, 50, 0.99) }
    .c { color: #777 } /* Comment */
    .err { color: var(--code-pr-tc); background-color: lighten(#420e09, 4%) } /* Error */
    .k { color: #f9ee98 } /* Keyword */
    .o { color: #cda869 } /* Operator */
    .ch { color: #777 } /* Comment.Hashbang */
    .cm { color: #777 } /* Comment.Multiline */
    .cp { color: var(--code-pr-tc) } /* Comment.Preproc */
    .cpf { color: #8f9d6a } /* Comment.PreprocFile */
    .c1 { color: #777 } /* Comment.Single */
    .cs { color: #777 } /* Comment.Special */
    .gd { color: var(--code-pr-tc); background-color: lighten(#420e09, 2%) } /* Generic.Deleted */
    .ge { font-style: italic } /* Generic.Emph */
    .gr { color: #f00 } /* Generic.Error */
    .gh { color: #cf6a4c } /* Generic.Heading */
    .gi { color: var(--code-pr-tc); background-color: darken(#253b22, 5%) } /* Generic.Inserted */
    .go { color: #888888 } /* Generic.Output */
    .gp { color: #555555 } /* Generic.Prompt */
    .gs { font-weight: bold } /* Generic.Strong */
    .gu { color: #aaaaaa } /* Generic.Subheading */
    .gt { color: #f00 } /* Generic.Traceback */
    .kc { color: #8f9d6a } /* Keyword.Constant */
    .kd { color: #f9ee98 } /* Keyword.Declaration */
    .kn { color: #f9ee98 } /* Keyword.Namespace */
    .kp { color: #f9ee98 } /* Keyword.Pseudo */
    .kr { color: #f9ee98 } /* Keyword.Reserved */
    .kt { color: #f9ee98 } /* Keyword.Type */
    .m { color: #8f9d6a } /* Literal.Number */
    .s { color: #8f9d6a } /* Literal.String */
    .n { color: #cf6a4c }
    .na { color: #d6bb6d } /* Name.Attribute */
    .nb { color: #cda869 } /* Name.Builtin */
    .nc { color: #607392 } /* Name.Class */
    .no { color: #cf6a4c } /* Name.Constant */
    .ni { color: #fc0 } /* Name.Entity */
    .ne { color: #ff6400 } /* Name.Exception */
    .nf { color: #fc0 } /* Name.Function */
    .nn { color: #555555 } /* Name.Namespace */
    .nt { color: #997643 } /* Name.Tag */
    .nv { color: #8da6ce } /* Name.Variable */
    .ow { font-weight: bold } /* Operator.Word */
    .w { color: #bbbbbb } /* Text.Whitespace */
    .mb { color: #8f9d6a } /* Literal.Number.Bin */
    .mf { color: #8f9d6a } /* Literal.Number.Float */
    .mh { color: #8f9d6a } /* Literal.Number.Hex */
    .mi { color: #cf6a4c } /* Literal.Number.Integer */
    .mo { color: #8f9d6a } /* Literal.Number.Oct */
    .sa { color: #bd6b18 } /* Literal.String.Affix */
    .sb { color: #bd6b18 } /* Literal.String.Backtick */
    .sc { color: #bd6b18 } /* Literal.String.Char */
    .dl { color: #bd6b18 } /* Literal.String.Delimiter */
    .sd { color: #bd6b18 } /* Literal.String.Doc */
    .s2 { color: #bd6b18 } /* Literal.String.Double */
    .se { color: #bd6b18 } /* Literal.String.Escape */
    .sh { color: #bd6b18 } /* Literal.String.Heredoc */
    .si { color: #bd6b18 } /* Literal.String.Interpol */
    .sx { color: #bd6b18 } /* Literal.String.Other */
    .sr { color: #e9C062 } /* Literal.String.Regex */
    .s1 { color: #bd6b18 } /* Literal.String.Single */
    .ss { color: #bd6b18 } /* Literal.String.Symbol */
    .bp { color: #cda869 } /* Name.Builtin.Pseudo */
    .fm { color: #ff6400 } /* Name.Function.Magic */
    .vc { color: #607392 } /* Name.Variable.Class */
    .vg { color: #607392 } /* Name.Variable.Global */
    .vi { color: #607392 } /* Name.Variable.Instance */
    .vm { color: #607392 } /* Name.Variable.Magic */
    .il { color: #8f9d6a } /* Literal.Number.Integer.Long */
  }
}
@-moz-document regexp('https?://(ftp|download1).dd-wrt.com.*(/.*)?') {
  // ftp site
  fileExt = ( '../' bin chk dat enc fs img image l7 ram rom tftp trx txt tsk zip )
  excludedExt = ''
  excludeLnus = "[href*='lzma']"
  matchExt    = ''
  parent_dir  = "[href='../']"
  pageTitle   = 'Firmware Downloads'
  uq          = unquote

  for $v, $k in fileExt {

      //--list-index-{$k}: $v // debug breaks bg and other styling

      if $k == 0 { excludedExt += s(":not([href*='%s'])", uq($v)) }
      else { excludedExt += s(":not([href*='.%s'])", $v) }

      if $k == 0 { matchExt += s(":not([href*='%s'])", uq($v)) }
  }

  html {
    background: bg1 i
    max-width: 1000px
    margin: 0 auto
    transition: none
  }
  :link {
    // sorry no transtion here else flashes of default UA link color
    transition: none
    &:hover {
      color: v98
    }
  }

  pre {
    max-width: 880px
    margin: 0 auto
    font-size: 16px
    color: v97
    a{ matchExt } {
      &::before {
        content: '\00A0\1F4BE\00A0'
        font-size: 14px
      }
    }
    a{ uq(parent_dir) } {
      &::before {
        content: '\2BA4'
        font-size: 20px
        font-weight: 900
        color: v99
      }
    }
    a{ excludedExt }:not({ excludeLnus }) {
      &::before {
        content: '\00A0\1F4C2'
        font-size: 18px
      }
    }
  }
  h1 {
    font-size: .8rem
    margin: 1.5rem auto 1.5rem auto
    max-width 890px
    &::before {
      content: '' + pageTitle
      prefix = 'data:image/png;base64,'
      path   = 'iVBORw0KGgoAAAANSUhEUgAAAkQAAACMCAMAAACqGkaYAAAAY1BMVEX///8kX5T///8kX5T///8kX5T/'
      path  += '//8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T///8kX5T/'
      path  += '//8kX5T///8kX5T///8kX5T///+iTMr8AAAAH3RSTlMAEBAgIDAwQEBQUGBgcHCAgJCQoKCwsMDA0NDg'
      path  += '4PDwFagsVAAACudJREFUeNrs2oEGwzAUheEYqo8w4PT9n3JMEOm1KUY63wc4l4AfkLYaAAAAAAAAAAAA'
      path  += 'AAAAkny6JRcOqfdc2pNyT7ln8HVOyj31ntm0F4f6dJwVcz22t3nsynGc26AcW7X1tU3OD/5jRCISkYhE'
      path  += 'JCIRiUhEIhKRiEQkIhGJSEQiEpGIRCQiEYlIRCISkYhEJCIRiUhEIhKRiEQkIhGJSEQiEhEA8Ni7bZWH'
      path  += 'uJ396J4/eggRiQgRISJEhIhEhIgQESJCRCJCRIhoAfUnHkQkIhGJSEQiEpGIEJGIRCQiEYlIRCJCRCIS'
      path  += 'kYhEJKJ72V7smlGL5SAMhUVEQglFRCSUUvb//8p92un1tDap87TjnMehPffq+Uiid4iIOIGIKFqyR6MF'
      path  += 'jRYi+t8gwnWsRDQjRLoCJ5E/jzokL17NPiypyvHsJIV1o0X+KTmTVvlUcYrwU4Qu0XvO0t8M9sjNsNwP'
      path  += 'EJXdutwSn7KP2WxUSYHInyQGZxGQa3tpP1eGEFHV1iA8L0QgVoIH1dDLnrdXRoJGoPz1ZDbVFLBfX74U'
      path  += 'WoiCWNawxSkhQhEgpOtYbrOP22sjfoQonA96p6uA++4MkhNp10DEh3ER/AuRyyNr5pvsecQoo1EHi2Tq'
      path  += 'ZqDoVMXzaWogerEanh6iMrboBbIfNuIniIKxqnQgzm+WL+4TIn61GZNDVAYXfTBkv45u3wpGnWbDTlMF'
      path  += 'Ywt5oSHhhIjebUaYF6JO9IeI1NQoi3QP7YLzaWMkV6P9wQhFdiB8p0QYe/nefhrQ+Lkj+boXZWaIIqRe'
      path  += 'EwXXVaBUj/vsPfxdHo08rT2jfikiczfb2nA7gq/NDUTalnjK++NtAn7tH6wN7zx0sWD2l1ayszdd8ikQ'
      path  += 'ARpiPmb57QsBcyHe3Q1ER4muIzi+5XkhYji2D10JCOz+sZqNttZIuQuMxummulXvZ2iebiCqQalj28ng'
      path  += 'vBB90LB5Z5avmL18GIXRsV4U0IuxqHAD1JMY7qHo5V1lOJDw+SBagCG7apt9HDYqKkTO+NvHdvLQtDZb'
      path  += 'N08wxhtvphISNx9EFS+EzfJ7k30+jeL4VCZaUNnUzUpTYlj/J5STNUKk7SfCMitE7dFktIgJjBbvFNXY'
      path  += '/GFBPTdjkDexUBEB6p239Gle5oNIv4Oxj1Ni+4lLT1JUPpLh+xzQJoPlojHgjuAwpfezSSHS+oRxjhVl'
      path  += '9jXXNFHD3g0FLYPrapjHyrW/Lc4knh2iajo8q8mKy2NtEbdb9LRZ72YRWvVmuOGm3pCkiuaFCDvSt94W'
      path  += '/SxkHytGS9GBTyBVV6UrvaQD/QuRXgKGst8HZyuIWwyX0aT1xHTtbxp3pym9bvBxboiUbbZPVPJNGlfl'
      path  += 'ba1CdOZojWy+KW+ELOqaHCJlx+zZh+/RSAYEpd+cehPQqsR4NnP+S9556LeuwmBc3vEmy3vc93/JO9qQ'
      path  += '4IQPQx1y3N/V2amMT+FvSUYCJF2S/E6InOghwWchSraN/UYaQw2IEvj+B9/FfN1LBlmXHHYCkReX17qf'
      path  += 'Ranrcxk5r6rxsZ1l0l7L4Okg04iIKMiPdc2V+v9ajRetRuW5rsd7K3V9zCNFYHl4F0TZptis0XoJ8JXv'
      path  += 'ma7Eek1q25btFiInbWckbb7kqOxnhfSl8wRRKtVv05ueU46zRMaz91aIQglEh+0QgXqtTOUyXekUYaay'
      path  += 'tKEwP7pXiGIlF/OYP1QDThvGKBAhcmrYavx16xE2dHTkEIXbxj77AEQ0oElxlCnDeS28AmDL4/B2iM7z'
      path  += 'mlwdztA4r0v8gChWMVcSpap2WkcKEW0be/YJiB43YdibTdjJ4bVIUojCz0OEGcIU3XyPwFAPzdcY3CFS'
      path  += 'MxdH86ym6LdC5L5MJ66G0AmO1Zj0Ejx1+HmI8jsV1zKNvoQo+PozfUTQ6ZfulavmgeR1Lefa7Q0irn3O'
      path  += 'I++hF5dcb7xxWJdxRFyCqLwKtup3QkQMIgHrGO/cVYr12fuEiBuXa0Ay8c43EIiIotvYpwQkGh/I3c1J'
      path  += 'JGm1hrHPMtp2fitEOPfRoS/AVH4BbNd+ICrnLzlDhfQR6Fy5t0LCY6b2AdF5zYemqobSXwqRiMQBeLMT'
      path  += 'fAUrYN32TiH69ii1CjMOg4NHnQs3Vh6HqMX3/ZZc6WWP73rFd+9jn1iGSFI3AN8yASwdXEHypyGS3zHg'
      path  += 'g77GWc9tUk9KaTlo3w1HKwauV7vZ2uZkox2IQOkKSJLJ+fJxPnePEJUv9gKNN9FRMA5rdou/na2ZLNza'
      path  += 'WYAIJpc+n/bw8Yw1GuIL9lnY0+F07v4gumqAEd0gqiX+B7ihmkjtJrlvjFYaIi4bsxUJgMjino2NzLCc'
      path  += 'JB+qY+4KfOMfhwjfkXsf/fApIg3ixhtEJVZcgyhCELFtpSBC1mEbjfqVtCcc94DoJwQlbp+GCMb+RkOp'
      path  += '1sVuShci0oVo49hf3lVPxLSuBrkPMKMIUh+g2HZ/7swyRNHbICLTxR7AUzTUber7CkOEDQt7RcJVNj5J'
      path  += 'ViAR7dWd7Rcievp6t6U0WlzZVW0K0ScNiMCbGJ6Vxql8nISzA1H2GYicz0IE7PqGlT6b1h6F2BmqF9wj'
      path  += 'bwYQvTx/MLk2IZowqtoQeQYQBZ+GSLJ0bNOaw02rIE/6/wtJGvaCfdOzgos8ohWIGkOIBgDG3t1ZaLJm'
      path  += 'GK8ebcjVX/OHscAQgUo6FDgjLjJcImkToov5/Mb+YyKwFNq8j4Rrm5+bopPQkFkoBqoXYRhV4QlLCxAx'
      path  += 'vR5hfwSiYDtEsgEsfr7VY7P45+Xn22w1ZnvRhKJTHTQoddF8pQ2INMs9O7nXazkYdiYbaStEYMfGzLiH'
      path  += 'uDSifTCkKFk2ZORHL+J9TxoXFOJ3XJFdiIQ40dXRyiRpj9wg7VGapD02QwSc0l+VS5rinl52ybuI//bN'
      path  += 'bb4aIlQkJFjAUONh70A5iRWICDxWaL++UJov1U/AXlWqXOlsA6KDOIYT87UQKobX/Tr9SfzkoodRJmnI'
      path  += '5BE/CXxouV4fVJNYgagCjxXY8xF4HyjcWhHF37qOfinIdohURzJURbgygkUl3zm4WH7WFYfVhiZJQ0Yx'
      path  += '/aSzf8zC5wk7YVmCCLj8S+K++lkm9AB7yoCMq/7M49UiDi98Xq/Y9qxA5HYvTHTNibHssJBM3AJcPvaN'
      path  += 'vKFCaIUfPYe2Q29Mow3NKYrqVX8gqxDJdvbuKsYS3g+MVcs+8J8gOvOS11UHxXXndLU8tiYrEFE4bT+W'
      path  += 'AeCoK8YnLw76+KGDazKrEJmfU8HoCSJefB+v2Jb4oTufwQy3U94UIksQcYo2nuuygSJGphBlgAlsE4Ah'
      path  += 'sgsR6XdI95rQv96XS0vQCNKal7EuyuuveeQ8q8ZnvsqsJlsQkd+96agqt/lJQxeCEOmbItfwEJzCMkSG'
      path  += 'j1XnLiF6WZAIFqxyF+a0s4aMnj2IiNgPGJJO2BfmVu1E+hBBR1EZnsg4ufYhwhQhhkSINJdGn4m0KRoD'
      path  += 'sgkR+YbnVQ0HkPVxL5PxCY76EEH/lBiaLka2IeLC1vtjYqA+Leg1GOJSriFXe2QXIiK36PQRyhSpQzer'
      path  += '9BtiLulDhG3nZHq4pGsTItyxuA9AkWOuxKiPl9GzSrnmupYg4uImrBlWx71i4Vp9vXvQaahhB7A/kXYa'
      path  += 'Vj/REgJ9qxBx8YsKdEfDwpVK2aC81lIq2mNEz+KlZV2PL5r1MXaIrEAEJPyeyrk0S/nvs+Tgm3Td4YAb'
      path  += 'Cun/Jl+90XCpGCtwbwL5p507FgAAAAAY5G89i10F0vvofQAAAAAAAAAI+UD6fNsbckgAAAAASUVORK5C'
      path  += 'YII='
      background: s("url('%s%s') %s", rq(prefix), rq(path))
      background-repeat: no-repeat
      background-size: 250px
      padding-left: 280px
      padding-top: 2.1rem
      padding-bottom: 1rem
      font-size: 1.4rem
      display: block
      white-space: pre
    }
  }
  blockquote {
    p, h2 { text-align: center }
    h2 {
      font-size: 3rem
      color: v98
    }
  }
}