forked from ttc/micro-frontend
....
This commit is contained in:
@@ -0,0 +1,221 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Global base styles for the app. Keep lightweight and self-contained so
|
||||
the login component can reliably fill the viewport without producing
|
||||
an outer page scrollbar. */
|
||||
|
||||
/* Force ngx-toastr container to be fixed to the viewport and positioned correctly */
|
||||
.toast-container.toast-top-right {
|
||||
position: fixed !important;
|
||||
top: 12px !important;
|
||||
right: 12px !important;
|
||||
z-index: 999999 !important;
|
||||
}
|
||||
|
||||
/* Make sure the page and app root occupy full height so 100vh aligns */
|
||||
html, body, app-root {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
/* เริ่มต้น: สำหรับ Desktop */
|
||||
.login-mobile {
|
||||
width: 415px;
|
||||
}
|
||||
|
||||
/* ถ้าเป็น Mobile (<=768px) ให้ลบ width ออก */
|
||||
@media (max-width: 768px) {
|
||||
.login-mobile {
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
z-index: 50;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
/* ✅ Toast Custom Style */
|
||||
.ngx-toastr {
|
||||
border-radius: 8px !important;
|
||||
backdrop-filter: blur(6px);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
|
||||
font-family: "Segoe UI", Roboto, sans-serif;
|
||||
padding: 12px 16px !important;
|
||||
min-width: 260px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.success-toast {
|
||||
background: rgba(255, 255, 255, 0.8) !important;
|
||||
color: #15803d !important;
|
||||
border-left: 5px solid #16a34a;
|
||||
}
|
||||
|
||||
.error-toast {
|
||||
background: rgba(239, 68, 68, 0.8) !important;
|
||||
color: #fff !important;
|
||||
border-left: 5px solid #dc2626;
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
font-weight: 600 !important;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
/* sensible default box model */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Kanit", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* Prevent the browser from showing a scroll bar for the page itself;
|
||||
the login card will scroll internally if needed. */
|
||||
}
|
||||
|
||||
/* Simple utilities used by nested components in this workspace */
|
||||
.content-box {
|
||||
border: 2px solid black;
|
||||
padding: 10px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.comp-box {
|
||||
border: 1px solid #555;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
/* Use flex centering so nested components (like the login widget)
|
||||
are centered without forcing the document to scroll. */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* If the project uses Bootstrap, the Bootstrap utilities will still apply.
|
||||
These local utility rules only ensure a consistent appearance if Bootstrap
|
||||
isn't available. */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.kanit-thin {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-extralight {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-light {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-regular {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-medium {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-semibold {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-bold {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-extrabold {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-black {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.kanit-thin-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-extralight-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-light-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-regular-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-medium-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-semibold-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-bold-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-extrabold-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.kanit-black-italic {
|
||||
font-family: "Kanit", sans-serif;
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user