buttons.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. input {
  2. all: unset;
  3. }
  4. input[type=checkbox] {
  5. background: var(--accent) !important;
  6. cursor: pointer;
  7. display: inline-block;
  8. height: 1em !important;
  9. width: 1em !important;
  10. }
  11. input[type=checkbox]:not(:hover,:focus) {
  12. background: var(--foreground) !important;
  13. }
  14. input[type=checkbox] {
  15. border: unset !important;
  16. }
  17. input[type=radio] {
  18. background: var(--border);
  19. border-radius: 50%;
  20. box-shadow: inset 0 0 0 2px var(--background-hard) !important;
  21. display: inline-block;
  22. height: var(--s) !important;
  23. padding-right: 4px !important;
  24. width: var(--s) !important;
  25. }
  26. input[type=radio]:checked {
  27. background: var(--foreground);
  28. box-shadow: inset 0 0 0 2px var(--foreground) !important;
  29. }
  30. input[type=file] {
  31. all: unset;
  32. background: var(--gradient) !important;
  33. border-radius: var(--s);
  34. display: block;
  35. font-family: 'Open Sans', sans-serif !important;
  36. font-weight: 400 !important;
  37. padding: unset !important;
  38. }
  39. input[type=checkbox] {
  40. -moz-mask-image: url(../../icons/check-off.svg) !important;
  41. -o-mask-image: url(../../icons/check-off.svg) !important;
  42. -webkit-mask-image: url(../../icons/check-off.svg) !important;
  43. background-size: contain !important;
  44. margin-right: 4px !important;
  45. mask-image: url(../../icons/check-off.svg) !important;
  46. }
  47. input[type=checkbox]:checked {
  48. -moz-mask-image: url(../../icons/check-on.svg) !important;
  49. -o-mask-image: url(../../icons/check-on.svg) !important;
  50. -webkit-mask-image: url(../../icons/check-on.svg) !important;
  51. mask-image: url(../../icons/check-on.svg) !important;
  52. }
  53. input[type=color] {
  54. appearance: none;
  55. background-color: transparent;
  56. border: none;
  57. cursor: pointer;
  58. height: var(--xxl);
  59. width: var(--xxl);
  60. }
  61. input[type=color]::-webkit-color-swatch {
  62. border: none;
  63. border-radius: var(--s);
  64. }
  65. input[type=color]::-moz-color-swatch {
  66. border: none;
  67. border-radius: var(--s);
  68. }
  69. ::file-selector-button {
  70. background-color: unset;
  71. border: unset;
  72. color: var(--foreground);
  73. cursor: pointer;
  74. fill: var(--foreground);
  75. font-family: 'Open Sans', sans-serif !important;
  76. font-weight: 700 !important;
  77. margin: 3px;
  78. }
  79. *|::-moz-button-content {
  80. all: unset !important;
  81. }
  82. button {
  83. cursor: pointer !important;
  84. display: block !important;
  85. margin-left: auto !important;
  86. margin-top: var(--s);
  87. }
  88. .alert button {
  89. border-color: #ff6347 !important;
  90. cursor: pointer !important;
  91. margin-top: unset !important;
  92. }
  93. button, label {
  94. color: currentColor;
  95. }
  96. button {
  97. font-family: 'Poppins', sans-serif;
  98. font-weight: 700 !important;
  99. }
  100. select::-ms-expand {
  101. display: none;
  102. }
  103. button, input, select, textarea {
  104. border: 1px solid var(--border) !important;
  105. border-radius: var(--s);
  106. display: inline-block;
  107. font-size: inherit;
  108. line-height: initial !important;
  109. max-width: border-box !important;
  110. overflow: hidden;
  111. padding: 6px 8px !important;
  112. width: auto;
  113. }
  114. button, select, textarea {
  115. background: var(--gradient) !important;
  116. }
  117. button, input:not([type=checkbox],[type=radio]) {
  118. background: var(--gradient) !important;
  119. }
  120. select {
  121. background-repeat: no-repeat;
  122. border-radius: var(--s);
  123. cursor: pointer;
  124. max-width: 100% !important;
  125. }
  126. select[multiple] {
  127. height: 20rem;
  128. overflow-y: scroll;
  129. }
  130. button:focus, button:hover, input:focus, input:hover, select:focus, select:hover, textarea:focus, textarea:hover {
  131. box-shadow: var(--shadow-inset-accent) !important;
  132. }