Tune the tox style to match better directus themes

This commit is contained in:
e01
2020-10-23 19:51:39 +03:00
parent cd133a3264
commit 81626bcfc2
3 changed files with 161 additions and 90 deletions

View File

@@ -9,7 +9,17 @@
color: var(--foreground-normal);
}
.tox .tox-tbtn svg {
.tox .tox-listbox__select-chevron svg,
.tox .tox-collection__item-caret svg {
fill: var(--foreground-normal);
}
.tox .tox-swatches__picker-btn svg {
fill: var(--foreground-normal);
}
.tox .tox-tbtn svg,
.tox .tox-tbtn:hover svg {
fill: var(--foreground-normal);
}
@@ -97,6 +107,10 @@
left 0 top 0 var(--background-subdued);
}
.tox .tox-pop__dialog .tox-toolbar {
margin-bottom: -2px;
}
body.dark .tox .tox-toolbar,
body.dark .tox .tox-toolbar__primary,
body.dark .tox .tox-toolbar__overflow {
@@ -113,13 +127,34 @@ body.dark .tox .tox-toolbar__overflow {
}
}
.tox .tox-swatches__picker-btn,
.tox .tox-swatches__picker-btn:hover,
.tox .tox-swatches__picker-btn:active,
.tox .tox-split-button:hover {
-webkit-box-shadow: unset;
box-shadow: unset;
}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover,
.tox .tox-tbtn:hover {
.tox .tox-split-button:hover,
.tox .tox-tbtn:hover,
.tox .tox-split-button:focus {
color: var(--foreground-normal);
background: var(--border-normal);
}
.tox .tox-swatches__picker-btn:hover {
background: transparent;
border: none;
}
.tox .tox-swatch:hover,
.tox .tox-swatch:focus {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.mce-content-body {
margin: 20px;
}
@@ -206,20 +241,16 @@ body.dark .tox .tox-toolbar__overflow {
color: var(--foreground-normal);
}
.tox .tox-collection--list .tox-collection__item--enabled,
.tox .tox-collection--list .tox-collection__item--active {
color: var(--foreground-normal) !important;
background-color: var(--background-page) !important;
}
.tox .tox-collection--list .tox-collection__item--enabled {
color: var(--foreground-normal);
background-color: var(--background-page);
background-color: var(--background-normal-alt) !important;
}
.tox .tox-textfield:focus,
.tox .tox-selectfield select:focus,
.tox .tox-textarea:focus {
border-color: var(--foreground-subdued);
border-color: var(--primary);
}
.tox .tox-button {
@@ -314,8 +345,39 @@ body.dark .tox .tox-toolbar__overflow {
background-color: var(--background-normal-alt);
}
.tox .tox-pop__dialog,
.tox:not([dir='rtl']) .tox-toolbar__group:not(:last-of-type),
.tox .tox-collection--list .tox-collection__group {
border-color: var(--border-normal);
}
.tox .tox-insert-table-picker__label {
color: var(--foreground-normal);
}
.tox .tox-insert-table-picker > div {
border-color: var(--border-normal);
}
.tox .tox-insert-table-picker .tox-insert-table-picker__selected {
border-color: var(--primary);
}
.tox .tox-pop.tox-pop--top::after {
border-bottom-color: var(--background-subdued);
}
.tox .tox-pop.tox-pop--top::before {
border-bottom-color: var(--border-normal);
}
.tox .tox-dialog-wrap__backdrop .tox-rgba-preview {
visibility: hidden;
}
@media screen and (max-width: 767px) {
.tox .tox-dialog__body-nav-item {
text-align: center;
}
}
}