216 lines
7.6 KiB
CSS
216 lines
7.6 KiB
CSS
:root {
|
|
--background: #fadcc7;
|
|
--text-color: #542707;
|
|
--black: #0a0a0a;
|
|
--black-bis: #121212;
|
|
--black-ter: #242424;
|
|
--white: #fffefe;
|
|
--primary-color: #fadcc7;
|
|
--primary-color-light: white;
|
|
--primary-color-dark: #f09351;
|
|
--primary-gradiend-light: #fce8d9;
|
|
--primary-gradiend-dark: #f8d0b4;
|
|
--secondary-color: #f6d5f7;
|
|
--secondary-color-light: white;
|
|
--secondary-color-dark: #e895eb;
|
|
--light-shadow: rgba(255, 255, 255, 0.5);
|
|
--dark-shadow: rgba(240, 147, 81, 0.5);
|
|
/* --fa-primary-color: $text-color;
|
|
--fa-secondary-color: $main-dark-pc;
|
|
--fa-primary-opacity: 0.80;
|
|
--fa-secondary-opacity: 0.80;*/
|
|
--danger-color: #fbd5d5;
|
|
--warning-color: #fbf3d5;
|
|
--info-color: #d5f1fb; }
|
|
|
|
/*$breakpoint argument choices:
|
|
- phone
|
|
- tab-port
|
|
- tab-land
|
|
- desk
|
|
- big-desktop
|
|
*/
|
|
html {
|
|
overflow-y: auto; }
|
|
|
|
.steps {
|
|
list-style-type: none !important; }
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.mt-2-mobile {
|
|
margin-top: .5rem !important; } }
|
|
|
|
.control.has-icons-left .icon, .control.has-icons-right .icon {
|
|
z-index: 5; }
|
|
|
|
.neomorph {
|
|
box-shadow: -8px -8px 16px var(--light-shadow), 8px 8px 16px var(--dark-shadow); }
|
|
.neomorphSmall {
|
|
box-shadow: -6px -6px 12px var(--light-shadow), 6px 6px 12px var(--dark-shadow); }
|
|
.neomorphXSmall {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow); }
|
|
.neomorphXXSmall {
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow); }
|
|
.neomorphBottom {
|
|
filter: drop-shadow(8px 8px 14px var(--primary-color-dark)); }
|
|
.neomorphInset {
|
|
box-shadow: inset 8px 8px 16px var(--dark-shadow), inset -8px -8px 16px var(--light-shadow); }
|
|
.neomorphInsetSmall {
|
|
box-shadow: inset 6px 6px 12px var(--dark-shadow), inset -6px -6px 12px var(--light-shadow); }
|
|
.neomorphInsetXSmall {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow); }
|
|
.neomorphInsetXXSmall {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow); }
|
|
|
|
.neoBtn {
|
|
background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
|
border: none !important;
|
|
-webkit-backface-visibility: hidden;
|
|
backface-visibility: hidden; }
|
|
.neoBtn:focus {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
|
|
border: none !important; }
|
|
.neoBtnInsetPlain {
|
|
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
|
border: none !important; }
|
|
.neoBtnInsetPlain:focus {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
|
|
border: none !important; }
|
|
.neoBtnSmall {
|
|
background: linear-gradient(145deg, var(--primary-gradiend-light), var(--primary-gradiend-dark));
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
|
border: none !important; }
|
|
.neoBtnSmall:focus {
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow);
|
|
border: none !important; }
|
|
.neoBtnSmall:focus:not(:active) {
|
|
box-shadow: -2px -2px 4px var(--light-shadow), 2px 2px 4px var(--dark-shadow); }
|
|
.neoBtnSmallInsetPlain {
|
|
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow);
|
|
border: none !important; }
|
|
.neoBtnSmallInsetPlain:focus {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
|
|
border: none !important; }
|
|
.neoBtnSmallXInsetPlain {
|
|
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow);
|
|
border: none !important; }
|
|
.neoBtnSmallXInsetPlain:focus {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow) !important;
|
|
border: none !important; }
|
|
.neoBtnSmallPlain {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow);
|
|
border: none !important; }
|
|
.neoBtnSmallPlain:focus {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
|
|
border: none !important; }
|
|
|
|
.neoFile {
|
|
box-shadow: 0px 0px 0px var(--light-shadow), 0px 0px 0px var(--dark-shadow) !important;
|
|
transition: all .2s linear;
|
|
-webkit-backface-visibility: hidden !important;
|
|
backface-visibility: hidden !important; }
|
|
@media screen and (max-width: 768px) {
|
|
.neoFile {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important;
|
|
background: var(--primary-color) !important; } }
|
|
.neoFile:hover {
|
|
box-shadow: -3px -3px 6px var(--light-shadow), 3px 3px 6px var(--dark-shadow) !important; }
|
|
.neoFile.isSelected {
|
|
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important; }
|
|
.neoFile.is-active, .neoFile.active {
|
|
box-shadow: inset 3px 3px 6px var(--dark-shadow), inset -3px -3px 6px var(--light-shadow) !important;
|
|
color: var(--black) !important; }
|
|
|
|
.neoInput {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow) !important;
|
|
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light));
|
|
border: none !important; }
|
|
.neoInput:focus {
|
|
border: none !important; }
|
|
|
|
.neoSelect > select {
|
|
box-shadow: inset 2px 2px 4px var(--dark-shadow), inset -2px -2px 4px var(--light-shadow) !important;
|
|
background: linear-gradient(145deg, var(--primary-gradiend-dark), var(--primary-gradiend-light)) !important;
|
|
border: none !important; }
|
|
.neoSelect > select:focus {
|
|
border: none !important; }
|
|
|
|
html {
|
|
scrollbar-width: thin; }
|
|
|
|
*, ::after, ::before {
|
|
scrollbar-width: inherit; }
|
|
|
|
::-webkit-scrollbar {
|
|
width: 8px; }
|
|
|
|
::-webkit-scrollbar-button {
|
|
width: 8px;
|
|
height: 5px; }
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
border: thin solid transparent;
|
|
box-shadow: none;
|
|
border-radius: 10px; }
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border: thin solid transparent;
|
|
border-radius: 10px;
|
|
background: var(--primary-color); }
|
|
|
|
body {
|
|
background-image: url("/images/background.jpg");
|
|
background-size: cover;
|
|
min-height: 100vh; }
|
|
|
|
.loading {
|
|
height: 100vh;
|
|
justify-content: center;
|
|
flex-direction: column; }
|
|
|
|
.drinkCartList {
|
|
display: flex;
|
|
flex-direction: column; }
|
|
|
|
.drinkCartItem {
|
|
display: grid;
|
|
grid-template-areas: "drinkName drinkQuantity drinkCross drinkPrice";
|
|
grid-template-columns: 1fr minmax(100px, 20%) 5% 10%;
|
|
grid-template-rows: 100%;
|
|
grid-gap: 5px;
|
|
align-items: center; }
|
|
.drinkCartItem:not(:last-child) {
|
|
margin-bottom: 1rem; }
|
|
|
|
.drinkCartPItem {
|
|
display: grid;
|
|
grid-template-areas: "drinkName drinkQuantity drinkCross drinkPrice";
|
|
grid-template-columns: 1fr 10% 5% 10%;
|
|
grid-template-rows: 100%;
|
|
grid-gap: 5px;
|
|
align-items: center; }
|
|
.drinkCartPItem:not(:last-child) {
|
|
margin-bottom: 1rem; }
|
|
|
|
.drinkCartName {
|
|
grid-area: drinkName; }
|
|
|
|
.drinkCartCross {
|
|
grid-area: drinkCross; }
|
|
|
|
.drinkCartQuantity {
|
|
grid-area: drinkQuantity; }
|
|
|
|
.drinkCartPrice {
|
|
grid-area: drinkPrice;
|
|
white-space: nowrap; }
|
|
|
|
.column > .box > .title {
|
|
padding: 10%; }
|