/src/html/menu/content/header/search.html

https://github.com/zombieFox/nightTab · HTML · 166 lines · 166 code · 0 blank · 0 comment · 0 complexity · 8bfcbac48ccba1ef2bb580c7e8229538 MD5 · raw file 

    

  1. <div id="menu-content-header-search" class="menu-content-item">
    2. 

  2.   <div class="menu-item-header">
    3. 

  3.     <h1 class="menu-item-header-text">Search</h1>
    4. 

  4.   </div>
    5. 

  5.   <div class="menu-item-form">
    6. 

  6.     <div class="form-wrap">
    7. 

  7.       <input id="control-header-search-show" class="control-header-search-show" type="checkbox" tabindex="-1">
    8. 

  8.       <label for="control-header-search-show"><span class="label-icon"></span> Show Search</label>
    9. 

  9.     </div>
    10. 

  10.     <div class="form-wrap">
    11. 

  11.       <div class="form-indent">
    12. 

  12.         <div class="form-wrap">
    13. 

  13.           <label class="control-header-search-width-by-label">Width</label>
    14. 

  14.         </div>
    15. 

  15.         <div class="form-wrap">
    16. 

  16.           <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">
    17. 

  17.           <label for="control-header-search-width-by-auto">
    18. 

  18.             <span class="label-icon"></span>
    19. 

  19.             <span class="label-block">
    20. 

  20.               <span class="label-block-item">Auto</span>
    21. 

  21.               <span class="label-block-item small muted">Search box will grow to best fit available space.</span>
    22. 

  22.             </span>
    23. 

  23.           </label>
    24. 

  24.         </div>
    25. 

  25.         <div class="form-wrap">
    26. 

  26.           <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">
    27. 

  27.           <label for="control-header-search-width-by-custom">
    28. 

  28.             <span class="label-icon"></span>
    29. 

  29.             <span class="label-block">
    30. 

  30.               <span class="label-block-item">Custom</span>
    31. 

  31.               <span class="label-block-item small muted">Define how wide the Search box should be inside the Header Area.</span>
    32. 

  32.             </span>
    33. 

  33.           </label>
    34. 

  34.         </div>
    35. 

  35.         <div class="form-wrap">
    36. 

  36.           <div class="form-indent">
    37. 

  37.             <div class="form-wrap">
    38. 

  38.               <div class="form-group form-group-block">
    39. 

  39.                 <input id="control-header-search-width-size-range" class="control-header-search-width-size-range mr-3" type="range" value="0" tabindex="-1">
    40. 

  40.                 <input class="control-header-search-width-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
    41. 

  41.                 <button class="control-header-search-width-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
    42. 

  42.               </div>
    43. 

  43.             </div>
    44. 

  44.           </div>
    45. 

  45.         </div>
    46. 

  46.         <hr>
    47. 

  47.         <div class="form-wrap">
    48. 

  48.           <label for="control-header-search-opacity-range">Opacity</label>
    49. 

  49.           <div class="form-group form-group-block">
    50. 

  50.             <input id="control-header-search-opacity-range" class="control-header-search-opacity-range mr-3" type="range" value="0" tabindex="-1">
    51. 

  51.             <input class="control-header-search-opacity-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
    52. 

  52.             <button class="control-header-search-opacity-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
    53. 

  53.           </div>
    54. 

  54.         </div>
    55. 

  55.         <hr>
    56. 

  56.         <div class="form-wrap">
    57. 

  57.           <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="-1">
    58. 

  58.           <label for="control-header-search-focus"><span class="label-icon"></span> Focus on load/refresh</label>
    59. 

  59.         </div>
    60. 

  60.         <div class="form-wrap">
    61. 

  61.           <p class="control-header-search-focus-helper form-helper-item">May not work in some browsers.</p>
    62. 

  62.         </div>
    63. 

  63.         <hr>
    64. 

  64.         <div class="form-wrap">
    65. 

  65.           <label class="control-header-search-engine-label">Search engine</label>
    66. 

  66.         </div>
    67. 

  67.         <div class="form-wrap">
    68. 

  68.           <input id="control-header-search-engine-google" class="control-header-search-engine-google" type="radio" name="control-header-search-engine" value="google" tabindex="-1">
    69. 

  69.           <label for="control-header-search-engine-google"><span class="label-icon"></span> Google</label>
    70. 

  70.         </div>
    71. 

  71.         <div class="form-wrap">
    72. 

  72.           <input id="control-header-search-engine-duckduckgo" class="control-header-search-engine-duckduckgo" type="radio" name="control-header-search-engine" value="duckduckgo" tabindex="-1">
    73. 

  73.           <label for="control-header-search-engine-duckduckgo"><span class="label-icon"></span> DuckDuckGo</label>
    74. 

  74.         </div>
    75. 

  75.         <div class="form-wrap">
    76. 

  76.           <input id="control-header-search-engine-youtube" class="control-header-search-engine-youtube" type="radio" name="control-header-search-engine" value="youtube" tabindex="-1">
    77. 

  77.           <label for="control-header-search-engine-youtube"><span class="label-icon"></span> YouTube</label>
    78. 

  78.         </div>
    79. 

  79.         <div class="form-wrap">
    80. 

  80.           <input id="control-header-search-engine-giphy" class="control-header-search-engine-giphy" type="radio" name="control-header-search-engine" value="giphy" tabindex="-1">
    81. 

  81.           <label for="control-header-search-engine-giphy"><span class="label-icon"></span> Giphy</label>
    82. 

  82.         </div>
    83. 

  83.         <div class="form-wrap">
    84. 

  84.           <input id="control-header-search-engine-bing" class="control-header-search-engine-bing" type="radio" name="control-header-search-engine" value="bing" tabindex="-1">
    85. 

  85.           <label for="control-header-search-engine-bing"><span class="label-icon"></span> Bing</label>
    86. 

  86.         </div>
    87. 

  87.         <div class="form-wrap">
    88. 

  88.           <input id="control-header-search-engine-custom" class="control-header-search-engine-custom" type="radio" name="control-header-search-engine" value="custom" tabindex="-1">
    89. 

  89.           <label for="control-header-search-engine-custom"><span class="label-icon"></span> Custom</label>
    90. 

  90.         </div>
    91. 

  91.         <div class="form-wrap">
    92. 

  92.           <div class="form-indent">
    93. 

  93.             <div class="form-wrap">
    94. 

  94.               <label for="control-header-search-engine-custom-name">Name</label>
    95. 

  95.               <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">
    96. 

  96.             </div>
    97. 

  97.             <div class="form-wrap">
    98. 

  98.               <label for="control-header-search-engine-custom-url">URL</label>
    99. 

  99.               <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">
    100. 

  100.             </div>
    101. 

  101.             <div class="form-wrap">
    102. 

  102.               <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>
    103. 

  103.               <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>
    104. 

  104.             </div>
    105. 

  105.             <div class="form-wrap">
    106. 

  106.               <label for="control-header-search-engine-custom-queryname">Name attribute</label>
    107. 

  107.               <input id="control-header-search-engine-custom-queryname" class="control-header-search-engine-custom-queryname" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="q" tabindex="-1">
    108. 

  108.             </div>
    109. 

  109.             <div class="form-wrap">
    110. 

  110.               <p class="control-header-search-engine-custom-helper form-helper-item">Sets the name attribute on the Search input field.</p>
    111. 

  111.               <p class="control-header-search-engine-custom-helper form-helper-item">This defines the name passed to the search engine when submitting. If not sure leave blank.</p>
    112. 

  112.             </div>
    113. 

  113.           </div>
    114. 

  114.         </div>
    115. 

  115.         <hr>
    116. 

  116.         <div class="form-wrap">
    117. 

  117.           <label class="control-header-search-text-justify-label">Align Text</label>
    118. 

  118.         </div>
    119. 

  119.         <div class="form-wrap">
    120. 

  120.           <div class="form-grid form-grid-3x1 control-header-search-text-justify-grid">
    121. 

  121.             <div class="form-wrap">
    122. 

  122.               <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">
    123. 

  123.               <label for="control-header-search-text-justify-left"><span class="label-icon"></span> <span class="sr-only">Left</span></label>
    124. 

  124.             </div>
    125. 

  125.             <div class="form-wrap">
    126. 

  126.               <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">
    127. 

  127.               <label for="control-header-search-text-justify-center"><span class="label-icon"></span> <span class="sr-only">Centre</span></label>
    128. 

  128.             </div>
    129. 

  129.             <div class="form-wrap">
    130. 

  130.               <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">
    131. 

  131.               <label for="control-header-search-text-justify-right"><span class="label-icon"></span> <span class="sr-only">Right</span></label>
    132. 

  132.             </div>
    133. 

  133.           </div>
    134. 

  134.         </div>
    135. 

  135.         <hr>
    136. 

  136.         <div class="form-wrap">
    137. 

  137.           <label for="control-header-search-size-range">Size</label>
    138. 

  138.           <div class="form-group form-group-block">
    139. 

  139.             <input id="control-header-search-size-range" class="control-header-search-size-range mr-3" type="range" value="0" tabindex="-1">
    140. 

  140.             <input class="control-header-search-size-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
    141. 

  141.             <button class="control-header-search-size-default button button-line" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
    142. 

  142.           </div>
    143. 

  143.         </div>
    144. 

  144.         <div class="form-wrap">
    145. 

  145.           <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>
    146. 

  146.         </div>
    147. 

  147.         <hr>
    148. 

  148.         <div class="form-wrap">
    149. 

  149.           <input id="control-header-search-newtab" class="control-header-search-newtab" type="checkbox" tabindex="-1">
    150. 

  150.           <label for="control-header-search-newtab"><span class="label-icon"></span> Open Search results in a new tab</label>
    151. 

  151.         </div>
    152. 

  152.         <hr>
    153. 

  153.         <div class="form-wrap">
    154. 

  154.           <input id="control-header-search-newline" class="control-header-search-newline" type="checkbox" tabindex="-1">
    155. 

  155.           <label for="control-header-search-newline">
    156. 

  156.             <span class="label-icon"></span>
    157. 

  157.             <span class="label-block">
    158. 

  158.               <span class="label-block-item">New line</span>
    159. 

  159.               <span class="label-block-item small muted">Force on to a new line and seperate from other Header items.</span>
    160. 

  160.             </span>
    161. 

  161.           </label>
    162. 

  162.         </div>
    163. 

  163.       </div>
    164. 

  164.     </div>
    165. 

  165.   </div>
    166. 

  166. </div>
    167.