A semantic search engine for source code https://bitshift.benkurtovic.com/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
 
 
 
 
 
 

389 行
8.0 KiB

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