8d136068f3
no issue - Koenig is making use of other Admin-provided components which meant that editor-specific styles for those components were increasingly needing to make use of `!important` to override those component styles (specific example is using power-select based components) due to the order that CSS was loaded - Koenig styles don't really fit with the other generic utility classes inside spirit so it makes sense to elevate them to the same level as other component styles within Admin's CSS
115 lines
2.2 KiB
CSS
115 lines
2.2 KiB
CSS
/* Koenig overrides for dark theme
|
|
/* -------------------------------------------------------------------- */
|
|
|
|
|
|
/* Action bar */
|
|
|
|
.kg-action-bar {
|
|
background: var(--whitegrey-l2);
|
|
border: 1px solid var(--whitegrey-l2);
|
|
}
|
|
|
|
.kg-action-bar:after {
|
|
border-top-color: var(--whitegrey-l2);
|
|
}
|
|
|
|
.kg-action-bar:before {
|
|
position: absolute;
|
|
top: 36px;
|
|
left: calc(50% - 10px);
|
|
width: 0;
|
|
border-top: 10px solid var(--whitegrey-l2);
|
|
border-right: 10px solid transparent;
|
|
border-left: 10px solid transparent;
|
|
content: "";
|
|
font-size: 0;
|
|
line-height: 0;
|
|
}
|
|
|
|
.kg-action-bar-divider {
|
|
background: var(--lightgrey);
|
|
}
|
|
|
|
.kg-action-bar .fill-white g,
|
|
.kg-action-bar .fill-white path {
|
|
fill: var(--darkgrey);
|
|
}
|
|
|
|
|
|
/* Card menu */
|
|
.koenig-cardmenu {
|
|
background: var(--main-color-content-greybg);
|
|
box-shadow: 0 0 0 1px rgba(99,114,130,.16), 0 8px 16px rgba(27,39,51,.08);
|
|
}
|
|
|
|
.kg-cardmenu-card-hover div {
|
|
color: var(--middarkgrey-l1);
|
|
}
|
|
|
|
.kg-cardmenu-card-selected,
|
|
.kg-cardmenu-card-hover:hover {
|
|
background: var(--whitegrey-l1);
|
|
}
|
|
|
|
.kg-card-type-codepen g,
|
|
.kg-card-type-codepen svg,
|
|
.kg-card-type-unsplash g,
|
|
.kg-card-type-unsplash svg {
|
|
fill: var(--darkgrey);
|
|
}
|
|
|
|
.kg-cardmenu-card-hover svg [data-selector="bg"] {
|
|
fill: var(--lightgrey);
|
|
}
|
|
|
|
.kg-cardmenu-card-hover svg [data-selector="fold"] {
|
|
fill: var(--midlightgrey);
|
|
}
|
|
|
|
.kg-cardmenu-card-hover svg [data-selector="line"] {
|
|
fill: var(--darkgrey);
|
|
}
|
|
|
|
.kg-cardmenu-card-hover:hover svg [data-selector="bg"] {
|
|
fill: var(--lightgrey-l1);
|
|
}
|
|
|
|
|
|
/* Card styles */
|
|
|
|
.koenig-editor__editor pre {
|
|
border: none;
|
|
}
|
|
|
|
.koenig-editor .gh-markdown-editor .editor-toolbar {
|
|
background: color-mod(var(--whitegrey) l(-2%) s(+2%));
|
|
border-top-color: var(--whitegrey-d2);
|
|
}
|
|
|
|
.kg-card-selected,
|
|
.kg-card-selected:hover {
|
|
background-color: transparent !important;
|
|
border-color: transparent !important;
|
|
}
|
|
|
|
.koenig-card-html--editor .CodeMirror {
|
|
background: var(--white);
|
|
}
|
|
|
|
.kg-input-bar:after {
|
|
border-top-color: var(--lightgrey);
|
|
}
|
|
|
|
.kg-link-toolbar {
|
|
background: var(--lightgrey);
|
|
}
|
|
|
|
.kg-link-toolbar a {
|
|
color: var(--middarkgrey);
|
|
}
|
|
|
|
.kg-link-toolbar svg g,
|
|
.kg-link-toolbar svg path {
|
|
fill: var(--middarkgrey);
|
|
}
|