0.0.1
This commit is contained in:
806
resources/[esx_addons]/esx_banking/html/css/app.css
Normal file
806
resources/[esx_addons]/esx_banking/html/css/app.css
Normal file
@@ -0,0 +1,806 @@
|
||||
:root {
|
||||
--primary-color: #2e69d5;
|
||||
--secondary-color: #378cbf;
|
||||
--text-color: #ffff;
|
||||
--background-light: #232934;
|
||||
--background-light-2: #202020;
|
||||
--background-dark: #0a0e19;
|
||||
--accent-red: #378cbf;
|
||||
--accent-green: #45b157;
|
||||
--accent-gray: #474e57;
|
||||
--accent-gray-2: #545457;
|
||||
|
||||
--columnsBackground: var(--background-dark);
|
||||
--allTitleColor: var(--text-color);
|
||||
--yourMoneyPriceTextColor: var(--accent-green);
|
||||
--bankCardBackgroundColor: linear-gradient(
|
||||
110deg,
|
||||
var(--primary-color) 0%,
|
||||
var(--secondary-color) 100%
|
||||
);
|
||||
--buttonBackgroundColor: var(--background-light);
|
||||
--inputBackgroundColor: var(--background-light);
|
||||
--inputTextColor: var(--text-color);
|
||||
--inputPlaceholderColor: var(--accent-gray-2);
|
||||
--checkmarkColor: var(--text-color);
|
||||
--acceptExitButtonColorText: var(--text-color);
|
||||
--exitButtonHoverBackgroundColor: var(--primary-color);
|
||||
--acceptButtonHoverBackgroundColor: var(--secondary-color);
|
||||
--bankCardTextColor: var(--text-color);
|
||||
--bankCardNumberColor: var(--text-color);
|
||||
--moneyContainerBackgroundColor: var(--background-light);
|
||||
--moneyAndTransactionContainer: var(--background-light);
|
||||
--transactionContainerBackgroundColor: var(--background-light);
|
||||
--moneyAndTransactionallTitleColorText: var(--text-color);
|
||||
--transactionDataTextColor: var(--text-color);
|
||||
--cardSubtitleTextColor: var(--accent-gray);
|
||||
--depositColorText: var(--accent-green);
|
||||
--withDrawColorText: var(--primary-color);
|
||||
--moreHistoryButtonHoverColor: var(--secondary-color);
|
||||
--moreGraphButtonHoverColor: var(--secondary-color);
|
||||
--hrRowColor: var(--accent-gray);
|
||||
--loadingCircle: var(--secondary-color);
|
||||
--tableAllTextColor: var(--text-color);
|
||||
--tableBackgroundColorPaginationButton: var(--secondary-color);
|
||||
--tableBackgroundColorPaginationButtonHover: var(--secondary-color);
|
||||
--tableRowHoverBackgroundColor: var(--secondary-color);
|
||||
--tableScrollBarBackgroundColor: var(--background-light);
|
||||
--tableScrollBarBackgroundColorHover: var(--secondary-color);
|
||||
--tableSelectBoxBackgroundColor: var(--background-light);
|
||||
--tableSearchInputBackgroundColor: var(--background-light);
|
||||
--tableScrollBarBackgroundColor2: var(--background-light);
|
||||
--disableButtonBackgroundColor: var(--background-light-2);
|
||||
--graphLineColor: var(--secondary-color);
|
||||
--graphLineBackgroundColor: var(--secondary-color);
|
||||
}
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;400;500;800&display=swap");
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 100%;
|
||||
height: 93.24vmin;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-family: "Raleway", sans-serif;
|
||||
user-select: none;
|
||||
min-width: 42vmin;
|
||||
font-size: 2vmin;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: 73vmin;
|
||||
width: 139.41vmin;
|
||||
cursor: default;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 150vmin;
|
||||
flex-wrap: wrap;
|
||||
margin: 2vmin;
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 3vmin;
|
||||
flex-wrap: wrap;
|
||||
height: 68.15vmin;
|
||||
}
|
||||
|
||||
/* FIRST COLUMN START */
|
||||
|
||||
#menu #first-column {
|
||||
width: 36vmin;
|
||||
background: var(--columnsBackground);
|
||||
padding: 1.85vmin;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.79vmin;
|
||||
border-radius: 1.38vmin;
|
||||
flex: 1 1 27.7vmin;
|
||||
height: 72.56vmin;
|
||||
}
|
||||
|
||||
#menu #first-column hr {
|
||||
border: 1px solid var(--hrRowColor);
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#bankcard {
|
||||
height: 16.6vmin;
|
||||
width: 25vmin;
|
||||
margin: 0 auto;
|
||||
background: var(--bankCardBackgroundColor);
|
||||
border-radius: 1.38vmin;
|
||||
padding: 1.85vmin 1.6vmin 0px 1.85vmin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#bankcard .content p {
|
||||
margin: 0;
|
||||
color: var(--bankCardTextColor);
|
||||
font-size: 0.92vmin;
|
||||
}
|
||||
|
||||
#bankcard .title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#bankcard .title span {
|
||||
color: var(--bankCardTextColor);
|
||||
}
|
||||
|
||||
#bankcard .title svg {
|
||||
width: 4.16vmin;
|
||||
height: 4.16vmin;
|
||||
}
|
||||
|
||||
#bankcard .content {
|
||||
position: absolute;
|
||||
bottom: 1.66vmin;
|
||||
}
|
||||
|
||||
#bankcard .content .card-data {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#bankcard .content .cardnumber {
|
||||
color: var(--bankCardNumberColor);
|
||||
font-size: 1.85vmin;
|
||||
letter-spacing: 0.37vmin;
|
||||
margin-bottom: 0.46vmin;
|
||||
}
|
||||
|
||||
#bankcard .content .card-data:nth-child(2) {
|
||||
margin-right: 0.27vmin;
|
||||
}
|
||||
|
||||
#bankcard .content .card-data p {
|
||||
font-size: 1.48vmin;
|
||||
}
|
||||
|
||||
#your-money-panel #money-containers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.92vmin;
|
||||
}
|
||||
|
||||
.exit-button,
|
||||
.accept-button,
|
||||
#pincode-container .button-groups button {
|
||||
background-color: var(--buttonBackgroundColor);
|
||||
padding: 1.85vmin 1.85vmin;
|
||||
/*width: 35vmin;*/
|
||||
width: 100%;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: var(--acceptExitButtonColorText);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: bold;
|
||||
border-radius: 0.27vmin;
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
.exit-button:hover,
|
||||
#modal-container #title-container button:hover {
|
||||
background-color: var(--exitButtonHoverBackgroundColor);
|
||||
box-shadow: -1vmin 1vmin 1vmin -1vmin var(--exitButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
.accept-button:hover {
|
||||
background-color: var(--acceptButtonHoverBackgroundColor);
|
||||
box-shadow: -1vmin 1vmin 1vmin -1vmin var(--acceptButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
/* FIRST COLUMN END */
|
||||
|
||||
/* SECOND COLUMN START*/
|
||||
|
||||
#menu #second-column {
|
||||
width: 35.18vmin;
|
||||
border-radius: 1.38vmin;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 0.92vmin;
|
||||
flex: 1 1 27.77vmin;
|
||||
padding-right: 1.85vmin;
|
||||
padding-left: 1.85vmin;
|
||||
}
|
||||
|
||||
#withdraw,
|
||||
#deposit,
|
||||
#transfer {
|
||||
background: var(--columnsBackground);
|
||||
padding: 1.85vmin;
|
||||
border-radius: 1.38vmin;
|
||||
width: 35.18vmin;
|
||||
}
|
||||
|
||||
#menu #second-column #withdraw {
|
||||
height: 18.48vmin;
|
||||
}
|
||||
|
||||
#menu #second-column #deposit {
|
||||
height: 18.48vmin;
|
||||
}
|
||||
|
||||
#menu #second-column #transfer {
|
||||
height: 26.63vmin;
|
||||
}
|
||||
|
||||
/* SECOND COLUMN END*/
|
||||
|
||||
/* THIRD COLUMN START*/
|
||||
|
||||
#menu #third-column {
|
||||
width: 32.77vmin;
|
||||
background: var(--columnsBackground);
|
||||
border-radius: 1.38vmin;
|
||||
padding: 1.85vmin;
|
||||
flex: 1 1 37.03vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #graph-container {
|
||||
width: calc(100% - 0.46vmin);
|
||||
height: 38vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0px 1.9vmin;
|
||||
margin-top: 1.48vmin;
|
||||
gap: 0.92vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container button {
|
||||
padding: 0.92vmin;
|
||||
width: 20.92vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container #more_history:hover {
|
||||
background-color: var(--moreHistoryButtonHoverColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--moreHistoryButtonHoverColor);
|
||||
}
|
||||
|
||||
#menu #third-column #buttons-container #more_graph:hover {
|
||||
background-color: var(--moreGraphButtonHoverColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--moreGraphButtonHoverColor);
|
||||
}
|
||||
|
||||
#menu #third-column #transactions-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.92vmin;
|
||||
padding: 1.85vmin;
|
||||
}
|
||||
|
||||
#menu #third-column #transactions-container .transaction-container {
|
||||
/* width: 40.37vmin; */
|
||||
width: 100%;
|
||||
background-color: var(--transactionContainerBackgroundColor);
|
||||
padding: 0.92vmin 0.92vmin 0.92vmin 1.85vmin;
|
||||
font-size: 1.8vmin;
|
||||
}
|
||||
|
||||
#menu
|
||||
#third-column
|
||||
#transactions-container
|
||||
.transaction-container
|
||||
.transaction {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 1.5vmin;
|
||||
margin-bottom: 0.8vmin;
|
||||
}
|
||||
|
||||
#menu
|
||||
#third-column
|
||||
#transactions-container
|
||||
.transaction-container
|
||||
.transaction
|
||||
span {
|
||||
color: var(--transactionDataTextColor);
|
||||
background: var(--columnsBackground);
|
||||
border-radius: 0.27vmin;
|
||||
padding: 0.46vmin;
|
||||
font-size: 1.2vmin;
|
||||
}
|
||||
|
||||
/* THIRD COLUMN END*/
|
||||
|
||||
/* GENERAL START*/
|
||||
|
||||
.money-container,
|
||||
.transaction-container {
|
||||
background-color: var(--moneyAndTransactionContainer);
|
||||
padding: 0.92vmin 0.92vmin 0.92vmin 1.85vmin;
|
||||
border-radius: 0.27vmin;
|
||||
}
|
||||
|
||||
.money-container {
|
||||
background-color: var(--moneyContainerBackgroundColor);
|
||||
}
|
||||
|
||||
.money-container h4 {
|
||||
margin-bottom: 0.5vmin;
|
||||
}
|
||||
|
||||
.money-container h4,
|
||||
.transaction h4 {
|
||||
color: var(--moneyAndTransactionallTitleColorText);
|
||||
text-shadow: 0.09vmin 0.09vmin 0.18vmin black;
|
||||
font-size: 1.5vmin;
|
||||
width: 25vmin;
|
||||
}
|
||||
|
||||
.money-container span,
|
||||
.transaction-container span {
|
||||
color: var(--yourMoneyPriceTextColor);
|
||||
text-shadow: 0.09vmin 0.09vmin 0.18vmin black;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
.accept-button svg {
|
||||
height: 1.38vmin;
|
||||
fill: var(--checkmarkColor);
|
||||
}
|
||||
|
||||
.green-text {
|
||||
color: var(--depositColorText) !important;
|
||||
}
|
||||
|
||||
.red-text {
|
||||
color: var(--withDrawColorText) !important;
|
||||
}
|
||||
|
||||
.disable-button {
|
||||
background-color: var(--disableButtonBackgroundColor) !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #ecedef;
|
||||
color: var(--allTitleColor);
|
||||
font-size: 2.31vmin;
|
||||
text-shadow: 0.09vmin 0.09vmin 0.92vmin rgb(255 255 255 / 47%);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--cardSubtitleTextColor);
|
||||
margin-bottom: 0.92vmin;
|
||||
font-size: 1.5vmin;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-size: 1.38vmin;
|
||||
background-color: var(--inputBackgroundColor);
|
||||
padding: 1.85vmin 1.85vmin;
|
||||
outline: none;
|
||||
border: none;
|
||||
color: var(--inputTextColor);
|
||||
margin-bottom: 1.85vmin;
|
||||
border-radius: 0.46vmin;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--inputPlaceholderColor);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* GENERAL END*/
|
||||
|
||||
#modal-container {
|
||||
background-color: var(--columnsBackground);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
border-radius: 1.38vmin;
|
||||
}
|
||||
|
||||
#more-modal-container {
|
||||
height: 93%;
|
||||
padding: 0 6vmin;
|
||||
}
|
||||
|
||||
#modal-container h3 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
margin-top: 1vmin;
|
||||
}
|
||||
|
||||
#modal-container #title-container button {
|
||||
background-color: var(--buttonBackgroundColor);
|
||||
padding: 1.85vmin 1.85vmin;
|
||||
transition: all 0.3s ease;
|
||||
font-weight: bold;
|
||||
border-radius: 0.27vmin 0.27vmin 0.27vmin 1.27vmin;
|
||||
font-family: "Raleway", sans-serif;
|
||||
font-size: 1.5vmin;
|
||||
border: none;
|
||||
color: var(--inputTextColor);
|
||||
margin-left: auto;
|
||||
position: absolute;
|
||||
right: 0vmin;
|
||||
top: 0vmin;
|
||||
width: 14vmin;
|
||||
}
|
||||
|
||||
/*DATA TABLES DESIGN */
|
||||
|
||||
.dataTables_wrapper .dataTables_info {
|
||||
clear: both;
|
||||
float: left;
|
||||
padding-top: 0.755em;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
#example_wrapper {
|
||||
margin-top: 4vmin;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
padding: 1vmin;
|
||||
font-family: "Raleway", sans-serif !important;
|
||||
}
|
||||
|
||||
#example_filter input {
|
||||
display: flex;
|
||||
gap: 1vmin;
|
||||
border: none;
|
||||
padding: 2vmin;
|
||||
background-color: var(--tableSearchInputBackgroundColor);
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter,
|
||||
.dataTables_wrapper .dataTables_info,
|
||||
.dataTables_wrapper .dataTables_processing,
|
||||
.dataTables_wrapper .dataTables_paginate {
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
table.dataTable thead > tr > th.sorting,
|
||||
table.dataTable thead > tr > th.sorting_asc,
|
||||
table.dataTable thead > tr > th.sorting_desc,
|
||||
table.dataTable thead > tr > th.sorting_asc_disabled,
|
||||
table.dataTable thead > tr > th.sorting_desc_disabled,
|
||||
table.dataTable thead > tr > td.sorting,
|
||||
table.dataTable thead > tr > td.sorting_asc,
|
||||
table.dataTable thead > tr > td.sorting_desc,
|
||||
table.dataTable thead > tr > td.sorting_asc_disabled,
|
||||
table.dataTable thead > tr > td.sorting_desc_disabled,
|
||||
table.dataTable thead > tr > td.sorting_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding-right: 26px;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
table.dataTable tbody tr td {
|
||||
color: var(--tableAllTextColor);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.greenTableText {
|
||||
color: var(--depositColorText) !important;
|
||||
}
|
||||
|
||||
.redTableText {
|
||||
color: var(--withDrawColorText) !important;
|
||||
}
|
||||
|
||||
table.dataTable.no-footer {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
|
||||
cursor: default;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
border: 1px solid #828282;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button {
|
||||
background: none;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #828282;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
|
||||
color: white !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
background: var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--tableBackgroundColorPaginationButtonHover) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
|
||||
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
background: var(--tableBackgroundColorPaginationButton) !important;
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--tableBackgroundColorPaginationButton) !important;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_length select {
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
background-color: var(--tableSelectBoxBackgroundColor) !important;
|
||||
padding: 4px;
|
||||
color: var(--tableAllTextColor) !important;
|
||||
padding: 1vmin;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
table.dataTable tbody tr {
|
||||
height: 50px !important;
|
||||
}
|
||||
|
||||
table.dataTable tbody tr:hover {
|
||||
background-color: var(--tableRowHoverBackgroundColor) !important;
|
||||
}
|
||||
|
||||
#example_wrapper
|
||||
> div.dataTables_scroll
|
||||
> div.dataTables_scrollHead
|
||||
> div
|
||||
> table
|
||||
> thead
|
||||
> tr
|
||||
> th.sorting_disabled {
|
||||
color: var(--tableAllTextColor) !important;
|
||||
}
|
||||
|
||||
/*DATA TABLE DESIGN END*/
|
||||
|
||||
/*SCROLLBAR DESIGN*/
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--tableScrollBarBackgroundColor2);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--tableScrollBarBackgroundColor);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--tableScrollBarBackgroundColorHover);
|
||||
}
|
||||
|
||||
/* LOADING CIRCLE*/
|
||||
|
||||
:root {
|
||||
--rotation-animation-speed: 2s;
|
||||
--rotation-animation-easing: linear;
|
||||
--stroke-animation-speed: 1.5s;
|
||||
--stroke-animation-easing: ease-in-out;
|
||||
--stroke-width: 3px;
|
||||
--stroke-start-dasharray: 1, 200;
|
||||
--stroke-end-dasharray: 89, 200;
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 0px auto;
|
||||
width: 23.14vmin;
|
||||
height: 23.14vmin;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.circular-loader {
|
||||
animation: rotate var(--rotation-animation-speed)
|
||||
var(--rotation-animation-easing) infinite;
|
||||
}
|
||||
|
||||
.loader-path {
|
||||
fill: none;
|
||||
stroke-width: var(--stroke-width);
|
||||
animation: animate-stroke var(--stroke-animation-speed)
|
||||
var(--stroke-animation-easing) infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate-stroke {
|
||||
0% {
|
||||
stroke-dasharray: var(--stroke-start-dasharray);
|
||||
stroke-dashoffset: 0;
|
||||
stroke: var(--columnsBackground);
|
||||
}
|
||||
50% {
|
||||
stroke-dasharray: var(--stroke-end-dasharray);
|
||||
stroke-dashoffset: -35;
|
||||
stroke: var(--loadingCircle);
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: var(--stroke-end-dasharray);
|
||||
stroke-dashoffset: -124;
|
||||
stroke: var(--loadingCircle);
|
||||
}
|
||||
}
|
||||
|
||||
#pincode-container {
|
||||
background-color: var(--columnsBackground);
|
||||
height: 80%;
|
||||
width: 40vmin;
|
||||
color: white;
|
||||
display: flex;
|
||||
border-radius: 3vmin;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 5vmin;
|
||||
}
|
||||
|
||||
#pincode-container h4 {
|
||||
text-align: center;
|
||||
margin-top: 2vmin;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-input {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 15vmin;
|
||||
width: 100%;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-input span {
|
||||
display: block;
|
||||
width: 3vmin;
|
||||
height: 3vmin;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--secondary-color);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers {
|
||||
display: grid;
|
||||
grid-template-columns: 10vmin 10vmin 10vmin;
|
||||
grid-template-rows: 10vmin 10vmin 10vmin;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div {
|
||||
background-color: var(--background-light);
|
||||
padding: 2vmin 2vmin;
|
||||
border-radius: 50%;
|
||||
width: 3vmin;
|
||||
height: 3vmin;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div:hover {
|
||||
background-color: var(--secondary-color);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--secondary-color);
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div:nth-child(11):hover {
|
||||
background-color: var(--exitButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--exitButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
#pincode-container .pincode-numbers div:nth-child(12):hover {
|
||||
background-color: var(--acceptButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--acceptButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
#pincode-container .button-groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2vmin;
|
||||
margin-top: 2vmin;
|
||||
}
|
||||
|
||||
#pincode-container .button-groups button {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#pincode-container .button-groups button:hover {
|
||||
background-color: var(--exitButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--exitButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
#pincode-container .button-groups .login:hover {
|
||||
background-color: var(--acceptButtonHoverBackgroundColor);
|
||||
box-shadow: 0px 3.42vmin 9.25vmin -1.2vmin var(--acceptButtonHoverBackgroundColor);
|
||||
}
|
||||
|
||||
.circleBackground {
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* ATM DESIGNS*/
|
||||
|
||||
#atm-container {
|
||||
display: grid;
|
||||
grid-template-columns: 60% 60%;
|
||||
gap: 3vmin;
|
||||
height: 58vh;
|
||||
}
|
||||
|
||||
.firstGridColumn,
|
||||
.secondGridColumn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1.85vmin;
|
||||
}
|
||||
|
||||
.firstGridColumn {
|
||||
gap: 1.79vmin;
|
||||
border-radius: 1.38vmin;
|
||||
background: var(--columnsBackground);
|
||||
}
|
||||
|
||||
.secondGridColumn {
|
||||
gap: 3vmin;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.secondGridColumn div {
|
||||
background: var(--columnsBackground);
|
||||
padding: 3vmin;
|
||||
border-radius: 1.38vmin;
|
||||
}
|
||||
|
||||
/*MEDIA QUERY*/
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.dataTables_scrollBody {
|
||||
max-height: 310px !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user