316 lines
6.5 KiB
CSS
316 lines
6.5 KiB
CSS
@import "koenig-toolbar.css";
|
|
@import "koenig-menu.css";
|
|
@import "koenig-cardmenu.css";
|
|
|
|
.gh-koenig-container {
|
|
height: 100%;
|
|
}
|
|
.gh-koenig {
|
|
height: 100%;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Title
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.kg-title-input {
|
|
flex-grow: 1;
|
|
margin-bottom: 2vw;
|
|
padding: 0;
|
|
margin: 0;
|
|
outline: none;
|
|
position: relative;
|
|
width: 100%;
|
|
letter-spacing: 0.8px;
|
|
font-weight: bold;
|
|
font-size: 3.2rem;
|
|
line-height: 1.3em;
|
|
min-height: 1.3em;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Place holder content that displays in the title if it is empty */
|
|
.kg-title-input.no-content:before {
|
|
content: attr(data-placeholder);
|
|
color: color(var(--midgrey) l(+35%));
|
|
cursor: text;
|
|
position: relative;
|
|
top: 0;
|
|
font-size: 3.2rem;
|
|
font-weight: bold;
|
|
line-height: 1.3em;
|
|
min-width: 30rem; /* hack it's defaulting just to enough width for the 'Your' in 'Your Post Title' */
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
.kg-title-input input {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--darkgrey);
|
|
font-size: 3.2rem;
|
|
font-weight: bold;
|
|
letter-spacing: 0.8px;
|
|
}
|
|
|
|
.kg-title-input input::-webkit-input-placeholder {
|
|
color: color(var(--midgrey) l(+25%));
|
|
font-weight: 400;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
|
|
.kg-title-input input:-ms-input-placeholder {
|
|
color: color(var(--midgrey) l(+25%));
|
|
font-weight: 400;
|
|
letter-spacing: 1.2px;
|
|
}
|
|
|
|
.kg-title-input input:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
/* Editor
|
|
/* ---------------------------------------------------------- */
|
|
|
|
.__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 {
|
|
line-height: 1;
|
|
}
|
|
|
|
.kg-card .kg-card-toolbar button.kg-card-delete svg {
|
|
height: 1.4rem;
|
|
width: auto;
|
|
fill: color(var(--lightgrey) l(-10%));
|
|
}
|
|
|
|
.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;
|
|
}
|