css/sass/KBOsEditStyle.scss
@import "partials/_base";
.os-edit-container {
position: relative;
}
.kb-module-controls {
span.os-action {
font-size: 11px !important;
display: none;
}
.dashicons {
height: 14px;
width: 14px;
}
&.master-module {
border-left: 3px solid $orange;
}
&.dynamic-module {
border-left: 3px solid $lightblue;
}
a {
line-height: 18px !important;
display: inline-block;
box-sizing: border-box;
margin: 0px 0px;
font-size: 22px !important;
padding: 2px;
background: #333;
color: #fff;
border: none !important;
text-decoration: none !important;
transition: all .3s ease-in-out;
cursor: pointer;
opacity: 1;
&.kb-module-dirty-state {
background-color: red;
padding-left: 6px;
display: none;
}
span {
font-size: 12px !important;
line-height: 12px;
display: inline-block;
}
&:hover {
text-decoration: none;
color: #fff;
opacity: 1;
}
}
}
.module.hovered {
outline: 1px solid #ccc;
}
body.onsite-editing {
.module {
min-height: 30px;
}
.os-edit-container > .kb-module-controls {
display: block;
opacity: .4;
}
.os-edit-container {
position: relative;
}
.controls-wrap {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.master a.os-edit-block span {
background-color: $orange;
}
.hide {
display: none;
}
#onsite-modal {
padding: 0;
z-index: 9999;
min-height: 150px;
overflow-x:hidden;
}
}
#onsite-form {
margin: 0 !important;
}
.kb-modal__draft-notice {
padding: 4px !important;
color: #333 !important;
font-size: 11px !important;
background-color: orange;
}
#wp-toolbar {
.os-edit {
background: $lightblue;
&.os-edit-off {
background: none !important;
a {
color: #999;
}
}
}
}
#osframe {
overflow: hidden;
border: 0;
}
.os-controls-container {
.controls-title {
font-weight: 100;
background: #fcfcfc;
padding: 10px;
margin: 0;
font-size: 15px;
// border: 1px solid #f9f9f9;
// border-top: 1px solid #333;
// border-left: 1px solid #aaa;
border-bottom: none;
cursor: move;
}
font-family: 'Open Sans', sans-serif !important;
position: absolute;
width: 400px;
padding: 0px;
background: #f9f9f9;
top: 150px;
left: 20px;
z-index: 110;
span {
padding: 0 10px;
font-size: 10px;
font-style: italic;
}
.close-controls {
position: absolute;
right: 10px;
top: 10px;
font-size: 10px;
cursor: pointer;
}
.control-wrap {
background: #fff;
padding: 10px;
// border: 1px solid #f9f9f9;
// border-bottom: 1px solid #aaa;
// border-right: 1px solid #aaa;
label {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 100;
}
}
.kb-field--tabs {
li a {
font-size: 12px;
font-family: 'Open Sans', sans-serif;
}
ul.ui-tabs-nav {
border: 0;
margin-left: 0;
border-right: 1px solid #aaa;
border-left: 1px solid #f9f9f9;
position: relative;
top: -2px;
background: #fff;
border-radius: 0;
}
}
table {
td {
font-size: 12px;
padding-right: 8px;
}
}
}
.edit-active {
outline: 1px solid lightblue;
}
// experiments
#onsite-modal {
h2,a,p,h3,h4{
font-family: 'Open Sans', sans-serif !important;
}
.kb-module{
padding: 0;
}
}
#onsite-modal * {
box-sizing: border-box;
}
//#onsite-modal .kb-field *, #onsite-modal .kb-template-selector--wrapper * {
// @include box-sizing(border-box);
//}
.kb-template-selector--wrapper select{
background: #fff !important;
color: $grey-900;
}
#onsite-modal a:hover {
text-decoration: none;
}
#onsite-modal {
font-family: 'Open Sans', sans-serif;
width: 800px;
background: #fff;
position: fixed;
top: 32px;
right: 20px;
// bottom: 30px;
// @include box-shadow(1px 1px 8px #333);
border: 1px solid $grey-500;
overflow: auto;
opacity: 1;
z-index: 2101;
h1, h2, h3, h4, h5, h6 {
font-family: Open-Sans, sans-serif !important;
}
.kb-module--status-bar-list{
margin: 0 !important;
}
.controls-title {
font-size: 12px;
margin: 0;
padding: 0px 10px 0px 10px;
height: 31px;
line-height: 30px;
cursor: move;
background: $grey-300; //#f2f2f2;
color: $grey-900;
font-weight: 100;
box-sizing: border-box;
text-align: left;
border-bottom: 1px solid #aaa;
}
.os-controls-meta {
background-color: #333;
}
.close-controls {
position: absolute;
top: 5px;
right: 3px;
color: $grey-900;
font-size: 18px;
cursor: pointer;
font-weight: 100;
transition: all .3s ease-in-out;
&:hover {
color: #283c43;
}
}
.kb-save-form {
position: relative;
height: 30px;
font-size: 11px !important;
padding: 0 12px;
line-height: 30px;
float: left;
display: block;
min-width: 50px;
text-decoration: none;
border-right: 1px solid #ccc;
.dashicons {
font-size: 11px;
text-decoration: none;
position: relative;
top: 10px;
left: 0;
}
}
.kb-button-primary {
color: $grey-900;
// background-color: $lightblue;
transition: all .3s ease-in-out;
cursor: pointer;
&:hover {
background-color: #283c43;
text-decoration: none;
color: #fff;
}
}
.kb-button-secondary {
color: $grey-900;
// background-color: $orange;
transition: all .3s ease-in-out;
cursor: pointer;
&:hover {
background-color: #283c43;
text-decoration: none;
color: #fff;
}
}
.kb-controls--buttons-wrap {
position: absolute;
top: 0;
right: 25px;
}
.kb-preview-form, .kb-modal-history-back {
height: 30px;
font-size: 11px !important;
padding: 0 12px;
line-height: 30px;
float: left;
display: block;
text-decoration: none;
border-right: 1px solid #ccc;
}
.kb-field--tabs ul.ui-tabs-nav {
padding-top: 0;
background-color: #fff;
border-radius: 0;
overflow: hidden;
list-style: none;
}
.kb-field {
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
label {
font-size: 12px !important;
color: #999 !important;
font-family: 'Open Sans', sans-serif !important;
}
input[type=button], .button {
text-transform: none !important;
}
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus,
select:focus {
border-color: #999 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 12px !important;
}
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
background-color: #fff;
color: #333;
border:1px solid #efefef !important;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
margin-bottom: 0;
padding-left: 8px !important;
}
select[disabled] {
color: #7f7f7f;
}
select:focus {
border-color: #aaa;
}
}
&:hover {
opacity: 1;
}
}
#onsite-modal.isDirty {
.kb-dirty-notice {
position: absolute;
top: -5px;
right: 5px;
display: block;
}
}
#onsite-modal {
.kb-dirty-notice {
display: none;
}
}
.kb-modal--loading {
min-height: 150px;
line-height: 150px;
text-align: center;
font-size: 30px;
color: #f2f2f2;
}
@import "partials/_frontend/wplinkdialog";
.editable:hover {
outline: 1px solid #ccc;
outline: 1px solid currentcolor;
background-color: rgba(233, 228, 39, 0.10);
}
.editable-image:hover {
outline: 1px solid #ccc;
outline: 1px solid currentcolor;
}
.editable-gallery-image:hover {
outline: 1px solid #ccc;
outline: 1px solid currentcolor;
background-color: rgba(233, 228, 39, 0.20);
}
.editable-link:hover {
outline: 1px dashed #ccc;
outline: 1px dashed currentcolor;
}
//.inline-edit-active .controls-wrap {
// display: none;
//}
#onsite-modal .wp-picker-container * {
box-sizing: content-box;
}
//body.kontentblocks-ready .mce-floatpanel.mce-tinymce-inline {
// .mce-toolbar-grp.mce-container, .mce-container-body.mce-stack-layout {
// width: auto !important;
// }
//
// .mce-stack-layout-item, .mce-container-body {
// display: inline-block !important;
// }
//
// .mce-tooltip {
// font-family: 'Open-Sans', sans-serif !important;
// }
//
// .mce-widget.mce-btn {
// button:hover {
// background-color: #ffffff !important;
// }
// }
//}
//
//body.kontentblocks-ready .mce-tooltip{
// position: fixed !important;
//}
//
body.kontentblocks-ready .mce-container.mce-panel.mce-floatpanel.mce-menu.mce-menu-align{
position: fixed !important;
}
body.kontentblocks-ready{
position: relative;
.kb-status-public,.kb-status-draft{
cursor: pointer;
}
.kb-status-public.kb-button-small{
background-color: $green;
}
.kb-status-draft.kb-button-small{
background-color: $red;
}
}
.admin-bar.kontentblocks-ready{
.mce-tinymce-inline{
margin-top: -45px;
}
}