sample.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. h1 {
  2. color: hotpink;
  3. font-family: cursive;
  4. display: inline-block;
  5. position:sticky;
  6. top: 0;
  7. }
  8. canvas{
  9. width:50%;
  10. height:50%;
  11. align-items: center;
  12. border: 1px solid black;
  13. }
  14. html[data-theme="light"]{
  15. }
  16. html[data-theme="dark"]{
  17. }
  18. @property --vw{
  19. syntax: '<length>';
  20. inherits:true;
  21. initial-value:100vw;
  22. }
  23. @property --vh{
  24. syntax: '<length>';
  25. inherits:true;
  26. initial-value:100vh;
  27. }
  28. :root{
  29. --body-background-color:rgba(53, 139, 225, 0.333);
  30. --background-color:rgba(53, 139, 225, 0.333);
  31. --backdrop-color:rgba(94, 164, 235, 0.3);
  32. --font-color:rgb(91, 158, 91);
  33. --font-shadow-color:rgb(91, 158, 91);
  34. --filter-color:rgb(91, 158, 91);
  35. --filter-shadow-color:rgb(91, 158, 91);
  36. --hover-color:rgba(71, 220, 71, 0.133);
  37. --a-color:rgba(71, 220, 71, 0.133);
  38. --a-link-color:rgba(71, 220, 71, 0.133);
  39. --a-hover-color:rgba(71, 220, 71, 0.133);
  40. --a-active-color:rgba(71, 220, 71, 0.133);
  41. --a-visited-color:rgba(71, 220, 71, 0.133);
  42. --normal-color:rgba(190, 243, 238, 0.133);
  43. --notice-color:rgba(88, 144, 235, 0.133);
  44. --warming-color:rgba(240, 218, 75, 0.133);
  45. --wrong-color:rgba(243, 31, 31, 0.133);
  46. --red:#122;
  47. --green:#122;
  48. --blue:#122;
  49. --black:#122;
  50. --white:#122;
  51. --gray:#122;
  52. --yellow:#122;
  53. --purple:#122;
  54. --pink:#122;
  55. --orange:#122;
  56. --brown:#122;
  57. --cyan:#122;
  58. --magenta:#122;
  59. --C:#122;
  60. --M:#122;
  61. --Y:#122;
  62. --K:#122;
  63. --plate-size-default:98%;
  64. --font-size:12px;
  65. --font-default-size:12px;
  66. --font-scale-size:24px;
  67. --font-scale-default-size:24px;
  68. --title-size:18px;
  69. --title-default-size:18px;
  70. --content-size:12px;
  71. --content-default-size:12px;
  72. --button-text-size:15px;
  73. --button-text-default-size:15px;
  74. --test-border:2px solid black;
  75. --production-border:2px solid black;
  76. --w:tan(atan2(var(--vw)),1px);
  77. --h:tan(atan2(var(--vh)),1px);
  78. }
  79. body::before{
  80. content:counter(w) "x" counter(h);
  81. counter-reset: w var(--w) h var(--h);
  82. font-size:100px;
  83. position:fixed;
  84. inset:0;
  85. width:fit-content;
  86. height:fit-content;
  87. margin:auto;
  88. }