mirror of
https://github.com/TriliumNext/Notes.git
synced 2025-07-29 19:12:27 +08:00
style(next)/restyle CKEditor: overhaul the appearance
This commit is contained in:
parent
b3384a538c
commit
c8a3ce4298
@ -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 */
|
||||
: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));
|
||||
border: 1px solid var(--dropdown-border-color);
|
||||
border-radius: var(--dropdown-border-radius);
|
||||
background: var(--menu-background-color);
|
||||
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);
|
||||
padding: var(--menu-padding-size);
|
||||
}
|
||||
|
||||
:root ul.ck.ck-list,
|
||||
@ -27,7 +56,6 @@
|
||||
:root ul.ck.ck-list button.ck-button {
|
||||
padding: 2px 16px;
|
||||
background: transparent;
|
||||
border: unset;
|
||||
border-radius: 6px !important;
|
||||
box-shadow: unset;
|
||||
}
|
||||
@ -43,6 +71,29 @@
|
||||
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
|
||||
*/
|
||||
|
Loading…
x
Reference in New Issue
Block a user