127 lines
4.9 KiB
CSS
127 lines
4.9 KiB
CSS
:root {
|
|
--font-family: 'Poppins';
|
|
--background-color-backup: #131419;
|
|
--background-color: rgb(16, 36, 50);
|
|
--input-background-color: rgb(0,20,34);
|
|
--input-border-color: #304562;
|
|
--primary-text-color: rgb(180,200, 214);
|
|
--product-container-background-color: rgb(39,59,73);
|
|
--product-container-box-shadow: 1px 1px 4px rgba(0,0,0,.5);
|
|
--product-title-text-color: rgb(200,220,234);
|
|
--image-overlay-opacity: 0.9;
|
|
--tag-background-color: #415664;
|
|
--tag-text-color: rgb(210,220,230);
|
|
--tag-border: none;
|
|
--tag-border-radius: 0.8em;
|
|
--tag-padding-old: 0.3em 1em;
|
|
--tag-padding: 0.5em 1em;
|
|
--tag-margin: 1em 0.5em 0 0;
|
|
--tag-hover-background-color: #596f7e;
|
|
--tag-hover-text-color: rgb(240,250,254);
|
|
--tag-hover-border: none;
|
|
--product-footer-background-color: rgb(0,20,34);
|
|
--product-footer-text-color: rgb(220,230,234);
|
|
--expected-date-text-color: #ffe073;
|
|
--planned-date-text-color: #73bdff;
|
|
--card-padding-top: .5rem;
|
|
--card-padding-bottom: .5rem;
|
|
--card-padding-left: .5rem;
|
|
--card-padding-right: .5rem;
|
|
--card-background-image: linear-gradient(0deg, #1C2029, #1C1F28);
|
|
--card-border-radius: 30px;
|
|
--card-border-width: 2px;
|
|
--card-border-top-color: #353B4C;
|
|
--card-border-left-color: #212630;
|
|
--card-border-right-color: #212531;
|
|
--card-border-bottom-color: #212530;
|
|
--input-border-color: #304562;
|
|
--input-hover-border-color: #64b5f6;
|
|
--input-background-color: rgb(0,20,34);
|
|
--input-focus-border-color: #64b5f6;
|
|
--input-focus-box-shadow: 0 0 0 1px #93cbf9;
|
|
/* RGB Tokens */
|
|
--rgb-primary: 180 200 214;
|
|
--rgb-secondary: 200 220 234;
|
|
--rgb-mint: 167 243 208;
|
|
--rgb-green: 175 224 125;
|
|
--rgb-teal: 110 236 255;
|
|
--rgb-blue: 115 196 255;
|
|
--rgb-yellow: 255 224 115;
|
|
--rgb-on-yellow: 0 0 0;
|
|
--rgb-orange: 255 167 115;
|
|
--rgb-pink: 224 104 148;
|
|
--rgb-on-pink: 255 255 255;
|
|
--rgb-red: 224 104 104;
|
|
/* Colors */
|
|
--color-primary: rgb(180,200, 214);
|
|
--color-secondary: rgb(200,220,234);
|
|
--color-black: #272727;
|
|
--color-yellow: #ffe073;
|
|
--color-green: #afe07d;
|
|
--color-mint: #a7f3d0;
|
|
--color-teal: #6eecff;
|
|
--color-blue: #73c4ff;
|
|
--color-orange: #ffa773;
|
|
--color-pink: #e06894;
|
|
--color-dark-pink: #832044;
|
|
--color-red: #e06868;
|
|
/* Background Colors */
|
|
--background-color-primary: rgb(57, 79, 94);
|
|
--background-color-secondary: rgb(30, 53, 69);
|
|
/* Official */
|
|
--surface: rgb(16, 36, 50);
|
|
--surface-container-high: rgb(57, 79, 94);
|
|
--surface-container-low: rgb(30, 53, 69);
|
|
--surface-container-outline-high: rgb(83, 99, 109);
|
|
--surface-container-outline: rgb(72, 88, 99);
|
|
--surface-container-outline-low: rgb(63, 78, 88);
|
|
/* Ant Design - Modals */
|
|
--ant-color-text: #b4c8d6;
|
|
--ant-modal-content-bg: #273f50;
|
|
--ant-modal-title-color: #b4c8d6;
|
|
/* Ant Design - Buttons */
|
|
/* Button Part I */
|
|
--ant-btn-text-color: var(--ant-button-default-color);
|
|
--ant-btn-text-color-hover: var(--ant-button-default-hover-color);
|
|
--ant-btn-text-color-active: var(--ant-button-default-active-color);
|
|
--ant-btn-bg-color-container: var(--ant-button-default-bg);
|
|
--ant-btn-bg-color-hover: var(--ant-button-default-hover-bg);
|
|
--ant-btn-bg-color-active: var(--ant-button-default-active-bg);
|
|
/* Part II */
|
|
--ant-button-default-bg: #1e3545;
|
|
--ant-button-default-border-color: rgba(180, 200, 214, 0.25);
|
|
--ant-button-font-weight: 400;
|
|
--ant-button-icon-gap: 8px;
|
|
--ant-button-padding-inline: 15px;
|
|
--ant-button-content-font-size: 14px;
|
|
--ant-border-radius-lg: 16px;
|
|
--ant-button-font-weight: 400;
|
|
--ant-btn-border-width: var(--ant-line-width);
|
|
--ant-btn-border-color: #000;
|
|
--ant-btn-border-color-hover: var(--ant-btn-border-color);
|
|
--ant-btn-border-color-active: var(--ant-btn-border-color);
|
|
--ant-btn-border-color-disabled: var(--ant-btn-border-color);
|
|
--ant-btn-border-style: solid;
|
|
--ant-btn-text-color: #000;
|
|
--ant-btn-text-color-hover: var(--ant-btn-text-color);
|
|
--ant-btn-text-color-active: var(--ant-btn-text-color);
|
|
--ant-btn-text-color-disabled: var(--ant-btn-text-color);
|
|
--ant-btn-border-color: var(--ant-btn-color-base);
|
|
--ant-btn-border-color-hover: var(--ant-btn-color-hover);
|
|
--ant-btn-border-color-active: var(--ant-btn-color-active);
|
|
--ant-btn-bg-color: var(--ant-btn-bg-color-container);
|
|
--ant-btn-text-color: var(--ant-btn-color-base);
|
|
--ant-btn-text-color-hover: var(--ant-btn-color-hover);
|
|
--ant-btn-text-color-active: var(--ant-btn-color-active);
|
|
}
|
|
|
|
/*
|
|
padding: .5rem;
|
|
border-width: 2px;
|
|
border-top-color: #353B4C;
|
|
border-left-color: #212630;
|
|
border-right-color: #212531;
|
|
border-bottom-color: #212530;
|
|
border-radius: 30px;
|
|
background-image: linear-gradient(0deg, #1C2029, #1C1F28);
|
|
*/ |