/* * OpenBills - Self hosted browser app to generate and keep track of simple invoices * Version - 0 * Licensed under the MIT license - https://opensource.org/licenses/MIT * * Copyright (c) 2021 Vidhu Kant Sharma */ @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); /* Experimental color scheme */ /* light theme */ /* $defBG: #FFFFFF; $altBG: lightgray; $defFG: #000000; $altFG: #232627; $defLink: brown; $altLink: brown; $defShadow: 0px 0px 4px #232627; */ /* Inspired by Dracula */ .formContainer { /*border: 1px solid pink;*/ /*padding: 2rem;*/ height: 50vh; border-radius: 1rem; padding: 1.5rem 0; } .addNewItemForm .textInputs, .addNewItemForm .numericInputs label { font-size: 1.5rem; } .addNewItemForm { display: flex; flex-direction: row; justify-content: space-between; height: 100%; } .addNewItemForm .textInputs, .addNewItemForm .numericInputs { border: 1px solid pink; width: 30%; justify-content: space-around; } .addNewItemForm .numericInputs input { width: 5.5rem; } .addNewItemForm .menuButtons { border: 1px solid pink; width: 15%; justify-content: space-around; } .addNewItemForm .menuButtons * { width: 100%; } .addNewItemForm div { display: flex; flex-direction: column; /*border-radius: 1rem;*/ padding: 1.5rem; overflow: scroll; } /* hide scrollbars */ .addNewItemForm div::-webkit-scrollbar { display: none; /* Chrome/Safari/Opera */ } .addNewItemForm div { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* hide arrows in numericInputs */ /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } .addNewItemForm label { display: flex; justify-content: space-between; padding: 0.8rem 0; border-bottom: 1px dotted lightblue; } .RegisterItemFormContainer { /*display: none;*/ position: fixed; width: 95%; height: 70vh; left: 0; right: 0; margin: auto; top: 15vh; background-color: #383A59; } .RegisterItemForm .textInputs, .RegisterItemForm .numericInputs { width: 40%; } .RegisterItemForm { width: 95%; height: 60vh; margin: 1rem auto; justify-content: space-around; } .MetaInfoForm { width: 60%; } @media only screen and (max-device-width: 480px) { .formContainer { padding: 0.5rem; height: auto; } .addNewItemForm { flex-direction: column; } .addNewItemForm .textInputs, .addNewItemForm .numericInputs, .addNewItemForm .menuButtons { width: 90%; padding: 1rem; margin: 1rem auto; } }