Savizo

ProjectXX

Jun 6th, 2021
924
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. :root {
  2.     --body-bg: rgb(204, 204, 204);
  3.     --white: #ffffff;
  4.     --darkWhite: #ccc;
  5.     --black: #000000;
  6.     --dark: #615c60;
  7.     --themeColor: #22b8d1;
  8.     --pageShadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  9. }
  10.  
  11. /* Font Include */
  12. @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600&display=swap');
  13.  
  14. body {
  15.     background-color: var(--body-bg);
  16. }
  17.  
  18. .page {
  19.     background: var(--white);
  20.     display: block;
  21.     margin: 0 auto;
  22.     position: relative;
  23.     box-shadow: var(--pageShadow);
  24. }
  25.  
  26. .page[size="A4"] {
  27.     width: 21cm;
  28.     height: 29.7cm;
  29.     overflow: hidden;
  30. }
  31.  
  32. .bb {
  33.     border-bottom: 3px solid var(--darkWhite);
  34. }
  35.  
  36. /* Top Section */
  37. .top-content {
  38.     padding-bottom: 15px;
  39. }
  40.  
  41. .logo img {
  42.     height: 60px;
  43. }
  44.  
  45. .top-left p {
  46.     margin: 0;
  47. }
  48.  
  49. .top-left .graphic-path {
  50.     height: 40px;
  51.     position: relative;
  52. }
  53.  
  54. .top-left .graphic-path::before {
  55.     content: "";
  56.     height: 20px;
  57.     background-color: var(--dark);
  58.     position: absolute;
  59.     left: 15px;
  60.     right: 0;
  61.     top: -15px;
  62.     z-index: 2;
  63. }
  64.  
  65. .top-left .graphic-path::after {
  66.     content: "";
  67.     height: 22px;
  68.     width: 17px;
  69.     background: var(--black);
  70.     position: absolute;
  71.     top: -13px;
  72.     left: 6px;
  73.     transform: rotate(45deg);
  74. }
  75.  
  76. .top-left .graphic-path p {
  77.     color: var(--white);
  78.     height: 40px;
  79.     left: 0;
  80.     right: -100px;
  81.     text-transform: uppercase;
  82.     background-color: var(--themeColor);
  83.     font: 26px;
  84.     z-index: 3;
  85.     position: absolute;
  86.     padding-left: 10px;
  87. }
  88.  
  89. /* User Store Section */
  90. .store-user {
  91.     padding-bottom: 25px;
  92. }
  93.  
  94. .store-user p {
  95.     margin: 0;
  96.     font-weight: 600;
  97. }
  98.  
  99. .store-user .address {
  100.     font-weight: 400;
  101. }
  102.  
  103. .store-user h2 {
  104.     color: var(--themeColor);
  105.     font-family: 'Rajdhani', sans-serif;
  106. }
  107.  
  108. .extra-info p span {
  109.     font-weight: 400;
  110. }
  111.  
  112. /* Product Section */
  113. thead {
  114.     color: var(--white);
  115.     background: var(--themeColor);
  116. }
  117.  
  118. .table td,
  119. .table th {
  120.     text-align: center;
  121.     vertical-align: middle;
  122. }
  123.  
  124. tr th:first-child,
  125. tr td:first-child {
  126.     text-align: left;
  127. }
  128.  
  129. .media img {
  130.     height: 60px;
  131.     width: 60px;
  132. }
  133.  
  134. .media p {
  135.     font-weight: 400;
  136.     margin: 0;
  137. }
  138.  
  139. .media p.title {
  140.     font-weight: 600;
  141. }
  142.  
  143. /* Balance Info Section */
  144. .balance-info .table td,
  145. .balance-info .table th {
  146.     padding: 0;
  147.     border: 0;
  148. }
  149.  
  150. .balance-info tr td:first-child {
  151.     font-weight: 600;
  152. }
  153.  
  154. tfoot {
  155.     border-top: 2px solid var(--darkWhite);
  156. }
  157.  
  158. tfoot td {
  159.     font-weight: 600;
  160. }
  161.  
  162. /* Cart BG */
  163. .cart-bg {
  164.     height: 250px;
  165.     bottom: 32px;
  166.     left: -40px;
  167.     opacity: 0.3;
  168.     position: absolute;
  169. }
  170.  
  171. /* Footer Section */
  172. footer {
  173.     text-align: center;
  174.     position: absolute;
  175.     bottom: 30px;
  176.     left: 75px;
  177. }
  178.  
  179. footer hr {
  180.     margin-bottom: -22px;
  181.     border-top: 3px solid var(--darkWhite);
  182. }
  183.  
  184. footer a {
  185.     color: var(--themeColor);
  186. }
  187.  
  188. footer p {
  189.     padding: 6px;
  190.     border: 3px solid var(--darkWhite);
  191.     background-color: var(--white);
  192.     display: inline-block;
  193. }
  194.  
RAW Paste Data