Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-29 19:12:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(next)/restyle CKEditor: overhaul the appearance

Browse Source
This commit is contained in:
Adorian Doran 2025-04-17 23:09:25 +03:00
parent b3384a538c
commit c8a3ce4298
1 changed files with 59 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/public/stylesheets/theme-next/notes/text.css
View File

@ -1,20 +1,49 @@
/* /*
* TEXT NOTES * 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;
}
/* /*
* CKEditor's Dropdowns * Dropdowns
*/ */
/* Dropdown body */ /* Dropdown body */
:root .ck.ck-dropdown__panel, :root .ck.ck-dropdown__panel,
:root .ck.ck-balloon-rotator { :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)); box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
border: 1px solid var(--dropdown-border-color); border: 1px solid var(--modal-border-color) !important;
border-radius: var(--dropdown-border-radius); border-radius: var(--dropdown-border-radius) !important;
background: var(--menu-background-color); background: var(--menu-background-color) !important;
backdrop-filter: var(--dropdown-backdrop-filter); backdrop-filter: var(--dropdown-backdrop-filter);
padding: var(--menu-padding-size); padding: var(--menu-padding-size);
} }
:root ul.ck.ck-list, :root ul.ck.ck-list,
@ -27,7 +56,6 @@
:root ul.ck.ck-list button.ck-button { :root ul.ck.ck-list button.ck-button {
padding: 2px 16px; padding: 2px 16px;
background: transparent; background: transparent;
border: unset;
border-radius: 6px !important; border-radius: 6px !important;
box-shadow: unset; box-shadow: unset;
} }
@ -43,6 +71,29 @@
color: var(--hover-item-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 * Code Blocks
*/ */