style.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. /* button styles */
  2. .btn {
  3. box-sizing: border-box;
  4. position: relative;
  5. display: inline-block;
  6. font-weight: 400;
  7. line-height: 1.5;
  8. color: #000;
  9. text-align: center;
  10. text-decoration: none;
  11. vertical-align: middle;
  12. cursor: pointer;
  13. user-select: none;
  14. background-color: #e9ecef;
  15. border: 1px solid #e9ecef;
  16. padding: 0.375rem 0.75rem;
  17. font-size: 1rem;
  18. border-radius: 4px;
  19. transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
  20. border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  21. }
  22. .btn *,
  23. .btn *::before,
  24. .btn *::after {
  25. box-sizing: inherit;
  26. }
  27. .btn img,
  28. .btn svg {
  29. display: inline-flex;
  30. vertical-align: -0.125em;
  31. width: 1em;
  32. height: 1em;
  33. }
  34. .btn:hover {
  35. text-decoration: none;
  36. background-color: #cbd3da;
  37. }
  38. .btn:focus {
  39. outline: none;
  40. }
  41. .btn.disabled,
  42. .btn:disabled {
  43. opacity: 0.65;
  44. pointer-events: none;
  45. }
  46. .btn.primary {
  47. background-color: #007bff;
  48. border-color: #007bff;
  49. color: #fff;
  50. }
  51. .btn.primary:hover {
  52. text-decoration: none;
  53. background-color: #0062cc;
  54. }
  55. .btn.outline {
  56. background-color: transparent;
  57. border-color: #e9ecef;
  58. }
  59. .btn.outline:hover {
  60. text-decoration: none;
  61. background-color: #e9ecef;
  62. }
  63. .btn.link {
  64. background-color: transparent;
  65. color: #007bff;
  66. border-color: transparent;
  67. }
  68. .btn.link:hover {
  69. background-color: #e9ecef;
  70. }
  71. .btn.block {
  72. width: 100%;
  73. display: block;
  74. }
  75. .btn.small {
  76. padding: 0.1rem 0.4rem;
  77. }
  78. /* index.html */
  79. *,
  80. *::before,
  81. *::after {
  82. box-sizing: border-box;
  83. }
  84. body,
  85. html {
  86. padding: 0;
  87. margin: 0;
  88. }
  89. body {
  90. padding: 0.5rem;
  91. }
  92. img {
  93. display: block;
  94. /* This rule is very important, please don't ignore this */
  95. max-width: 100%;
  96. max-height: 400px;
  97. width: 100%;
  98. }
  99. .previewAll {
  100. display: grid;
  101. grid-template-columns: 4fr 3fr 2fr 1fr;
  102. gap: 0.5rem;
  103. margin-top: 0.5rem;
  104. }
  105. .previewAll .preview {
  106. overflow: hidden;
  107. }
  108. /* file input */
  109. .file-upload-box {
  110. position: relative;
  111. }
  112. .file-upload-box .hidden-input {
  113. position: absolute !important;
  114. width: 1px;
  115. height: 1px;
  116. overflow: hidden;
  117. clip: rect(1px 1px 1px 1px);
  118. }
  119. .file-upload-box input.hidden-input:focus + label {
  120. outline: thin dotted;
  121. }
  122. .file-upload-box input.hidden-input:focus-within + label {
  123. outline: thin dotted;
  124. }
  125. .file-upload-box .input-label {
  126. border: 1px solid #eee;
  127. width: 80px;
  128. height: 80px;
  129. display: flex;
  130. justify-content: center;
  131. align-items: center;
  132. font-size: 2rem;
  133. font-weight: lighter;
  134. color: #555;
  135. }