global.css 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. :root {
  2. --text: #fcfcfc;
  3. --mainbg: #933984;
  4. --background: #4b1a4f;
  5. --secondary-background: #31363b;
  6. --background-darker: #2f1b2e;
  7. --accent: #00b7c3;
  8. --yellow: #8B8000;
  9. --repo-hover: #b762b7;
  10. --border: #d76aff;
  11. color-scheme: dark;
  12. }
  13. body {
  14. font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  15. color: var(--text);
  16. background-color: var(--background-darker);
  17. transition: ease-in-out 0.25s;
  18. margin: 0;
  19. }
  20. ::-webkit-scrollbar {
  21. width: 8px;
  22. height: 10px;
  23. }
  24. ::-webkit-scrollbar-thumb {
  25. border-radius: 8px;
  26. background: var(--background);
  27. border: 1px solid var(--border);
  28. }
  29. main {
  30. margin: 0 10vw;
  31. padding: 10px;
  32. background-color: var(--mainbg);
  33. border: 1px solid #ed7ced;
  34. border-radius: 4px;
  35. }
  36. .navbar {
  37. display: flex;
  38. align-items: center;
  39. justify-content: start;
  40. flex-direction: row;
  41. padding: 8px;
  42. margin-bottom: 8px;
  43. background-color: var(--background);
  44. border-bottom: 1px solid var(--border);
  45. }
  46. .navbar .item {
  47. align-self: center;
  48. box-shadow: none;
  49. border: none;
  50. padding: .78571429em .92857143em;
  51. margin: 0 .35714286em;
  52. background: none;
  53. transition: color .1s ease;
  54. border-radius: .28571429rem;
  55. }
  56. .index-gh {
  57. background: var(--background);
  58. border: 1px solid var(--border);
  59. color: var(--text);
  60. padding: 4px;
  61. border-radius: 8px;
  62. }
  63. .brand {
  64. display: flex;
  65. align-items: center;
  66. gap: 8px;
  67. transition: ease-in-out 0.25s;
  68. color: var(--text);
  69. }
  70. .navbar-slogan:hover {
  71. text-decoration: underline;
  72. text-underline-offset: 5px;
  73. }
  74. .brand:hover {
  75. color: var(--text);
  76. text-decoration: underline;
  77. }
  78. .error {
  79. background-color: var(--background);
  80. border: 1px solid var(--border);
  81. padding: 8px;
  82. border-radius: 4px;
  83. font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  84. color: var(--text);
  85. }
  86. .center { text-align: center; }
  87. .logo { max-width: 220px; }
  88. .hero h1 { font-size: 5.5em; }
  89. .hero h2 { font-size: 3em; }
  90. a {
  91. color: var(--text);
  92. text-decoration: underline;
  93. text-underline-offset: 5px;
  94. }
  95. a:hover {
  96. color: var(--accent);
  97. }
  98. .setup-notice {
  99. background-color: var(--yellow);
  100. padding: 8px;
  101. border-radius: 4px;
  102. font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  103. color: var(--text);
  104. }
  105. .setup-notice > a {
  106. text-decoration: underline;
  107. text-underline-offset: 5px;
  108. }
  109. .setup-notice > a:hover {
  110. color: var(--text);
  111. opacity: 1;
  112. }
  113. /* URI: /explore */
  114. .explore-card, .user-repo-card {
  115. background-color: var(--background);
  116. border: 1px solid var(--border);
  117. padding: 8px;
  118. border-radius: 4px;
  119. margin: 8px 0 8px 0;
  120. text-overflow: ellipsis;
  121. white-space: wrap;
  122. text-decoration: none;
  123. display: flex;
  124. transition: ease-in-out 0.25s;
  125. }
  126. .explore-card:hover, .user-repo-card:hover {
  127. background-color: var(--secondary-background);
  128. color: var(--text);
  129. }
  130. /* URI: /:user */
  131. .user-profile {
  132. background-color: var(--background);
  133. border: 1px solid var(--border);
  134. padding: 8px;
  135. border-radius: 4px;
  136. margin: 8px;
  137. display: flex;
  138. flex-direction: column;
  139. align-items: center;
  140. }
  141. .user-profile h1 {
  142. color: var(--accent);
  143. margin: 4px;
  144. word-wrap: nowrap;
  145. text-overflow: ellipsis;
  146. }
  147. .user-profile h2 {
  148. margin: 4px;
  149. }
  150. .user-profile p {
  151. margin: 4px;
  152. }
  153. .user-profile img {
  154. border: 4px solid var(--accent);
  155. border-radius: 50%;
  156. }
  157. .user-bio,
  158. .user-readme {
  159. background-color: var(--background);
  160. border: 1px solid var(--border);
  161. padding: 8px;
  162. border-radius: 4px;
  163. margin: 8px;
  164. }
  165. .user-bio-text,
  166. .user-readme-text {
  167. background-color: var(--background-darker);
  168. padding: 8px;
  169. border-radius: 4px;
  170. margin-bottom: 0;
  171. }
  172. .user-readme-text {
  173. margin-top: 0;
  174. }
  175. .file-table {
  176. width: 100%;
  177. }
  178. .social-links {
  179. display: flex;
  180. flex-direction: column;
  181. }
  182. .user-repo-card {
  183. background-color: var(--background-darker);
  184. padding: 4px;
  185. border-radius: 4px;
  186. margin: 8px 0 8px 0;
  187. text-overflow: ellipsis;
  188. white-space: wrap;
  189. text-decoration: none;
  190. display: flex;
  191. flex-direction: column;
  192. transition: ease-in-out 0.25s;
  193. }
  194. .user-repo-card > p {
  195. margin: 8px;
  196. }
  197. .user-repo-card:hover {
  198. background-color: var(--secondary-background);
  199. color: var(--text);
  200. }
  201. .lang-bar:last-child {
  202. margin-bottom: 0;
  203. }
  204. .lang-bar {
  205. width: 100%;
  206. display: inherit;
  207. height: 10px;
  208. border-radius:4px;
  209. overflow: hidden;
  210. user-select: none;
  211. }
  212. /* URI: /:user/:repo */
  213. .button {
  214. background-color: var(--background);
  215. border: 1px solid var(--border);
  216. padding: 8px;
  217. border-radius: 4px;
  218. margin: 8px;
  219. color: var(--text);
  220. text-decoration: none;
  221. text-align: center;
  222. display: inline-block;
  223. }
  224. .button:hover {
  225. background-color: var(--secondary-background);
  226. color: var(--text);
  227. }
  228. .button-parent {
  229. display: flex;
  230. justify-content: center;
  231. align-items: center;
  232. flex-direction: row;
  233. }
  234. .file-list {
  235. list-style-type: none;
  236. padding: 0;
  237. margin: 0;
  238. }
  239. .file-u-list {
  240. padding: 0;
  241. margin: 0;
  242. list-style-type: none;
  243. }
  244. .file-u-list:hover {
  245. background-color: var(--repo-hover);
  246. }
  247. /* URI: /file/:user/:repo/:file */
  248. .user-readme pre {
  249. padding: 8px;
  250. border-radius: 4px;
  251. /*white-space: pre-wrap;*/
  252. overflow-x: auto;
  253. }
  254. .user-container {
  255. display: flex;
  256. flex-direction: row;
  257. justify-content: space-between;
  258. align-items: center;
  259. }
  260. .secondary {
  261. background-color: var(--secondary-background);
  262. }
  263. @media screen and (max-width: 900px) {
  264. main {
  265. margin: 8px;
  266. }
  267. .navbar-slogan {
  268. display: none;
  269. }
  270. .navbarImg {
  271. height: 40px;
  272. }
  273. .explore-card {
  274. margin-left: 0;
  275. margin-bottom: 8px;
  276. margin-right: 0;
  277. }
  278. .social-links {
  279. flex-direction: column;
  280. }
  281. }
  282. .cl {
  283. padding-left: 8px
  284. }
  285. /* 糞vimvixen */
  286. .vimvixen-console-frame {
  287. display: none;
  288. }
  289. .right.stackable.menu {
  290. margin-left: auto;
  291. display: flex;
  292. align-items: inherit;
  293. flex-direction: inherit;
  294. }