A semantic search engine for source code https://bitshift.benkurtovic.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

462 line
9.3 KiB

  1. /*
  2. Stylesheet for `templates/index.html`.
  3. */
  4. @import mixins
  5. @import variables
  6. $minSearchFieldsWidth: 490px
  7. $codeWidth: 700px
  8. $hiddenInfoWidth: 300px
  9. .ui-datepicker
  10. font-size: 70%
  11. .ui-autocomplete
  12. max-height: 30%
  13. overflow-x: hidden
  14. overflow-y: scroll
  15. padding: 0px
  16. >li.ui-menu-item a.ui-state-focus
  17. @include vendor(transition, background-color 0.3s ease-out)
  18. div#body
  19. @extend .t3
  20. &.faded
  21. @include opaque(0.8)
  22. div#hotkey-help
  23. $width: 40%
  24. background-color: white
  25. border: 1px solid $baseColor3
  26. left: 50% - $width / 2
  27. min-width: 400px
  28. padding: 35px
  29. position: fixed
  30. top: 30%
  31. width: $width
  32. z-index: 200
  33. &.hidden
  34. display: none
  35. div
  36. border-bottom: 1px solid $baseColor2
  37. color: $baseColor1
  38. font-size: 130%
  39. padding-bottom: 8px
  40. text-align: center
  41. ul
  42. list-style: none
  43. margin-left: auto
  44. margin-right: auto
  45. position: relative
  46. width: 300px
  47. li
  48. margin-bottom: 4px
  49. span.hotkey
  50. color: $baseColor1
  51. font-family: monospace
  52. font-size: 130%
  53. font-weight: bold
  54. span.seperator
  55. color: $baseColor2
  56. div#search-field
  57. @extend .t2
  58. bottom: 0
  59. height: 50%
  60. left: 0
  61. margin: auto
  62. margin-top: 15%
  63. max-height: 100px
  64. right: 0
  65. position: absolute
  66. z-index: 2
  67. top: 0
  68. width: 40%
  69. a#title
  70. letter-spacing: 0.3em
  71. text-decoration: none
  72. div#title
  73. font-size: 400%
  74. padding-bottom: 0.2em
  75. text-align: center
  76. #title-bit
  77. color: $baseColor1
  78. #title-angle
  79. color: $baseColor3
  80. #title-shift
  81. color: $baseColor2
  82. font-style: italic
  83. form#search-bar
  84. min-width: $minSearchFieldsWidth
  85. input[type="text"], button
  86. @extend .t3
  87. @include vendor(box-sizing, border-box)
  88. border: 1px solid $baseColor2
  89. font-size: 110%
  90. margin-bottom: 0px
  91. padding: 6px
  92. input[type="text"]#query
  93. width: 100%
  94. &:hover
  95. border-color: $baseColor1
  96. button#advanced-search
  97. background-color: white
  98. border: none
  99. color: $baseColor2
  100. font-size: 1.1em
  101. font-style: italic
  102. &:hover
  103. color: $baseColor1
  104. cursor: pointer
  105. &.clicked
  106. color: $baseColor1
  107. &:focus
  108. outline: 0
  109. &.partly-visible
  110. margin-top: 0%
  111. position: absolute
  112. width: 100%
  113. #title
  114. position: absolute
  115. top: -1%
  116. left: 1%
  117. span
  118. font-size: 50%
  119. form#search-bar
  120. padding-top: 3%
  121. margin-left: auto
  122. margin-right: auto
  123. min-width: 800px
  124. width: 60%
  125. input
  126. @extend .t3
  127. &#query
  128. width: 80%
  129. &:hover
  130. border: 1px solid $baseColor1
  131. button#advanced-search
  132. margin-left: 30px
  133. div#advanced-search
  134. background-color: white
  135. border: 1px solid $baseColor3
  136. display: none
  137. font-size: 96%
  138. height: 400px
  139. min-width: $minSearchFieldsWidth
  140. padding-top: 0px
  141. overflow-x: auto
  142. overflow-y: hidden
  143. #heading
  144. color: $baseColor2
  145. display: block
  146. font-size: 120%
  147. padding-left: 1%
  148. padding-top: 1%
  149. width: 100%
  150. div
  151. display: inline-block
  152. font-size: 110%
  153. &#col1
  154. width: 25%
  155. &#col2
  156. width: 75%
  157. button
  158. border: none
  159. color: white
  160. float: right
  161. font-size: 80%
  162. font-weight: bold
  163. margin-right: 1%
  164. padding-left: 4%
  165. padding-right: 4%
  166. &:hover
  167. cursor: pointer
  168. &#add-group
  169. background-color: #7FAFFC
  170. &:hover
  171. background-color: #609AF8
  172. &#remove-group
  173. background-color: #E74C4C
  174. &:hover
  175. background-color: #D63636
  176. &#submit
  177. background-color: #4ee76c
  178. &:hover
  179. background-color: #0FDD38
  180. >div
  181. @include vendor(box-sizing, border-box)
  182. display: inline-block
  183. float: left
  184. #sidebar
  185. padding-left: 1%
  186. width: 25%
  187. >ul
  188. list-style: none
  189. padding-left: 0
  190. margin-bottom: 8%
  191. margin-top: 2%
  192. li
  193. margin-bottom: 2%
  194. label
  195. user-select: none
  196. div
  197. @extend .t3
  198. background-color: $lightGray
  199. border: none
  200. padding: 3%
  201. width: 85%
  202. &:hover, &.selectedInputField
  203. @extend .t3
  204. background-color: $baseColor2
  205. color: white
  206. cursor: pointer
  207. width: 90%
  208. input[type="checkbox"]
  209. display: none
  210. &:checked + label > div
  211. @extend .selectedInputField
  212. background-color: $baseColor1
  213. color: white
  214. width: 90%
  215. #search-groups
  216. margin-top: 1%
  217. max-height: 87%
  218. overflow-y: auto
  219. width: 75%
  220. .search-group
  221. @include vendor(transition, all 0.6s ease-out)
  222. background-color: $lightGray
  223. padding: 1%
  224. margin-bottom: 2%
  225. width: 97%
  226. >div
  227. margin-bottom: 0.7%
  228. >div.name
  229. display: inline-block
  230. font-size: 90%
  231. width: 20%
  232. >input[type=text]
  233. display: inline-block
  234. padding: 2px
  235. width: 60%
  236. >input[type=checkbox]
  237. margin-left: 2%
  238. &:checked + span
  239. @extend .t2
  240. color: green
  241. font-weight: bold
  242. &:hover
  243. cursor: checkbox
  244. span.regex
  245. font-size: 80%
  246. &:hover
  247. cursor: pointer
  248. background-color: #d6d6d6
  249. &#selected
  250. background-color: #CACACA
  251. div#results
  252. margin: 3% auto 0 auto
  253. margin-left: auto
  254. margin-right: auto
  255. width: 80%
  256. a
  257. @extend .t3
  258. text-decoration: none
  259. &:hover
  260. color: $baseColor1
  261. div#error
  262. font-size: 170%
  263. margin-top: 22%
  264. text-align: center
  265. span
  266. margin-right: 10px
  267. font-size: 150%
  268. &#s1
  269. color: $baseColor1
  270. &#s2
  271. color: $baseColor2
  272. &.disable-hover
  273. pointer-events: none
  274. div.result
  275. @extend .t3
  276. height: 200px
  277. margin-bottom: 100%
  278. pointer-events: auto
  279. table
  280. border-collapse: collapse
  281. height: inherit
  282. tr
  283. @extend .t3
  284. @include opaque(0.8)
  285. height: inherit
  286. &.cascade
  287. @extend .t1
  288. margin-bottom: 15%
  289. &.display-all
  290. table tr
  291. @include opaque(1.0)
  292. #tablecontainer
  293. max-width: 70%
  294. overflow: auto !important
  295. div#display-info
  296. font-size: 1.3em
  297. padding: 5px 0px 5px 5px
  298. width: 100%
  299. #title
  300. margin-right: 10px
  301. #site
  302. text-transform: capitalize
  303. td#code
  304. @include vendor(transition, width 0.2s ease-in-out)
  305. width: $codeWidth
  306. max-width: $codeWidth
  307. height: inherit
  308. padding: 0px
  309. #tablecontainer
  310. width: 100%
  311. height: inherit
  312. overflow: hidden
  313. background-color: #49483e
  314. position: relative
  315. z-index: 1
  316. table
  317. border-collapse: collapse
  318. font-family: monospace
  319. .linenos
  320. padding-left: 8px
  321. pre
  322. margin-top: 5px
  323. .code pre
  324. margin-top: 5px
  325. .hll
  326. background: #5B5A51
  327. div#hidden-info
  328. width: $hiddenInfoWidth
  329. margin-left: -$hiddenInfoWidth
  330. height: 100%
  331. padding-top: 40px
  332. font-size: 1.2em
  333. line-height: 1.5em
  334. position: relative
  335. z-index: 0
  336. @include vendor(transition, margin-left 0.2s ease-in-out)
  337. .display-all &
  338. margin-left: -$hiddenInfoWidth / 1.5
  339. padding-left: 20px
  340. span
  341. color: $baseColor1
  342. font-family: monospace
  343. font-size: 1.1em
  344. // float: right
  345. div
  346. display: block
  347. #authors
  348. a
  349. font-family: monospace