update
This commit is contained in:
244
assets/script/hura.global.css
Normal file
244
assets/script/hura.global.css
Normal file
@@ -0,0 +1,244 @@
|
||||
/* ===========================
|
||||
FONT IMPORT (Dùng chung)
|
||||
=========================== */
|
||||
@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900;1000&display=swap";
|
||||
@import "https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800;1000&display=swap";
|
||||
@import "https://fonts.googleapis.com/css2?family=Inclusive+Sans:wght@400;500;600;700;800;900;1000&display=swap";
|
||||
@import "https://fonts.googleapis.com/css2?family=AR+One+Sans:wght@400;500;600;700;800;1000&display=swap";
|
||||
|
||||
@import "tailwindcss";
|
||||
@plugin "daisyui";
|
||||
|
||||
@layer properties {
|
||||
:root {
|
||||
--font-sans: "Inclusive Sans", sans-serif;
|
||||
--text-base: 16px;
|
||||
--color-hura: #0041e8;
|
||||
--color-header: #002bb5;
|
||||
--text-base--line-height: 1.5;
|
||||
--color-black: #000;
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--layout-topbar-background: #fff;
|
||||
--menu-active: #e9f2ff;
|
||||
--menu-text: #177bff;
|
||||
--menu-sub-bg: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--text-base--line-height);
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.btn-ouline,
|
||||
.btn-dash {
|
||||
border-width: 1px;
|
||||
border-color: gray;
|
||||
}
|
||||
.btn-active {
|
||||
--btn-bg: var(--color-hura);
|
||||
--btn-fg: #ffffff;
|
||||
--btn-border: var(--color-hura);
|
||||
color: var(--color-white);
|
||||
}
|
||||
.btn-active:hover {
|
||||
--btn-bg: #002bb5;
|
||||
--btn-border: #002bb5;
|
||||
}
|
||||
.bg-menu {
|
||||
background-color: var(--color-header);
|
||||
}
|
||||
.btn-view {
|
||||
background: #f5f7ff;
|
||||
color: var(--color-hura);
|
||||
border: 1px solid var(--color-hura);
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background: var(--color-hura);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* menu */
|
||||
.menu {
|
||||
& {
|
||||
--menu-active-bg: #e9f2ff;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-horizontal {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.menu-horizontal li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ACTIVE STATE (LEVEL 1) */
|
||||
|
||||
.menu-horizontal li.active {
|
||||
background: var(--menu-active);
|
||||
}
|
||||
|
||||
.menu-horizontal li.active .grow,
|
||||
.menu-horizontal li.active svg {
|
||||
color: var(--menu-text);
|
||||
}
|
||||
|
||||
/* ACTIVE STATE (LEVEL 2) */
|
||||
.menu-horizontal li.active ul li.active {
|
||||
background: var(--color-hura);
|
||||
}
|
||||
|
||||
.menu-horizontal li.active ul li.active a {
|
||||
color: #fff;
|
||||
}
|
||||
/* HOVER LEVEL 1 */
|
||||
|
||||
.menu-horizontal li:hover {
|
||||
background: var(--menu-active);
|
||||
}
|
||||
|
||||
.menu-horizontal li:hover .grow,
|
||||
.menu-horizontal li:hover svg {
|
||||
color: var(--color-hura);
|
||||
}
|
||||
|
||||
/* Dải hover giữ submenu không bị mất */
|
||||
.menu-horizontal li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -18px;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-horizontal li:hover::before {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ==========================
|
||||
SUBMENU (UL)
|
||||
========================== */
|
||||
.menu-horizontal li .submenu {
|
||||
position: absolute !important;
|
||||
top: 125%;
|
||||
left: 0;
|
||||
background: var(--menu-sub-bg);
|
||||
margin-left: 0 !important;
|
||||
padding: 0.5rem;
|
||||
z-index: 999;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* DaisyUI details submenu spacing */
|
||||
.menu-horizontal > li:not(.menu-title) > details > ul {
|
||||
margin-top: 1rem;
|
||||
padding-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
/* SHOW SUBMENU ON HOVER */
|
||||
.menu-horizontal li:hover .submenu,
|
||||
.menu-horizontal li:hover > details > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Remove extra before from DaisyUI */
|
||||
.menu-horizontal > li > details > ul:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* ==========================
|
||||
SUBMENU HOVER ITEMS
|
||||
========================== */
|
||||
.menu-horizontal li ul li:hover {
|
||||
background: var(--color-hura);
|
||||
}
|
||||
|
||||
.menu-horizontal li ul li:hover a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-horizontal li ul li:hover::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Font weight chung */
|
||||
.menu-horizontal .grow {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tw-qna {
|
||||
gap: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.tw-zy {
|
||||
align-items: center;
|
||||
}
|
||||
.tw-uba {
|
||||
display: inline-flex;
|
||||
}
|
||||
.tw-usa {
|
||||
width: calc(var(--spacing) * 5);
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
.tw-sla {
|
||||
width: calc(var(--spacing) * 4.5);
|
||||
height: calc(var(--spacing) * 4.5);
|
||||
}
|
||||
.menu-icon-color {
|
||||
color: #838383;
|
||||
}
|
||||
.card-body {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
.-mt-25 {
|
||||
margin-top: calc(var(--spacing) * -25);
|
||||
}
|
||||
}
|
||||
|
||||
#layout-topbar {
|
||||
background: var(--layout-topbar-background);
|
||||
top: calc(var(--spacing) * 0);
|
||||
z-index: 10;
|
||||
transition-property: top, margin, border-radius;
|
||||
transition-timing-function: var(
|
||||
--tw-ease,
|
||||
var(--default-transition-timing-function)
|
||||
);
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
--tw-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
position: sticky;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-color: var(--color-base-300);
|
||||
}
|
||||
#layout-content {
|
||||
padding: calc(var(--spacing) * 6);
|
||||
transition-property: all;
|
||||
transition-timing-function: var(
|
||||
--tw-ease,
|
||||
var(--default-transition-timing-function)
|
||||
);
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
flex-grow: 1;
|
||||
}
|
||||
Reference in New Issue
Block a user