ready to deployment
This commit is contained in:
298
frontend/src/assets/main.css
Normal file
298
frontend/src/assets/main.css
Normal file
@@ -0,0 +1,298 @@
|
||||
:root {
|
||||
--background-body: #f4f5f7;
|
||||
--background-card: #fff;
|
||||
--background-header: #f8f9fa;
|
||||
|
||||
--main-333: #333;
|
||||
--main-666: #666;
|
||||
--main-999: #999;
|
||||
--main-aaa: #aaa;
|
||||
--main-ccc: #ccc;
|
||||
|
||||
--blue-bar: #4a8dff;
|
||||
--yellow-bar: #ffc107;
|
||||
--red-bar: #dc3545;
|
||||
--green-bar: #28a745;
|
||||
--gray-bar: #e4e1e1;
|
||||
|
||||
--badge-workday-main: #007bff;
|
||||
--badge-workday-light: #007bff;
|
||||
--badge-satturday-main: #fc9700;
|
||||
--badge-satturday-light: #ffeebb;
|
||||
--badge-sunday-main: #dc3545;
|
||||
--badge-sunday-light: #f8dddf;
|
||||
--badge-holiday-main: #20a03e;
|
||||
--badge-holiday-light: #bbf0c8;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #28a745;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: var(--background-body);
|
||||
color: var(--main-333);
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: var(--background-card);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
padding: 20px;
|
||||
/* flex: 1; */
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
/* margin: 0 0 10px 0; */
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
color: var(--main-666);
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--main-333);
|
||||
}
|
||||
|
||||
.card-header p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--main-999);
|
||||
}
|
||||
|
||||
.blue-bar {
|
||||
background-color: var(--blue-bar);
|
||||
}
|
||||
.yellow-bar {
|
||||
background-color: var(--yellow-bar);
|
||||
}
|
||||
.red-bar {
|
||||
background-color: var(--red-bar);
|
||||
}
|
||||
.green-bar {
|
||||
background-color: var(--green-bar);
|
||||
}
|
||||
.gray-bar {
|
||||
background-color: var(--gray-bar);
|
||||
}
|
||||
|
||||
.total-hours-main {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.total-hours-main h1 {
|
||||
font-size: 36px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.balance {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.light-text {
|
||||
color: var(--main-aaa);
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 12px;
|
||||
overflow: hidden;
|
||||
margin: 20px 0;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
border-radius: 6px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.hours-details {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hours-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hours-item p {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.hiden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
/* background-color: #bbebeb; */
|
||||
}
|
||||
|
||||
.progress-stripe {
|
||||
background-image: repeating-linear-gradient(
|
||||
-45deg,
|
||||
rgba(255, 255, 255, 0.3),
|
||||
rgba(255, 255, 255, 0.3) 15px,
|
||||
transparent 15px,
|
||||
transparent 25px
|
||||
);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: grid;
|
||||
padding: 10px;
|
||||
background-color: var(--background-body);
|
||||
/* grid-template-columns: repeat(8, 1fr); */
|
||||
grid-template-columns: 1fr 1fr 30px [start-enter] 1.5fr 30px 1.5fr[end-exit] 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
|
||||
grid-template-areas: 'dayOfMonth dayOfWeek gap enter rem-x exit alert holiday sickday worked overtime hours balance';
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.1);
|
||||
padding: 10px;
|
||||
}
|
||||
.list-item {
|
||||
display: grid;
|
||||
padding: 10px;
|
||||
height: 40px;
|
||||
/* grid-template-columns: repeat(8, 1fr); */
|
||||
grid-template-columns: 1fr 1fr 30px [start-enter] 1.5fr 30px 1.5fr[end-exit] 0.5fr 1fr 1fr 2fr 2fr 2fr 2fr;
|
||||
grid-template-areas: 'dayOfMonth dayOfWeek gap enter rem-x exit alert holiday sickday worked overtime hours balance';
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
background-color: var(--background-card);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0px 5px 1px rgba(0, 0, 0, 0.05);
|
||||
padding: 10px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.list-grid-dayOfMonth {
|
||||
grid-area: dayOfMonth;
|
||||
}
|
||||
.list-grid-dayOfWeek {
|
||||
grid-area: dayOfWeek;
|
||||
}
|
||||
.list-grid-enter {
|
||||
grid-area: enter;
|
||||
}
|
||||
.list-grid-remove {
|
||||
grid-area: rem-x;
|
||||
}
|
||||
.list-grid-exit {
|
||||
grid-area: exit;
|
||||
}
|
||||
.list-grid-alert {
|
||||
grid-area: alert;
|
||||
}
|
||||
.list-grid-holiday {
|
||||
grid-area: holiday;
|
||||
}
|
||||
.list-grid-sickday {
|
||||
grid-area: sickday;
|
||||
}
|
||||
.list-grid-worked {
|
||||
grid-area: worked;
|
||||
}
|
||||
.list-grid-overtime {
|
||||
grid-area: overtime;
|
||||
}
|
||||
.list-grid-hours {
|
||||
grid-area: hours;
|
||||
}
|
||||
.list-grid-balance {
|
||||
grid-area: balance;
|
||||
}
|
||||
|
||||
.badge {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
color: var(--badge-workday-main);
|
||||
border: 2px solid var(--badge-workday-main);
|
||||
/* background-color: #007bff; */
|
||||
border-radius: 0.3rem;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.badge.satturday {
|
||||
color: var(--badge-satturday-main);
|
||||
background-color: var(--badge-satturday-light);
|
||||
border: 2px solid var(--badge-satturday-main);
|
||||
}
|
||||
.badge.sunday {
|
||||
color: var(--badge-sunday-main);
|
||||
background-color: var(--badge-sunday-light);
|
||||
border: 2px solid var(--badge-sunday-main);
|
||||
}
|
||||
.badge.holiday {
|
||||
color: var(--badge-holiday-main);
|
||||
background-color: var(--badge-holiday-light);
|
||||
border: 2px solid var(--badge-holiday-main);
|
||||
}
|
||||
Reference in New Issue
Block a user