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.
 
 
 
 
 
 

449 lines
9.0 KiB

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