148 lines
3.3 KiB
CSS
148 lines
3.3 KiB
CSS
@import 'tailwindcss';
|
|
* {
|
|
@apply text-white;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
code {
|
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
monospace;
|
|
}
|
|
|
|
@theme {
|
|
--color-base: #121212;
|
|
--color-highlight: #1f1f1f;
|
|
--color-highlight-2: #282828;
|
|
--color-subdued: #b3b3b3;
|
|
}
|
|
|
|
.page-content {
|
|
@apply flex-col p-4;
|
|
}
|
|
|
|
.scrollbar-minimal::-webkit-scrollbar {
|
|
@apply h-1 w-1;
|
|
}
|
|
|
|
.scrollbar-minimal::-webkit-scrollbar-thumb {
|
|
@apply bg-highlight rounded-full;
|
|
}
|
|
|
|
.scrollbar-minimal::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
html {
|
|
@apply bg-black;
|
|
}
|
|
|
|
.utility-container {
|
|
@apply flex py-4 w-full justify-center items-center;
|
|
}
|
|
|
|
.button-icon {
|
|
@apply h-min cursor-pointer rounded-full p-2 hover:bg-highlight;
|
|
}
|
|
.icon {
|
|
@apply fill-subdued group-hover:fill-white;
|
|
}
|
|
|
|
.box-card-list-container {
|
|
@apply flex;
|
|
}
|
|
.box-card-list {
|
|
@apply m-0 w-full flex flex-wrap p-0 items-start;
|
|
}
|
|
.box-card-container {
|
|
@apply max-w-md w-full;
|
|
}
|
|
.box-card {
|
|
@apply grid grid-rows-[auto_1fr_auto] m-2 min-h-64 max-h-128 min-w-[320px] max-w-full rounded-md bg-base p-4 text-subdued;
|
|
}
|
|
.overlay {
|
|
@apply absolute inset-0 bg-black opacity-50 z-10 border-dashed border-2 border-subdued hover:border-green-300 hover:cursor-pointer;
|
|
}
|
|
.box-card-header {
|
|
@apply flex justify-between;
|
|
}
|
|
.box-card-title {
|
|
@apply mb-2 text-xl font-bold text-white;
|
|
}
|
|
.box-card-subtitle {
|
|
@apply mb-4 text-sm font-semibold text-subdued;
|
|
}
|
|
.menu {
|
|
@apply z-40 flex items-center relative;
|
|
}
|
|
.menu-list-container {
|
|
@apply absolute right-0 z-10 mt-2 w-36 rounded bg-highlight p-1 shadow-lg;
|
|
}
|
|
.menu-list {
|
|
@apply text-sm;
|
|
}
|
|
.menu-button {
|
|
@apply flex w-full cursor-pointer items-center gap-4 rounded-xs px-4 py-2 text-subdued hover:bg-highlight-2 hover:fill-white hover:text-white;
|
|
}
|
|
.menu-button:hover * {
|
|
@apply fill-white;
|
|
}
|
|
|
|
.menu-item {
|
|
@apply block w-full cursor-pointer text-left;
|
|
}
|
|
|
|
.item-card-list-container {
|
|
@apply max-h-64 overflow-y-auto;
|
|
}
|
|
.item-card-list {
|
|
}
|
|
.item-container {
|
|
@apply flex justify-between align-middle rounded-sm px-2 hover:bg-highlight;
|
|
}
|
|
.item {
|
|
@apply flex flex-auto hover:cursor-pointer p-2;
|
|
}
|
|
.item-name {
|
|
@apply cursor-default;
|
|
}
|
|
.modal-container {
|
|
@apply fixed inset-0 z-50 flex items-center justify-center bg-black/80;
|
|
}
|
|
.modal {
|
|
@apply w-full max-w-lg rounded-xl bg-highlight p-6 m-6;
|
|
}
|
|
|
|
.input-label {
|
|
@apply block text-sm font-medium;
|
|
}
|
|
.input {
|
|
@apply mt-1 w-full rounded-sm border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500;
|
|
}
|
|
.button {
|
|
@apply rounded-sm bg-base px-4 py-2 text-white hover:bg-highlight-2 hover:cursor-pointer focus:ring-2 focus:ring-blue-500 focus:outline-none;
|
|
}
|
|
|
|
.search-container {
|
|
@apply relative w-full max-w-lg focus-within:fill-white;
|
|
}
|
|
|
|
.input-search {
|
|
@apply border-2 border-subdued bg-highlight group-hover:bg-highlight-2 w-full rounded-full py-2 pr-4 pl-10 focus:outline-none group-focus-within:border-white;
|
|
}
|
|
|
|
.search-icon {
|
|
@apply absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 transform fill-subdued group-focus-within:fill-white;
|
|
}
|
|
|
|
.actions {
|
|
@apply mt-4 flex gap-1;
|
|
}
|