rcreasey.github.io/src/html/menu/content/header/search.html at 65e84f4470a2dd9190b291dd4909a00f063d1fc5 · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<div id="menu-content-header-search" class="menu-content-item">
  <div class="menu-item-header">
    <h1 class="menu-item-header-text">Search</h1>
  </div>
  <div class="menu-item-form">
    <div class="form-wrap">
      <input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="-1">
      <label for="control-header-search-show"><span class="label-icon"></span> Show</label>
    </div>
    <div class="form-wrap">
      <div class="form-indent">
        <div class="form-wrap">
          <label class="control-header-search-width-by-label">Width</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-width-by-auto" class="control-header-search-width-by-auto" type="radio" name="control-header-search-width" value="auto" tabindex="-1">
          <label for="control-header-search-width-by-auto"><span class="label-icon"></span> Auto</label>
        </div>
        <div class="form-helper">
          <p class="control-header-search-width-by-auto-helper form-helper-item">Search box will grow to best fit available space.</p>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-width-by-custom" class="control-header-search-width-by-custom" type="radio" name="control-header-search-width" value="custom" tabindex="-1">
          <label for="control-header-search-width-by-custom"><span class="label-icon"></span> Custom</label>
        </div>
        <div class="form-helper">
          <p class="control-header-search-width-by-custom-helper form-helper-item">Define how wide the Search box should be inside the Header Area.</p>
        </div>
        <div class="form-wrap">
          <div class="form-indent">
            <div class="form-wrap">
              <div class="form-group form-group-block">
                <input id="control-header-search-width-size-range" class="control-header-search-width-size-range mr-3" type="range" value="0" tabindex="-1">
                <input class="control-header-search-width-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
                <button class="control-header-search-width-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
              </div>
            </div>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label class="control-header-search-style-label">Input style</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-style-box" class="control-header-search-style-box" type="radio" name="control-header-search-style" value="box" tabindex="-1">
          <label for="control-header-search-style-box"><span class="label-icon"></span> Box</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-style-clear" class="control-header-search-style-clear" type="radio" name="control-header-search-style" value="clear" tabindex="-1">
          <label for="control-header-search-style-clear"><span class="label-icon"></span> Clear</label>
        </div>
        <hr>
        <div class="form-wrap">
          <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
          <label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
        </div>
        <div class="form-helper">
          <p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p>
        </div>
        <hr>
        <div class="form-wrap">
          <label class="control-header-search-engine-label">Search engine</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="-1">
          <label for="control-header-search-engine-google"><span class="label-icon"></span> Google</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
          <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
          <label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
          <label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
          <label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
        </div>
        <div class="form-wrap">
          <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
          <label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
        </div>
        <div class="form-wrap">
          <div class="form-indent">
            <div class="form-wrap">
              <label for="control-header-search-engine-custom-name">Name</label>
              <input id="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
            </div>
            <div class="form-wrap">
              <label for="control-header-search-engine-custom-url">URL</label>
              <input id="control-header-search-engine-custom-url" class="control-header-search-engine-custom-url" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="https://" tabindex="-1">
            </div>
            <div class="form-helper">
              <p class="control-header-search-engine-custom-helper form-helper-item">Enter a web address with the search parameters, eg: "https://vimeo.com/search?q="</p>
              <p class="control-header-search-engine-custom-helper form-helper-item">nightTab will add the search term entered into the Search input at the end of the above URL.</p>
            </div>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label class="control-header-search-text-justify-label">Align Text</label>
        </div>
        <div class="form-wrap">
          <div class="form-grid form-grid-3x1 control-header-search-text-justify-grid">
            <div class="form-wrap">
              <input id="control-header-search-text-justify-left" class="control-header-search-text-justify-left" type="radio" name="control-header-search-text-justify" value="left" tabindex="-1">
              <label for="control-header-search-text-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
            </div>
            <div class="form-wrap">
              <input id="control-header-search-text-justify-center" class="control-header-search-text-justify-center" type="radio" name="control-header-search-text-justify" value="center" tabindex="-1">
              <label for="control-header-search-text-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
            </div>
            <div class="form-wrap">
              <input id="control-header-search-text-justify-right" class="control-header-search-text-justify-right" type="radio" name="control-header-search-text-justify" value="right" tabindex="-1">
              <label for="control-header-search-text-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
            </div>
          </div>
        </div>
        <hr>
        <div class="form-wrap">
          <label for="control-header-search-size-range">Size</label>
          <div class="form-group form-group-block">
            <input id="control-header-search-size-range" class="control-header-search-size-range mr-3" type="range" value="0" tabindex="-1">
            <input class="control-header-search-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
            <button class="control-header-search-size-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
          </div>
        </div>
        <div class="form-helper">
          <p class="control-header-search-size-helper form-helper-item">Only the Search box width control will change the Width of the Search box.</p>
        </div>
        <hr>
        <div class="form-wrap">
          <input id="control-header-search-newtab" class="control-header-search-newtab" type="checkbox" tabindex="-1">
          <label for="control-header-search-newtab"><span class="label-icon"></span> Open Search results in a new tab</label>
        </div>
        <hr>
        <div class="form-wrap">
          <input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
          <label for="control-header-search-newline"><span class="label-icon"></span> New line</label>
        </div>
        <div class="form-helper">
          <p class="control-header-search-newline-helper form-helper-item">Force on to a new line and seperate from other Header items.</p>
        </div>
      </div>
    </div>
  </div>
</div>