buttons.css 3.4 KB

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