mirror of
https://github.com/zadam/trilium.git
synced 2025-11-02 03:16:11 +01:00
chore(monorepo/client): add back stylesheets
This commit is contained in:
Elian Doran
3
apps/client/stylesheets/auth.css
Normal file
3
apps/client/stylesheets/auth.css
Normal file
@@ -0,0 +1,3 @@
|
||||
.set-password .form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
2
apps/client/stylesheets/bootstrap.scss
vendored
Normal file
2
apps/client/stylesheets/bootstrap.scss
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
// Import all of Bootstrap's CSS
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
173
apps/client/stylesheets/calendar.css
Normal file
173
apps/client/stylesheets/calendar.css
Normal file
@@ -0,0 +1,173 @@
|
||||
.calendar-dropdown-widget *,
|
||||
.calendar-dropdown-widget *:before,
|
||||
.calendar-dropdown-widget *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget {
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-btn {
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-appearance: button;
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: x-large;
|
||||
line-height: normal;
|
||||
min-width: 27px;
|
||||
outline: none;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-header>div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-header input[type="number"] {
|
||||
appearance: textfield !important;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-outer-spin-button,
|
||||
.calendar-dropdown-widget .calendar-header input[type="number"]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-header select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-header input,
|
||||
.calendar-dropdown-widget .calendar-header .dropdown-toggle {
|
||||
appearance: none;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
border-left: unset;
|
||||
background-color: var(--menu-background-color);
|
||||
font-weight: bold;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-header .dropdown-toggle::after {
|
||||
border: unset;
|
||||
/* Disable the dropdown arrow */
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-week {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-week span {
|
||||
flex-direction: column;
|
||||
flex: 0 0 12.5%;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
max-width: 12.5%;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-week-number {
|
||||
color: var(--muted-text-color) !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-week-number::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: var(--main-border-color);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-week-number-disabled {
|
||||
align-items: center;
|
||||
color: var(--main-text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 12.5%;
|
||||
max-width: 12.5%;
|
||||
padding: 0.4rem 0;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date {
|
||||
align-items: center;
|
||||
color: var(--main-text-color);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 0 0 12.5%;
|
||||
max-width: 12.5%;
|
||||
padding: 0.4rem 0;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date:hover {
|
||||
color: var(--hover-item-text-color);
|
||||
background-color: var(--hover-item-background-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date-active {
|
||||
background-color: var(--active-item-background-color);
|
||||
color: var(--active-item-text-color);
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date-today {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date-exists {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date:not(.calendar-date-active) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date-prev-month,
|
||||
.calendar-dropdown-widget .calendar-date-next-month {
|
||||
color: var(--muted-text-color);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.calendar-dropdown-widget .calendar-date-prev-month:hover,
|
||||
.calendar-dropdown-widget .calendar-date-next-month:hover {
|
||||
opacity: 1;
|
||||
background-color: var(--hover-item-background-color);
|
||||
color: var(--hover-item-text-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
113
apps/client/stylesheets/ckeditor-theme.css
Normal file
113
apps/client/stylesheets/ckeditor-theme.css
Normal file
@@ -0,0 +1,113 @@
|
||||
body {
|
||||
/* -- Overrides generic colors. ------------------------------------------------------------- */
|
||||
|
||||
--ck-color-base-text: var(--main-text-color);
|
||||
--ck-color-base-foreground: var(--accented-background-color);
|
||||
--ck-color-base-background: var(--main-background-color);
|
||||
--ck-color-dialog-background: var(--ck-color-base-background);
|
||||
--ck-color-focus-border: var(--main-border-color);
|
||||
--ck-color-text: var(--main-text-color);
|
||||
--ck-color-shadow-drop: var(--main-background-color);
|
||||
--ck-color-shadow-inner: var(--main-background-color);
|
||||
--ck-color-table-caption-text: var(--main-text-color);
|
||||
--ck-color-table-caption-background: var(--accented-background-color);
|
||||
--ck-color-table-caption-highlighted-background: var(--accented-background-color);
|
||||
|
||||
/* -- Overrides the default .ck-button class colors. ---------------------------------------- */
|
||||
|
||||
--ck-color-button-default-background: var(--accented-background-color);
|
||||
--ck-color-button-default-hover-background: var(--more-accented-background-color);
|
||||
--ck-color-button-default-active-background: var(--more-accented-background-color);
|
||||
--ck-color-button-default-active-shadow: var(--more-accented-background-color);
|
||||
--ck-color-button-default-disabled-background: var(--accented-background-color);
|
||||
|
||||
--ck-color-button-on-background: var(--accented-background-color);
|
||||
--ck-color-button-on-hover-background: var(--more-accented-background-color);
|
||||
--ck-color-button-on-active-background: var(--more-accented-background-color);
|
||||
--ck-color-button-on-active-shadow: var(--more-accented-background-color);
|
||||
--ck-color-button-on-disabled-background: var(--main-background-color);
|
||||
|
||||
--ck-color-button-action-background: var(--accented-background-color);
|
||||
--ck-color-button-action-hover-background: var(--more-accented-background-color);
|
||||
--ck-color-button-action-active-background: var(--more-accented-background-color);
|
||||
--ck-color-button-action-active-shadow: var(--more-accented-background-color);
|
||||
--ck-color-button-action-disabled-background: var(--main-background-color);
|
||||
--ck-color-button-action-text: var(--main-text-color);
|
||||
|
||||
--ck-color-button-save: hsl(120, 100%, 46%);
|
||||
--ck-color-button-cancel: hsl(15, 100%, 56%);
|
||||
|
||||
/* -- Overrides the default .ck-dropdown class colors. -------------------------------------- */
|
||||
|
||||
--ck-color-dropdown-panel-background: var(--accented-background-color);
|
||||
--ck-color-dropdown-panel-border: var(--main-border-color);
|
||||
|
||||
/* -- Overrides the default .ck-splitbutton class colors. ----------------------------------- */
|
||||
|
||||
--ck-color-split-button-hover-background: var(--ck-color-button-default-hover-background);
|
||||
--ck-color-split-button-hover-border: var(--main-border-color);
|
||||
|
||||
/* -- Overrides the default .ck-input class colors. ----------------------------------------- */
|
||||
|
||||
--ck-color-input-background: var(--accented-background-color);
|
||||
--ck-color-input-border: var(--main-border-color);
|
||||
--ck-color-input-text: var(--main-text-color);
|
||||
--ck-color-input-disabled-background: var(--main-background-color);
|
||||
--ck-color-input-disabled-border: var(--main-border-color);
|
||||
--ck-color-input-disabled-text: var(--muted-text-color);
|
||||
|
||||
/* -- Overrides the default .ck-list class colors. ------------------------------------------ */
|
||||
|
||||
--ck-color-list-background: var(--accented-background-color);
|
||||
--ck-color-list-button-hover-background: var(--ck-color-base-foreground);
|
||||
--ck-color-list-button-on-background: var(--ck-color-base-active);
|
||||
--ck-color-list-button-on-background-focus: var(--ck-color-base-active-focus);
|
||||
--ck-color-list-button-on-text: var(--ck-color-base-background);
|
||||
|
||||
/* -- Overrides the default .ck-balloon-panel class colors. --------------------------------- */
|
||||
|
||||
--ck-color-panel-background: var(--accented-background-color);
|
||||
--ck-color-panel-border: var(--main-border-color);
|
||||
|
||||
/* -- Overrides the default .ck-toolbar class colors. --------------------------------------- */
|
||||
|
||||
--ck-color-toolbar-background: var(--accented-background-color);
|
||||
--ck-color-toolbar-border: var(--main-border-color);
|
||||
|
||||
/* -- Overrides the default .ck-tooltip class colors. --------------------------------------- */
|
||||
|
||||
--ck-color-tooltip-background: var(--accented-background-color);
|
||||
--ck-color-tooltip-text: var(--main-text-color);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-image package. --------------------- */
|
||||
|
||||
--ck-color-image-caption-background: var(--main-background-color);
|
||||
--ck-color-image-caption-text: var(--main-text-color);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-widget package. -------------------- */
|
||||
|
||||
--ck-color-widget-blurred-border: var(--main-border-color);
|
||||
--ck-color-widget-hover-border: var(--main-border-color);
|
||||
--ck-color-widget-editable-focus-background: var(--main-background-color);
|
||||
|
||||
/* -- Overrides the default colors used by the ckeditor5-link package. ---------------------- */
|
||||
|
||||
--ck-color-link-default: var(--link-color);
|
||||
|
||||
--ck-color-table-focused-cell-background: var(--more-accented-background-color);
|
||||
|
||||
--ck-color-labeled-field-label-background: var(--accented-background-color);
|
||||
|
||||
--ck-color-editable-blur-selection: var(--accented-background-color);
|
||||
|
||||
/* todo lists */
|
||||
|
||||
--ck-color-todo-list-checkmark-border: var(--main-border-color);
|
||||
|
||||
--ck-color-engine-placeholder-text: var(--muted-text-color);
|
||||
|
||||
--ck-z-modal: 10000;
|
||||
|
||||
--ck-color-widget-type-around-button: var(--main-border-color);
|
||||
--ck-color-widget-type-around-button-hover: var(--main-border-color);
|
||||
}
|
||||
275
apps/client/stylesheets/llm_chat.css
Normal file
275
apps/client/stylesheets/llm_chat.css
Normal file
@@ -0,0 +1,275 @@
|
||||
/* LLM Chat Panel Styles */
|
||||
.note-context-chat {
|
||||
background-color: var(--main-background-color);
|
||||
}
|
||||
|
||||
/* Message Styling */
|
||||
.chat-message {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--cmd-button-icon-color);
|
||||
}
|
||||
|
||||
.assistant-avatar {
|
||||
background-color: var(--subtle-border-color, var(--main-border-color));
|
||||
color: var(--hover-item-text-color);
|
||||
}
|
||||
|
||||
.message-content {
|
||||
max-width: calc(100% - 50px);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.user-content {
|
||||
border-radius: 0.5rem 0.5rem 0 0.5rem !important;
|
||||
background-color: var(--input-background-color) !important;
|
||||
}
|
||||
|
||||
.assistant-content {
|
||||
border-radius: 0.5rem 0.5rem 0.5rem 0 !important;
|
||||
background-color: var(--main-background-color);
|
||||
border: 1px solid var(--subtle-border-color, var(--main-border-color));
|
||||
}
|
||||
|
||||
/* Tool Execution Styling */
|
||||
.tool-execution-info {
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid var(--subtle-border-color);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
|
||||
background-color: var(--main-background-color);
|
||||
/* Add a subtle transition effect */
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.tool-execution-status {
|
||||
background-color: var(--accented-background-color, rgba(0, 0, 0, 0.03)) !important;
|
||||
border-radius: 0 !important;
|
||||
padding: 0.5rem !important;
|
||||
max-height: 250px !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tool-execution-status .d-flex {
|
||||
border-bottom: 1px solid var(--subtle-border-color);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tool-step {
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
background-color: var(--main-background-color);
|
||||
border: 1px solid var(--subtle-border-color);
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.tool-step:hover {
|
||||
background-color: rgba(0, 0, 0, 0.01);
|
||||
}
|
||||
|
||||
.tool-step:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Tool step specific styling */
|
||||
.tool-step.executing {
|
||||
background-color: rgba(0, 123, 255, 0.05);
|
||||
border-color: rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
.tool-step.result {
|
||||
background-color: rgba(40, 167, 69, 0.05);
|
||||
border-color: rgba(40, 167, 69, 0.2);
|
||||
}
|
||||
|
||||
.tool-step.error {
|
||||
background-color: rgba(220, 53, 69, 0.05);
|
||||
border-color: rgba(220, 53, 69, 0.2);
|
||||
}
|
||||
|
||||
/* Tool result formatting */
|
||||
.tool-result pre {
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 0.25rem;
|
||||
overflow: auto;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.tool-result code {
|
||||
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.tool-args code {
|
||||
display: block;
|
||||
padding: 0.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.03);
|
||||
border-radius: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.85em;
|
||||
color: var(--muted-text-color);
|
||||
white-space: pre-wrap;
|
||||
overflow: auto;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
/* Tool Execution in Chat Styling */
|
||||
.chat-tool-execution {
|
||||
padding: 0 0 0 36px; /* Aligned with message content, accounting for avatar width */
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tool-execution-container {
|
||||
background-color: var(--accented-background-color, rgba(245, 247, 250, 0.7));
|
||||
border: 1px solid var(--subtle-border-color);
|
||||
border-radius: 0.375rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
overflow: hidden;
|
||||
max-width: calc(100% - 20px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tool-execution-container.collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tool-execution-header {
|
||||
background-color: var(--main-background-color);
|
||||
border-bottom: 1px solid var(--subtle-border-color);
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--muted-text-color);
|
||||
font-weight: 500;
|
||||
padding: 0.6rem 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.tool-execution-header:hover {
|
||||
background-color: var(--hover-item-background-color, rgba(0, 0, 0, 0.03));
|
||||
}
|
||||
|
||||
.tool-execution-toggle {
|
||||
color: var(--muted-text-color) !important;
|
||||
background: transparent !important;
|
||||
padding: 0.2rem 0.4rem !important;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.tool-execution-toggle:hover {
|
||||
color: var(--main-text-color) !important;
|
||||
}
|
||||
|
||||
.tool-execution-toggle i.bx-chevron-down {
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.tool-execution-toggle i.bx-chevron-right {
|
||||
transform: rotate(-90deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.tool-execution-chat-steps {
|
||||
padding: 0.5rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Make error text more visible */
|
||||
.text-danger {
|
||||
color: #dc3545 !important;
|
||||
}
|
||||
|
||||
/* Sources Styling */
|
||||
.sources-container {
|
||||
background-color: var(--accented-background-color, var(--main-background-color));
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.source-item {
|
||||
transition: all 0.2s ease;
|
||||
background-color: var(--main-background-color);
|
||||
border-color: var(--subtle-border-color, var(--main-border-color)) !important;
|
||||
}
|
||||
|
||||
.source-item:hover {
|
||||
background-color: var(--link-hover-background, var(--hover-item-background-color));
|
||||
}
|
||||
|
||||
.source-link {
|
||||
color: var(--link-color, var(--hover-item-text-color));
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.source-link:hover {
|
||||
color: var(--link-hover-color, var(--hover-item-text-color));
|
||||
}
|
||||
|
||||
/* Input Area Styling */
|
||||
.note-context-chat-form {
|
||||
background-color: var(--main-background-color);
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.context-option-container {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px solid var(--subtle-border-color, var(--main-border-color));
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
|
||||
.chat-input-container {
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.note-context-chat-input {
|
||||
border-color: var(--subtle-border-color, var(--main-border-color));
|
||||
background-color: var(--input-background-color) !important;
|
||||
color: var(--input-text-color) !important;
|
||||
resize: none;
|
||||
transition: all 0.2s ease;
|
||||
min-height: 50px;
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
.note-context-chat-input:focus {
|
||||
border-color: var(--input-focus-outline-color, var(--main-border-color));
|
||||
box-shadow: 0 0 0 0.25rem var(--input-focus-outline-color, rgba(13, 110, 253, 0.25));
|
||||
}
|
||||
|
||||
.note-context-chat-send-button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
align-self: flex-end;
|
||||
background-color: var(--cmd-button-background-color) !important;
|
||||
color: var(--cmd-button-text-color) !important;
|
||||
}
|
||||
|
||||
/* Loading Indicator */
|
||||
.loading-indicator {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
color: var(--muted-text-color);
|
||||
}
|
||||
322
apps/client/stylesheets/print.css
Normal file
322
apps/client/stylesheets/print.css
Normal file
@@ -0,0 +1,322 @@
|
||||
:root {
|
||||
--main-background-color: white;
|
||||
--root-background: var(--main-background-color);
|
||||
--launcher-pane-background-color: var(--main-background-color);
|
||||
--main-text-color: black;
|
||||
--input-text-color: var(--main-text-color);
|
||||
|
||||
--print-font-size: 11pt;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 2cm;
|
||||
}
|
||||
|
||||
.ck-content {
|
||||
font-size: var(--print-font-size);
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.note-detail-readonly-text {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.no-print,
|
||||
.no-print *,
|
||||
.tab-row-container,
|
||||
.tab-row-widget,
|
||||
.title-bar-buttons,
|
||||
#launcher-pane,
|
||||
#left-pane,
|
||||
#center-pane > *:not(.split-note-container-widget),
|
||||
#right-pane,
|
||||
.title-row .note-icon-widget,
|
||||
.title-row .button-widget,
|
||||
.ribbon-container,
|
||||
.promoted-attributes-widget,
|
||||
.scroll-padding-widget,
|
||||
.note-list-widget,
|
||||
.spacer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.mobile #mobile-sidebar-wrapper,
|
||||
body.mobile .classic-toolbar-widget,
|
||||
body.mobile .action-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.mobile #detail-container {
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
body.mobile .note-title-widget {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
body,
|
||||
#root-widget,
|
||||
#rest-pane > div.component:first-child,
|
||||
.note-detail-printable,
|
||||
.note-detail-editable-text-editor {
|
||||
height: unset !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable_inline {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.note-title-widget input,
|
||||
.note-detail-editable-text,
|
||||
.note-detail-editable-text-editor {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: unset !important;
|
||||
height: unset !important;
|
||||
overflow: visible;
|
||||
position: unset;
|
||||
/* https://github.com/zadam/trilium/issues/3202 */
|
||||
color: black;
|
||||
}
|
||||
|
||||
#root-widget,
|
||||
#horizontal-main-container,
|
||||
#rest-pane,
|
||||
#vertical-main-container,
|
||||
#center-pane,
|
||||
.split-note-container-widget,
|
||||
.note-split:not(.hidden-ext),
|
||||
body.mobile #mobile-rest-container {
|
||||
display: block !important;
|
||||
overflow: auto;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
#center-pane,
|
||||
#rest-pane,
|
||||
.note-split,
|
||||
body.mobile #detail-container {
|
||||
width: unset !important;
|
||||
max-width: unset !important;
|
||||
}
|
||||
|
||||
.component {
|
||||
contain: none !important;
|
||||
}
|
||||
|
||||
/* Respect page breaks */
|
||||
.page-break {
|
||||
page-break-after: always;
|
||||
break-after: always;
|
||||
}
|
||||
|
||||
.page-break > * {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.relation-map-wrapper {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
.table thead th,
|
||||
.table td,
|
||||
.table th {
|
||||
/* Fix center vertical alignment of table cells */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
pre {
|
||||
box-shadow: unset !important;
|
||||
border: 0.75pt solid gray !important;
|
||||
border-radius: 2pt !important;
|
||||
}
|
||||
|
||||
th,
|
||||
span[style] {
|
||||
print-color-adjust: exact;
|
||||
-webkit-print-color-adjust: exact;
|
||||
}
|
||||
|
||||
/*
|
||||
* Text note specific fixes
|
||||
*/
|
||||
.ck-widget {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.ck-placeholder,
|
||||
.ck-widget__type-around,
|
||||
.ck-widget__selection-handle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
|
||||
.ck-widget.table td.ck-editor__nested-editable:focus,
|
||||
.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused,
|
||||
.ck-widget.table th.ck-editor__nested-editable:focus {
|
||||
background: unset !important;
|
||||
outline: unset !important;
|
||||
}
|
||||
|
||||
.include-note .include-note-content {
|
||||
max-height: unset !important;
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
||||
/* TODO: This will break once we translate the language */
|
||||
.ck-content pre[data-language="Auto-detected"]:after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Code note specific fixes.
|
||||
*/
|
||||
.note-detail-code pre {
|
||||
border: unset !important;
|
||||
border-radius: unset !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Links
|
||||
*/
|
||||
|
||||
.note-detail-printable a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.note-detail-printable a:not([href^="#root/"]) {
|
||||
text-decoration: underline;
|
||||
color: #374a75;
|
||||
}
|
||||
|
||||
.note-detail-printable a::after {
|
||||
/* Hide the external link trailing arrow */
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* TODO list check boxes
|
||||
*/
|
||||
|
||||
.note-detail-printable .todo-list__label * {
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
|
||||
.note-detail-printable .todo-list__label__description {
|
||||
/* The percentage of the line height that the check box occupies */
|
||||
--box-ratio: 0.75;
|
||||
/* The size of the gap between the check box and the caption */
|
||||
--box-text-gap: 0.25em;
|
||||
|
||||
--box-size: calc(1lh * var(--box-ratio));
|
||||
--box-vert-offset: calc((1lh - var(--box-size)) / 2);
|
||||
|
||||
display: inline-block;
|
||||
padding-left: calc(var(--box-size) + var(--box-text-gap));
|
||||
/* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
|
||||
background-position: 0 var(--box-vert-offset);
|
||||
background-size: var(--box-size);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.note-detail-printable .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description {
|
||||
/* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.note-detail-printable .todo-list__label input[type="checkbox"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Blockquotes
|
||||
*/
|
||||
|
||||
.note-detail-printable blockquote {
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
/*
|
||||
* Figures
|
||||
*/
|
||||
|
||||
.note-detail-printable figcaption {
|
||||
--accented-background-color: transparent;
|
||||
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Footnotes
|
||||
*/
|
||||
|
||||
.note-detail-printable .footnote-reference a,
|
||||
.footnote-back-link a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Make the "^" link cover the whole area of the footnote item */
|
||||
|
||||
.footnote-section {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.note-detail-printable li.footnote-item {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.note-detail-printable .footnote-back-link,
|
||||
.note-detail-printable .footnote-back-link *,
|
||||
.note-detail-printable .footnote-back-link a {
|
||||
display: block;
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.note-detail-printable .footnote-back-link a {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.note-detail-printable .footnote-content {
|
||||
display: inline-block;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
/*
|
||||
* Widows and orphans
|
||||
*/
|
||||
p,
|
||||
blockquote {
|
||||
widows: 4;
|
||||
orphans: 4;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
widows: 6;
|
||||
orphans: 6;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
page-break-after: avoid;
|
||||
break-after: avoid;
|
||||
}
|
||||
88
apps/client/stylesheets/relation_map.css
Normal file
88
apps/client/stylesheets/relation_map.css
Normal file
@@ -0,0 +1,88 @@
|
||||
.type-relationMap .note-detail {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.note-detail-relation-map {
|
||||
height: 100%;
|
||||
overflow: hidden !important;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.relation-map-wrapper {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
outline: none; /* remove dotted outline on click */
|
||||
}
|
||||
|
||||
.note-detail-relation-map .note-box {
|
||||
padding: 16px;
|
||||
position: absolute !important;
|
||||
background-color: var(--accented-background-color);
|
||||
color: var(--main-text-color);
|
||||
z-index: 4;
|
||||
border: 1px solid #666;
|
||||
box-shadow: 2px 2px 19px #999;
|
||||
border-radius: 8px;
|
||||
opacity: 0.8;
|
||||
font-size: 11px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-width: 200px;
|
||||
min-width: 150px;
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.note-detail-relation-map .note-box:hover {
|
||||
background-color: var(--more-accented-background-color);
|
||||
}
|
||||
|
||||
.note-detail-relation-map .note-box .title {
|
||||
font-size: larger;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.note-detail-relation-map .connection-label.jtk-hover,
|
||||
.jtk-source-hover,
|
||||
.jtk-target-hover {
|
||||
background-color: var(--more-accented-background-color);
|
||||
}
|
||||
|
||||
.note-detail-relation-map .connection-label {
|
||||
background-color: var(--accented-background-color);
|
||||
color: var(--main-text-color);
|
||||
opacity: 0.8;
|
||||
padding: 0.3em;
|
||||
border-radius: 0.5em;
|
||||
border: 1px solid #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.note-detail-relation-map .endpoint {
|
||||
position: absolute;
|
||||
bottom: 37%;
|
||||
right: 5px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-color: #333;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 2px black;
|
||||
}
|
||||
|
||||
.note-detail-relation-map .endpoint:hover {
|
||||
box-shadow: 0 0 6px black;
|
||||
}
|
||||
|
||||
.note-detail-relation-map .dragHover {
|
||||
border: 2px solid orange;
|
||||
}
|
||||
|
||||
.note-detail-relation-map path,
|
||||
.note-detail-relation-map .jtk-endpoint {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.note-detail-relation-map .ui-contextmenu {
|
||||
z-index: 100;
|
||||
}
|
||||
223
apps/client/stylesheets/share.css
Normal file
223
apps/client/stylesheets/share.css
Normal file
@@ -0,0 +1,223 @@
|
||||
body {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#layout {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
#menu {
|
||||
padding: 25px;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#menu p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#menu > p {
|
||||
font-weight: bold;
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
#menu ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#main {
|
||||
flex-basis: 0;
|
||||
flex-grow: 3;
|
||||
overflow: auto;
|
||||
padding: 10px 20px 20px 20px;
|
||||
}
|
||||
|
||||
#parentLink {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#title {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
|
||||
iframe.pdf-view {
|
||||
width: 100%;
|
||||
height: 800px;
|
||||
}
|
||||
|
||||
#toggleMenuButton {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 8px;
|
||||
left: 5px;
|
||||
width: 1.4em;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #aaa;
|
||||
font-size: 2rem;
|
||||
z-index: 10;
|
||||
height: auto;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#childLinks.grid ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#childLinks.grid ul li {
|
||||
width: 180px;
|
||||
height: 140px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#childLinks.grid ul li a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
text-align: center;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
#childLinks.grid ul li a:hover {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
#childLinks.list ul {
|
||||
list-style-type: none;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#childLinks.list ul li {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#noteClippedFrom {
|
||||
padding: 10px 0 10px 0;
|
||||
margin: 20px 0 20px 0;
|
||||
color: #666;
|
||||
border: 1px solid #ddd;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
#toggleMenuButton::after {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
@media (max-width: 48em) {
|
||||
#layout.showMenu #menu {
|
||||
display: block;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
#toggleMenuButton {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#layout.showMenu #main {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#title {
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
#layout.showMenu #toggleMenuButton::after {
|
||||
content: "«";
|
||||
}
|
||||
|
||||
#toggleMenuButton::after {
|
||||
content: "»";
|
||||
}
|
||||
|
||||
#menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ck-content .footnote-section {
|
||||
border-top: 1px solid #c4c4c4;
|
||||
border-radius: 2px;
|
||||
counter-reset: footnote-counter;
|
||||
margin: 1em 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ck-content .footnote-item {
|
||||
counter-increment: footnote-counter;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.ck-content .footnote-item:target .footnote-content {
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.ck-content .footnote-item > * {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.ck-content .footnote-back-link {
|
||||
margin-right: 0.1em;
|
||||
position: relative;
|
||||
top: -0.2em;
|
||||
}
|
||||
|
||||
.ck-content .footnotes .footnote-back-link > sup {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.ck-content .footnote-item:before {
|
||||
content: counter(footnote-counter) ". ";
|
||||
display: inline-block;
|
||||
min-width: fit-content;
|
||||
position: relative;
|
||||
right: 0.2em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ck-content .footnote-content {
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
flex-grow: 1;
|
||||
padding: 0 0.3em;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.ck-content .ck-content-widget.footnote-section .ck-content-widget__type-around__button_after {
|
||||
display: none;
|
||||
}
|
||||
2109
apps/client/stylesheets/style.css
Normal file
2109
apps/client/stylesheets/style.css
Normal file
File diff suppressed because it is too large
Load Diff
102
apps/client/stylesheets/theme-dark.css
Normal file
102
apps/client/stylesheets/theme-dark.css
Normal file
@@ -0,0 +1,102 @@
|
||||
:root {
|
||||
--theme-style: dark;
|
||||
|
||||
--main-font-family: Montserrat;
|
||||
--main-font-size: normal;
|
||||
|
||||
--tree-font-family: Montserrat;
|
||||
--tree-font-size: normal;
|
||||
|
||||
--detail-font-family: Montserrat;
|
||||
--detail-font-size: normal;
|
||||
|
||||
--monospace-font-family: JetBrainsLight;
|
||||
--monospace-font-size: normal;
|
||||
|
||||
--main-background-color: #333;
|
||||
--main-text-color: #ccc;
|
||||
--main-border-color: #aaa;
|
||||
--dropdown-border-color: #555;
|
||||
--dropdown-shadow-opacity: 0.4;
|
||||
--dropdown-item-icon-destructive-color: #de6e5b;
|
||||
--disabled-tooltip-icon-color: #7fd2ef;
|
||||
|
||||
--accented-background-color: #555;
|
||||
--more-accented-background-color: #777;
|
||||
|
||||
--button-background-color: transparent;
|
||||
--button-border-color: #ccc;
|
||||
--button-text-color: currentColor;
|
||||
--button-border-radius: 5px;
|
||||
--button-disabled-background-color: transparent;
|
||||
--button-disabled-text-color: #999;
|
||||
|
||||
--primary-button-background-color: #888;
|
||||
--primary-button-text-color: white;
|
||||
--primary-button-border-color: #999;
|
||||
|
||||
--muted-text-color: #bbb;
|
||||
|
||||
--input-text-color: #ccc;
|
||||
--input-background-color: #333;
|
||||
|
||||
--hover-item-text-color: #ccc;
|
||||
--hover-item-background-color: transparent;
|
||||
--hover-item-border-color: #aaa;
|
||||
|
||||
--active-item-text-color: black;
|
||||
--active-item-background-color: #777;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--menu-text-color: white;
|
||||
--menu-background-color: #222;
|
||||
|
||||
--modal-background-color: #333;
|
||||
--modal-backdrop-color: #444;
|
||||
|
||||
--left-pane-background-color: #1f1f1f;
|
||||
--left-pane-text-color: #aaaaaa;
|
||||
|
||||
--launcher-pane-background-color: #1f1f1f;
|
||||
--launcher-pane-text-color: #aaaaaa;
|
||||
|
||||
--active-tab-background-color: #666;
|
||||
--active-tab-hover-background-color: #737373;
|
||||
--active-tab-text-color: #ccc;
|
||||
|
||||
--inactive-tab-background-color: #444;
|
||||
--inactive-tab-hover-background-color: #525252;
|
||||
--inactive-tab-text-color: #bbb;
|
||||
|
||||
--scrollbar-border-color: #666;
|
||||
--scrollbar-background-color: #333;
|
||||
--tooltip-background-color: #333;
|
||||
--link-color: lightskyblue;
|
||||
|
||||
--mermaid-theme: dark;
|
||||
--native-titlebar-background: #00000000;
|
||||
}
|
||||
|
||||
body ::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
body .CodeMirror {
|
||||
filter: invert(90%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.excalidraw.theme--dark {
|
||||
--theme-filter: invert(80%) hue-rotate(180deg) !important;
|
||||
}
|
||||
|
||||
body .todo-list input[type="checkbox"]:not(:checked):before {
|
||||
border-color: var(--muted-text-color) !important;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
.ck-content pre {
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
|
||||
}
|
||||
82
apps/client/stylesheets/theme-light.css
Normal file
82
apps/client/stylesheets/theme-light.css
Normal file
@@ -0,0 +1,82 @@
|
||||
/* Light theme is special since it's also baseline/default so when a theme does not define some variable then
|
||||
value from this theme will be used. For this reason this theme uses "html" instead of ":root"
|
||||
since it's less "specific" and thus serves as default */
|
||||
html {
|
||||
/* either light or dark, colored theme with darker tones are also dark, used e.g. for note map node colors */
|
||||
--theme-style: light;
|
||||
|
||||
--main-font-family: Montserrat;
|
||||
--main-font-size: normal;
|
||||
|
||||
--tree-font-family: Montserrat;
|
||||
--tree-font-size: normal;
|
||||
|
||||
--detail-font-family: Montserrat;
|
||||
--detail-font-size: normal;
|
||||
|
||||
--monospace-font-family: JetBrainsLight;
|
||||
--monospace-font-size: normal;
|
||||
|
||||
--main-background-color: white;
|
||||
--main-text-color: black;
|
||||
--main-border-color: #ccc;
|
||||
--dropdown-border-color: #ccc;
|
||||
--dropdown-shadow-opacity: 0.2;
|
||||
--dropdown-item-icon-destructive-color: #ec5138;
|
||||
--disabled-tooltip-icon-color: #004382;
|
||||
|
||||
--accented-background-color: #f5f5f5;
|
||||
--more-accented-background-color: #ddd;
|
||||
|
||||
--button-background-color: transparent;
|
||||
--button-border-color: #ddd;
|
||||
--button-text-color: black;
|
||||
--button-border-radius: 5px;
|
||||
--button-disabled-background-color: #ddd;
|
||||
--button-disabled-text-color: black;
|
||||
|
||||
--primary-button-background-color: #6c757d;
|
||||
--primary-button-text-color: white;
|
||||
--primary-button-border-color: #6c757d;
|
||||
|
||||
--muted-text-color: #666;
|
||||
|
||||
--input-text-color: black;
|
||||
--input-background-color: transparent;
|
||||
|
||||
--hover-item-text-color: black;
|
||||
--hover-item-background-color: transparent;
|
||||
--hover-item-border-color: #ccc;
|
||||
|
||||
--active-item-text-color: black;
|
||||
--active-item-background-color: #ddd;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--menu-text-color: black;
|
||||
--menu-background-color: white;
|
||||
|
||||
--modal-background-color: white;
|
||||
--modal-backdrop-color: black;
|
||||
|
||||
--left-pane-background-color: #f3f3f3;
|
||||
--left-pane-text-color: #333;
|
||||
|
||||
--launcher-pane-background-color: #f3f3f3;
|
||||
--launcher-pane-text-color: #333;
|
||||
|
||||
--active-tab-background-color: #ddd;
|
||||
--active-tab-hover-background-color: #d1d1d1;
|
||||
--active-tab-text-color: black;
|
||||
|
||||
--inactive-tab-background-color: #f0f0f0;
|
||||
--inactive-tab-hover-background-color: #e3e3e3;
|
||||
--inactive-tab-text-color: #666;
|
||||
|
||||
--scrollbar-border-color: #ddd;
|
||||
--scrollbar-background-color: #ddd;
|
||||
--tooltip-background-color: #f8f8f8;
|
||||
--link-color: blue;
|
||||
|
||||
--mermaid-theme: default;
|
||||
--native-titlebar-background: #ffffff00;
|
||||
}
|
||||
255
apps/client/stylesheets/theme-next-dark.css
Normal file
255
apps/client/stylesheets/theme-next-dark.css
Normal file
@@ -0,0 +1,255 @@
|
||||
/* Import the Next theme base style */
|
||||
@import url(./theme-next/base.css);
|
||||
|
||||
/*
|
||||
* Color scheme
|
||||
*/
|
||||
:root {
|
||||
--theme-style: dark;
|
||||
--native-titlebar-background: #00000000;
|
||||
|
||||
--main-background-color: #272727;
|
||||
--main-text-color: #ccc;
|
||||
--main-border-color: #454545;
|
||||
--subtle-border-color: #313131;
|
||||
--dropdown-border-color: #292929;
|
||||
--dropdown-shadow-opacity: 0.6;
|
||||
--dropdown-item-icon-destructive-color: #de6e5b;
|
||||
--disabled-tooltip-icon-color: #7fd2ef;
|
||||
|
||||
--accented-background-color: #555;
|
||||
|
||||
--tool-dialog-background-color: #262626;
|
||||
--tool-dialog-shadow-color: black;
|
||||
|
||||
--button-text-color: currentColor;
|
||||
|
||||
--cmd-button-background-color: #ffffff28;
|
||||
--cmd-button-text-color: #ffffffc2;
|
||||
--cmd-button-hover-background-color: #ffffff37;
|
||||
--cmd-button-hover-text-color: white;
|
||||
--cmd-button-shadow-color: #00000080;
|
||||
--cmd-button-icon-color: white;
|
||||
--cmd-button-keyboard-shortcut-background: #0000004d;
|
||||
--cmd-button-keyboard-shortcut-color: white;
|
||||
--cmd-button-disabled-opacity: 0.5;
|
||||
|
||||
--icon-button-color: currentColor;
|
||||
--icon-button-hover-background: var(--hover-item-background-color);
|
||||
--icon-button-hover-color: var(--hover-item-text-color);
|
||||
|
||||
--muted-text-color: #bbb;
|
||||
|
||||
--input-background-color: #ffffff12;
|
||||
--input-text-color: #ffffffc7;
|
||||
--input-placeholder-color: #b7b7b782;
|
||||
--input-selection-background: gray;
|
||||
--input-selection-text-color: white;
|
||||
--input-hover-background: #ffffff1f;
|
||||
--input-hover-color: var(--input-text-color);
|
||||
--input-focus-outline-color: #ffffff57;
|
||||
--input-focus-background: #ffffff1f;
|
||||
--input-focus-color: white;
|
||||
|
||||
--input-action-button-color: #c6c6c6;
|
||||
--input-action-button-hover: white;
|
||||
|
||||
--radio-checkbox-background: #ffffff30;
|
||||
--radio-checkbox-hover-background: #ffffff61;
|
||||
--radio-checkbox-indicator-color: white;
|
||||
|
||||
--select-focus-background: #333;
|
||||
--select-focus-text-color: var(--input-text-color);
|
||||
--select-dropdown-text-color: var(--input-text-color);
|
||||
--select-arrow-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
|
||||
--select-group-heading-text-color: gray;
|
||||
|
||||
--link-hover-background: #ffffff26;
|
||||
--link-hover-color: white;
|
||||
|
||||
--hover-item-text-color: #efefef;
|
||||
--hover-item-background-color: #ffffff24;
|
||||
--hover-item-border-color: transparent;
|
||||
|
||||
--active-item-text-color: var(--left-pane-text-color);
|
||||
--active-item-background-color: #777;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--new-tab-button-background: #fff0;
|
||||
--new-tab-button-color: #ffffff96;
|
||||
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
|
||||
--new-tab-button-hover-background: #fff3;
|
||||
--new-tab-button-hover-color: white;
|
||||
|
||||
--menu-text-color: #e3e3e3;
|
||||
--menu-background-color: #222222d9;
|
||||
--menu-item-icon-color: #8c8c8c;
|
||||
--menu-item-disabled-opacity: 0.5;
|
||||
--menu-item-keyboard-shortcut-color: #ffffff8f;
|
||||
--menu-item-arrow-color: #ffffffa3;
|
||||
--menu-item-delimiter-color: #ffffff1c;
|
||||
--menu-item-group-header-color: #ffffff91;
|
||||
|
||||
--modal-backdrop-color: #000;
|
||||
--modal-shadow-color: rgba(0, 0, 0, .5);
|
||||
--modal-border-color: #ffffff23;
|
||||
--modal-background-color: #262626;
|
||||
--modal-title-color: gray;
|
||||
--modal-control-button-background: #ffffff2b;
|
||||
--modal-control-button-color: #cbcbcb;
|
||||
--modal-control-button-hover-color: white;
|
||||
--modal-control-button-hover-background: #ffffff45;
|
||||
--modal-close-button-hover-background: var(--tab-close-button-hover-background);
|
||||
--modal-footer-background: #ffffff08;
|
||||
--modal-footer-color: #ffffff7a;
|
||||
|
||||
--toast-background: #4d4d4dc2;
|
||||
--toast-text-color: #e1e1e1;
|
||||
--toast-close-button-background: #ffffff33;
|
||||
|
||||
--quick-search-background: #ffffff12;
|
||||
--quick-search-color: #ffffff52;
|
||||
--quick-search-hover-background: #ffffff1f;
|
||||
--quick-search-focus-border: #80808095;
|
||||
--quick-search-focus-background: #ffffff1f;
|
||||
--quick-search-focus-color: white;
|
||||
|
||||
--left-pane-collapsed-border-color: #0009;
|
||||
--left-pane-background-color: #1f1f1f;
|
||||
--left-pane-text-color: #aaaaaa;
|
||||
--left-pane-item-hover-background: #ffffff0d;
|
||||
--left-pane-item-selected-background: #ffffff25;
|
||||
--left-pane-item-selected-color: #dfdfdf;
|
||||
--left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
|
||||
--left-pane-item-action-button-background: #ffffff73;
|
||||
--left-pane-item-action-button-color: black;
|
||||
--left-pane-item-action-button-hover-background: #ffffffad;
|
||||
--left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
|
||||
--left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */
|
||||
--launcher-pane-background-color: unset;
|
||||
--launcher-pane-text-color: unset;
|
||||
|
||||
--launcher-pane-vert-background-color: #1a1a1a;
|
||||
--launcher-pane-vert-text-color: #909090;
|
||||
--launcher-pane-vert-button-hover-color: #ffffff;
|
||||
--launcher-pane-vert-button-hover-background: #ffffff1c;
|
||||
--launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
|
||||
--launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color);
|
||||
|
||||
--launcher-pane-horiz-border-color: rgb(22, 22, 22);
|
||||
--launcher-pane-horiz-background-color: #282828;
|
||||
--launcher-pane-horiz-text-color: #909090;
|
||||
--launcher-pane-horiz-button-hover-color: #ffffff;
|
||||
--launcher-pane-horiz-button-hover-background: #ffffff1c;
|
||||
--launcher-pane-horiz-button-hover-shadow: unset;
|
||||
--launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color);
|
||||
|
||||
--protected-session-active-icon-color: #8edd8e;
|
||||
--sync-status-error-pulse-color: #f47871;
|
||||
|
||||
--right-pane-heading-color: gray;
|
||||
|
||||
--root-background: var(--left-pane-background-color);
|
||||
|
||||
--gutter-color: transparent;
|
||||
--gutter-hover-color: #626262;
|
||||
|
||||
--tab-close-button-hover-background: #a45353;
|
||||
--tab-close-button-hover-color: white;
|
||||
|
||||
--active-tab-background-color: #ffffff1c;
|
||||
--active-tab-hover-background-color: var(--active-tab-background-color);
|
||||
--active-tab-text-color: #ffffffcd;
|
||||
--active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2), -1px -1px 3px rgba(0, 0, 0, 0.4);
|
||||
--active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, 0.4);
|
||||
|
||||
--inactive-tab-background-color: transparent;
|
||||
--inactive-tab-hover-background-color: #ffffff0f;
|
||||
--inactive-tab-text-color: #7c7c7c;
|
||||
|
||||
--alert-bar-background: #6b6b6b3b;
|
||||
|
||||
--promoted-attribute-card-background-color: var(--card-background-color);
|
||||
--promoted-attribute-card-shadow-color: #000000b3;
|
||||
|
||||
--floating-button-shadow-color: #00000080;
|
||||
--floating-button-background-color: #494949d2;
|
||||
--floating-button-color: var(--button-text-color);
|
||||
--floating-button-hover-background: #ffffff20;
|
||||
--floating-button-hover-color: white;
|
||||
--floating-button-show-button-background: var(--left-pane-item-action-button-background);
|
||||
--floating-button-show-button-color: var(--left-pane-item-action-button-color);
|
||||
--floating-button-show-button-shadow: none;
|
||||
--floating-button-show-button-hover-background: var(--left-pane-item-action-button-hover-background);
|
||||
--floating-button-show-button-hover-shadow: 0 2px 4px #0000007b;
|
||||
--floating-button-hide-button-background: #00000029;
|
||||
--floating-button-hide-button-color: #ffffff63;
|
||||
|
||||
--right-pane-item-hover-background: #ffffff26;
|
||||
--right-pane-item-hover-color: white;
|
||||
|
||||
--scrollbar-thumb-color: #fdfdfd5c;
|
||||
--scrollbar-thumb-hover-color: #ffffff7d;
|
||||
--scrollbar-background-color: transparent;
|
||||
--scrollbar-border-color: unset; /* Deprecated */
|
||||
|
||||
--link-color: lightskyblue;
|
||||
|
||||
--mermaid-theme: dark;
|
||||
|
||||
--code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
|
||||
|
||||
--card-background-color: #ffffff12;
|
||||
--card-background-hover-color: #3c3c3c;
|
||||
--card-background-press-color: #464646;
|
||||
--card-border-color: #222222;
|
||||
--card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
|
||||
|
||||
--calendar-color: var(--menu-text-color);
|
||||
--calendar-weekday-labels-color: var(--muted-text-color);
|
||||
--calendar-day-hover-color: var(--hover-item-text-color);
|
||||
--calendar-day-hover-background: var(--active-item-background-color);
|
||||
--calendar-day-highlight-background: #8080805a;
|
||||
|
||||
--timeline-bullet-color: gray;
|
||||
--timeline-bullet-hover-color: white;
|
||||
--timeline-connector-color: #464646;
|
||||
--timeline-connector-active-color: #545454;
|
||||
--timeline-connector-hover-blend-mode: exclusion;
|
||||
|
||||
--tooltip-background-color: rgba(67, 67, 67, 0.86);
|
||||
--tooltip-foreground-color: #ffffffeb;
|
||||
--tooltip-shadow-color: rgba(0, 0, 0, 0.4);
|
||||
|
||||
--help-background-color: var(--menu-background-color);
|
||||
--help-card-background: var(--card-background-color);
|
||||
--help-card-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
|
||||
--help-card-heading-color: #959595;
|
||||
--help-kbd-shortcut-color: white;
|
||||
--help-kbd-shortcut-background: #676767;
|
||||
--help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
|
||||
--help-code-color: inherit;
|
||||
--help-code-background: #565656;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dark color scheme tweaks
|
||||
*/
|
||||
|
||||
body ::-webkit-calendar-picker-indicator {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
body .CodeMirror {
|
||||
filter: invert(90%) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
.excalidraw.theme--dark {
|
||||
--theme-filter: invert(80%) hue-rotate(180deg) !important;
|
||||
}
|
||||
|
||||
body .todo-list input[type="checkbox"]:not(:checked):before {
|
||||
border-color: var(--muted-text-color) !important;
|
||||
}
|
||||
235
apps/client/stylesheets/theme-next-light.css
Normal file
235
apps/client/stylesheets/theme-next-light.css
Normal file
@@ -0,0 +1,235 @@
|
||||
/* Import the Next theme base style */
|
||||
@import url(./theme-next/base.css);
|
||||
|
||||
/*
|
||||
* Color scheme
|
||||
*/
|
||||
:root {
|
||||
--theme-style: light;
|
||||
--native-titlebar-background: #ffffff00;
|
||||
|
||||
--main-background-color: white;
|
||||
--main-text-color: black;
|
||||
--main-border-color: #dbdbdb;
|
||||
--subtle-border-color: rgba(0, 0, 0, 0.1);
|
||||
--dropdown-border-color: #ccc;
|
||||
--dropdown-shadow-opacity: 0.2;
|
||||
--dropdown-item-icon-destructive-color: #ec5138;
|
||||
--disabled-tooltip-icon-color: #004382;
|
||||
|
||||
--accented-background-color: #f5f5f5;
|
||||
|
||||
--tool-dialog-background-color: white;
|
||||
--tool-dialog-shadow-color: #00000070;
|
||||
|
||||
--button-text-color: currentColor;
|
||||
|
||||
--cmd-button-background-color: #0000000f;
|
||||
--cmd-button-text-color: #000000ad;
|
||||
--cmd-button-hover-background-color: #00000016;
|
||||
--cmd-button-hover-text-color: #000;
|
||||
--cmd-button-shadow-color: #00000040;
|
||||
--cmd-button-icon-color: black;
|
||||
--cmd-button-keyboard-shortcut-background: #00000017;
|
||||
--cmd-button-keyboard-shortcut-color: black;
|
||||
--cmd-button-disabled-opacity: 0.5;
|
||||
|
||||
--icon-button-color: currentColor;
|
||||
--icon-button-hover-background: var(--hover-item-background-color);
|
||||
--icon-button-hover-color: var(--hover-item-text-color);
|
||||
|
||||
--muted-text-color: #666;
|
||||
|
||||
--input-background-color: #00000012;
|
||||
--input-text-color: black;
|
||||
--input-placeholder-color: #06060682;
|
||||
--input-selection-background: gray;
|
||||
--input-selection-text-color: white;
|
||||
--input-hover-background: #00000020;
|
||||
--input-hover-color: black;
|
||||
--input-focus-outline-color: #00000063;
|
||||
--input-focus-background: #ffffff80;
|
||||
--input-focus-color: #000;
|
||||
|
||||
--input-action-button-color: #575757;
|
||||
--input-action-button-hover: black;
|
||||
|
||||
--radio-checkbox-background: #0000002e;
|
||||
--radio-checkbox-hover-background: #0000004f;
|
||||
--radio-checkbox-indicator-color: black;
|
||||
|
||||
--select-focus-background: white;
|
||||
--select-focus-text-color: var(--input-text-color);
|
||||
--select-dropdown-text-color: var(--input-text-color);
|
||||
--select-arrow-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
|
||||
--select-group-heading-text-color: gray;
|
||||
|
||||
--link-hover-background: #00000012;
|
||||
--link-hover-color: black;
|
||||
|
||||
--hover-item-text-color: black;
|
||||
--hover-item-background-color: #0000001a;
|
||||
--hover-item-border-color: transparent;
|
||||
|
||||
--active-item-text-color: var(--left-pane-text-color);
|
||||
--active-item-background-color: #ddd;
|
||||
--active-item-border-color: transparent;
|
||||
|
||||
--menu-text-color: #272727;
|
||||
--menu-background-color: #ffffffd9;
|
||||
--menu-item-icon-color: #727272;
|
||||
--menu-item-disabled-opacity: 0.6;
|
||||
--menu-item-keyboard-shortcut-color: #666666a8;
|
||||
--menu-item-arrow-color: #00000080;
|
||||
--menu-item-delimiter-color: #00000030;
|
||||
--menu-item-group-header-color: #00000061;
|
||||
|
||||
--modal-backdrop-color: #7c7c7c;
|
||||
--modal-shadow-color: #00000033;
|
||||
--modal-border-color: #797979;
|
||||
--modal-background-color: white;
|
||||
--modal-title-color: gray;
|
||||
--modal-control-button-background: #0000001a;
|
||||
--modal-control-button-color: #737373;
|
||||
--modal-control-button-hover-color: white;
|
||||
--modal-control-button-hover-background: gray;
|
||||
--modal-close-button-hover-background: var(--tab-close-button-hover-background);
|
||||
--modal-footer-background: #00000008;
|
||||
--modal-footer-color: #00000085;
|
||||
|
||||
--toast-background: #00000099;
|
||||
--toast-text-color: white;
|
||||
--toast-close-button-background: #ffffff33;
|
||||
|
||||
--quick-search-background: #00000012;
|
||||
--quick-search-color: #06060682;
|
||||
--quick-search-hover-background: #00000020;
|
||||
--quick-search-focus-border: #00000029;
|
||||
--quick-search-focus-background: #ffffff80;
|
||||
--quick-search-focus-color: #000;
|
||||
|
||||
--left-pane-collapsed-border-color: #0000000d;
|
||||
--left-pane-background-color: #f2f2f2;
|
||||
--left-pane-text-color: #383838;
|
||||
--left-pane-item-hover-background: #eaeaea;
|
||||
--left-pane-item-selected-background: white;
|
||||
--left-pane-item-selected-color: black;
|
||||
--left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
--left-pane-item-action-button-background: #d7d7d7;
|
||||
--left-pane-item-action-button-color: inherit;
|
||||
--left-pane-item-action-button-hover-background: white;
|
||||
--left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
|
||||
--left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
|
||||
|
||||
/* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */
|
||||
--launcher-pane-background-color: unset;
|
||||
--launcher-pane-text-color: unset;
|
||||
|
||||
--launcher-pane-vert-background-color: #e8e8e8;
|
||||
--launcher-pane-vert-text-color: #000000bd;
|
||||
--launcher-pane-vert-button-hover-color: black;
|
||||
--launcher-pane-vert-button-hover-background: white;
|
||||
--launcher-pane-vert-button-hover-shadow: 4px 4px 4px rgba(0, 0, 0, 0.075);
|
||||
--launcher-pane-vert-button-focus-outline-color: var(--input-focus-outline-color);
|
||||
|
||||
--launcher-pane-horiz-border-color: rgba(0, 0, 0, 0.1);
|
||||
--launcher-pane-horiz-background-color: #fafafa;
|
||||
--launcher-pane-horiz-button-hover-color: black;
|
||||
--launcher-pane-horiz-button-hover-background: var(--icon-button-hover-background);
|
||||
--launcher-pane-horiz-button-hover-shadow: unset;
|
||||
--launcher-pane-horiz-button-focus-outline-color: var(--input-focus-outline-color);
|
||||
|
||||
--protected-session-active-icon-color: #16b516;
|
||||
--sync-status-error-pulse-color: #ff5528;
|
||||
|
||||
--right-pane-heading-color: gray;
|
||||
|
||||
--root-background: var(--left-pane-background-color);
|
||||
|
||||
--gutter-color: transparent;
|
||||
--gutter-hover-color: #bfbfbf;
|
||||
|
||||
--tab-close-button-hover-background: #c95a5a;
|
||||
--tab-close-button-hover-color: white;
|
||||
|
||||
--active-tab-background-color: white;
|
||||
--active-tab-hover-background-color: var(--active-tab-background-color);
|
||||
--active-tab-text-color: black;
|
||||
--active-tab-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(0, 0, 0, 0.05);
|
||||
--active-tab-dragging-shadow: var(--active-tab-shadow), 0 0 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--inactive-tab-background-color: transparent;
|
||||
--inactive-tab-hover-background-color: #00000016;
|
||||
--inactive-tab-text-color: #4e4e4e;
|
||||
|
||||
--alert-bar-background: #32637b29;
|
||||
|
||||
--promoted-attribute-card-background-color: var(--card-background-color);
|
||||
--promoted-attribute-card-shadow-color: #00000033;
|
||||
|
||||
--floating-button-shadow-color: #00000042;
|
||||
--floating-button-background-color: #eaeaeacc;
|
||||
--floating-button-color: #454545;
|
||||
--floating-button-hover-background: #00000017;
|
||||
--floating-button-hover-color: black;
|
||||
--floating-button-show-button-background: var(--left-pane-item-action-button-background);
|
||||
--floating-button-show-button-color: var(--left-pane-item-action-button-color);
|
||||
--floating-button-show-button-shadow: none;
|
||||
--floating-button-show-button-hover-background: var(--left-pane-item-action-button-hover-background);
|
||||
--floating-button-show-button-hover-shadow: 0 2px 4px #00000068;
|
||||
--floating-button-hide-button-background: #0000000d;
|
||||
--floating-button-hide-button-color: gray;
|
||||
|
||||
--new-tab-button-background: #d8d8d8;
|
||||
--new-tab-button-color: #3a3a3a;
|
||||
--new-tab-button-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
--new-tab-button-hover-background: white;
|
||||
--new-tab-button-hover-color: black;
|
||||
|
||||
--right-pane-item-hover-background: #ececec;
|
||||
--right-pane-item-hover-color: inherit;
|
||||
|
||||
--scrollbar-thumb-color: #0000005c;
|
||||
--scrollbar-thumb-hover-color: #00000066;
|
||||
--scrollbar-background-color: transparent;
|
||||
--scrollbar-border-color: unset; /* Deprecated */
|
||||
|
||||
--link-color: blue;
|
||||
|
||||
--mermaid-theme: default;
|
||||
|
||||
--code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
|
||||
|
||||
--card-background-color: var(--accented-background-color);
|
||||
--card-background-hover-color: #f9f9f9;
|
||||
--card-background-press-color: #efefef;
|
||||
--card-border-color: #eaeaea;
|
||||
--card-shadow-color: rgba(0, 0, 0, 0.1);
|
||||
--card-box-shadow: 0 0 12px var(--card-shadow-color);
|
||||
|
||||
--calendar-color: var(--menu-text-color);
|
||||
--calendar-weekday-labels-color: var(--muted-text-color);
|
||||
--calendar-day-hover-color: var(--hover-item-text-color);
|
||||
--calendar-day-hover-background: var(--active-item-background-color);
|
||||
--calendar-day-highlight-background: #80808024;
|
||||
|
||||
--timeline-bullet-color: #a5a5a5;
|
||||
--timeline-bullet-hover-color: black;
|
||||
--timeline-connector-color: #f1f1f1;
|
||||
--timeline-connector-active-color: #ddd;
|
||||
--timeline-connector-hover-blend-mode: multiply;
|
||||
|
||||
--tooltip-background-color: rgba(255, 255, 255, 0.85);
|
||||
--tooltip-foreground-color: #000000ba;
|
||||
--tooltip-shadow-color: rgba(0, 0, 0, 0.15);
|
||||
|
||||
--help-background-color: #fffc;
|
||||
--help-card-background: var(--card-background-color);
|
||||
--help-card-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
|
||||
--help-card-heading-color: #797979;
|
||||
--help-kbd-shortcut-color: #3f3f3f;
|
||||
--help-kbd-shortcut-background: white;
|
||||
--help-kbd-shortcut-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--help-code-color: black;
|
||||
--help-code-background: #d7d5d5;
|
||||
}
|
||||
11
apps/client/stylesheets/theme-next.css
Normal file
11
apps/client/stylesheets/theme-next.css
Normal file
@@ -0,0 +1,11 @@
|
||||
/* Import the light color scheme.
|
||||
* This is the base color scheme, always active and overridden by the dark
|
||||
* color scheme stylesheet when necessary. */
|
||||
@import url(./theme-next-light.css);
|
||||
|
||||
/* Import the dark color scheme when the system preference is set to dark mode */
|
||||
@import url(./theme-next-dark.css) (prefers-color-scheme: dark);
|
||||
|
||||
:root {
|
||||
--theme-style-auto: true;
|
||||
}
|
||||
529
apps/client/stylesheets/theme-next/base.css
Normal file
529
apps/client/stylesheets/theme-next/base.css
Normal file
@@ -0,0 +1,529 @@
|
||||
@import url(./forms.css);
|
||||
@import url(./shell.css);
|
||||
@import url(./dialogs.css);
|
||||
@import url(./pages.css);
|
||||
@import url(./ribbon.css);
|
||||
@import url(./notes/text.css);
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url(../../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
|
||||
}
|
||||
|
||||
/*
|
||||
* GLOBAL VARIABLES
|
||||
*/
|
||||
|
||||
:root {
|
||||
--main-font-family: "Inter", sans-serif;
|
||||
|
||||
--main-font-size: normal;
|
||||
|
||||
--tree-font-family: var(--main-font-family);
|
||||
--tree-font-size: normal;
|
||||
|
||||
--detail-font-family: var(--main-font-family);
|
||||
--detail-font-size: normal;
|
||||
|
||||
--monospace-font-family: JetBrainsLight;
|
||||
--monospace-font-size: normal;
|
||||
|
||||
--left-pane-item-selected-shadow-size: 2px;
|
||||
|
||||
--launcher-pane-vert-size: 58px;
|
||||
--launcher-pane-vert-icon-size: 150%;
|
||||
--launcher-pane-vert-button-margin: 6px;
|
||||
--launcher-pane-vert-button-gap: 3px;
|
||||
|
||||
--launcher-pane-horiz-size: 54px;
|
||||
--launcher-pane-horiz-icon-size: 20px;
|
||||
--launcher-pane-horiz-button-margin: 8px;
|
||||
--launcher-pane-horiz-button-gap: 3px;
|
||||
|
||||
--tree-actions-toolbar-horizontal-margin: 8px;
|
||||
--tree-actions-toolbar-vertical-margin: 8px;
|
||||
--tree-actions-toolbar-padding-size: 4px;
|
||||
--tree-actions-toolbar-collapsed-width: 40px;
|
||||
--tree-actions-toolbar-expand-button-size: 25px;
|
||||
|
||||
--tab-bar-height: 50px;
|
||||
--tab-height: 36px;
|
||||
--tab-first-item-horiz-offset: 1px;
|
||||
--new-tab-button-size: 24px;
|
||||
|
||||
--center-pane-border-radius: 10px;
|
||||
|
||||
--floating-button-height: 34px;
|
||||
--floating-button-width: 40px;
|
||||
--floating-button-icon-size: 20px;
|
||||
--floating-button-show-hide-button-size: 26px;
|
||||
|
||||
--menu-padding-size: 8px;
|
||||
--menu-item-icon-vert-offset: -2px;
|
||||
|
||||
--more-accented-background-color: var(--card-background-hover-color);
|
||||
|
||||
--timeline-left-gap: 20px;
|
||||
--timeline-right-gap: 20px;
|
||||
--timeline-item-top-padding: 4px;
|
||||
--timeline-item-bottom-padding: 8px;
|
||||
--timeline-bullet-size: 10px;
|
||||
--timeline-bullet-vertical-pos: 0.75em;
|
||||
--timeline-connector-size: 4px;
|
||||
|
||||
--help-backdrop-blur: 10px;
|
||||
|
||||
--icon-button-size: 32px;
|
||||
--icon-button-icon-ratio: 0.65;
|
||||
|
||||
--modal-control-button-size: 22px;
|
||||
|
||||
/* Theme capabilities */
|
||||
--tab-note-icons: true;
|
||||
}
|
||||
|
||||
/*
|
||||
* MENUS
|
||||
*
|
||||
* Note: apply the "tn-dropdown-list" class for scrollable dropdown menus. Submenus are not
|
||||
* supported when this class is used.
|
||||
*/
|
||||
|
||||
.dropdown-menu:not(.static) {
|
||||
border-radius: var(--dropdown-border-radius);
|
||||
padding: var(--menu-padding-size) !important;
|
||||
font-size: 0.9rem !important;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
--scrollbar-background-color: var(--menu-background-color);
|
||||
}
|
||||
|
||||
body.mobile .dropdown-menu {
|
||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||
border-radius: var(--dropdown-border-radius);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
body.mobile .dropdown-menu .dropdown-menu {
|
||||
backdrop-filter: unset !important;
|
||||
border-radius: unset !important;
|
||||
}
|
||||
|
||||
body.desktop .dropdown-menu::before {
|
||||
content: "";
|
||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||
border-radius: var(--dropdown-border-radius);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
body.desktop .dropdown-menu.tn-dropdown-list {
|
||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||
}
|
||||
|
||||
body.desktop .dropdown-menu.tn-dropdown-list::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.desktop .dropdown-submenu .dropdown-menu::before {
|
||||
content: unset;
|
||||
}
|
||||
|
||||
body.mobile .dropdown-submenu .dropdown-menu {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
body.desktop .dropdown-submenu .dropdown-menu {
|
||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.dropdown-item,
|
||||
body.mobile .dropdown-submenu .dropdown-toggle {
|
||||
padding: 2px 2px 2px 8px !important;
|
||||
padding-inline-end: 16px !important;
|
||||
/* Note: the right padding should also accommodate the submenu arrow. */
|
||||
border-radius: 6px;
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
body.mobile .dropdown-submenu {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
body.mobile .dropdown-item:not(:last-of-type) {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
body.mobile .dropdown-submenu:hover {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
html body .dropdown-item.disabled,
|
||||
html body .dropdown-item[disabled] {
|
||||
color: var(--menu-text-color) !important;
|
||||
opacity: var(--menu-item-disabled-opacity);
|
||||
}
|
||||
|
||||
/* Menu item icon */
|
||||
.dropdown-item .bx {
|
||||
transform: translateY(var(--menu-item-icon-vert-offset));
|
||||
color: var(--menu-item-icon-color) !important;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
/* Menu item keyboard shortcut */
|
||||
.dropdown-item kbd {
|
||||
margin-left: 16px;
|
||||
font-family: unset !important;
|
||||
font-size: unset !important;
|
||||
color: var(--menu-item-keyboard-shortcut-color) !important;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
position: relative;
|
||||
border-color: transparent !important;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.dropdown-divider::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: -1px;
|
||||
left: calc(0px - var(--menu-padding-size));
|
||||
right: calc(0px - var(--menu-padding-size));
|
||||
border-top: 1px solid var(--menu-item-delimiter-color);
|
||||
}
|
||||
|
||||
/* Menu item arrow */
|
||||
.dropdown-menu .dropdown-toggle::after {
|
||||
content: "\ed3b" !important;
|
||||
position: absolute;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: unset !important;
|
||||
border: unset !important;
|
||||
padding: 0 4px;
|
||||
font-family: boxicons;
|
||||
font-size: 1.2em;
|
||||
color: var(--menu-item-arrow-color) !important;
|
||||
}
|
||||
|
||||
/* Menu item group heading */
|
||||
|
||||
/* The heading body */
|
||||
.dropdown-menu h6 {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
padding: 1em 8px 14px 8px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 1pt;
|
||||
color: var(--menu-item-group-header-color) !important;
|
||||
}
|
||||
|
||||
/* The delimiter line */
|
||||
.dropdown-menu h6::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: calc(0px - var(--menu-padding-size));
|
||||
right: calc(0px - var(--menu-padding-size));
|
||||
border-top: 1px solid var(--menu-item-delimiter-color);
|
||||
}
|
||||
|
||||
/* Static menus (used as a list, such as on the note revisions dialog) */
|
||||
body.desktop .dropdown-menu.static {
|
||||
box-shadow: unset;
|
||||
border-radius: 4px;
|
||||
border: unset;
|
||||
background-color: var(--card-background-color) !important;
|
||||
padding: var(--menu-padding-size) !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body.desktop .dropdown-menu.static .dropdown-item.active {
|
||||
--active-item-text-color: var(--menu-text-color);
|
||||
}
|
||||
|
||||
body.desktop .dropdown-menu .dropdown-toggle::after {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.mobile .dropdown-menu .dropdown-toggle::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
/*
|
||||
* TOASTS
|
||||
*/
|
||||
|
||||
#toast-container {
|
||||
/* The vertical gap between toasts */
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#toast-container .toast {
|
||||
--bs-toast-padding-x: 12px;
|
||||
--bs-border-radius: 8px;
|
||||
--bs-toast-bg: var(--toast-background);
|
||||
--bs-toast-color: var(--toast-text-color);
|
||||
--modal-control-button-background: var(--toast-close-button-background);
|
||||
--modal-control-button-color: var(--bs-toast-color);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
#toast-container .toast .toast-header {
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#toast-container .toast .toast-header strong {
|
||||
/* The title of the toast is no longer displayed */
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toast-container .toast .toast-header .btn-close {
|
||||
margin: 0 var(--bs-toast-padding-x) 0 12px;
|
||||
|
||||
}
|
||||
|
||||
#toast-container .toast .toast-body {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
/*
|
||||
* NOTE TOOLTIPS
|
||||
*/
|
||||
|
||||
.tooltip .tooltip-inner:has(.note-tooltip-content) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.note-tooltip-content {
|
||||
padding: 8px;
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
.note-tooltip-title .note-title-with-path {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.note-tooltip-title a {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.note-tooltip-title.note-no-content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.note-tooltip-title:not(.note-no-content) .note-title-with-path {
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 2px solid currentColor;
|
||||
}
|
||||
|
||||
.note-tooltip-content .note-path {
|
||||
display: block;
|
||||
color: var(--muted-text-color);
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.note-tooltip-content .note-tooltip-attributes {
|
||||
margin-top: -4px;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.note-tooltip-content .rendered-content {
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
/* NOTE PATHS */
|
||||
|
||||
.note-path .path-bracket {
|
||||
/* Hide the leading and trailing bracket from the path */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.note-path .path-delimiter {
|
||||
/* Hide the path delimiters (slashes) */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.note-path .path-delimiter + span::before {
|
||||
/* Replace the path delimiters with arrows */
|
||||
display: inline-block;
|
||||
content: "\ed3b";
|
||||
padding: 0 0.25em;
|
||||
font-family: boxicons;
|
||||
opacity: 0.75;
|
||||
transform: translateY(4%);
|
||||
}
|
||||
|
||||
/*
|
||||
* NOTE LIST
|
||||
*/
|
||||
|
||||
.note-list .note-book-card {
|
||||
--note-list-horizontal-padding: 22px;
|
||||
--note-list-vertical-padding: 15px;
|
||||
background-color: var(--card-background-color);
|
||||
border: 1px solid var(--card-border-color) !important;
|
||||
box-shadow: 2px 3px 4px var(--card-shadow-color);
|
||||
border-radius: 12px;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
margin: 5px 10px 5px 0;
|
||||
}
|
||||
|
||||
.note-list.list-view .note-book-card {
|
||||
box-shadow: 0 0 3px var(--card-shadow-color);
|
||||
}
|
||||
|
||||
.note-list.list-view .note-book-card .note-book-header .note-icon {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card:active {
|
||||
background-color: var(--card-background-press-color);
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card a {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-header {
|
||||
font-size: 1em;
|
||||
font-weight: bold;
|
||||
padding: 0.5em 1rem;
|
||||
border-bottom-color: var(--card-border-color);
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-header .note-icon {
|
||||
font-size: 17px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-header .note-book-title {
|
||||
font-size: 1em;
|
||||
color: var(--active-item-text-color);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes {
|
||||
font-size: 0.7em;
|
||||
font-weight: normal;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-header:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-content {
|
||||
padding: 0 !important;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-content .rendered-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-content h1,
|
||||
.note-list-wrapper .note-book-card .note-book-content h2,
|
||||
.note-list-wrapper .note-book-card .note-book-content h3,
|
||||
.note-list-wrapper .note-book-card .note-book-content h4,
|
||||
.note-list-wrapper .note-book-card .note-book-content h5,
|
||||
.note-list-wrapper .note-book-card .note-book-content h6 {
|
||||
font-size: 1rem;
|
||||
color: var(--active-item-text-color);
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content,
|
||||
.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content,
|
||||
.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content,
|
||||
.note-list-wrapper .note-book-card .note-book-content.type-video .rendered-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .note-book-content.type-code pre {
|
||||
height: 100%;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.note-list-wrapper .note-book-card .bx {
|
||||
color: var(--left-pane-icon-color) !important;
|
||||
}
|
||||
|
||||
.note-list.grid-view .note-book-card:hover {
|
||||
background: var(--card-background-color) !important;
|
||||
filter: contrast(105%);
|
||||
}
|
||||
|
||||
.note-list.grid-view .note-book-card img {
|
||||
object-fit: cover !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.note-list.grid-view .ck-content {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.note-list.grid-view .ck-content p {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.note-list.grid-view .ck-content figure.image {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
/*
|
||||
* NOTE SEARCH SUGGESTIONS
|
||||
*/
|
||||
|
||||
/* List body */
|
||||
.jump-to-note-dialog .jump-to-note-results .aa-suggestions,
|
||||
.note-detail-empty .aa-suggestions {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* List item */
|
||||
.jump-to-note-dialog .aa-suggestions div,
|
||||
.note-detail-empty .aa-suggestions div {
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
color: var(--menu-text-color);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* Selected list item */
|
||||
.jump-to-note-dialog .aa-suggestions div.aa-cursor,
|
||||
.note-detail-empty .aa-suggestions div.aa-cursor {
|
||||
background: var(--hover-item-background-color);
|
||||
color: var(--hover-item-text-color);
|
||||
}
|
||||
398
apps/client/stylesheets/theme-next/dialogs.css
Normal file
398
apps/client/stylesheets/theme-next/dialogs.css
Normal file
@@ -0,0 +1,398 @@
|
||||
/*
|
||||
* MODALS
|
||||
*/
|
||||
|
||||
/* Modal body */
|
||||
.modal .modal-content {
|
||||
box-shadow: 0 .5em 3em .5em var(--modal-shadow-color);
|
||||
border: 1px solid var(--modal-border-color);
|
||||
background: var(--modal-background-color);
|
||||
}
|
||||
|
||||
/* Modal header */
|
||||
.modal .modal-header {
|
||||
border-bottom: unset;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.modal .modal-header .modal-title {
|
||||
flex-grow: 1;
|
||||
font-size: 1.2em;
|
||||
color: var(--modal-title-color);
|
||||
}
|
||||
|
||||
/* Modal and toast control buttons (close and help) */
|
||||
|
||||
.modal .modal-header .btn-close,
|
||||
.modal .modal-header .help-button,
|
||||
#toast-container .toast .toast-header .btn-close {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
width: var(--modal-control-button-size);
|
||||
height: var(--modal-control-button-size);
|
||||
background: var(--modal-control-button-background);
|
||||
font-size: var(--modal-control-button-size);
|
||||
line-height: normal;
|
||||
font-weight: normal;
|
||||
color: var(--modal-control-button-color);
|
||||
opacity: 1;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.modal .modal-header .btn-close,
|
||||
#toast-container .toast .toast-header .btn-close {
|
||||
--modal-control-button-hover-background: var(--modal-close-button-hover-background);
|
||||
}
|
||||
|
||||
.modal .modal-header .btn-close::after,
|
||||
#toast-container .toast .toast-header .btn-close::after {
|
||||
content: "\ec8d";
|
||||
font-family: boxicons;
|
||||
}
|
||||
|
||||
.modal .modal-header .help-button {
|
||||
margin-right: 0;
|
||||
font-size: calc(var(--modal-control-button-size) * .75);
|
||||
font-family: unset;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.modal .modal-header .btn-close:hover,
|
||||
.modal .modal-header .help-button:hover,
|
||||
#toast-container .toast .toast-header .btn-close:hover {
|
||||
background: var(--modal-control-button-hover-background);
|
||||
color: var(--modal-control-button-hover-color);
|
||||
}
|
||||
|
||||
.modal .modal-header .btn-close:active,
|
||||
.modal .modal-header .help-button:active,
|
||||
#toast-container .toast .toast-header .btn-close:active {
|
||||
transform: scale(.85);
|
||||
}
|
||||
|
||||
.modal .modal-header .btn-close:focus,
|
||||
.modal .modal-header .help-button:focus,
|
||||
#toast-container .toast .toast-header .btn-close:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.modal .modal-header .btn-close:focus-visible,
|
||||
.modal .modal-header .help-button:focus-visible,
|
||||
#toast-container .toast .toast-header .btn-close:focus-visible {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Modal footer */
|
||||
.modal .modal-footer {
|
||||
background: var(--modal-footer-background);
|
||||
color: var(--modal-footer-color);
|
||||
border-top: unset;
|
||||
}
|
||||
|
||||
/* Tool dialogs - small dialogs without a backdrop */
|
||||
div.tn-tool-dialog {
|
||||
border-radius: 10px;
|
||||
background: var(--tool-dialog-background-color) !important;
|
||||
user-select: none;
|
||||
box-shadow: 10px 10px 93px -25px var(--tool-dialog-shadow-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* JUMP TO NOTE DIALOG
|
||||
*/
|
||||
|
||||
.jump-to-note-dialog .modal-dialog {
|
||||
--modal-background-color: var(--menu-background-color);
|
||||
--modal-footer-background: transparent;
|
||||
--bs-modal-header-border-width: 0;
|
||||
--bs-modal-footer-border-width: 0;
|
||||
--bs-modal-footer-gap: 0;
|
||||
|
||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||
}
|
||||
|
||||
.jump-to-note-dialog .modal-content {
|
||||
--bs-modal-header-padding-x: 0;
|
||||
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
||||
border: 1px solid var(--dropdown-border-color);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.jump-to-note-dialog .modal-header {
|
||||
padding: unset !important;
|
||||
}
|
||||
|
||||
.jump-to-note-dialog .modal-body {
|
||||
padding: 26px 0 !important;
|
||||
}
|
||||
|
||||
/* Search box wrapper */
|
||||
.jump-to-note-dialog .input-group {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.jump-to-note-dialog .input-group:hover {
|
||||
background: var(--quick-search-hover-background);
|
||||
}
|
||||
|
||||
/* Focused search box */
|
||||
.jump-to-note-dialog .input-group:focus-within {
|
||||
border-color: var(--quick-search-focus-border);
|
||||
background: var(--quick-search-focus-background);
|
||||
color: var(--quick-search-focus-color);
|
||||
}
|
||||
|
||||
.jump-to-note-dialog .input-clearer-button {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* RECENT CHANGES DIALOG
|
||||
*/
|
||||
|
||||
.recent-changes-dialog .modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.recent-changes-content {
|
||||
margin: var(--bs-modal-padding);
|
||||
}
|
||||
|
||||
/* Date headings */
|
||||
.recent-changes-content > div > b {
|
||||
position: sticky;
|
||||
display: block;
|
||||
top: 0;
|
||||
background: var(--modal-background-color);
|
||||
padding: 10px 0 10px calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
||||
font-size: 1.25em;
|
||||
font-weight: 300;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.recent-changes-content ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Timeline items */
|
||||
.recent-changes-content ul li {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border: unset;
|
||||
padding-top: var(--timeline-item-top-padding);
|
||||
padding-bottom: var(--timeline-item-bottom-padding);
|
||||
padding-left: calc(var(--timeline-left-gap) + var(--timeline-right-gap));
|
||||
padding-right: var(--timeline-left-gap);
|
||||
color: var(--active-item-text-color);
|
||||
}
|
||||
|
||||
.recent-changes-content li > span:first-child::after {
|
||||
/* Remove the dash between time and note title */
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
.recent-changes-content ul li:not(.deleted-note):hover {
|
||||
border-radius: 8px;
|
||||
background: var(--hover-item-background-color);
|
||||
color: var(--hover-item-text-color);
|
||||
}
|
||||
|
||||
.recent-changes-content ul li .note-path {
|
||||
color: var(--muted-text-color);
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/* Item time */
|
||||
.recent-changes-content ul li > span:first-child {
|
||||
display: inline-block;
|
||||
min-width: 80px;
|
||||
vertical-align: top;
|
||||
color: var(--muted-text-color);
|
||||
}
|
||||
|
||||
/* Item title & path container */
|
||||
.recent-changes-content ul li > span:nth-child(2) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Item title link */
|
||||
|
||||
.recent-changes-content ul li .note-title a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.recent-changes-content ul li .note-title a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Item title for deleted notes */
|
||||
.recent-changes-content ul li.deleted-note .note-title > .note-title {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* Item path */
|
||||
.recent-changes-content ul li > span:nth-child(2) small {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
/* Timeline connector */
|
||||
.recent-changes-content ul li::before,
|
||||
.recent-changes-content > div > b::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: var(--connector-top, 0);
|
||||
left: calc(var(--timeline-left-gap) + ((var(--timeline-bullet-size) - var(--timeline-connector-size)) / 2));
|
||||
bottom: var(--connector-bottom, 0);
|
||||
width: var(--timeline-connector-size);
|
||||
border-radius: var(--connector-radius, 0) var(--connector-radius, 0) 0 0;
|
||||
background: var(--timeline-connector-color);
|
||||
transition: background-color 400ms ease-in-out;
|
||||
}
|
||||
|
||||
.recent-changes-content ul li:hover:before {
|
||||
mix-blend-mode: var(--timeline-connector-hover-blend-mode);
|
||||
}
|
||||
|
||||
.recent-changes-content > div:hover {
|
||||
--timeline-connector-color: var(--timeline-connector-active-color);
|
||||
}
|
||||
|
||||
/* The first item of the timeline */
|
||||
.recent-changes-content > div:first-child > *:first-child {
|
||||
--connector-top: 50%;
|
||||
--connector-radius: calc(var(--timeline-connector-size) / 2);
|
||||
}
|
||||
|
||||
/* The last item of the timeline */
|
||||
.recent-changes-content > div:last-child li:last-child {
|
||||
--connector-bottom: 50%;
|
||||
}
|
||||
|
||||
/* Timeline bullet */
|
||||
.recent-changes-content ul li::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: calc(var(--timeline-item-top-padding) + var(--timeline-bullet-vertical-pos));
|
||||
left: var(--timeline-left-gap);
|
||||
width: var(--timeline-bullet-size);
|
||||
height: var(--timeline-bullet-size);
|
||||
border-radius: 50%;
|
||||
background: var(--timeline-bullet-color);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* Hovered timeline bullet */
|
||||
.recent-changes-content ul li:hover::after {
|
||||
background: var(--timeline-bullet-hover-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* CHEATSHEET DIALOG
|
||||
*/
|
||||
|
||||
.help-dialog .modal-content {
|
||||
--modal-background-color: var(--help-background-color);
|
||||
backdrop-filter: blur(var(--help-backdrop-blur));
|
||||
}
|
||||
|
||||
.help-dialog .help-cards {
|
||||
display: block;
|
||||
columns: 3;
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
.help-dialog .card {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
border: none;
|
||||
background: unset;
|
||||
padding: 16px 8px;
|
||||
break-inside: avoid-column;
|
||||
}
|
||||
|
||||
.help-dialog .card-body {
|
||||
box-shadow: var(--help-card-shadow);
|
||||
border-radius: 6px;
|
||||
background: var(--help-card-background);
|
||||
}
|
||||
|
||||
.help-dialog .card-body h5,
|
||||
.help-dialog .card-body h6 {
|
||||
color: var(--help-card-heading-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.help-dialog .card-body h5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.help-dialog .card-body h6 {
|
||||
font-size: 15px;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* Help card item */
|
||||
.help-dialog .help-cards ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.help-dialog .help-cards li + li {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
|
||||
/* Keyboard shortcut */
|
||||
.help-dialog .help-cards kbd,
|
||||
.ck-content kbd {
|
||||
box-shadow: var(--help-kbd-shortcut-shadow);
|
||||
margin: 0 4px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 2px 10px;
|
||||
background: var(--help-kbd-shortcut-background);
|
||||
color: var(--help-kbd-shortcut-color);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5pt;
|
||||
}
|
||||
|
||||
.help-dialog .help-cards kbd:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Inline code - used for Markdown samples */
|
||||
.help-dialog .help-cards code {
|
||||
border-radius: 4px;
|
||||
background: var(--help-code-background);
|
||||
padding: 0 8px;
|
||||
color: var(--help-code-color);
|
||||
}
|
||||
|
||||
/* DELETE NOTE PREVIEW DIALOG */
|
||||
|
||||
.delete-notes-list .note-path {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* ATTRIBUTE DETAIL DIALOG
|
||||
*/
|
||||
|
||||
/* Labels */
|
||||
.attr-edit-table th {
|
||||
padding-right: 12px;
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
}
|
||||
748
apps/client/stylesheets/theme-next/forms.css
Normal file
748
apps/client/stylesheets/theme-next/forms.css
Normal file
@@ -0,0 +1,748 @@
|
||||
/*
|
||||
* Command buttons (.btn-primary / .btn-secondary / .btn-sm / .btn-success)
|
||||
*/
|
||||
|
||||
button.btn.btn-primary,
|
||||
button.btn.btn-secondary,
|
||||
button.btn.btn-sm:not(.select-button),
|
||||
button.btn.btn-success {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 120px;
|
||||
box-shadow: 1px 1px 1px var(--cmd-button-shadow-color);
|
||||
border: unset;
|
||||
border-radius: 6px;
|
||||
padding: 4px 16px;
|
||||
background: var(--cmd-button-background-color);
|
||||
color: var(--cmd-button-text-color);
|
||||
}
|
||||
|
||||
button.btn.btn-primary:hover,
|
||||
button.btn.btn-secondary:hover,
|
||||
button.btn.btn-sm:not(.select-button):hover,
|
||||
button.btn.btn-success:hover {
|
||||
background: var(--cmd-button-hover-background-color);
|
||||
color: var(--cmd-button-hover-text-color);
|
||||
}
|
||||
|
||||
button.btn.btn-primary:active,
|
||||
button.btn.btn-secondary:active,
|
||||
button.btn.btn-sm:not(.select-button):active,
|
||||
button.btn.btn-success:active {
|
||||
opacity: 0.85;
|
||||
box-shadow: unset;
|
||||
background: var(--cmd-button-background-color) !important;
|
||||
color: var(--cmd-button-text-color) !important;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
button.btn.btn-primary:disabled,
|
||||
button.btn.btn-secondary:disabled,
|
||||
button.btn.btn-sm:not(.select-button):disabled,
|
||||
button.btn.btn-success:disabled {
|
||||
opacity: var(--cmd-button-disabled-opacity);
|
||||
}
|
||||
|
||||
button.btn.btn-primary:focus-visible,
|
||||
button.btn.btn-secondary:focus-visible,
|
||||
button.btn.btn-sm:not(.select-button):focus-visible,
|
||||
button.btn.btn-success:focus-visible {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
|
||||
/* Button's icon */
|
||||
button.btn.btn-primary span.bx,
|
||||
button.btn.btn-secondary span.bx,
|
||||
button.btn.btn-sm span.bx,
|
||||
button.btn.btn-success span.bx {
|
||||
color: var(--cmd-button-icon-color);
|
||||
padding-right: 0.35em;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* Button's keyboard shortcut */
|
||||
button.btn.btn-primary kbd,
|
||||
button.btn.btn-secondary kbd,
|
||||
button.btn.btn-sm kbd,
|
||||
button.btn.btn-success kbd {
|
||||
margin-left: 0.5em;
|
||||
background: var(--cmd-button-keyboard-shortcut-background);
|
||||
color: var(--cmd-button-keyboard-shortcut-color);
|
||||
font-size: 0.6em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5pt;
|
||||
}
|
||||
|
||||
/*
|
||||
* Icon buttons
|
||||
*/
|
||||
|
||||
:root .icon-action:not(.global-menu-button),
|
||||
:root .tn-tool-button,
|
||||
:root .btn-group .tn-tool-button:not(:last-child),
|
||||
:root .btn-group .tn-tool-button:last-child {
|
||||
width: var(--icon-button-size);
|
||||
height: var(--icon-button-size);
|
||||
border: unset !important;
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
color: var(--icon-button-color);
|
||||
}
|
||||
|
||||
.btn-group .tn-tool-button + .tn-tool-button {
|
||||
margin-left: 4px !important;
|
||||
}
|
||||
|
||||
/* The "x" icon button */
|
||||
:root .icon-action.bx-x,
|
||||
:root .tn-tool-button.bx-x {
|
||||
--icon-button-hover-background: var(--tab-close-button-hover-background);
|
||||
--icon-button-hover-color: var(--tab-close-button-hover-color);
|
||||
--icon-button-size: 24px;
|
||||
--icon-button-icon-ratio: 0.8;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* The icon */
|
||||
:root .icon-action:not(.global-menu-button)::before,
|
||||
:root .tn-tool-button::before {
|
||||
display: block;
|
||||
line-height: var(--icon-button-size);
|
||||
font-size: calc(var(--icon-button-size) * var(--icon-button-icon-ratio));
|
||||
}
|
||||
|
||||
:root .icon-action:not(.global-menu-button):hover,
|
||||
:root .icon-action:not(.global-menu-button).show,
|
||||
:root .tn-tool-button:hover,
|
||||
:root .tn-tool-button.show {
|
||||
background: var(--icon-button-hover-background);
|
||||
color: var(--icon-button-hover-color);
|
||||
}
|
||||
|
||||
:root .icon-action:not(.global-menu-button):active::before,
|
||||
:root .tn-tool-button:active::before {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
:root .icon-action:not(.global-menu-button):focus-visible,
|
||||
:root .tn-tool-button:focus-visible {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* Input boxes
|
||||
*/
|
||||
|
||||
input:disabled {
|
||||
opacity: 0.33;
|
||||
}
|
||||
|
||||
/* Text boxes */
|
||||
|
||||
input:not([type]),
|
||||
input[type="text"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
textarea.form-control,
|
||||
textarea,
|
||||
.tn-input-field {
|
||||
outline: 3px solid transparent;
|
||||
outline-offset: 6px;
|
||||
border: unset;
|
||||
border-radius: var(--bs-border-radius);
|
||||
background: var(--input-background-color);
|
||||
color: var(--input-text-color);
|
||||
}
|
||||
|
||||
input:not([type]):hover,
|
||||
input[type="text"]:hover,
|
||||
input[type="number"]:hover,
|
||||
input[type="password"]:hover,
|
||||
input[type="date"]:hover,
|
||||
input[type="time"]:hover,
|
||||
input[type="datetime-local"]:hover,
|
||||
textarea.form-control:hover,
|
||||
textarea:hover,
|
||||
.tn-input-field:hover {
|
||||
background: var(--input-hover-background);
|
||||
color: var(--input-hover-color);
|
||||
}
|
||||
|
||||
input:not([type]):focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
textarea.form-control:focus,
|
||||
textarea:focus,
|
||||
.tn-input-field:focus,
|
||||
.tn-input-field:focus-within {
|
||||
box-shadow: unset;
|
||||
outline: 3px solid var(--input-focus-outline-color);
|
||||
outline-offset: 0;
|
||||
background: var(--input-focus-background);
|
||||
color: var(--input-focus-color);
|
||||
transition:
|
||||
outline-color 50ms linear,
|
||||
outline-offset 200ms ease-out;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
.form-control::placeholder {
|
||||
--muted-text-color: var(--input-placeholder-color);
|
||||
}
|
||||
|
||||
input::selection,
|
||||
.form-control::selection {
|
||||
background: var(--input-selection-background);
|
||||
color: var(--input-selection-text-color);
|
||||
}
|
||||
|
||||
.form-text {
|
||||
color: var(--main-text-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Input groups */
|
||||
|
||||
.input-group {
|
||||
outline: 3px solid transparent;
|
||||
outline-offset: 6px;
|
||||
background: var(--input-background-color);
|
||||
border-radius: 6px;
|
||||
padding-right: 8px;
|
||||
color: var(--quick-search-color);
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.input-group:hover {
|
||||
background: var(--input-hover-background);
|
||||
}
|
||||
|
||||
.input-group:focus-within {
|
||||
outline: 3px solid var(--input-focus-outline-color);
|
||||
outline-offset: 0;
|
||||
background: var(--input-focus-background);
|
||||
transition:
|
||||
outline-color 50ms linear,
|
||||
outline-offset 200ms ease-out;
|
||||
}
|
||||
|
||||
.input-group input .input-group input:hover,
|
||||
.input-group input:focus,
|
||||
.input-group .form-control,
|
||||
.input-group .form-control:hover,
|
||||
.input-group .form-control:focus {
|
||||
/* Ignore the focus outline for the inputs that are children of an input group */
|
||||
outline: unset;
|
||||
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.input-group button,
|
||||
.input-group a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
--bs-border-width: 0;
|
||||
--accented-background-color: transparent;
|
||||
background: transparent;
|
||||
padding: 0 4px;
|
||||
|
||||
/* Workaround to set the "color" property. */
|
||||
--muted-text-color: var(--input-action-button-color);
|
||||
}
|
||||
|
||||
.input-group button:hover,
|
||||
.input-group a:hover {
|
||||
--muted-text-color: var(--input-action-button-hover);
|
||||
color: var(--input-action-button-hover);
|
||||
}
|
||||
|
||||
.input-group button:focus-visible,
|
||||
.input-group a:focus-visible {
|
||||
box-shadow: unset;
|
||||
outline: transparent;
|
||||
border: transparent;
|
||||
text-shadow: 0 0 3px var(--input-action-button-hover);
|
||||
}
|
||||
|
||||
.input-group button:active {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.input-group a.disabled {
|
||||
opacity: 0.5;
|
||||
/* Workaround to set the "background" property. */
|
||||
--button-disabled-background-color: transparent;
|
||||
--button-disabled-text-color: var(--input-action-button-color);
|
||||
}
|
||||
|
||||
.input-group .input-clearer-button {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.input-group .input-group-text {
|
||||
/* Background color hijack */
|
||||
--accented-background-color: transparent;
|
||||
|
||||
border: none;
|
||||
color: var(--input-placeholder-color);
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.input-group .input-group-text:not(button):not(a):not(.bx) {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
Numeric input with measurement unit as a sufix
|
||||
|
||||
<label class="input-group tn-number-unit-pair">
|
||||
<input ... >
|
||||
<span class="input-group-text">meters</span>
|
||||
</label>
|
||||
*/
|
||||
|
||||
label.input-group.tn-number-unit-pair {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
label.input-group.tn-number-unit-pair input {
|
||||
width: 120px !important;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
/* Combo box-like dropdown buttons */
|
||||
|
||||
.select-button.dropdown-toggle::after {
|
||||
/* Remove the original arrow */
|
||||
content: unset;
|
||||
}
|
||||
|
||||
/* Combo boxes and combo box-like dropdown buttons */
|
||||
|
||||
select,
|
||||
select.form-select,
|
||||
select.form-control,
|
||||
.select-button.dropdown-toggle.btn {
|
||||
--dropdown-arrow: var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat;
|
||||
|
||||
outline: 3px solid transparent;
|
||||
outline-offset: 6px;
|
||||
padding-right: calc(15px + 1.5rem);
|
||||
background: var(--input-background-color) var(--dropdown-arrow);
|
||||
color: var(--input-text-color);
|
||||
border: unset;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
select:hover,
|
||||
select.form-select:hover,
|
||||
select.form-control:hover,
|
||||
.select-button.dropdown-toggle.btn:hover {
|
||||
background: var(--input-hover-background) var(--dropdown-arrow);
|
||||
color: var(--input-hover-color);
|
||||
}
|
||||
|
||||
button.select-button.dropdown-toggle.btn:active {
|
||||
background-color: transparent;
|
||||
color: var(--select-focus-text-color);
|
||||
}
|
||||
|
||||
select:focus,
|
||||
select.form-select:focus,
|
||||
select.form-control:focus,
|
||||
.select-button.dropdown-toggle.btn:focus {
|
||||
box-shadow: unset;
|
||||
outline: 3px solid var(--input-focus-outline-color);
|
||||
outline-offset: 0;
|
||||
background: var(--select-focus-background) var(--dropdown-arrow);
|
||||
color: var(--select-focus-text-color);
|
||||
transition:
|
||||
outline-color 50ms linear,
|
||||
outline-offset 200ms ease-out;
|
||||
}
|
||||
|
||||
option {
|
||||
color: var(--select-dropdown-text-color);
|
||||
}
|
||||
|
||||
optgroup {
|
||||
color: var(--select-group-heading-text-color);
|
||||
font-size: 0.75em;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
/*
|
||||
* File input
|
||||
*
|
||||
* <label class="tn-file-input tn-input-field">
|
||||
* <input type="file" />
|
||||
* </label>
|
||||
*/
|
||||
|
||||
.tn-file-input {
|
||||
position: relative;
|
||||
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.tn-file-input input[type="file"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tn-file-input input[type="file"]::file-selector-button {
|
||||
/* Hide the "Browse..." button */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tn-file-input:hover input[type="file"] {
|
||||
color: var(--input-hover-color);
|
||||
}
|
||||
|
||||
.tn-file-input input[type="file"]:focus,
|
||||
.tn-file-input input[type="file"]:active {
|
||||
outline: none;
|
||||
color: var(--input-focus-color);
|
||||
}
|
||||
|
||||
/* The browse icon */
|
||||
.tn-file-input::before {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
content: "\eae1";
|
||||
width: 2em;
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
font-size: 1.2em;
|
||||
font-family: boxicons;
|
||||
}
|
||||
|
||||
/* Check boxes and radio buttons */
|
||||
|
||||
@supports selector(label:has(*)) {
|
||||
/* Check box & radio button commons */
|
||||
|
||||
/* The parent label */
|
||||
label.tn-radio,
|
||||
label.tn-checkbox {
|
||||
--box-size: 1em;
|
||||
--box-label-gap: 0.5em;
|
||||
|
||||
position: relative;
|
||||
padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* The original input */
|
||||
label.tn-radio > input[type="radio"],
|
||||
label.tn-checkbox > input[type="checkbox"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--box-size);
|
||||
height: 100%;
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
label.tn-radio::before,
|
||||
label.tn-radio::after,
|
||||
label.tn-checkbox::before,
|
||||
label.tn-checkbox::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
translate: 0 -50%;
|
||||
width: var(--box-size);
|
||||
height: var(--box-size);
|
||||
}
|
||||
|
||||
label.tn-radio:has(> input[type="radio"]:focus-visible)::before,
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:focus-visible)::before {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
}
|
||||
|
||||
/* Check boxes */
|
||||
|
||||
/* The check box background */
|
||||
label.tn-checkbox::before {
|
||||
border-radius: 3px;
|
||||
background: var(--radio-checkbox-background);
|
||||
}
|
||||
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:not(:disabled)):hover:before {
|
||||
background: var(--radio-checkbox-hover-background);
|
||||
}
|
||||
|
||||
@keyframes checkbox-checked {
|
||||
from {
|
||||
transform: scale(2);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* The tick mark */
|
||||
label.tn-checkbox::after {
|
||||
mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
|
||||
mask-position: center center;
|
||||
mask-size: 0.95em;
|
||||
background-color: var(--radio-checkbox-indicator-color);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition:
|
||||
transform 300ms ease-out,
|
||||
opacity 300ms linear;
|
||||
}
|
||||
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:checked)::after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: opacity 100ms ease-in-out;
|
||||
animation: checkbox-checked 150ms ease-out;
|
||||
}
|
||||
|
||||
/* Radio buttons */
|
||||
|
||||
label.tn-radio::before,
|
||||
label.tn-radio::after {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* The outer circle */
|
||||
label.tn-radio::before {
|
||||
background: var(--radio-checkbox-background);
|
||||
}
|
||||
|
||||
label.tn-radio:has(> input[type="radio"]:not(:disabled)):hover::before {
|
||||
background: var(--radio-checkbox-hover-background);
|
||||
}
|
||||
|
||||
@keyframes radio-checked {
|
||||
from {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
to {
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/* The inner circle */
|
||||
label.tn-radio::after {
|
||||
background: var(--radio-checkbox-indicator-color);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 300ms linear,
|
||||
transform 300ms ease-in;
|
||||
}
|
||||
|
||||
label.tn-radio:has(> input[type="radio"]:checked)::after {
|
||||
transform: scale(0.5);
|
||||
opacity: 1;
|
||||
transition: opacity 150ms linear;
|
||||
animation: radio-checked 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Disabled check boxes and radio buttons */
|
||||
|
||||
label.tn-radio:has(> input[type="radio"]:disabled)::before,
|
||||
label.tn-radio:has(> input[type="radio"]:disabled)::after,
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::before,
|
||||
label.tn-checkbox:has(> input[type="checkbox"]:disabled)::after {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Switches */
|
||||
|
||||
.switch-widget.component,
|
||||
.note-language-container {
|
||||
--icon-button-size: 28px;
|
||||
}
|
||||
|
||||
div.switch-widget {
|
||||
--switch-off-track-background: var(--cmd-button-background-color);
|
||||
--switch-on-track-background: var(--cmd-button-text-color);
|
||||
|
||||
--switch-off-thumb-background: var(--cmd-button-text-color);
|
||||
--switch-on-thumb-background: var(--main-background-color);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
body a.tn-link,
|
||||
body a.tn-link:visited,
|
||||
.use-tn-links a,
|
||||
.use-tn-links a:visited {
|
||||
--background: transparent;
|
||||
|
||||
box-shadow: 0 0 0 0 var(--background);
|
||||
border-radius: 4px;
|
||||
background: var(--background);
|
||||
color: var(--link-color);
|
||||
font-weight: normal;
|
||||
text-decoration: underline;
|
||||
|
||||
transition:
|
||||
background-color 200ms ease-out,
|
||||
box-shadow 200ms ease-out,
|
||||
color 300ms ease-out;
|
||||
}
|
||||
|
||||
body a.tn-link:focus-visible,
|
||||
.use-tn-links a:focus-visible {
|
||||
outline: 2px solid var(--input-focus-outline-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
body a.tn-link:hover,
|
||||
.use-tn-links a:hover {
|
||||
box-shadow: 0 0 0 4px var(--link-hover-background);
|
||||
--background: var(--link-hover-background);
|
||||
color: var(--link-hover-color);
|
||||
|
||||
transition:
|
||||
background-color 100ms ease-in,
|
||||
box-shadow 100ms ease-in,
|
||||
color 150ms ease-in;
|
||||
}
|
||||
|
||||
a.tn-link.external:not(.no-arrow)::after,
|
||||
a.tn-link[href^="http://"]:not(.no-arrow)::after,
|
||||
a.tn-link[href^="https://"]:not(.no-arrow)::after,
|
||||
.use-tn-links a.external:not(.no-arrow)::after,
|
||||
.use-tn-links a[href^="http://"]:not(.no-arrow)::after,
|
||||
.use-tn-links a[href^="https://"]:not(.no-arrow)::after
|
||||
{
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
@keyframes link-arrow-blink {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
a.tn-link:hover.external:not(.no-arrow)::after,
|
||||
a.tn-link:hover[href^="http://"]:not(.no-arrow)::after,
|
||||
a.tn-link:hover[href^="https://"]:not(.no-arrow)::after,
|
||||
.use-tn-links a:hover.external:not(.no-arrow)::after,
|
||||
.use-tn-links a:hover[href^="http://"]:not(.no-arrow)::after,
|
||||
.use-tn-links a:hover[href^="https://"]:not(.no-arrow)::after
|
||||
{
|
||||
animation: link-arrow-blink 500ms linear alternate infinite;
|
||||
}
|
||||
|
||||
/*
|
||||
* Range inputs (sliders)
|
||||
*/
|
||||
|
||||
input[type="range"] {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
* WebKit scrollbars
|
||||
*/
|
||||
|
||||
:root {
|
||||
--scrollbar-thickness: 10px;
|
||||
--scrollbar-thumb-thickness: 3px;
|
||||
--scrollbar-thumb-hover-thickness: 6px;
|
||||
--scrollbar-start-end-gap: 8px;
|
||||
}
|
||||
|
||||
/* Scrollbar's body */
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-background-color);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar:vertical {
|
||||
width: var(--scrollbar-thickness) !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar:horizontal {
|
||||
height: var(--scrollbar-thickness) !important;
|
||||
}
|
||||
|
||||
/* Scrollbar's thumb */
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
--s-thumb-thickness: var(--scrollbar-thumb-thickness);
|
||||
--s-thumb-color: var(--scrollbar-thumb-color);
|
||||
|
||||
--s-gradient-angle: 90deg;
|
||||
--s-gradient-p1: calc((var(--scrollbar-thickness) - var(--s-thumb-thickness)) / 2);
|
||||
--s-gradient-p2: calc(var(--s-gradient-p1) + var(--s-thumb-thickness));
|
||||
|
||||
border: none !important;
|
||||
background: linear-gradient(var(--s-gradient-angle),
|
||||
transparent, transparent var(--s-gradient-p1),
|
||||
var(--s-thumb-color) 0px, var(--s-thumb-color) var(--s-gradient-p2),
|
||||
transparent 0) !important;
|
||||
|
||||
border-radius: calc(var(--scrollbar-thickness) / 2) !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
--s-gradient-angle: 0deg;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
--s-thumb-thickness: var(--scrollbar-thumb-hover-thickness);
|
||||
--s-thumb-color: var(--scrollbar-thumb-hover-color);
|
||||
}
|
||||
|
||||
/* Scrollbar's increment/decrement buttons (repurposed as a scrollbar start/end gap).
|
||||
* This gap is useful also to avoid breaking the rounded corners of a container when a
|
||||
* custom scrollbar background color is used. */
|
||||
|
||||
::-webkit-scrollbar-button:vertical {
|
||||
height: var(--scrollbar-start-end-gap);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button:horizontal {
|
||||
width: var(--scrollbar-start-end-gap);
|
||||
}
|
||||
|
||||
/*
|
||||
* Firefox scrollbars
|
||||
*
|
||||
* Unsupported features: --scrollbar-thumb-thickness, --scrollbar-thumb-hover-thickness,
|
||||
* --scrollbar-start-end-gap, --scrollbar-thumb-hover-color.
|
||||
*/
|
||||
|
||||
:root {
|
||||
scrollbar-color: var(--scrollbar-thumb-color) transparent;
|
||||
scrollbar-width: var(--scrollbar-thickness);
|
||||
}
|
||||
|
||||
@supports selector(::-webkit-scrollbar) {
|
||||
/* Prevent the scrollbar-color and scrollbar-width properties to override the custom styles
|
||||
* defined using ::-webkit-scrollbar. */
|
||||
:root {
|
||||
scrollbar-color: unset;
|
||||
scrollbar-width: unset;
|
||||
}
|
||||
}
|
||||
122
apps/client/stylesheets/theme-next/llm-chat.css
Normal file
122
apps/client/stylesheets/theme-next/llm-chat.css
Normal file
@@ -0,0 +1,122 @@
|
||||
/* LLM Chat Launcher Widget Styles */
|
||||
.note-context-chat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.note-context-chat-container {
|
||||
flex-grow: 1;
|
||||
overflow-y: auto;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
display: flex;
|
||||
margin-bottom: 15px;
|
||||
max-width: 85%;
|
||||
}
|
||||
|
||||
.chat-message.user-message {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.chat-message.assistant-message {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.message-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.user-message .message-avatar {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.assistant-message .message-avatar {
|
||||
background-color: var(--secondary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
background-color: var(--more-accented-background-color);
|
||||
border-radius: 12px;
|
||||
padding: 10px 15px;
|
||||
max-width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.user-message .message-content {
|
||||
background-color: var(--accented-background-color);
|
||||
}
|
||||
|
||||
.message-content pre {
|
||||
background-color: var(--code-background-color);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
overflow-x: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.message-content code {
|
||||
background-color: var(--code-background-color);
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
color: var(--muted-text-color);
|
||||
}
|
||||
|
||||
.sources-container {
|
||||
background-color: var(--accented-background-color);
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.sources-list {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.source-item {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.source-link {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.source-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.note-context-chat-form {
|
||||
display: flex;
|
||||
background-color: var(--main-background-color);
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.note-context-chat-input {
|
||||
resize: vertical;
|
||||
min-height: 44px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.chat-message {
|
||||
max-width: 95%;
|
||||
}
|
||||
}
|
||||
222
apps/client/stylesheets/theme-next/notes/text.css
Normal file
222
apps/client/stylesheets/theme-next/notes/text.css
Normal file
@@ -0,0 +1,222 @@
|
||||
/*
|
||||
* CKEDITOR
|
||||
*/
|
||||
|
||||
/*
|
||||
* Toolbar
|
||||
*/
|
||||
|
||||
.ck.ck-toolbar {
|
||||
--ck-color-toolbar-background: transparent;
|
||||
|
||||
--ck-color-button-default-background: transparent;
|
||||
--ck-color-button-default-hover-background: var(--hover-item-background-color);
|
||||
--ck-color-button-default-disabled-background: transparent;
|
||||
|
||||
--ck-color-button-on-background: transparent;
|
||||
--ck-color-button-on-hover-background: var(--hover-item-background-color);
|
||||
|
||||
--ck-focus-ring: 1px solid var(--input-focus-outline-color);
|
||||
--ck-color-focus-border: var(--input-focus-outline-color);
|
||||
--ck-focus-outer-shadow: none;
|
||||
|
||||
--ck-border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Disabled button */
|
||||
:root .classic-toolbar-widget .ck.ck-button.ck-disabled {
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dropdowns
|
||||
*/
|
||||
|
||||
/* Dropdown body */
|
||||
:root .ck.ck-dropdown__panel,
|
||||
:root .ck-balloon-panel {
|
||||
--ck-color-panel-background: var(--menu-background-color);
|
||||
--ck-color-panel-border: var(--modal-border-color);
|
||||
|
||||
box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
|
||||
border: 1px solid var(--modal-border-color) !important;
|
||||
border-radius: var(--dropdown-border-radius) !important;
|
||||
background: var(--menu-background-color) !important;
|
||||
backdrop-filter: var(--dropdown-backdrop-filter);
|
||||
padding: var(--menu-padding-size);
|
||||
}
|
||||
|
||||
:root ul.ck.ck-list,
|
||||
:root div.ck.ck-balloon-panel:not(.ck-tooltip) {
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Dropdown list item */
|
||||
:root ul.ck.ck-list button.ck-button {
|
||||
padding: 2px 16px;
|
||||
background: transparent;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: unset;
|
||||
}
|
||||
|
||||
/* Checked list item */
|
||||
:root ul.ck.ck-list button.ck-button.ck-on:not(:hover) {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
:root ul.ck.ck-list button.ck-button:hover,
|
||||
:root ul.ck.ck-list button.ck-button.ck-on:hover {
|
||||
background: var(--hover-item-background-color);
|
||||
color: var(--hover-item-color);
|
||||
}
|
||||
|
||||
/* Color picker dropdown */
|
||||
|
||||
/* Color picker button */
|
||||
:root .ck.ck-color-selector .ck-color-grids-fragment .ck-button.ck-color-selector__color-picker {
|
||||
--ck-color-base-border: transparent; /* Remove the top border */
|
||||
|
||||
border-bottom-left-radius: var(--ck-border-radius);
|
||||
border-bottom-right-radius: var(--ck-border-radius);
|
||||
}
|
||||
|
||||
/* Table dropdown */
|
||||
|
||||
.ck-insert-table-dropdown__grid {
|
||||
--ck-color-base-border: var(--ck-color-panel-border); /* Cell box color */
|
||||
--ck-color-focus-border: var(--hover-item-text-color); /* Selected cell box border color */
|
||||
--ck-color-focus-outer-shadow: var(--hover-item-background-color); /* Selected cell box background color */
|
||||
--ck-border-radius: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* EDITOR'S CONTENT
|
||||
*/
|
||||
|
||||
/*
|
||||
* Code Blocks
|
||||
*/
|
||||
|
||||
.attachment-content-wrapper pre,
|
||||
.ck-content pre,
|
||||
.ck-mermaid__editing-view {
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
box-shadow: var(--code-block-box-shadow);
|
||||
padding: 0 !important;
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.ck-content pre {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
|
||||
/* Create some space for the top-side shadow */
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
.ck.ck-editor__editable pre[data-language]::after {
|
||||
--ck-color-code-block-label-background: rgba(128, 128, 128, 0.5);
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding: 0px 10px;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: bold;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.attachment-content-wrapper pre code,
|
||||
.ck-content pre code,
|
||||
.ck-mermaid__editing-view {
|
||||
display: block;
|
||||
padding: 1em !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.ck-content pre code {
|
||||
--scrollbar-thumb-color: gray;
|
||||
--scrollbar-thumb-hover-color: gray;
|
||||
}
|
||||
|
||||
.ck-content pre code::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ck-content blockquote {
|
||||
background: var(--card-background-color);
|
||||
border: 1px solid var(--card-border-color) !important;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
border-radius: 10px;
|
||||
padding: 1em 2.5em;
|
||||
position: relative;
|
||||
font-style: unset !important;
|
||||
}
|
||||
|
||||
.ck-content blockquote p:last-of-type {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.ck-content blockquote:before,
|
||||
.ck-content blockquote:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 48px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.ck-content blockquote:before {
|
||||
content: "“";
|
||||
left: 0.2em;
|
||||
}
|
||||
|
||||
.ck-content blockquote:after {
|
||||
content: "”";
|
||||
right: 0.35em;
|
||||
}
|
||||
|
||||
.ck-content h2,
|
||||
.ck-content h3,
|
||||
.ck-content h4,
|
||||
.ck-content h5,
|
||||
.ck-content h6 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.ck-content hr {
|
||||
margin: 5px 0;
|
||||
height: 1px;
|
||||
background-color: var(--main-border-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (screen) {
|
||||
.ck-content p code {
|
||||
border: 1px solid var(--card-border-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
border-radius: 6px;
|
||||
background-color: var(--card-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
.note-detail-printable:not(.word-wrap) pre code {
|
||||
white-space: pre;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.code-sample-wrapper .hljs {
|
||||
transition: background-color linear 100ms;
|
||||
}
|
||||
|
||||
.ck-content .footnote-section {
|
||||
border: 0 !important;
|
||||
border-top: 1px solid var(--main-border-color) !important;
|
||||
}
|
||||
|
||||
/* Table caption */
|
||||
|
||||
.ck-content .table > figcaption {
|
||||
background: var(--accented-background-color);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
323
apps/client/stylesheets/theme-next/pages.css
Normal file
323
apps/client/stylesheets/theme-next/pages.css
Normal file
@@ -0,0 +1,323 @@
|
||||
/*
|
||||
* LOG IN PAGE
|
||||
*/
|
||||
|
||||
.login-page {
|
||||
display: flex; /* Note: the login page contents is hidden before this property is applied */
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-page > div {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 20vh;
|
||||
}
|
||||
|
||||
.login-page h1 {
|
||||
margin-bottom: .5em;
|
||||
font-weight: 300;
|
||||
color: var(--muted-text-color);
|
||||
}
|
||||
|
||||
.login-page .form-group {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.login-page .alert {
|
||||
margin: 0;
|
||||
border: unset;
|
||||
padding: 8px 0 0 0;
|
||||
font-size: .85em;
|
||||
color: var(--dropdown-item-icon-destructive-color) !important;
|
||||
}
|
||||
|
||||
.google-login-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
color: #757575;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
margin-bottom: 20px;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.google-login-btn:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.google-login-btn img {
|
||||
margin-right: 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/*
|
||||
* SEARCH PAGE
|
||||
*/
|
||||
|
||||
/* Button bar */
|
||||
.search-definition-widget .search-setting-table tbody:last-child div {
|
||||
justify-content: flex-end !important;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.search-result-widget-content .note-path .path-bracket {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.search-result-widget-content .note-path {
|
||||
opacity: 0.75;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* SQL CONSOLE
|
||||
*/
|
||||
|
||||
/* Table buttons */
|
||||
|
||||
.sql-table-schemas-widget .sql-table-schemas button {
|
||||
--color: var(--main-text-color);
|
||||
--background: var(--card-background-color);
|
||||
|
||||
display: inline-block;
|
||||
box-shadow: 2px 2px 2px var(--card-shadow-color);
|
||||
margin-top: 4px;
|
||||
vertical-align: baseline;
|
||||
border: unset;
|
||||
border-radius: 12px;
|
||||
padding: 2px 12px;
|
||||
background: var(--background) !important;
|
||||
color: var(--color) !important;
|
||||
line-height: unset;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.sql-table-schemas-widget .sql-table-schemas button:hover,
|
||||
.sql-table-schemas-widget .sql-table-schemas button:active,
|
||||
.sql-table-schemas-widget .sql-table-schemas button:focus-visible {
|
||||
--background: var(--card-background-press-color);
|
||||
--color: var(--main-text-color);
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
|
||||
.tooltip .table-schema {
|
||||
font-family: var(--monospace-font-family);
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
/* Data type */
|
||||
.tooltip .table-schema td:nth-child(2) {
|
||||
color: var(--muted-text-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* NOTE MAP
|
||||
*/
|
||||
|
||||
.note-detail-note-map .fixnodes-type-switcher .tn-tool-button.toggled {
|
||||
color: var(--tab-close-button-hover-background);
|
||||
}
|
||||
|
||||
/*
|
||||
* EMPTY NOTE PAGE
|
||||
*/
|
||||
|
||||
/* The container */
|
||||
div.note-detail-empty {
|
||||
max-width: 70%;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
/* The search results list */
|
||||
.note-detail-empty span.aa-dropdown-menu {
|
||||
margin-top: 1em;
|
||||
border: unset;
|
||||
}
|
||||
|
||||
/*
|
||||
* OPTIONS PAGES
|
||||
*/
|
||||
|
||||
:root {
|
||||
--options-card-min-width: 500px;
|
||||
--options-card-max-width: 900px;
|
||||
--options-card-padding: 17px;
|
||||
--options-title-font-size: 1rem;
|
||||
--options-title-offset: 13px;
|
||||
}
|
||||
/* Create a gap at the top of the option pages */
|
||||
.note-detail-content-widget-content.options>*:first-child {
|
||||
margin-top: var(--options-first-item-top-margin, 1em);
|
||||
}
|
||||
|
||||
/* Create a gap at the bottom of option pages */
|
||||
.note-detail-content-widget-content.options::after {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
/* Add a gap between consecutive buttons */
|
||||
.note-detail-content-widget-content.options button.btn + button.btn {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
.note-detail-content-widget-content.options:has(.shortcuts-options-section)::after {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.options-section:not(.tn-no-card) {
|
||||
margin: auto;
|
||||
min-width: var(--options-card-min-width);
|
||||
max-width: var(--options-card-max-width);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--card-border-color) !important;
|
||||
box-shadow: var(--card-box-shadow);
|
||||
background: var(--card-background-color);
|
||||
padding: var(--options-card-padding);
|
||||
margin-bottom: calc(var(--options-title-offset) + 26px) !important;
|
||||
}
|
||||
|
||||
.note-detail-content-widget-content.options {
|
||||
--default-padding: 15px;
|
||||
padding-top: calc(var(--default-padding) + var(--options-title-offset) + var(--options-title-font-size));
|
||||
padding-bottom: var(--default-padding);
|
||||
}
|
||||
|
||||
.options-section:not(.tn-no-card) h4 {
|
||||
font-size: var(--options-title-font-size);
|
||||
font-weight: bold;
|
||||
color: var(--launcher-pane-text-color);
|
||||
margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
|
||||
margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;
|
||||
margin-left: calc(-1 * var(--options-card-padding));
|
||||
}
|
||||
|
||||
.options-section:not(.tn-no-card) h5 {
|
||||
font-size: var(--options-title-font-size);
|
||||
font-weight: bold;
|
||||
margin-top: 1em !important;
|
||||
margin-bottom: unset !important;
|
||||
}
|
||||
|
||||
.options-section:not(.tn-no-card) h5:first-of-type {
|
||||
margin-top: unset !important;
|
||||
}
|
||||
|
||||
.options-section hr {
|
||||
--bs-border-width: 2px;
|
||||
|
||||
margin-left: calc(var(--options-card-padding) * -1);
|
||||
margin-right: calc(var(--options-card-padding) * -1);
|
||||
opacity: 1;
|
||||
color: var(--root-background);
|
||||
}
|
||||
|
||||
.options-section p:last-of-type:not(:first-of-type),
|
||||
.options-section h4 + p:last-child,
|
||||
.options-section .existing-anonymized-databases {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.options-section .options-mime-types {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.options-section .form-group {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.options-section .form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.options-section ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.options-section label:not(.tn-checkbox):not(.tn-radio) {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.options-section .alert {
|
||||
margin-bottom: 8px;
|
||||
background: var(--alert-bar-background) !important;
|
||||
border-radius: 8px;
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
nav.options-section-tabs {
|
||||
min-width: var(--options-card-min-width);
|
||||
max-width: var(--options-card-max-width);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
nav.options-section-tabs .nav-tabs {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
nav.options-section-tabs + .options-section {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
/* Appeareance */
|
||||
|
||||
.main-font-size-input-group,
|
||||
.tree-font-size-input-group,
|
||||
.detail-font-size-input-group,
|
||||
.monospace-font-size-input-group {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
/* Shortcuts */
|
||||
|
||||
.note-detail-content-widget-content:has(.shortcuts-options-section) {
|
||||
/* Allow the card to extend on the full width of the parent */
|
||||
--options-card-max-width: 100%;
|
||||
|
||||
/* Remove top padding for the options page */
|
||||
--options-title-offset: 0px;
|
||||
--options-title-font-size: 0px;
|
||||
|
||||
/* Remove the top margin of the first item */
|
||||
--options-first-item-top-margin: 0;
|
||||
}
|
||||
|
||||
.shortcuts-options-section h4 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Group heading */
|
||||
.shortcuts-options-section .separator {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 1em;
|
||||
background: transparent !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Simulates the underline for group headings */
|
||||
.shortcuts-options-section .separator::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* ETAPI */
|
||||
|
||||
.etapi-options-section div {
|
||||
height: auto !important;
|
||||
}
|
||||
156
apps/client/stylesheets/theme-next/ribbon.css
Normal file
156
apps/client/stylesheets/theme-next/ribbon.css
Normal file
@@ -0,0 +1,156 @@
|
||||
@container info-section (max-width: 800px) {
|
||||
table, tbody, tr, td, th {
|
||||
display: block;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
tbody {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
tr {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
tr:has(.file-buttons) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
td {
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Promoted attributes
|
||||
*/
|
||||
|
||||
div.promoted-attributes-container {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* File/Image Properties and Note Info
|
||||
*/
|
||||
|
||||
/* The property label */
|
||||
.note-info-widget-table th,
|
||||
.file-properties-widget .file-table th,
|
||||
.image-properties > div:first-child > span > strong {
|
||||
opacity: 0.65;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.file-properties-widget {
|
||||
container: info-section / inline-size;
|
||||
}
|
||||
|
||||
.file-properties-widget .file-table {
|
||||
margin: 12px;
|
||||
width: unset;
|
||||
}
|
||||
|
||||
.file-properties-widget td:has(.file-buttons) {
|
||||
padding: 8px 0 0 0;
|
||||
}
|
||||
|
||||
/* The button bar */
|
||||
.file-properties-widget .file-buttons,
|
||||
.image-properties > div:last-of-type {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
justify-content: flex-start !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.file-properties-widget .file-buttons button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* The properties row for images */
|
||||
.image-properties > div:first-child {
|
||||
justify-content: flex-start !important;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px 40px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Basic properties
|
||||
*/
|
||||
|
||||
/* Note type dropdown */
|
||||
|
||||
div.note-type-dropdown .check {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/* Editability dropdown */
|
||||
|
||||
div.editability-dropdown a.dropdown-item {
|
||||
padding: 4px 16px 4px 0;
|
||||
align-items: start !important;
|
||||
}
|
||||
|
||||
.editability-dropdown .dropdown-item .check {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.editability-dropdown .dropdown-item .description {
|
||||
opacity: 0.75;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Owned attributes
|
||||
*/
|
||||
|
||||
.attribute-list .add-new-attribute-button,
|
||||
.attribute-list .save-attributes-button {
|
||||
bottom: 0.3em;
|
||||
}
|
||||
|
||||
.attribute-list .save-attributes-button {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
/* Note path in attribute detail dialog */
|
||||
.attr-detail .note-path {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Similar notes
|
||||
*/
|
||||
|
||||
:root .similar-notes-widget a {
|
||||
color: var(--cmd-button-text-color);
|
||||
background: var(--cmd-button-background-color);
|
||||
}
|
||||
|
||||
:root .similar-notes-widget a:hover {
|
||||
color: var(--cmd-button-hover-text-color);
|
||||
background: var(--cmd-button-hover-background-color);
|
||||
}
|
||||
|
||||
/*
|
||||
* Note info
|
||||
*/
|
||||
|
||||
:root .note-info-widget-table button.calculate-button {
|
||||
min-width: 0;
|
||||
padding: 4px 10px !important;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* Narrow width layout */
|
||||
.note-info-widget {
|
||||
container: info-section / inline-size;
|
||||
}
|
||||
1669
apps/client/stylesheets/theme-next/shell.css
Normal file
1669
apps/client/stylesheets/theme-next/shell.css
Normal file
File diff suppressed because it is too large
Load Diff
11
apps/client/stylesheets/theme.css
Normal file
11
apps/client/stylesheets/theme.css
Normal file
@@ -0,0 +1,11 @@
|
||||
/* Import the light color scheme.
|
||||
* This is the base color scheme, always active and overridden by the dark
|
||||
* color scheme stylesheet when necessary. */
|
||||
@import url(./theme-light.css);
|
||||
|
||||
/* Import the dark color scheme when the system preference is set to dark mode */
|
||||
@import url(./theme-dark.css) (prefers-color-scheme: dark);
|
||||
|
||||
:root {
|
||||
--theme-style-auto: true;
|
||||
}
|
||||
270
apps/client/stylesheets/tree.css
Normal file
270
apps/client/stylesheets/tree.css
Normal file
@@ -0,0 +1,270 @@
|
||||
ul.fancytree-container {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.fancytree-container li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
span.fancytree-node.fancytree-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fancytree-title {
|
||||
flex-basis: 0; /* to allow shrinking text to make space for buttons */
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
margin-left: 7px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.fancytree-expander {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.fancytree-folder .fancytree-expander {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fancytree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 38px;
|
||||
padding: 4px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
}
|
||||
|
||||
.fancytree-node:not(.fancytree-loading) .fancytree-expander {
|
||||
background: none;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fancytree-node:not(.fancytree-loading) .fancytree-expander:before {
|
||||
font-family: "boxicons" !important;
|
||||
content: "\ea50"; /* lookup code for "chevron-right" in boxicons.css */
|
||||
speak: none;
|
||||
font-size: x-large;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.fancytree-loading span.fancytree-expander {
|
||||
background-image: none;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 4px 8px 2px 5px;
|
||||
}
|
||||
|
||||
.fancytree-loading span.fancytree-expander:after {
|
||||
content: " ";
|
||||
color: inherit !important;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
border-color: var(--main-text-color) transparent var(--main-text-color) transparent;
|
||||
animation: lds-dual-ring 1.2s linear infinite;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-top: 2px;
|
||||
margin-left: 1px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
@keyframes lds-dual-ring {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
ul.fancytree-container li {
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
/* this is done to preserve correct indentation. Better solution would be preferable */
|
||||
.fancytree-node:not(.fancytree-folder) .fancytree-expander:before {
|
||||
color: var(--main-background-color); /* setting to background color makes this invisible */
|
||||
}
|
||||
|
||||
.fancytree-node.fancytree-expanded .fancytree-expander:before {
|
||||
font-family: "boxicons" !important;
|
||||
content: "\ea4a"; /* lookup code for "chevron-down" in boxicons.css */
|
||||
}
|
||||
|
||||
/** some common text styling for cssClass label */
|
||||
span.fancytree-node.underline .fancytree-title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
span.fancytree-node.dotted .fancytree-title {
|
||||
text-decoration: dotted;
|
||||
}
|
||||
span.fancytree-node.bold .fancytree-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
span.fancytree-node.muted {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/** following will hide ancestors of hoisted (filtered) note */
|
||||
.fancytree-submatch:not(.fancytree-match) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/** resets indent of hoisted note */
|
||||
.fancytree-submatch:not(.fancytree-match) + ul {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
ul.fancytree-container {
|
||||
outline: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.fancytree-custom-icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
span.fancytree-node.protected > span.fancytree-custom-icon {
|
||||
filter: drop-shadow(2px 2px 2px var(--main-text-color));
|
||||
}
|
||||
|
||||
span.fancytree-node.multiple-parents.shared .fancytree-title::after {
|
||||
font-family: "boxicons" !important;
|
||||
font-size: smaller;
|
||||
content: " \eb3d \ec03";
|
||||
}
|
||||
|
||||
span.fancytree-node.multiple-parents .fancytree-title::after {
|
||||
font-family: "boxicons" !important;
|
||||
font-size: smaller;
|
||||
content: " \eb3d"; /* lookup code for "link-alt" in boxicons.css */
|
||||
}
|
||||
|
||||
span.fancytree-node.shared .fancytree-title::after {
|
||||
font-family: "boxicons" !important;
|
||||
font-size: smaller;
|
||||
content: " \ec03"; /* lookup code for "share-alt" in boxicons.css */
|
||||
}
|
||||
|
||||
span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
|
||||
.ui-fancytree > li > ul {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.ui-fancytree ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
span.fancytree-active {
|
||||
color: var(--active-item-text-color) !important;
|
||||
background-color: var(--active-item-background-color) !important;
|
||||
border-color: transparent; /* invisible border */
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
span.fancytree-active .fancytree-title {
|
||||
font-weight: bold;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
span.fancytree-selected {
|
||||
border-color: var(--main-border-color) !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
span.fancytree-selected .fancytree-title {
|
||||
text-decoration: underline;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
span.fancytree-selected .fancytree-custom-icon::before {
|
||||
content: "\eb43";
|
||||
border: 1px solid var(--main-border-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
span.fancytree-node:hover {
|
||||
border: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
.fancytree-title:hover,
|
||||
span.fancytree-node:hover .fancytree-title {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
span.fancytree-node.archived {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.fancytree-node:hover .bx.tree-item-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bx.tree-item-button {
|
||||
display: none;
|
||||
font-size: 120%;
|
||||
cursor: pointer;
|
||||
margin-left: 8px;
|
||||
padding: 1px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.unhoist-button.bx.tree-item-button {
|
||||
margin-left: 0; /* unhoist button is on the left and doesn't need more margin */
|
||||
display: block; /* keep always visible */
|
||||
}
|
||||
|
||||
.tree-item-button:hover {
|
||||
border: 1px dotted var(--main-text-color);
|
||||
}
|
||||
|
||||
.add-note-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span.fancytree-node:hover .add-note-button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fancytree-drop-accept {
|
||||
border: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
#fancytree-drop-marker.fancytree-drop-after,
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
width: 100px;
|
||||
/* marker is by default position: relative which doesn't make sense */
|
||||
position: absolute !important;
|
||||
/* heaving a height helps with positioning since the algorithm calculating "top" takes it into account */
|
||||
height: 19px;
|
||||
}
|
||||
|
||||
#fancytree-drop-marker.fancytree-drop-after {
|
||||
border-bottom: 1px solid var(--muted-text-color);
|
||||
}
|
||||
|
||||
#fancytree-drop-marker.fancytree-drop-before {
|
||||
border-top: 1px solid var(--muted-text-color);
|
||||
}
|
||||
Reference in New Issue
Block a user