A semantic search engine for source code https://bitshift.benkurtovic.com/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 
 
 

398 строки
9.2 KiB

  1. /*
  2. Stylesheet for `index.html`.
  3. */
  4. @import mixins
  5. @import variables
  6. $minSearchFieldsWidth: 490px
  7. $resultWidth: 830px
  8. $sidebarWidth: 30px
  9. $codeWidth: 500px
  10. $hiddenInfoWidth: 250px
  11. .ui-datepicker
  12. font-size: 70%
  13. .ui-autocomplete
  14. max-height: 30%
  15. overflow-x: hidden
  16. overflow-y: scroll
  17. padding: 0px
  18. >li.ui-menu-item a.ui-state-focus
  19. @include vendor(transition, background-color 0.3s ease-out)
  20. div#search-field
  21. @extend .t2
  22. bottom: 0
  23. height: 50%
  24. left: 0
  25. margin: auto
  26. margin-top: 15%
  27. max-height: 100px
  28. right: 0
  29. position: absolute
  30. top: 0
  31. width: 40%
  32. a#title
  33. text-decoration: none
  34. div#title
  35. font-size: 400%
  36. padding-bottom: 0.2em
  37. text-align: center
  38. #title-bit
  39. color: $baseColor1
  40. #title-angle
  41. color: $baseColor3
  42. #title-shift
  43. color: $baseColor2
  44. font-style: italic
  45. form#search-bar
  46. min-width: $minSearchFieldsWidth
  47. input[type="text"], button
  48. @extend .t3
  49. @include vendor(box-sizing, border-box)
  50. border: 1px solid $baseColor2
  51. font-size: 110%
  52. margin-bottom: 0px
  53. padding: 6px
  54. input[type="text"]
  55. width: 85%
  56. &:hover
  57. border-color: $baseColor1
  58. button#advanced-search
  59. background-color: white
  60. border: 1px solid white
  61. width: 15%
  62. height: 10%
  63. padding: 0px
  64. float: right
  65. &:hover
  66. img
  67. background-color: black
  68. cursor: pointer
  69. &.clicked
  70. img
  71. background-color: $baseColor1
  72. &:focus
  73. outline: 0
  74. img
  75. @extend .t3
  76. background-color: $baseColor2
  77. margin-top: 5px
  78. width: 26px
  79. height: 26px
  80. &.partly-visible
  81. margin-top: 0%
  82. padding-bottom: 3%
  83. position: absolute
  84. width: 100%
  85. #title
  86. position: absolute
  87. top: -1%
  88. left: 1%
  89. span
  90. font-size: 50%
  91. form#search-bar
  92. padding-top: 3%
  93. margin-left: auto
  94. margin-right: auto
  95. width: 60%
  96. div#advanced-search
  97. background-color: white
  98. border: 1px solid $baseColor3
  99. display: none
  100. font-size: 96%
  101. height: 400px
  102. min-width: $minSearchFieldsWidth
  103. padding-top: 0px
  104. overflow-x: auto
  105. overflow-y: hidden
  106. #heading
  107. color: $baseColor2
  108. display: block
  109. font-size: 120%
  110. padding-left: 1%
  111. padding-top: 1%
  112. width: 100%
  113. div
  114. display: inline-block
  115. font-size: 110%
  116. &#col1
  117. width: 25%
  118. &#col2
  119. width: 75%
  120. >div
  121. @include vendor(box-sizing, border-box)
  122. display: inline-block
  123. float: left
  124. #sidebar
  125. padding-left: 1%
  126. width: 25%
  127. >ul
  128. list-style: none
  129. padding-left: 0
  130. margin-bottom: 8%
  131. margin-top: 2%
  132. li
  133. margin-bottom: 2%
  134. label
  135. user-select: none
  136. div
  137. @extend .t3
  138. background-color: $lightGray
  139. border: none
  140. padding: 3%
  141. width: 85%
  142. &:hover, &.selectedInputField
  143. @extend .t3
  144. background-color: $baseColor2
  145. color: white
  146. cursor: pointer
  147. width: 90%
  148. input[type="checkbox"]
  149. display: none
  150. &:checked + label > div
  151. @extend .selectedInputField
  152. background-color: $baseColor1
  153. color: white
  154. width: 90%
  155. button#add-group
  156. background-color: $lightBlue
  157. border: none
  158. color: white
  159. display: block
  160. height: 40px
  161. margin-bottom: 2%
  162. overflow: hidden
  163. white-space: nowrap
  164. width: 40px
  165. span
  166. font-size: 150%
  167. font-weight: bold
  168. margin-left: 6px
  169. margin-right: 14px
  170. &:hover
  171. @extend .t3
  172. background-color: $blue
  173. cursor: pointer
  174. width: 90%
  175. button#remove-group
  176. @extend button#add-group
  177. background-color: #D82D48
  178. span
  179. padding-left: 3px
  180. &:hover
  181. @extend .t3
  182. background-color: #F11437
  183. #search-groups
  184. margin-top: 1%
  185. max-height: 93%
  186. overflow-y: auto
  187. width: 75%
  188. .search-group
  189. @include vendor(transition, all 0.6s ease-out)
  190. background-color: $lightGray
  191. padding: 1%
  192. margin-bottom: 2%
  193. width: 97%
  194. >div
  195. margin-bottom: 0.7%
  196. >div.name
  197. display: inline-block
  198. font-size: 90%
  199. width: 20%
  200. >input[type=text]
  201. display: inline-block
  202. padding: 2px
  203. width: 60%
  204. >input[type=checkbox]
  205. margin-left: 2%
  206. &:checked + span
  207. @extend .t2
  208. color: green
  209. font-weight: bold
  210. &:hover
  211. cursor: checkbox
  212. span.regex
  213. font-size: 80%
  214. &#selected
  215. background-color: #CACACA
  216. div#results
  217. margin: 3% auto 0 auto
  218. margin-left: auto
  219. margin-right: auto
  220. width: 80%
  221. /* TODO:
  222. 1) Sidebar
  223. - Add way to cycle through hits in the code.
  224. 2) Hidden info
  225. - Add links for authors.
  226. - Remove language field.
  227. 3) Header
  228. - Add an icon for the website.
  229. - Add language tag.
  230. 4) Code body
  231. - Add highlighting.*/
  232. div.result
  233. width: $resultWidth
  234. height: 200px
  235. margin-top: 2%
  236. margin-bottom: 6%
  237. #display-info
  238. font-size: 1.2em
  239. a
  240. text-decoration: none
  241. &:hover
  242. color: orange
  243. #title
  244. margin-right: 10px
  245. #site
  246. text-transform: capitalize
  247. table
  248. border-collapse: collapse
  249. border: 1px solid $baseColor3
  250. height: inherit
  251. tr
  252. height: inherit
  253. #sidebar
  254. width: $sidebarWidth
  255. background-color: #eee
  256. border-right: 1px solid $baseColor3
  257. height: inherit
  258. #code
  259. width: $codeWidth
  260. height: inherit
  261. border-right: 1px solid $baseColor3
  262. #tablecontainer
  263. overflow: scroll
  264. width: 100%
  265. height: inherit
  266. background-color: #49483e
  267. table
  268. table-layout:fixed
  269. border-collapse: collapse
  270. border: none
  271. font-family: monospace
  272. #display-button
  273. width: 25px
  274. background: url(http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Image-Edition-Tools-Arrow-icon.png)
  275. background-size: 25px 25px
  276. background-repeat: no-repeat
  277. background-position: center
  278. &:hover
  279. background-color: #eee
  280. &.active
  281. @include vendor(transform, rotateY(180deg))
  282. #hidden-info
  283. width: $hiddenInfoWidth
  284. margin-left: -$hiddenInfoWidth
  285. height: 100%
  286. padding-top: 50px
  287. text-align: center
  288. font-size: 1em
  289. line-height: 1.5em
  290. @include vendor(transition, margin-left 0.2s ease-in-out)
  291. &.visible
  292. margin-left: 0px
  293. #date-created
  294. display: inline-block
  295. #date-modified
  296. display: block
  297. #language
  298. display: inline-block
  299. font-weight: bold
  300. color: orange
  301. #authors
  302. a
  303. text-decoration: none
  304. &:hover
  305. color: orange
  306. &.cascade
  307. @extend .t3