mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
2332 lines
47 KiB
CSS
2332 lines
47 KiB
CSS
/* ================================================
|
|
TASKNOTES SCOPED UTILITY CLASSES
|
|
================================================
|
|
|
|
This file contains a comprehensive set of utility classes for the
|
|
ChronoSync/TaskNotes plugin. All utilities are properly scoped under
|
|
.tasknotes-plugin and follow the established naming conventions.
|
|
|
|
Naming Convention: .tn-{property}-{value}
|
|
All utilities use --tn- CSS variables for consistency
|
|
|
|
Categories:
|
|
- Layout Utilities (flexbox, grid, positioning)
|
|
- Spacing Utilities (margin, padding, gap)
|
|
- Typography Utilities (text alignment, font styles)
|
|
- Display Utilities (visibility, display types)
|
|
- Background & Border Utilities
|
|
- State Utilities (hover, focus, loading)
|
|
- Animation Utilities
|
|
|
|
================================================ */
|
|
|
|
/* ================================================
|
|
LAYOUT UTILITIES - FLEXBOX
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-inline {
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Flex Direction */
|
|
.tasknotes-plugin .tn-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-row-reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col-reverse {
|
|
flex-direction: column-reverse;
|
|
}
|
|
|
|
/* Flex Wrap */
|
|
.tasknotes-plugin .tn-flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-nowrap {
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-wrap-reverse {
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
|
|
/* Justify Content */
|
|
.tasknotes-plugin .tn-justify-start {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-end {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-between {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-around {
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-justify-evenly {
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
/* Align Items */
|
|
.tasknotes-plugin .tn-items-start {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-end {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-center {
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-baseline {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-items-stretch {
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* Align Self */
|
|
.tasknotes-plugin .tn-self-auto {
|
|
align-self: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-start {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-end {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-center {
|
|
align-self: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-self-stretch {
|
|
align-self: stretch;
|
|
}
|
|
|
|
/* Flex Growth and Shrink */
|
|
.tasknotes-plugin .tn-flex-1 {
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-auto {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-initial {
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-none {
|
|
flex: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grow {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grow-0 {
|
|
flex-grow: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shrink {
|
|
flex-shrink: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shrink-0 {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Common Flex Combinations */
|
|
.tasknotes-plugin .tn-flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-around {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-evenly {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-flex-col-between {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* ================================================
|
|
LAYOUT UTILITIES - GRID
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-inline {
|
|
display: inline-grid;
|
|
}
|
|
|
|
/* Grid Template Columns */
|
|
.tasknotes-plugin .tn-grid-cols-1 {
|
|
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-2 {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-3 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-4 {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-5 {
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-6 {
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-7 {
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-cols-12 {
|
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
}
|
|
|
|
/* Grid Template Rows */
|
|
.tasknotes-plugin .tn-grid-rows-1 {
|
|
grid-template-rows: repeat(1, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-rows-2 {
|
|
grid-template-rows: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-rows-3 {
|
|
grid-template-rows: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-grid-rows-4 {
|
|
grid-template-rows: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
/* Grid Column Span */
|
|
.tasknotes-plugin .tn-col-span-1 {
|
|
grid-column: span 1 / span 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-2 {
|
|
grid-column: span 2 / span 2;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-3 {
|
|
grid-column: span 3 / span 3;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-4 {
|
|
grid-column: span 4 / span 4;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-col-span-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
/* Grid Row Span */
|
|
.tasknotes-plugin .tn-row-span-1 {
|
|
grid-row: span 1 / span 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-row-span-2 {
|
|
grid-row: span 2 / span 2;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-row-span-3 {
|
|
grid-row: span 3 / span 3;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-row-span-full {
|
|
grid-row: 1 / -1;
|
|
}
|
|
|
|
/* ================================================
|
|
LAYOUT UTILITIES - POSITIONING
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-static {
|
|
position: static;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-fixed {
|
|
position: fixed;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-absolute {
|
|
position: absolute;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-relative {
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sticky {
|
|
position: sticky;
|
|
}
|
|
|
|
/* Positioning Values */
|
|
.tasknotes-plugin .tn-inset-0 {
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-top-0 {
|
|
top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-right-0 {
|
|
right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bottom-0 {
|
|
bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-left-0 {
|
|
left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-top-auto {
|
|
top: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-right-auto {
|
|
right: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bottom-auto {
|
|
bottom: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-left-auto {
|
|
left: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
SPACING UTILITIES - MARGIN
|
|
================================================ */
|
|
|
|
/* All sides */
|
|
.tasknotes-plugin .tn-m-0 {
|
|
margin: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-xs {
|
|
margin: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-sm {
|
|
margin: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-md {
|
|
margin: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-lg {
|
|
margin: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-xl {
|
|
margin: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-m-auto {
|
|
margin: auto;
|
|
}
|
|
|
|
/* Horizontal */
|
|
.tasknotes-plugin .tn-mx-0 {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-xs {
|
|
margin-left: var(--tn-spacing-xs);
|
|
margin-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-sm {
|
|
margin-left: var(--tn-spacing-sm);
|
|
margin-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-md {
|
|
margin-left: var(--tn-spacing-md);
|
|
margin-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-lg {
|
|
margin-left: var(--tn-spacing-lg);
|
|
margin-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-xl {
|
|
margin-left: var(--tn-spacing-xl);
|
|
margin-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mx-auto {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* Vertical */
|
|
.tasknotes-plugin .tn-my-0 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-xs {
|
|
margin-top: var(--tn-spacing-xs);
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-sm {
|
|
margin-top: var(--tn-spacing-sm);
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-md {
|
|
margin-top: var(--tn-spacing-md);
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-lg {
|
|
margin-top: var(--tn-spacing-lg);
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-xl {
|
|
margin-top: var(--tn-spacing-xl);
|
|
margin-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-my-auto {
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
/* Individual sides */
|
|
.tasknotes-plugin .tn-mt-0 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-xs {
|
|
margin-top: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-sm {
|
|
margin-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-md {
|
|
margin-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-lg {
|
|
margin-top: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-xl {
|
|
margin-top: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mt-auto {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-0 {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-xs {
|
|
margin-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-sm {
|
|
margin-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-md {
|
|
margin-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-lg {
|
|
margin-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-xl {
|
|
margin-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mr-auto {
|
|
margin-right: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-0 {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-xs {
|
|
margin-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-sm {
|
|
margin-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-md {
|
|
margin-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-lg {
|
|
margin-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-xl {
|
|
margin-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-mb-auto {
|
|
margin-bottom: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-0 {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-xs {
|
|
margin-left: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-sm {
|
|
margin-left: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-md {
|
|
margin-left: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-lg {
|
|
margin-left: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-xl {
|
|
margin-left: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-ml-auto {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
SPACING UTILITIES - PADDING
|
|
================================================ */
|
|
|
|
/* All sides */
|
|
.tasknotes-plugin .tn-p-0 {
|
|
padding: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-xs {
|
|
padding: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-sm {
|
|
padding: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-md {
|
|
padding: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-lg {
|
|
padding: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-p-xl {
|
|
padding: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Horizontal */
|
|
.tasknotes-plugin .tn-px-0 {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-xs {
|
|
padding-left: var(--tn-spacing-xs);
|
|
padding-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-sm {
|
|
padding-left: var(--tn-spacing-sm);
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-md {
|
|
padding-left: var(--tn-spacing-md);
|
|
padding-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-lg {
|
|
padding-left: var(--tn-spacing-lg);
|
|
padding-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-px-xl {
|
|
padding-left: var(--tn-spacing-xl);
|
|
padding-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Vertical */
|
|
.tasknotes-plugin .tn-py-0 {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-xs {
|
|
padding-top: var(--tn-spacing-xs);
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-sm {
|
|
padding-top: var(--tn-spacing-sm);
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-md {
|
|
padding-top: var(--tn-spacing-md);
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-lg {
|
|
padding-top: var(--tn-spacing-lg);
|
|
padding-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-py-xl {
|
|
padding-top: var(--tn-spacing-xl);
|
|
padding-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* Individual sides */
|
|
.tasknotes-plugin .tn-pt-0 {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-xs {
|
|
padding-top: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-sm {
|
|
padding-top: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-md {
|
|
padding-top: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-lg {
|
|
padding-top: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pt-xl {
|
|
padding-top: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-0 {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-xs {
|
|
padding-right: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-sm {
|
|
padding-right: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-md {
|
|
padding-right: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-lg {
|
|
padding-right: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pr-xl {
|
|
padding-right: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-0 {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-xs {
|
|
padding-bottom: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-sm {
|
|
padding-bottom: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-md {
|
|
padding-bottom: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-lg {
|
|
padding-bottom: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pb-xl {
|
|
padding-bottom: var(--tn-spacing-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-0 {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-xs {
|
|
padding-left: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-sm {
|
|
padding-left: var(--tn-spacing-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-md {
|
|
padding-left: var(--tn-spacing-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-lg {
|
|
padding-left: var(--tn-spacing-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pl-xl {
|
|
padding-left: var(--tn-spacing-xl);
|
|
}
|
|
|
|
/* ================================================
|
|
SPACING UTILITIES - GAP
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-gap-0 {
|
|
--tn-gap-row: 0;
|
|
--tn-gap-column: 0;
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-xs {
|
|
--tn-gap-row: var(--tn-spacing-xs);
|
|
--tn-gap-column: var(--tn-spacing-xs);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-sm {
|
|
--tn-gap-row: var(--tn-spacing-sm);
|
|
--tn-gap-column: var(--tn-spacing-sm);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-md {
|
|
--tn-gap-row: var(--tn-spacing-md);
|
|
--tn-gap-column: var(--tn-spacing-md);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-lg {
|
|
--tn-gap-row: var(--tn-spacing-lg);
|
|
--tn-gap-column: var(--tn-spacing-lg);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-xl {
|
|
--tn-gap-row: var(--tn-spacing-xl);
|
|
--tn-gap-column: var(--tn-spacing-xl);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column);
|
|
}
|
|
|
|
/* Column Gap */
|
|
.tasknotes-plugin .tn-gap-x-0 {
|
|
--tn-gap-column: 0;
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-xs {
|
|
--tn-gap-column: var(--tn-spacing-xs);
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-sm {
|
|
--tn-gap-column: var(--tn-spacing-sm);
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-md {
|
|
--tn-gap-column: var(--tn-spacing-md);
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-lg {
|
|
--tn-gap-column: var(--tn-spacing-lg);
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-x-xl {
|
|
--tn-gap-column: var(--tn-spacing-xl);
|
|
gap: var(--tn-gap-row, 0) var(--tn-gap-column);
|
|
}
|
|
|
|
/* Row Gap */
|
|
.tasknotes-plugin .tn-gap-y-0 {
|
|
--tn-gap-row: 0;
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-xs {
|
|
--tn-gap-row: var(--tn-spacing-xs);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-sm {
|
|
--tn-gap-row: var(--tn-spacing-sm);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-md {
|
|
--tn-gap-row: var(--tn-spacing-md);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-lg {
|
|
--tn-gap-row: var(--tn-spacing-lg);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-gap-y-xl {
|
|
--tn-gap-row: var(--tn-spacing-xl);
|
|
gap: var(--tn-gap-row) var(--tn-gap-column, 0);
|
|
}
|
|
|
|
/* ================================================
|
|
DISPLAY UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-inline-block {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-inline {
|
|
display: inline;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-table {
|
|
display: table;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-table-row {
|
|
display: table-row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-table-cell {
|
|
display: table-cell;
|
|
}
|
|
|
|
/* ================================================
|
|
VISIBILITY UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-invisible {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-collapse {
|
|
visibility: collapse;
|
|
}
|
|
|
|
/* ================================================
|
|
TYPOGRAPHY UTILITIES
|
|
================================================ */
|
|
|
|
/* Text Alignment */
|
|
.tasknotes-plugin .tn-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-justify {
|
|
text-align: justify;
|
|
}
|
|
|
|
/* Font Weight */
|
|
.tasknotes-plugin .tn-font-thin {
|
|
font-weight: 100;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-light {
|
|
font-weight: 300;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-normal {
|
|
font-weight: var(--tn-font-weight-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-medium {
|
|
font-weight: var(--tn-font-weight-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-semibold {
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-font-bold {
|
|
font-weight: var(--tn-font-weight-bold);
|
|
}
|
|
|
|
/* Font Size */
|
|
.tasknotes-plugin .tn-text-xs {
|
|
font-size: var(--tn-font-size-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-sm {
|
|
font-size: var(--tn-font-size-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-base {
|
|
font-size: var(--tn-font-size-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-lg {
|
|
font-size: var(--tn-font-size-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-xl {
|
|
font-size: var(--tn-font-size-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-2xl {
|
|
font-size: var(--tn-font-size-2xl);
|
|
}
|
|
|
|
/* Text Transform */
|
|
.tasknotes-plugin .tn-uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lowercase {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-capitalize {
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-normal-case {
|
|
text-transform: none;
|
|
}
|
|
|
|
/* Text Decoration */
|
|
.tasknotes-plugin .tn-underline {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-line-through {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-no-underline {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Line Height */
|
|
.tasknotes-plugin .tn-leading-none {
|
|
line-height: 1;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-tight {
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-snug {
|
|
line-height: 1.375;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-normal {
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-relaxed {
|
|
line-height: 1.625;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-leading-loose {
|
|
line-height: 2;
|
|
}
|
|
|
|
/* Text Colors */
|
|
.tasknotes-plugin .tn-text-normal {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-muted {
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-faint {
|
|
color: var(--tn-text-faint);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-accent {
|
|
color: var(--tn-text-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-success {
|
|
color: var(--tn-color-success);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-warning {
|
|
color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-error {
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-text-info {
|
|
color: var(--tn-color-info);
|
|
}
|
|
|
|
/* ================================================
|
|
BACKGROUND UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-bg-primary {
|
|
background-color: var(--tn-bg-primary);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-secondary {
|
|
background-color: var(--tn-bg-secondary);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-accent {
|
|
background-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-success {
|
|
background-color: var(--tn-color-success);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-warning {
|
|
background-color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-error {
|
|
background-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-info {
|
|
background-color: var(--tn-color-info);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-bg-transparent {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* ================================================
|
|
BORDER UTILITIES
|
|
================================================ */
|
|
|
|
/* Border Width */
|
|
.tasknotes-plugin .tn-border-0 {
|
|
border-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border {
|
|
border-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-2 {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-t {
|
|
border-top-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-r {
|
|
border-right-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-b {
|
|
border-bottom-width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-l {
|
|
border-left-width: 1px;
|
|
}
|
|
|
|
/* Border Style */
|
|
.tasknotes-plugin .tn-border-solid {
|
|
border-style: solid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-dashed {
|
|
border-style: dashed;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-dotted {
|
|
border-style: dotted;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-none {
|
|
border-style: none;
|
|
}
|
|
|
|
/* Border Color */
|
|
.tasknotes-plugin .tn-border-normal {
|
|
border-color: var(--tn-border-color);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-hover {
|
|
border-color: var(--tn-border-color-hover);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-accent {
|
|
border-color: var(--tn-interactive-accent);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-success {
|
|
border-color: var(--tn-color-success);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-warning {
|
|
border-color: var(--tn-color-warning);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-error {
|
|
border-color: var(--tn-color-error);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-border-transparent {
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Border Radius */
|
|
.tasknotes-plugin .tn-rounded-none {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-xs {
|
|
border-radius: var(--tn-radius-xs);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-sm {
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded {
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-md {
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-lg {
|
|
border-radius: var(--tn-radius-lg);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-xl {
|
|
border-radius: var(--tn-radius-xl);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-full {
|
|
border-radius: var(--tn-radius-full);
|
|
}
|
|
|
|
/* Individual corner radius */
|
|
.tasknotes-plugin .tn-rounded-t-sm {
|
|
border-top-left-radius: var(--tn-radius-sm);
|
|
border-top-right-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-r-sm {
|
|
border-top-right-radius: var(--tn-radius-sm);
|
|
border-bottom-right-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-b-sm {
|
|
border-bottom-left-radius: var(--tn-radius-sm);
|
|
border-bottom-right-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-rounded-l-sm {
|
|
border-top-left-radius: var(--tn-radius-sm);
|
|
border-bottom-left-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
/* ================================================
|
|
SHADOW UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-shadow-none {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-light {
|
|
box-shadow: var(--tn-shadow-light);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow {
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-medium {
|
|
box-shadow: var(--tn-shadow-medium);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-strong {
|
|
box-shadow: var(--tn-shadow-strong);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-shadow-hover {
|
|
box-shadow: var(--tn-shadow-hover);
|
|
}
|
|
|
|
/* ================================================
|
|
OVERFLOW UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-overflow-auto {
|
|
overflow: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-hidden {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-visible {
|
|
overflow: visible;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-scroll {
|
|
overflow: scroll;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-x-auto {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-x-hidden {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-x-scroll {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-y-auto {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-y-hidden {
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-overflow-y-scroll {
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
/* ================================================
|
|
SIZE UTILITIES
|
|
================================================ */
|
|
|
|
/* Width */
|
|
.tasknotes-plugin .tn-w-auto {
|
|
width: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-full {
|
|
width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-screen {
|
|
width: 100vw;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-min {
|
|
width: min-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-max {
|
|
width: max-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-fit {
|
|
width: fit-content;
|
|
}
|
|
|
|
/* Specific widths */
|
|
.tasknotes-plugin .tn-w-0 {
|
|
width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-px {
|
|
width: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-1 {
|
|
width: 0.25rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-2 {
|
|
width: 0.5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-4 {
|
|
width: 1rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-8 {
|
|
width: 2rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-12 {
|
|
width: 3rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-16 {
|
|
width: 4rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-20 {
|
|
width: 5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-w-24 {
|
|
width: 6rem;
|
|
}
|
|
|
|
/* Height */
|
|
.tasknotes-plugin .tn-h-auto {
|
|
height: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-full {
|
|
height: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-screen {
|
|
height: 100vh;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-min {
|
|
height: min-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-max {
|
|
height: max-content;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-fit {
|
|
height: fit-content;
|
|
}
|
|
|
|
/* Specific heights */
|
|
.tasknotes-plugin .tn-h-0 {
|
|
height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-px {
|
|
height: 1px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-1 {
|
|
height: 0.25rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-2 {
|
|
height: 0.5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-4 {
|
|
height: 1rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-8 {
|
|
height: 2rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-12 {
|
|
height: 3rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-16 {
|
|
height: 4rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-20 {
|
|
height: 5rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-h-24 {
|
|
height: 6rem;
|
|
}
|
|
|
|
/* Min/Max Width */
|
|
.tasknotes-plugin .tn-min-w-0 {
|
|
min-width: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-min-w-full {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-xs {
|
|
max-width: 20rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-sm {
|
|
max-width: 24rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-md {
|
|
max-width: 28rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-lg {
|
|
max-width: 32rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-xl {
|
|
max-width: 36rem;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-full {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-w-none {
|
|
max-width: none;
|
|
}
|
|
|
|
/* Min/Max Height */
|
|
.tasknotes-plugin .tn-min-h-0 {
|
|
min-height: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-min-h-full {
|
|
min-height: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-h-full {
|
|
max-height: 100%;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-max-h-screen {
|
|
max-height: 100vh;
|
|
}
|
|
|
|
/* ================================================
|
|
Z-INDEX UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-z-0 {
|
|
z-index: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-10 {
|
|
z-index: 10;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-20 {
|
|
z-index: 20;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-30 {
|
|
z-index: 30;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-40 {
|
|
z-index: 40;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-50 {
|
|
z-index: 50;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-auto {
|
|
z-index: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-sticky {
|
|
z-index: var(--tn-z-sticky);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-dropdown {
|
|
z-index: var(--tn-z-dropdown);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-modal {
|
|
z-index: var(--tn-z-modal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-z-tooltip {
|
|
z-index: var(--tn-z-tooltip);
|
|
}
|
|
|
|
/* ================================================
|
|
CURSOR UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-cursor-auto {
|
|
cursor: auto;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-default {
|
|
cursor: default;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-pointer {
|
|
cursor: var(--cursor-link, pointer);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-wait {
|
|
cursor: wait;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-text {
|
|
cursor: text;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-move {
|
|
cursor: move;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-help {
|
|
cursor: help;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-not-allowed {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-grab {
|
|
cursor: grab;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-cursor-grabbing {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* ================================================
|
|
USER SELECT UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-select-none {
|
|
user-select: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-select-text {
|
|
user-select: text;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-select-all {
|
|
user-select: all;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-select-auto {
|
|
user-select: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
POINTER EVENTS UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-pointer-events-none {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-pointer-events-auto {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ================================================
|
|
TRANSITIONS UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-transition-none {
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-fast {
|
|
transition: background-color var(--tn-transition-fast), border-color var(--tn-transition-fast), box-shadow var(--tn-transition-fast), color var(--tn-transition-fast), opacity var(--tn-transition-fast), transform var(--tn-transition-fast);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition {
|
|
transition: background-color var(--tn-transition-normal), border-color var(--tn-transition-normal), box-shadow var(--tn-transition-normal), color var(--tn-transition-normal), opacity var(--tn-transition-normal), transform var(--tn-transition-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-slow {
|
|
transition: background-color var(--tn-transition-slow), border-color var(--tn-transition-slow), box-shadow var(--tn-transition-slow), color var(--tn-transition-slow), opacity var(--tn-transition-slow), transform var(--tn-transition-slow);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-colors {
|
|
transition: color var(--tn-transition-normal), background-color var(--tn-transition-normal), border-color var(--tn-transition-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-opacity {
|
|
transition: opacity var(--tn-transition-normal);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transition-transform {
|
|
transition: transform var(--tn-transition-normal);
|
|
}
|
|
|
|
/* ================================================
|
|
TRANSFORM UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-transform {
|
|
transform: var(--tw-transform);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-transform-none {
|
|
transform: none;
|
|
}
|
|
|
|
/* Scale */
|
|
.tasknotes-plugin .tn-scale-0 {
|
|
--tw-scale-x: 0;
|
|
--tw-scale-y: 0;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-50 {
|
|
--tw-scale-x: 0.5;
|
|
--tw-scale-y: 0.5;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-75 {
|
|
--tw-scale-x: 0.75;
|
|
--tw-scale-y: 0.75;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-90 {
|
|
--tw-scale-x: 0.9;
|
|
--tw-scale-y: 0.9;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-95 {
|
|
--tw-scale-x: 0.95;
|
|
--tw-scale-y: 0.95;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-100 {
|
|
--tw-scale-x: 1;
|
|
--tw-scale-y: 1;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-105 {
|
|
--tw-scale-x: 1.05;
|
|
--tw-scale-y: 1.05;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-110 {
|
|
--tw-scale-x: 1.1;
|
|
--tw-scale-y: 1.1;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
.tasknotes-plugin .tn-scale-125 {
|
|
--tw-scale-x: 1.25;
|
|
--tw-scale-y: 1.25;
|
|
transform: scale(var(--tw-scale-x), var(--tw-scale-y));
|
|
}
|
|
|
|
/* ================================================
|
|
OPACITY UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-opacity-0 {
|
|
opacity: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-25 {
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-50 {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-75 {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-opacity-100 {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ================================================
|
|
STATE UTILITIES
|
|
================================================ */
|
|
|
|
/* Loading State */
|
|
.tasknotes-plugin .tn-loading {
|
|
opacity: 0.7;
|
|
pointer-events: none;
|
|
position: relative;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: -8px 0 0 -8px;
|
|
border: 2px solid currentColor;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: tn-spin 0.8s linear infinite;
|
|
}
|
|
|
|
/* Disabled State */
|
|
.tasknotes-plugin .tn-disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Interactive States */
|
|
.tasknotes-plugin .tn-hover-opacity:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hover-scale:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hover-shadow:hover {
|
|
box-shadow: var(--tn-shadow-hover);
|
|
}
|
|
|
|
/* Focus States */
|
|
.tasknotes-plugin .tn-focus-ring:focus {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus-visible {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ================================================
|
|
ANIMATION UTILITIES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin .tn-animate-spin {
|
|
animation: tn-spin 1s linear infinite;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-pulse {
|
|
animation: tn-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-bounce {
|
|
animation: tn-bounce 1s infinite;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-fade-in {
|
|
animation: tn-fade-in 0.3s ease-out;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-slide-up {
|
|
animation: tn-slide-up 0.3s ease-out;
|
|
}
|
|
|
|
/* Keyframes */
|
|
@keyframes tn-spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes tn-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
@keyframes tn-bounce {
|
|
0%, 100% {
|
|
transform: translateY(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: translateY(0);
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes tn-fade-in {
|
|
0% { opacity: 0; }
|
|
100% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes tn-slide-up {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
ACCESSIBILITY UTILITIES
|
|
================================================ */
|
|
|
|
/* Screen Reader Only */
|
|
.tasknotes-plugin .tn-sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-not-sr-only {
|
|
position: static;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* ================================================
|
|
RESPONSIVE UTILITIES (MOBILE-FIRST)
|
|
================================================ */
|
|
|
|
/* Small screens (tablets, 768px and up) */
|
|
@media (min-width: 768px) {
|
|
.tasknotes-plugin .tn-sm-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-sm-text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* Medium screens (desktops, 992px and up) */
|
|
@media (min-width: 992px) {
|
|
.tasknotes-plugin .tn-md-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-md-text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* Large screens (large desktops, 1200px and up) */
|
|
@media (min-width: 1200px) {
|
|
.tasknotes-plugin .tn-lg-block {
|
|
display: block;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-flex {
|
|
display: flex;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-grid {
|
|
display: grid;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-flex-col {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-text-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-text-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-lg-text-right {
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
DARK MODE SUPPORT
|
|
================================================ */
|
|
|
|
/* Dark mode specific utilities */
|
|
.theme-dark .tasknotes-plugin .tn-dark-bg-primary {
|
|
background-color: var(--tn-bg-primary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-bg-secondary {
|
|
background-color: var(--tn-bg-secondary);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-text-normal {
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-text-muted {
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.theme-dark .tasknotes-plugin .tn-dark-border-normal {
|
|
border-color: var(--tn-border-color);
|
|
}
|
|
|
|
/* ================================================
|
|
REDUCED MOTION SUPPORT
|
|
================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.tasknotes-plugin .tn-transition-fast,
|
|
.tasknotes-plugin .tn-transition,
|
|
.tasknotes-plugin .tn-transition-slow,
|
|
.tasknotes-plugin .tn-transition-colors,
|
|
.tasknotes-plugin .tn-transition-opacity,
|
|
.tasknotes-plugin .tn-transition-transform {
|
|
transition: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-animate-spin,
|
|
.tasknotes-plugin .tn-animate-pulse,
|
|
.tasknotes-plugin .tn-animate-bounce,
|
|
.tasknotes-plugin .tn-animate-fade-in,
|
|
.tasknotes-plugin .tn-animate-slide-up {
|
|
animation: none;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-hover-scale:hover {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
HIGH CONTRAST SUPPORT
|
|
================================================ */
|
|
|
|
@media (prefers-contrast: high) {
|
|
.tasknotes-plugin .tn-border {
|
|
border-width: 2px;
|
|
}
|
|
|
|
.tasknotes-plugin .tn-focus-ring:focus,
|
|
.tasknotes-plugin .tn-focus-ring:focus-visible {
|
|
outline-width: 3px;
|
|
}
|
|
}
|
|
|
|
/* ================================================
|
|
BUTTON UTILITIES - SCOPED FOR SETTINGS ONLY
|
|
================================================ */
|
|
|
|
/* Base Button - Scoped to settings modal */
|
|
.mod-settings .tasknotes-plugin .tn-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--tn-spacing-sm);
|
|
padding: var(--tn-spacing-sm) var(--tn-spacing-md);
|
|
border: none;
|
|
border-radius: var(--tn-radius-md);
|
|
background: transparent;
|
|
color: var(--tn-text-normal);
|
|
font-family: inherit;
|
|
font-size: var(--tn-font-size-md);
|
|
font-weight: var(--tn-font-weight-medium);
|
|
line-height: 1;
|
|
cursor: var(--cursor-link, pointer);
|
|
user-select: none;
|
|
text-decoration: none;
|
|
outline: none;
|
|
box-shadow: none;
|
|
transition: background-color var(--tn-transition-fast), border-color var(--tn-transition-fast), box-shadow var(--tn-transition-fast), color var(--tn-transition-fast), transform var(--tn-transition-fast);
|
|
min-height: var(--tn-button-height-md);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:hover {
|
|
background: var(--tn-interactive-hover);
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:active {
|
|
opacity: 0.8;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:focus-visible {
|
|
outline: 2px solid var(--tn-interactive-accent);
|
|
outline-offset: 2px;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn:disabled {
|
|
opacity: var(--cs-state-disabled);
|
|
cursor: not-allowed;
|
|
pointer-events: none;
|
|
border: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Button Sizes */
|
|
.mod-settings .tasknotes-plugin .tn-btn--sm {
|
|
padding: var(--tn-spacing-xs) var(--tn-spacing-sm);
|
|
font-size: var(--tn-font-size-sm);
|
|
min-height: var(--tn-button-height-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--lg {
|
|
padding: var(--tn-spacing-md) var(--tn-spacing-lg);
|
|
font-size: var(--tn-font-size-lg);
|
|
font-weight: var(--tn-font-weight-semibold);
|
|
min-height: var(--tn-button-height-lg);
|
|
border-radius: var(--tn-radius-lg);
|
|
}
|
|
|
|
/* Button Variants */
|
|
.mod-settings .tasknotes-plugin .tn-btn--primary {
|
|
background: var(--tn-interactive-accent);
|
|
color: var(--text-on-accent);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--primary:hover {
|
|
background: var(--tn-interactive-accent-hover);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--secondary {
|
|
background: var(--tn-interactive-normal);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--secondary:hover {
|
|
background: var(--tn-interactive-hover);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--ghost {
|
|
background: transparent;
|
|
color: var(--tn-text-muted);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--ghost:hover {
|
|
background: var(--tn-interactive-hover);
|
|
color: var(--tn-text-normal);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--danger {
|
|
background: transparent;
|
|
color: var(--tn-color-error);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--danger:hover {
|
|
background: var(--tn-color-error);
|
|
color: var(--tn-bg-primary);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--success {
|
|
background: transparent;
|
|
color: var(--tn-color-success);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--success:hover {
|
|
background: var(--tn-color-success);
|
|
color: var(--tn-bg-primary);
|
|
}
|
|
|
|
/* Icon-only buttons */
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon {
|
|
width: var(--tn-button-height-md);
|
|
height: var(--tn-button-height-md);
|
|
padding: 0;
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--sm {
|
|
width: var(--tn-button-height-sm);
|
|
height: var(--tn-button-height-sm);
|
|
border-radius: var(--tn-radius-sm);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--icon.tn-btn--lg {
|
|
width: var(--tn-button-height-lg);
|
|
height: var(--tn-button-height-lg);
|
|
border-radius: var(--tn-radius-lg);
|
|
}
|
|
|
|
/* Pill buttons */
|
|
.mod-settings .tasknotes-plugin .tn-btn--pill {
|
|
border-radius: var(--tn-radius-full);
|
|
}
|
|
|
|
/* Full width buttons */
|
|
.mod-settings .tasknotes-plugin .tn-btn--full {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Button Groups */
|
|
.mod-settings .tasknotes-plugin .tn-btn-group {
|
|
display: flex;
|
|
gap: var(--tn-spacing-xs);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group .tn-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached {
|
|
gap: 0;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:first-child {
|
|
border-radius: var(--tn-radius-md) 0 0 var(--tn-radius-md);
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:last-child {
|
|
border-radius: 0 var(--tn-radius-md) var(--tn-radius-md) 0;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn-group--attached .tn-btn:only-child {
|
|
border-radius: var(--tn-radius-md);
|
|
}
|
|
|
|
/* Loading state */
|
|
.mod-settings .tasknotes-plugin .tn-btn--loading {
|
|
position: relative;
|
|
color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.mod-settings .tasknotes-plugin .tn-btn--loading::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: -8px 0 0 -8px;
|
|
border: 2px solid currentColor;
|
|
border-top-color: transparent;
|
|
border-radius: 50%;
|
|
animation: tn-spin 0.8s linear infinite;
|
|
}
|
|
|
|
|
|
/* ================================================
|
|
CODEMIRROR WIDGET UTILITIES
|
|
================================================ */
|
|
|
|
/**
|
|
* Widget Cursor Fix
|
|
*
|
|
* Minimal fix for CodeMirror widget artifacts.
|
|
* Only prevents editing inside widgets and hides visual artifacts.
|
|
* Does NOT hide the editor cursor to preserve normal editing experience.
|
|
*
|
|
* Fixes:
|
|
* - Prevents text selection inside widgets
|
|
* - Prevents contenteditable behavior
|
|
* - Hides widget buffer image artifacts
|
|
*
|
|
* Trade-offs:
|
|
* - Cursor may appear next to widgets (acceptable for normal editing UX)
|
|
* - Widget buffer artifacts are hidden
|
|
*
|
|
* Usage: Add .cm-widget-cursor-fix to your widget container element
|
|
*/
|
|
.cm-widget-cursor-fix {
|
|
/* Prevent text selection and editing inside widget */
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
|
|
/* Prevent contenteditable behavior */
|
|
-webkit-user-modify: read-only;
|
|
-moz-user-modify: read-only;
|
|
|
|
/* Ensure no text cursor appears inside widget elements */
|
|
caret-color: transparent;
|
|
}
|
|
|
|
/* Hide CodeMirror widgetBuffer image artifacts only */
|
|
.cm-content .cm-widgetBuffer {
|
|
display: none;
|
|
}
|