638 lines
13 KiB
CSS
638 lines
13 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
--light-background: #f5f5f5;
|
|
--light-foreground: #e0e0e0;
|
|
--light-accent: #303052;
|
|
--light-text: rgb(34, 40, 49);
|
|
|
|
--dark-background: #181818;
|
|
--dark-foreground: #222222;
|
|
--dark-accent: #bebff7;
|
|
--dark-text: rgb(238, 238, 238);
|
|
}
|
|
|
|
/* Scrollbar width */
|
|
::-webkit-scrollbar {
|
|
width: 0px;
|
|
}
|
|
|
|
@layer base {
|
|
body {
|
|
@apply bg-[var(--light-background)] text-[var(--light-text)] transition-colors duration-200;
|
|
}
|
|
|
|
.dark body {
|
|
@apply bg-[var(--dark-background)] text-[var(--dark-text)];
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
@apply font-medium text-[var(--light-text)];
|
|
}
|
|
|
|
.dark h1,
|
|
.dark h2,
|
|
.dark h3,
|
|
.dark h4,
|
|
.dark h5,
|
|
.dark h6 {
|
|
@apply text-[var(--dark-text)];
|
|
}
|
|
|
|
a {
|
|
@apply text-[var(--light-accent)] transition-colors duration-200;
|
|
}
|
|
|
|
a:hover {
|
|
@apply underline;
|
|
}
|
|
|
|
.dark a {
|
|
@apply text-[var(--dark-accent)];
|
|
}
|
|
|
|
input,
|
|
textarea,
|
|
select {
|
|
@apply rounded-lg border border-[var(--light-text)]/20 bg-[var(--light-foreground)] px-3 py-2 text-[var(--light-text)] transition-colors duration-200;
|
|
}
|
|
|
|
input:focus,
|
|
select:focus {
|
|
@apply ring-2 ring-[var(--light-accent)] outline-none;
|
|
}
|
|
|
|
.dark input,
|
|
.dark textarea,
|
|
.dark select {
|
|
@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
|
|
}
|
|
|
|
.dark input:focus,
|
|
.dark select:focus {
|
|
@apply ring-[var(--dark-accent)];
|
|
}
|
|
|
|
button {
|
|
@apply rounded-md bg-[var(--light-accent)] px-4 py-2 text-[var(--light-background)] transition-all duration-200;
|
|
}
|
|
|
|
button:hover {
|
|
@apply bg-[var(--light-accent)]/80;
|
|
}
|
|
|
|
button:focus {
|
|
@apply ring-2 ring-[var(--light-accent)]/50 outline-none;
|
|
}
|
|
|
|
button:disabled {
|
|
@apply opacity-50;
|
|
}
|
|
|
|
.dark button {
|
|
@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
|
|
}
|
|
|
|
.dark button:hover {
|
|
@apply bg-[var(--dark-accent)]/80;
|
|
}
|
|
|
|
.dark button:focus {
|
|
@apply ring-[var(--dark-accent)]/50;
|
|
}
|
|
}
|
|
|
|
/* Reusable component classes */
|
|
@layer components {
|
|
.card {
|
|
@apply rounded-lg bg-[var(--light-foreground)] p-6 shadow-md transition-colors duration-200;
|
|
}
|
|
|
|
.dark .card {
|
|
@apply bg-[var(--dark-foreground)];
|
|
}
|
|
|
|
.form-group {
|
|
@apply mb-4 space-y-2;
|
|
}
|
|
|
|
.form-label {
|
|
@apply block text-sm font-medium text-[var(--light-text)];
|
|
}
|
|
|
|
.dark .form-label {
|
|
@apply text-[var(--dark-text)];
|
|
}
|
|
|
|
/* Error messages */
|
|
.error {
|
|
@apply rounded-lg bg-red-100 p-3 text-sm text-red-500;
|
|
}
|
|
|
|
.dark .error {
|
|
@apply bg-red-900/30 text-red-300;
|
|
}
|
|
|
|
/* Success messages */
|
|
.success {
|
|
@apply rounded-lg bg-green-100 p-3 text-sm text-green-500;
|
|
}
|
|
|
|
.dark .success {
|
|
@apply bg-green-900/30 text-green-300;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-[var(--light-accent)] text-[var(--light-background)];
|
|
}
|
|
|
|
.dark .btn-primary {
|
|
@apply bg-[var(--dark-accent)] text-[var(--dark-background)];
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply border border-[var(--light-text)]/20 bg-[var(--light-foreground)] text-[var(--light-text)];
|
|
}
|
|
|
|
.dark .btn-secondary {
|
|
@apply border-[var(--dark-text)]/20 bg-[var(--dark-foreground)] text-[var(--dark-text)];
|
|
}
|
|
|
|
.container-page {
|
|
@apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
/* Sidebar */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
@apply w-full max-w-full;
|
|
}
|
|
|
|
body.sidebar-open {
|
|
@apply overflow-hidden;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.sidebar {
|
|
@apply w-64;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
@apply fixed flex h-full flex-col overflow-hidden border-r border-[var(--light-foreground)] bg-[var(--light-foreground)] transition-all duration-300;
|
|
}
|
|
|
|
.dark .sidebar {
|
|
@apply border-[var(--dark-foreground)] bg-[var(--dark-foreground)];
|
|
}
|
|
|
|
.sidebar-header,
|
|
.sidebar-footer {
|
|
@apply border-[var(--light-text)]/20 p-4;
|
|
}
|
|
|
|
.dark .sidebar-header,
|
|
.dark .sidebar-footer {
|
|
@apply border-[var(--dark-text)]/20;
|
|
}
|
|
|
|
.sidebar-header {
|
|
@apply border-b;
|
|
}
|
|
|
|
.sidebar-footer {
|
|
@apply border-t;
|
|
}
|
|
|
|
.sidebar-item {
|
|
@apply cursor-pointer p-3 transition-colors hover:bg-[var(--light-background)];
|
|
}
|
|
|
|
.dark .sidebar-item {
|
|
@apply hover:bg-[var(--dark-background)];
|
|
}
|
|
|
|
.sidebar-item-active {
|
|
@apply bg-[var(--light-background)];
|
|
}
|
|
|
|
.dark .sidebar-item-active {
|
|
@apply bg-[var(--dark-background)];
|
|
}
|
|
|
|
.sidebar-item-content {
|
|
@apply flex flex-col;
|
|
}
|
|
|
|
.sidebar-item-bottom-row {
|
|
@apply mt-1 flex items-center justify-between;
|
|
}
|
|
|
|
.sidebar-item-text {
|
|
@apply text-xs text-[var(--light-text)]/60;
|
|
}
|
|
|
|
.dark .sidebar-item-text {
|
|
@apply text-[var(--dark-text)]/60;
|
|
}
|
|
|
|
.sidebar-item-delete {
|
|
@apply flex h-6.5 w-6.5 cursor-pointer items-center justify-center rounded-lg border-1 border-[var(--light-accent)]/20 bg-transparent p-1;
|
|
}
|
|
|
|
.dark .sidebar-item-delete {
|
|
@apply border-[var(--dark-accent)]/20;
|
|
}
|
|
|
|
.sidebar-item-delete > svg {
|
|
@apply text-[var(--light-accent)]/50;
|
|
}
|
|
|
|
.dark .sidebar-item-delete > svg {
|
|
@apply text-[var(--dark-accent)]/50;
|
|
}
|
|
|
|
.sidebar-item-delete:hover > svg {
|
|
@apply text-[var(--light-accent)] transition-colors delay-100;
|
|
}
|
|
|
|
.dark .sidebar-item-delete:hover > svg {
|
|
@apply text-[var(--dark-accent)];
|
|
}
|
|
|
|
.sidebar-divider {
|
|
@apply divide-y divide-[var(--light-text)]/20;
|
|
}
|
|
|
|
.dark .sidebar-divider {
|
|
@apply divide-[var(--dark-text)]/20;
|
|
}
|
|
|
|
.search-bar {
|
|
@apply w-full rounded-md py-2 pr-3 pl-9;
|
|
}
|
|
|
|
.search-bar-icon {
|
|
@apply absolute top-3 left-7 h-4 w-4 text-[var(--light-text)]/60;
|
|
}
|
|
|
|
.dark .search-bar-icon {
|
|
@apply text-[var(--dark-text)]/60;
|
|
}
|
|
|
|
.general-sidebar-icon {
|
|
@apply h-4 w-4 text-[var(--light-text)]/60;
|
|
}
|
|
|
|
.dark .general-sidebar-icon {
|
|
@apply text-[var(--dark-text)]/60;
|
|
}
|
|
|
|
/* Versions dropdown */
|
|
.versions-dropdown {
|
|
@apply absolute right-0 z-10 mt-2 w-52 origin-top-right space-y-0.5 rounded-md bg-[var(--light-foreground)] shadow-lg ring-1 ring-[var(--light-foreground)]/10 focus:outline-none;
|
|
}
|
|
|
|
.dark .versions-dropdown {
|
|
@apply bg-[var(--dark-foreground)] ring-[var(--dark-foreground)]/10;
|
|
}
|
|
|
|
.versions-dropdown-item {
|
|
@apply w-full cursor-pointer bg-[var(--light-foreground)] p-3 transition-colors hover:bg-[var(--light-background)];
|
|
}
|
|
|
|
.dark .versions-dropdown-item {
|
|
@apply bg-[var(--dark-foreground)] hover:bg-[var(--dark-background)];
|
|
}
|
|
|
|
.versions-dropdown-item-active {
|
|
@apply bg-[var(--light-accent)]/20;
|
|
}
|
|
|
|
.dark .versions-dropdown-item-active {
|
|
@apply bg-[var(--dark-accent)]/20;
|
|
}
|
|
|
|
.versions-dropdown-item-text {
|
|
@apply text-xs text-[var(--light-text)]/60;
|
|
}
|
|
|
|
.dark .versions-dropdown-item-text {
|
|
@apply text-[var(--dark-text)]/60;
|
|
}
|
|
|
|
.versions-dropdown-divider {
|
|
@apply divide-y divide-[var(--light-text)]/20;
|
|
}
|
|
|
|
.dark .versions-dropdown-divider {
|
|
@apply divide-[var(--dark-text)]/20;
|
|
}
|
|
|
|
/* Note editor */
|
|
.note-title-container {
|
|
@apply mb-4;
|
|
}
|
|
|
|
.note-title-input {
|
|
@apply w-full rounded-2xl border-b border-[var(--light-text)]/20 bg-transparent pb-2 text-2xl font-bold focus:border-[var(--light-accent)];
|
|
}
|
|
|
|
.dark .note-title-input {
|
|
@apply border-[var(--dark-text)]/20 focus:border-[var(--dark-accent)];
|
|
}
|
|
|
|
.note-char-count {
|
|
@apply mt-2 text-xs text-[var(--light-text)]/60;
|
|
}
|
|
|
|
.dark .note-char-count {
|
|
@apply text-[var(--dark-text)]/60;
|
|
}
|
|
|
|
.note-editor-container {
|
|
@apply flex min-h-0 flex-1 flex-col overflow-auto;
|
|
}
|
|
|
|
.note-editor-wrapper {
|
|
@apply flex h-full flex-col;
|
|
}
|
|
|
|
.note-editor-content {
|
|
@apply flex h-full flex-col;
|
|
}
|
|
|
|
.note-textarea {
|
|
@apply h-full max-h-full min-h-1/2 w-full resize-none rounded-2xl bg-transparent p-3.5 font-mono outline-none focus:border-4 focus:border-[var(--light-accent)]/60;
|
|
}
|
|
|
|
.dark .note-textarea {
|
|
@apply focus:border-[var(--dark-accent)]/60;
|
|
}
|
|
|
|
.note-save-button {
|
|
@apply fixed right-10 bottom-10 z-10;
|
|
}
|
|
|
|
/* Markdown preview */
|
|
.markdown-preview h1 {
|
|
@apply mt-6 mb-4 border-b border-[var(--light-foreground)] pb-3 text-3xl;
|
|
}
|
|
|
|
.dark .markdown-preview h1 {
|
|
@apply border-[var(--dark-foreground)];
|
|
}
|
|
|
|
.markdown-preview h2 {
|
|
@apply mt-6 mb-4 text-2xl;
|
|
}
|
|
|
|
.markdown-preview h3 {
|
|
@apply mt-5 mb-3 text-xl;
|
|
}
|
|
|
|
.markdown-preview p {
|
|
@apply my-4;
|
|
}
|
|
|
|
.markdown-preview ul,
|
|
.markdown-preview ol {
|
|
@apply my-4 pl-5;
|
|
}
|
|
|
|
.markdown-preview ul {
|
|
@apply list-disc;
|
|
}
|
|
|
|
.markdown-preview ol {
|
|
@apply list-decimal;
|
|
}
|
|
|
|
.markdown-preview li > ul,
|
|
.markdown-preview li > ol,
|
|
.markdown-preview ul > ul,
|
|
.markdown-preview ul > ol,
|
|
.markdown-preview ol > ol,
|
|
.markdown-preview ol > ul {
|
|
@apply my-1; /* Reduced vertical spacing for nested lists */
|
|
}
|
|
|
|
.markdown-preview ul ul:has(> li > input[type="checkbox"]) {
|
|
@apply pl-11;
|
|
}
|
|
|
|
.markdown-preview ul ul ul:has(> li > input[type="checkbox"]) {
|
|
@apply pl-11;
|
|
}
|
|
|
|
.markdown-preview li span {
|
|
@apply ml-1.5;
|
|
}
|
|
|
|
.markdown-preview li:has(> input[type="checkbox"]) {
|
|
/* Bullet removal */
|
|
@apply -ml-4.5 list-none;
|
|
}
|
|
|
|
.markdown-preview input[type="checkbox"] {
|
|
/* Actual checkbox styling */
|
|
@apply mr-1 h-4 w-4 appearance-none rounded-full border-[var(--light-text)]/30 bg-[var(--light-foreground)] p-0 align-middle;
|
|
}
|
|
|
|
.dark .markdown-preview input[type="checkbox"] {
|
|
@apply border-[var(--dark-text)]/30 bg-[var(--dark-foreground)];
|
|
}
|
|
|
|
.markdown-preview input[type="checkbox"]:checked {
|
|
@apply border-[var(--light-accent)] bg-[var(--light-accent)];
|
|
}
|
|
|
|
.dark .markdown-preview input[type="checkbox"]:checked {
|
|
@apply border-[var(--dark-accent)] bg-[var(--dark-accent)];
|
|
}
|
|
|
|
.markdown-preview hr {
|
|
@apply border-[var(--light-text)]/20;
|
|
}
|
|
|
|
.dark .markdown-preview hr {
|
|
@apply border-[var(--dark-text)]/20;
|
|
}
|
|
|
|
.markdown-preview code {
|
|
@apply rounded bg-[var(--light-foreground)] px-1 py-0.5 font-mono;
|
|
}
|
|
|
|
.dark .markdown-preview code {
|
|
@apply bg-[var(--dark-foreground)];
|
|
}
|
|
|
|
.markdown-preview pre {
|
|
@apply overflow-x-auto rounded-2xl bg-[var(--light-foreground)] p-3;
|
|
}
|
|
|
|
.dark .markdown-preview pre {
|
|
@apply bg-[var(--dark-foreground)];
|
|
}
|
|
|
|
.markdown-preview blockquote {
|
|
@apply my-4 border-l-4 border-[var(--light-accent)] pl-4 text-[var(--light-text)] opacity-70;
|
|
}
|
|
|
|
.dark .markdown-preview blockquote {
|
|
@apply border-[var(--dark-accent)] text-[var(--dark-text)];
|
|
}
|
|
|
|
.markdown-preview a {
|
|
@apply text-[var(--light-accent)] underline;
|
|
}
|
|
|
|
.dark .markdown-preview a {
|
|
@apply text-[var(--dark-accent)];
|
|
}
|
|
|
|
.markdown-preview table {
|
|
@apply my-4 w-full border-collapse;
|
|
}
|
|
|
|
.markdown-preview th,
|
|
.markdown-preview td {
|
|
@apply border border-[var(--light-text)]/20 p-2 text-left;
|
|
}
|
|
|
|
.dark .markdown-preview th,
|
|
.dark .markdown-preview td {
|
|
@apply border-[var(--dark-text)]/20;
|
|
}
|
|
|
|
.markdown-preview th {
|
|
@apply bg-[var(--light-foreground)];
|
|
}
|
|
|
|
.dark .markdown-preview th {
|
|
@apply bg-[var(--dark-foreground)];
|
|
}
|
|
|
|
/* Settings modal */
|
|
.modal-backdrop {
|
|
@apply fixed inset-0 z-50 flex items-center justify-center backdrop-blur-xs;
|
|
}
|
|
|
|
.modal-content {
|
|
@apply mx-4 max-h-[90vh] w-full max-w-md overflow-y-auto rounded-lg bg-[var(--light-background)] shadow-lg;
|
|
}
|
|
|
|
.dark .modal-content {
|
|
@apply bg-[var(--dark-background)];
|
|
}
|
|
|
|
.modal-section {
|
|
@apply border-b border-[var(--light-text)]/20 p-4;
|
|
}
|
|
|
|
.dark .modal-section {
|
|
@apply border-[var(--dark-text)]/20;
|
|
}
|
|
|
|
.modal-close-button {
|
|
@apply text-[var(--light-background)]/60 hover:text-[var(--light-background)];
|
|
}
|
|
|
|
.dark .modal-close-button {
|
|
@apply text-[var(--dark-background)]/60 hover:text-[var(--dark-background)];
|
|
}
|
|
|
|
/* Loading spinner */
|
|
.loading-container {
|
|
@apply pointer-events-none flex h-screen w-full items-center justify-center;
|
|
}
|
|
|
|
.spinner {
|
|
@apply relative h-10 w-10;
|
|
}
|
|
|
|
.spinner-dot {
|
|
@apply absolute top-[37.5%] inline-block h-1/4 w-1/4 rounded-full bg-[var(--light-accent)];
|
|
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
|
|
}
|
|
|
|
.dark .spinner-dot {
|
|
@apply bg-[var(--dark-accent)];
|
|
}
|
|
|
|
.spinner .bounce1 {
|
|
@apply left-0;
|
|
animation-delay: -0.32s;
|
|
}
|
|
|
|
.spinner .bounce2 {
|
|
@apply left-[37.5%];
|
|
animation-delay: -0.16s;
|
|
}
|
|
|
|
.spinner .bounce3 {
|
|
@apply left-3/4;
|
|
}
|
|
|
|
@keyframes sk-bouncedelay {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
40% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
/* Main layout */
|
|
.main-layout-container {
|
|
@apply flex h-screen w-full bg-[var(--light-background)];
|
|
}
|
|
|
|
.dark .main-layout-container {
|
|
@apply bg-[var(--dark-background)];
|
|
}
|
|
|
|
.content-wrapper {
|
|
@apply flex h-screen flex-1 flex-col overflow-hidden;
|
|
}
|
|
|
|
.note-content-fixed-width {
|
|
@apply mx-auto flex w-full max-w-[800px] flex-col px-8 py-0;
|
|
height: calc(100% - 5rem);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.note-content-fixed-width {
|
|
@apply max-w-full px-4 py-0;
|
|
}
|
|
}
|
|
|
|
.main-error-popup {
|
|
@apply fixed top-4 right-4 z-50 max-w-md;
|
|
}
|
|
|
|
.main-header {
|
|
@apply flex h-20 items-center justify-between bg-[var(--light-foreground)] p-4 shadow-sm;
|
|
}
|
|
|
|
.dark .main-header {
|
|
@apply bg-[var(--dark-foreground)];
|
|
}
|
|
|
|
.main-content {
|
|
@apply flex min-h-0 flex-1 flex-col overflow-auto bg-[var(--light-background)] p-6;
|
|
}
|
|
|
|
.dark .main-content {
|
|
@apply bg-[var(--dark-background)];
|
|
}
|
|
}
|