177 lines
3.7 KiB
CSS
177 lines
3.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-700 dark:text-white
|
|
hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200 */
|
|
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 200, 700;
|
|
font-display: swap;
|
|
src: url("/static/fonts/inter-variablefont.ttf");
|
|
}
|
|
|
|
|
|
/* Sidebar Components */
|
|
|
|
.mobile-sidebar-header {
|
|
@apply
|
|
sticky
|
|
top-0
|
|
inset-x-0
|
|
z-20
|
|
lg:hidden;
|
|
}
|
|
|
|
.mobile-sidebar-header .mobile-sidebar-nav {
|
|
@apply
|
|
flex
|
|
p-4
|
|
sm:px-6
|
|
border-b
|
|
bg-white
|
|
dark:bg-neutral-800
|
|
dark:border-neutral-700;
|
|
}
|
|
|
|
.mobile-sidebar-header .mobile-sidebar-nav .mobile-sidebar-brand {
|
|
@apply text-xl font-semibold;
|
|
}
|
|
|
|
.sidebar-aside {
|
|
@apply
|
|
/* Position and Display */
|
|
transform
|
|
w-64
|
|
h-full
|
|
fixed
|
|
top-0
|
|
bottom-0
|
|
|
|
/* Colours and Border */
|
|
bg-white
|
|
border-e
|
|
border-gray-200
|
|
dark:bg-neutral-800
|
|
dark:border-neutral-700;
|
|
}
|
|
|
|
.sidebar-aside.main-sidebar {
|
|
@apply
|
|
[--auto-close:lg]
|
|
lg:block
|
|
lg:translate-x-0
|
|
lg:end-auto
|
|
lg:bottom-0
|
|
-translate-x-full
|
|
transition-all
|
|
duration-200
|
|
ease-in
|
|
start-0
|
|
z-[60]
|
|
}
|
|
|
|
.sidebar-aside.guild-sidebar {
|
|
@apply
|
|
[--auto-close:lg]
|
|
lg:block
|
|
lg:end-auto
|
|
lg:bottom-0
|
|
-translate-x-full
|
|
transition-all
|
|
duration-200
|
|
lg:duration-100
|
|
ease-in
|
|
start-0
|
|
lg:start-64
|
|
z-[59]
|
|
}
|
|
|
|
.sidebar-aside .sidebar-container {
|
|
@apply
|
|
relative
|
|
flex
|
|
flex-col
|
|
h-full
|
|
max-h-full;
|
|
}
|
|
|
|
.sidebar-aside .sidebar-container .sidebar-header {
|
|
@apply
|
|
px-6
|
|
pt-4
|
|
flex
|
|
justify-between
|
|
items-center;
|
|
}
|
|
|
|
.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand {
|
|
@apply
|
|
flex-none
|
|
rounded-xl
|
|
text-xl
|
|
inline-block
|
|
font-semibold
|
|
focus:outline-none
|
|
focus:opacity-80;
|
|
}
|
|
|
|
.sidebar-aside .sidebar-container .sidebar-content {
|
|
@apply
|
|
h-full
|
|
overflow-y-auto
|
|
[&::-webkit-scrollbar]:w-2
|
|
[&::-webkit-scrollbar-thumb]:rounded-full
|
|
[&::-webkit-scrollbar-track]:bg-gray-100
|
|
[&::-webkit-scrollbar-thumb]:bg-gray-300
|
|
dark:[&::-webkit-scrollbar-track]:bg-neutral-700
|
|
dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500
|
|
}
|
|
|
|
.sidebar-aside .sidebar-container .sidebar-content .sidebar-nav {
|
|
@apply
|
|
px-4
|
|
py-6
|
|
w-full
|
|
h-full
|
|
flex
|
|
flex-col
|
|
flex-wrap;
|
|
}
|
|
|
|
.sidebar-nav .sidebar-btn {
|
|
@apply
|
|
w-full
|
|
flex
|
|
items-center
|
|
gap-x-3.5
|
|
py-2
|
|
px-2.5
|
|
text-sm
|
|
rounded-md
|
|
focus:outline-none
|
|
text-gray-800
|
|
hover:bg-gray-100
|
|
focus:bg-gray-100
|
|
dark:bg-neutral-800
|
|
dark:hover:bg-neutral-700
|
|
dark:focus:bg-neutral-700
|
|
dark:text-neutral-200;
|
|
}
|
|
|
|
/* End Sidebar Components */
|
|
|
|
/* Guild Header */
|
|
|
|
.guild-header-btn {
|
|
@apply text-sm text-gray-800 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500;
|
|
}
|
|
|
|
.guild-header-btn.active {
|
|
@apply text-blue-600;
|
|
}
|
|
|
|
/* End Guild Header */
|