Ghost/ghost/admin/app/styles/addons/gh-koenig/gh-koenig.css
Aileen Nowak b8a1036a43 No more icon font: {{inline-svg}} - Part 2 (#642)
closes TryGhost/Ghost#8107
- replaces all icons in Ghost-Admin with SVGs by using our new helper {{inline-svg}}.
- removes all ghosticon fonts.

This is the second and final batch of the refactor.
2017-04-14 17:22:14 +01:00

251 lines
5.2 KiB
CSS

@import "koenig-toolbar.css";
@import "koenig-menu.css";
@import "../ghost-editor/cardmenu.css";
.editor-holder {
height: 100%;
}
.gh-koenig {
height: 100%;
-webkit-overflow-scrolling: touch;
}
.__mobiledoc-editor {
width: 100%;
height: 100%;
min-height: 300px;
padding-bottom: 10vw;
outline: none;
font-family: var(--font-family);
font-size: 1.7rem;
resize: none;
font-weight: 200;
letter-spacing: 0.1px;
-webkit-user-select: text;
user-select: text;
line-height: normal;
}
/*.__mobiledoc-editor *,
.__mobiledoc-editor *:before,
.__mobiledoc-editor *:after {
box-sizing:unset;
}*/
.kg-card {
position: relative;
display: inline-block; /* even though we hide the cursors there is still a
zero width divider character on either side of this card,
we need them to sit inline around this block otherwise we have
a line at the top and bottom of the card. */
width:100%;
outline:none;
user-select: none;
cursor: pointer;
z-index: 110; /* the title has a z-index of 100, this makes it sit above it. */
}
.kg-card * {
user-select: none;
cursor: pointer;
}
.kg-card .is-editing * {
user-select: auto;
cursor: auto;
}
.kg-card:hover,
.kg-card.selected {
box-shadow: var(--blue) 0 0 0 1px;
}
.kg-card.selected-hard {
box-shadow: var(--blue) 0 0 0 3px;
}
.kg-card .kg-card-toolbar {
position: absolute;
left: 0px;
top: 0px;
height: 10px;
width:100%;
overflow: visible;
display: none;
}
.button-group {
color: color(var(--lightgrey) l(-10%));
background: linear-gradient(
color(var(--darkgrey) l(-3%)),
color(var(--darkgrey) l(-8%))
);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-radius:5px;
margin-top:-56px;
height:46px;
display:flex;
box-shadow: 0 0 0 1px color(var(--darkgrey) l(-10%)), 0 8px 16px rgba(26,39,49,0.16), rgba(255,255,255,0.09) 0 1px 0 0 inset;
}
.button-group:after {
display: block;
content: "";
position: absolute;
bottom:11px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-left: transparent 10px solid;
border-right: transparent 10px solid;
border-top: color(var(--darkgrey) l(-10%)) 8px solid;
}
.kg-card {
min-height: 100px;
}
.kg-card.selected .kg-card-toolbar {
display: flex;
align-items: stretch;
justify-content: space-around;
flex-flow: row wrap;
}
.kg-card .kg-card-toolbar label {
flex-grow: 1;
font-size: 1.3rem;
line-height: 46px;
text-align:center;
justify-content: center;
vertical-align: middle;
font-weight: bold;
padding:0 18px;
}
.kg-card .kg-card-toolbar button {
/*display: flex;*/
justify-content: center;
align-items: center;
height: 46px;
min-width: 32px;
font-size: 1.6rem;
line-height: 30px;
padding:0 5px 0 5px;
transition: text-shadow 0.3s ease;
}
.kg-card .kg-card-toolbar button.kg-card-button-text {
font-size: 1.3rem;
line-height: 46px;
width:70px;
text-align:center;
justify-content: center;
align-items: center;
vertical-align: middle;
padding:0;
}
.kg-card .kg-card-toolbar button.kg-card-button-save {
font-size: 1.3rem;
line-height: 30px;
height:30px;
width:60px;
text-align:center;
justify-content: center;
align-items: center;
vertical-align: middle;
margin:8px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
fill: #fff;
background: linear-gradient( rgb(61, 161, 214), rgb(34, 136, 191) );
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
border-radius:5px;
}
.kg-card .kg-card-toolbar button.kg-card-delete {
text-transform: none !important;
/*font-family: "ghosticons" !important;*/
font-size: 1rem;
line-height: 1;
font-weight: normal !important;
font-style: normal !important;
font-variant: normal !important;
}
.kg-card textarea {
min-height: 333px;
max-width: 900px;
outline: none;
border: none;
resize: none;
}
.kg-card-toolbar button:hover {
background-color: #718087;
color: #fff;
}
textarea.ed_code {
width: 100%;
height: 100%;
border: none;
}
.dragOver {
background-color: var(--lightgrey);
}
/**
* Tooltip
*/
@keyframes tooltip-fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
.__mobiledoc-tooltip {
white-space: nowrap;
position: absolute;
background-color: #5ba4e5;
border-radius: 3px;
padding: 5px 10px 5px 10px;
color: #FFF;
-webkit-animation: tooltip-fadein 0.333s;
animation: tooltip-fadein 0.333s;
}
.__mobiledoc-tooltip a {
color: #FFF;
}
.__mobiledoc-tooltip:before {
content: '';
position: absolute;
left: 50%;
top: -9px;
margin-left: -10px;
border-bottom: 10px solid #5ba4e5;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.kg-card .gh-image-uploader .upload-form {
width: 100%;
height: 350px;
background: color(var(--lightgrey) l(+4%));
box-shadow: var(--lightgrey) 0 0 0 1px inset, #fff 0 0 0 15px inset;
border-radius: 3px;
}
/* markdown card */
.kg-card-markdown textarea {
resize: vertical;
}