style(web): update styles
- app.css: update app-level styles - global.css: update global styles - backend-unavailable-view.css: update backend unavailable view styles - login-view.css: update login view styles - setup-view.css: update setup view styles - travel-reimbursement-create-view.css: update travel form styles
This commit is contained in:
@@ -1,12 +1,28 @@
|
|||||||
.app {
|
.app-desktop-shell {
|
||||||
|
width: 100vw;
|
||||||
min-height: 100dvh;
|
min-height: 100dvh;
|
||||||
|
height: 100dvh;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-desktop-stage {
|
||||||
|
position: relative;
|
||||||
|
width: var(--desktop-stage-width, 100vw);
|
||||||
|
min-height: var(--desktop-stage-height, 100dvh);
|
||||||
|
transform: scale(var(--desktop-ui-scale, 1));
|
||||||
|
transform-origin: top left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app {
|
||||||
|
min-height: var(--desktop-stage-height, 100dvh);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 220px minmax(0, 1fr);
|
grid-template-columns: 220px minmax(0, 1fr);
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.boot-state {
|
.boot-state {
|
||||||
min-height: 100dvh;
|
min-height: var(--desktop-stage-height, 100dvh);
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
@@ -74,7 +90,7 @@
|
|||||||
grid-template-rows: auto minmax(0, 1fr);
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
.main.chat-main {
|
.main.chat-main {
|
||||||
height: 100dvh;
|
height: var(--desktop-stage-height, 100dvh);
|
||||||
grid-template-rows: auto minmax(0, 1fr);
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
@@ -84,7 +100,7 @@
|
|||||||
.main.audit-main,
|
.main.audit-main,
|
||||||
.main.employees-main,
|
.main.employees-main,
|
||||||
.main.settings-main {
|
.main.settings-main {
|
||||||
height: 100dvh;
|
height: var(--desktop-stage-height, 100dvh);
|
||||||
grid-template-rows: auto minmax(0, 1fr);
|
grid-template-rows: auto minmax(0, 1fr);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -23,10 +23,15 @@
|
|||||||
--nav-muted: #7d89a5;
|
--nav-muted: #7d89a5;
|
||||||
--radius: 8px;
|
--radius: 8px;
|
||||||
--ease: cubic-bezier(.2, .8, .2, 1);
|
--ease: cubic-bezier(.2, .8, .2, 1);
|
||||||
|
--desktop-ui-scale: 1;
|
||||||
|
--desktop-ui-inverse-scale: 1;
|
||||||
|
--desktop-stage-width: 100vw;
|
||||||
|
--desktop-stage-height: 100dvh;
|
||||||
font-family: "LXGW WenKai", Inter, "SF Pro Display", "PingFang SC", sans-serif;
|
font-family: "LXGW WenKai", Inter, "SF Pro Display", "PingFang SC", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
* { box-sizing: border-box; }
|
* { box-sizing: border-box; }
|
||||||
|
html, body, #app { min-height: 100%; }
|
||||||
body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg); }
|
body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg); }
|
||||||
.mdi { line-height: 1; vertical-align: middle; }
|
.mdi { line-height: 1; vertical-align: middle; }
|
||||||
button, input, select, textarea { font: inherit; }
|
button, input, select, textarea { font: inherit; }
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.backend-unavailable {
|
.backend-unavailable {
|
||||||
min-height: 100vh;
|
min-height: var(--desktop-stage-height, 100dvh);
|
||||||
display: grid;
|
display: grid;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
padding: 32px;
|
padding: 32px;
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
.login-page {
|
.login-page {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100dvh;
|
min-height: var(--desktop-stage-height, 100dvh);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(620px, .96fr) minmax(520px, .84fr);
|
grid-template-columns: minmax(620px, .96fr) minmax(520px, .84fr);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -660,7 +660,7 @@
|
|||||||
|
|
||||||
@media (max-width: 980px) {
|
@media (max-width: 980px) {
|
||||||
.login-page {
|
.login-page {
|
||||||
min-height: 100dvh;
|
min-height: var(--desktop-stage-height, 100dvh);
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
padding: 92px 28px 28px;
|
padding: 92px 28px 28px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
.setup-page {
|
.setup-page {
|
||||||
min-height: 100dvh;
|
min-height: var(--desktop-stage-height, 100dvh);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: minmax(320px, 392px) minmax(0, 1fr);
|
grid-template-columns: minmax(320px, 392px) minmax(0, 1fr);
|
||||||
background:
|
background:
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user