index.css 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. .logo-box {position: absolute;left: 30px;top: 10px;cursor: pointer;color: #000;}
  2. .logo-box img {width: 50px;height: 50px;vertical-align: middle;}
  3. .logo-box .logo-text {display: inline-block;vertical-align: middle;font-size: 24px;font-weight: 400;}
  4. #main {padding-bottom: 300px;}
  5. #main h2 {font-size: 1.6rem;}
  6. #main h3 {font-size: 1.25rem;}
  7. @media screen and (max-width: 800px) {
  8. .logo-box {display: none;}
  9. }
  10. /* ============== 样式优化 ================ */
  11. /* .main-box [class="lang-api"]{color: red;} */
  12. #main table{margin-left: 25px;}
  13. @media screen and (min-width: 800px) {
  14. #main table tr th{min-width: 150px;}
  15. }
  16. /* 测试接口的按钮 */
  17. .test-api-btn{
  18. margin-left: 30px;
  19. cursor: pointer;
  20. border-radius: 2px;
  21. border-width: 0px;
  22. padding: 7px 15px;
  23. background-color: green;
  24. color: #FFF;
  25. }
  26. .layui-layer-iframe{box-shadow: 0 0 100px #000 !important;}
  27. #main [data-lang=js]{margin-bottom: 80px;}
  28. /* ============== code代码样式优化 ================ */
  29. /* 背景变黑 */
  30. .main-box [data-lang]{padding: 0px !important; border-radius: 2px;overflow-x: auto; overflow-y: hidden;}
  31. .main-box [v-pre] code{border: 0px red solid; border-radius: 1px; /* background-color: #282828; */ background-color: #111; color: #FFF;}
  32. .main-box [v-pre] code{padding: 1.5em 1.3em; margin-left: 40px !important;}
  33. /* .main-box h2{margin-top: 70px;} */
  34. /* 代码行号盒子样式 */
  35. .code-line-box {list-style-type: none; border-right: 1px solid #000; position: absolute; top: 0; left: 0; width: 40px; user-select: none;}
  36. .code-line-box {padding: calc(1.5em + 1px) 0px !important; padding-bottom: calc(1.5em + 20px) !important; margin: 0px !important;}
  37. .code-line-box {line-height: inherit !important; background-color: #111; color: #aaa;font-weight: 400;font-size: 0.85em;text-align: center;}
  38. /* xml语言样式优化 */
  39. .lang-xml .token.comment{color: #CDAB53;}
  40. .lang-xml .token.tag *{color: #db2d20;}
  41. .lang-xml .token.attr-value{color: #A6E22E;}
  42. /* html语言样式优化 */
  43. .lang-html .token.comment{color: #CDAB53;}
  44. .lang-html .token.tag *{color: #db2d20;}
  45. .lang-html .token.tag .attr-name,
  46. .lang-html .token.tag .attr-name *{color: #A6E22E; opacity: 0.9;}
  47. .lang-html .token.tag .attr-value,
  48. .lang-html .token.tag .attr-value *{color: #E6DB74; opacity: 0.9;}
  49. /* java语言样式优化 */
  50. .main-box .lang-java{color: #01a252 !important;; opacity: 1;}
  51. .lang-java .token.keyword{color: #db2d20;}
  52. .lang-java .token.namespace,.lang-java .token.namespace *{color: #01A252; opacity: 1;}
  53. .lang-java .token.class-name,.lang-java .cm-variable{color: #55b5db; opacity: 1;}
  54. .lang-java .token.comment{color: #CDAB53;}
  55. .lang-java .token.annotation.punctuation{color: #ddd;}
  56. .lang-java .token.punctuation{color: #ddd;}
  57. /* yml语言样式优化 */
  58. .main-box .lang-yml{color: #01A252 !important; opacity: 1;}
  59. /* url语言样式优化 */
  60. .main-box .lang-api{color: #E96917 !important; opacity: 1;}
  61. /* js语言样式优化 */
  62. .main-box .lang-js{color: #01a252 !important;}
  63. .lang-js .token.comment{color: #ddd;}
  64. /* .lang-js .token.string{color: #fded02;} */
  65. .lang-js .token.string{color: #75C052;}
  66. .lang-js .token.punctuation{color: #eee;}
  67. /* .gt-container{padding: 1.5em; padding-bottom: 100px;} */