denmardiyana

style sheet books

Jun 21st, 2021
846
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. @import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
  2.  
  3. * {
  4.     box-sizing: border-box;
  5. }
  6.  
  7. html,
  8. body {
  9.     font-family: Raleway;
  10.     margin: 0;
  11.     padding: 0;
  12.     box-sizing: border-box;
  13.     background-color: skyblue;
  14. }
  15.  
  16. header {
  17.     background: goldenrod;
  18.     padding: 16px;
  19.     color: white;
  20. }
  21.  
  22. .wrapper {
  23.     display: flex;
  24.     flex-direction: column;
  25.     align-items: center;
  26. }
  27.  
  28. .wrapper .container {
  29.     width: 1024px;
  30.     border-radius: 8px;
  31.     margin: 16px;
  32.     background: #F8F9FA;
  33.     padding: 16px;
  34.     flex-grow: 1;
  35.     height: fit-content;
  36. }
  37.  
  38.  
  39. .item {
  40.     border-radius: 16px;
  41.     margin-top: 16px;
  42.     padding: 12px 24px 12px 24px;
  43.     background: white;
  44.     display: flex;
  45.     align-items: center;
  46. }
  47.  
  48. .item>.inner h2 {
  49.     margin-bottom: unset;
  50. }
  51.  
  52. .item>.inner p {
  53.     margin-top: 5px;
  54. }
  55.  
  56. .item>.inner a {
  57.     margin-top: 5px;
  58. }
  59.  
  60.  
  61. .form {
  62.     display: flex;
  63.     padding: 16px;
  64.     flex-direction: column;
  65.     height: 400px;
  66.     border-radius: 16px;
  67. }
  68.  
  69. .form-group {
  70.     display: flex;
  71.     flex-direction: column;
  72. }
  73.  
  74. .form-group label {
  75.     margin-bottom: 4px;
  76.     font-size: 18;
  77.     font-weight: lighter;
  78. }
  79.  
  80. .shadow {
  81.     box-shadow: 0 5px 10px rgba(154, 160, 185, .05), 0 15px 40px rgba(166, 173, 201, .2);
  82. }
  83.  
  84. input[type=text],
  85. input[type=date],
  86. input[type=author] {
  87.     font-family: Raleway;
  88.     background: #F5F1FF;
  89.     border: 2px solid goldenrod;
  90.     border-radius: 8px;
  91.     padding: 16px;
  92.     box-sizing: border-box;
  93.     margin-bottom: 8px;
  94.     font-size: 24px;
  95. }
  96.  
  97. .btn-submit {
  98.     width: fit-content;
  99.     border: none;
  100.     font-family: Raleway;
  101.     border-radius: 16px;
  102.     padding: 12px 24px;
  103.     border: 2px solid goldenrod;
  104.     color: black;
  105.     font-size: 24px;
  106.     margin-top: auto;
  107.     align-self: flex-end;
  108.     cursor: pointer;
  109.     text-align: center;
  110. }
  111.  
  112. .btn-submit:hover {
  113.     background: goldenrod;
  114.     color: white;
  115. }
  116.  
  117. input[type=text],
  118. input[type=date],
  119. input[type=author] .btn-submit:focus {
  120.     outline: none;
  121. }
  122.  
  123.  
  124. .text-center {
  125.     text-align: center;
  126. }
  127.  
  128. .form-title {
  129.     margin: auto 0;
  130. }
  131.  
  132. .form-author {
  133.     margin: auto 0;
  134. }
  135.  
  136. .check-button {
  137.     background: url('../assets/check-outline.svg');
  138.     background-size: contain;
  139.     width: 40px;
  140.     height: 40px;
  141.     margin-left: auto;
  142.     cursor: pointer;
  143.     border: none;
  144. }
  145.  
  146. .check-button:hover {
  147.     background: url('../assets/check-solid.svg');
  148.     background-size: contain;
  149. }
  150.  
  151. .trash-button {
  152.     background: url('../assets/trash-outline.svg');
  153.     background-size: contain;
  154.     width: 40px;
  155.     height: 40px;
  156.     margin-left: 16px;
  157.     cursor: pointer;
  158.     border: none;
  159. }
  160.  
  161. .trash-button:hover {
  162.     background: url('../assets/trash-fill.svg');
  163.     background-size: contain;
  164. }
  165.  
  166. .undo-button {
  167.     background: url('../assets/undo-ouline.svg');
  168.     background-size: contain;
  169.     width: 40px;
  170.     height: 40px;
  171.     margin-left: auto;
  172.     cursor: pointer;
  173.     border: none;
  174. }
  175.  
  176. .undo-button:hover {
  177.     background: url('../assets/undo-ouline.svg');
  178.     background-size: contain;
  179. }
  180.  
  181. .check-button:focus,
  182. .trash-button {
  183.     outline: none;
  184. }
  185.  
  186.  
  187. @media only screen and (max-width: 1024px) {
  188.     .wrapper {
  189.         margin: 0;
  190.     }
  191.  
  192.     .wrapper .container {
  193.         width: 100%;
  194.     }
  195.  
  196.     .list-item {
  197.         width: 90%;
  198.     }
  199.  
  200.     .form {
  201.         width: 100%;
  202.     }
  203.  
  204. }
RAW Paste Data