rcreasey.github.io/src/html/menu/content/theme/accent.html at f1fc8079da5276a3a254fac0bd92e44e430a5062 · rcreasey/rcreasey.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<div id="menu-content-theme-accent" class="menu-content-item">
  <div class="menu-item-header">
    <h1 class="menu-item-header-text">Accent</h1>
  </div>
  <div class="menu-item-form">
    <div class="theme-accent-preset"></div>
    <hr>
    <div class="form-wrap">
      <label for="control-theme-accent-rgb-color">Colour</label>
      <div class="form-group form-group-block">
        <input id="control-theme-accent-rgb-color" class="form-group-item-half control-theme-accent-rgb-color" type="color" value="#000000" tabindex="1" autocomplete="off">
        <input id="control-theme-accent-rgb-text" class="form-group-item-half control-theme-accent-rgb-text" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
        <button class="control-theme-accent-rgb-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
      </div>
    </div>
    <div class="form-helper">
      <p class="control-theme-accent-rgb-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
    </div>
    <div class="form-wrap">
      <div class="form-indent">
        <hr>
        <div class="form-wrap">
          <label for="control-theme-accent-hsl-h-range">Hue</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-hsl-h-range" class="control-theme-accent-hsl-h-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-hsl-h-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-theme-accent-hsl-s-range">Saturation</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-hsl-s-range" class="control-theme-accent-hsl-s-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-hsl-s-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-theme-accent-hsl-l-range">Lightness</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-hsl-l-range" class="control-theme-accent-hsl-l-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-hsl-l-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label for="control-theme-accent-rgb-r-range">Red</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-rgb-r-range" class="control-theme-accent-rgb-r-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-rgb-r-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-theme-accent-rgb-g-range">Green</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-rgb-g-range" class="control-theme-accent-rgb-g-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-rgb-g-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-theme-accent-rgb-b-range">Blue</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-rgb-b-range" class="control-theme-accent-rgb-b-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-rgb-b-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
          </div>
        </div>
      </div>
    </div>
    <hr>
    <div class="form-wrap">
      <input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
      <label for="control-theme-accent-random-active"><span class="label-icon"></span> Random Accent colour on load/refresh</label>
    </div>
    <div class="form-wrap">
      <div class="form-indent">
        <div class="form-wrap">
          <input id="control-theme-accent-random-style-any" class="control-theme-accent-random-style-any" type="radio" name="control-theme-accent-random-style" value="any" tabindex="-1">
          <label for="control-theme-accent-random-style-any"><span class="label-icon"></span> Any colour</label>
        </div>
        <div class="form-wrap">
          <input id="control-theme-accent-random-style-light" class="control-theme-accent-random-style-light" type="radio" name="control-theme-accent-random-style" value="light" tabindex="-1">
          <label for="control-theme-accent-random-style-light"><span class="label-icon"></span> Light colours</label>
        </div>
        <div class="form-wrap">
          <input id="control-theme-accent-random-style-dark" class="control-theme-accent-random-style-dark" type="radio" name="control-theme-accent-random-style" value="dark" tabindex="-1">
          <label for="control-theme-accent-random-style-dark"><span class="label-icon"></span> Dark colours</label>
        </div>
        <div class="form-wrap">
          <input id="control-theme-accent-random-style-pastel" class="control-theme-accent-random-style-pastel" type="radio" name="control-theme-accent-random-style" value="pastel" tabindex="-1">
          <label for="control-theme-accent-random-style-pastel"><span class="label-icon"></span> Pastel colours</label>
        </div>
        <div class="form-wrap">
          <input id="control-theme-accent-random-style-saturated" class="control-theme-accent-random-style-saturated" type="radio" name="control-theme-accent-random-style" value="saturated" tabindex="-1">
          <label for="control-theme-accent-random-style-saturated"><span class="label-icon"></span> Saturated colours</label>
        </div>
        <div class="form-wrap">
          <button class="control-theme-accent-randomise button button-line" tabindex="-1">Randomise now</button>
        </div>
      </div>
    </div>
    <hr>
    <div class="form-wrap">
      <input id="control-theme-accent-cycle-active" class="control-theme-accent-cycle-active" type="checkbox" tabindex="-1">
      <label for="control-theme-accent-cycle-active"><span class="label-icon"></span> Auto change Accent hue</label>
    </div>
    <div class="form-wrap">
      <div class="form-indent">
        <div class="form-wrap">
          <label for="control-theme-accent-cycle-speed-range">Change delay</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-cycle-speed-range" class="control-theme-accent-cycle-speed-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-cycle-speed-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-theme-accent-cycle-speed-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-wrap">
          <label for="control-theme-accent-cycle-step-range">Change steps</label>
          <div class="form-group form-group-block">
            <input id="control-theme-accent-cycle-step-range" class="control-theme-accent-cycle-step-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-theme-accent-cycle-step-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-theme-accent-cycle-step-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-helper">
          <p class="control-theme-accent-cycle-helper form-helper-item">Take casre as a small delay in Accent hue change may cause performance issues.</p>
        </div>
        <div class="form-helper">
          <p class="control-theme-accent-cycle-helper form-helper-item">Auto change Accent hue will not work when the Accent colour is a grey or black.</p>
        </div>
      </div>
    </div>
  </div>
</div>