Ghost/ghost/admin/app/styles/spirit/_koenig-dark.css
Peter Zimon 3d4e1a2bf2 Koenig action bar color fixes
- changed highlighted icons to green
- updated action bar background in dark mode for better contrast
- udpated link input border to green
2021-03-09 12:45:18 +01:00

119 lines
2.3 KiB
CSS

/* Koenig overrides for dark theme
/* -------------------------------------------------------------------- */
/* Action bar */
.kg-card-left-border {
border-left-color: var(--lightgrey-d1);
}
.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);
}