example.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. body {
  2. margin: 0;
  3. background-color: #000;
  4. overscroll-behavior: none;
  5. overflow: hidden;
  6. height: 100%;
  7. }
  8. a {
  9. text-decoration: none;
  10. color: inherit;
  11. }
  12. #info {
  13. position: fixed;
  14. top: 15px;
  15. left: 15px;
  16. z-index: 1001;
  17. display: grid;
  18. grid-template-columns: 50px auto;
  19. grid-template-rows: auto auto;
  20. column-gap: 10px;
  21. align-items: start;
  22. color: #e0e0e0;
  23. text-shadow: 1px 1px 5px rgba(0, 0, 0, .7);
  24. font: 400 14px 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  25. }
  26. #info > a.logo-link {
  27. grid-column: 1;
  28. grid-row: 1 / span 2;
  29. display: block;
  30. width: 50px;
  31. height: 50px;
  32. background: no-repeat center / contain;
  33. background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 226.77 226.77"><g transform="translate(8.964 4.2527)" stroke="%23ffffff" stroke-linecap="butt" stroke-linejoin="round" stroke-width="4" fill="none"><path d="m63.02 200.61-43.213-174.94 173.23 49.874z"/><path d="m106.39 50.612 21.591 87.496-86.567-24.945z"/><path d="m84.91 125.03-10.724-43.465 43.008 12.346z"/><path d="m63.458 38.153 10.724 43.465-43.008-12.346z"/><path d="m149.47 62.93 10.724 43.465-43.008-12.346z"/><path d="m84.915 125.06 10.724 43.465-43.008-12.346z"/></g></svg>');
  34. }
  35. .title-wrapper {
  36. position: absolute;
  37. left: 60px;
  38. top: 2px;
  39. display: flex;
  40. width: 300px;
  41. }
  42. #info > small {
  43. font-size: 12px;
  44. color: #e0e0e0;
  45. position: absolute;
  46. left: 60px;
  47. top: 25px;
  48. width: calc( 100vw - 250px );
  49. line-height: 20px;
  50. }
  51. .title-wrapper > a {
  52. font-weight: 600;
  53. }
  54. .title-wrapper > span {
  55. opacity: .7;
  56. position: relative;
  57. padding-left: 12px;
  58. margin-left: 10px;
  59. }
  60. #info > small a {
  61. color: #ff0;
  62. text-decoration: none;
  63. }
  64. #info > small a:hover {
  65. text-decoration: underline;
  66. }
  67. .title-wrapper > span::before {
  68. content: "";
  69. position: absolute;
  70. left: 1px;
  71. top: calc(50% + 1px);
  72. transform: translateY(-50%);
  73. width: 1px;
  74. height: 12px;
  75. background: #c3c3c3;
  76. opacity: .5;
  77. }
  78. #info.invert {
  79. filter: invert(1);
  80. }
  81. #overlay {
  82. position: absolute;
  83. font-size: 16px;
  84. z-index: 2;
  85. top: 0;
  86. left: 0;
  87. width: 100%;
  88. height: 100%;
  89. display: flex;
  90. align-items: center;
  91. justify-content: center;
  92. flex-direction: column;
  93. background: rgba(0,0,0,0.7);
  94. }
  95. #overlay button {
  96. background: transparent;
  97. border: 0;
  98. border: 1px solid rgb(255, 255, 255);
  99. border-radius: 4px;
  100. color: #ffffff;
  101. padding: 12px 18px;
  102. text-transform: uppercase;
  103. cursor: pointer;
  104. }
粤ICP备19079148号