@import "mixins";
#siteorigin-custom-css {
margin: 0 0 0 -20px;
h2 {
background: #f8f8f8;
padding: 20px;
border-bottom: 1px solid #d0d0d0;
margin-bottom: 20px;
.icon {
width: 40px;
height: auto;
margin: -8px 10px -8px 0;
}
box-shadow: 0 1px 1px rgba(0,0,0,0.035);
}
.updated {
margin: 0 20px 20px 20px ;
}
#poststuff {
padding: 0 20px;
.postbox {
border: 1px solid #D0D0D0;
h3.hndle {
cursor: default;
border-bottom: 1px solid #D0D0D0;
background: #efefef;
position: relative;
.hide {
position: absolute;
top: 50%;
line-height: 1em;
margin-top: -0.5em;
right: 12px;
}
}
}
#so-custom-css-getting-started {
.inside {
padding: 0 6px 6px 6px;
img {
display: block;
width: 100%;
height: auto;
}
}
}
}
}
#so-custom-css-form {
margin-right: 340px;
}
#so-custom-css-info{
width: 315px;
float: right;
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
#so-custom-css-revisions {
ol {
list-style: none;
margin: 0;
li{
margin: 0;
line-height: 2.2em;
}
}
}
#so-custom-css-form {
.custom-css-preview {
iframe {
display: none;
}
}
.custom-css-toolbar {
border:1px solid #D0D0D0;
border-bottom: none;
background: #efefef;
padding: 8px 10px;
overflow: auto;
.toolbar-function-buttons{
float: left;
.toolbar-functions-dropdown {
display: none;
}
ul.toolbar-buttons {
margin: 0;
li {
display: inline-block;
margin: 0;
padding: 0;
}
}
}
.toolbar-action-buttons {
float: right;
a {
&.active {
border-color: #b4c4cf;
background-color: #e9f9ff;
color: #596872;
}
}
.editor-expand {
float: right;
text-decoration: none;
color: #666;
.fa-compress {
display: none;
}
}
}
.fa {
font-size: 14px;
}
}
.custom-css-container {
border:1px solid #D0D0D0;
background: #f7f7f7;
cursor: text;
overflow: hidden;
.CodeMirror {
height: auto;
}
.CodeMirror-scroll {
min-height: 300px;
}
.CodeMirror-lines {
padding: 8px 0 8px 0;
}
textarea {
border: 0;
padding: 8px 0 8px 4px;
width: 100%;
min-height: 300px;
display: block;
font-family: monospace;
font-size: 13px;
line-height: 1.4em;
border-left: 1px solid #ddd;
margin-left: 16px;
}
}
.decoration {
display: none;
}
&.expanded {
@expanded_form_width: 340px;
z-index: 100000;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: @expanded_form_width;
.custom-css-toolbar {
.editor-expand {
.fa-expand {
display: none;
}
.fa-compress {
display: inline-block;
}
}
}
.decoration {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: @expanded_form_width - 1px;
width: 2px;
background: rgba(0,0,0,0.1);
}
.description {
display: none;
}
.submit {
display: none;
}
.custom-css-preview {
position: fixed;
display: block;
top: 0;
right: 0;
bottom: 0;
left: @expanded_form_width;
background: #ffffff;
iframe {
display: block;
width: 100%;
height: 100%;
overflow-x: hidden;
}
}
}
}
#so-custom-css-properties {
display: none;
position: fixed;
top: 0;
left: -338px;
bottom: 0;
width: 338px;
background: #ffffff;
border:1px solid #D0D0D0;
overflow-y: auto;
z-index: 100000;
.toolbar {
display: block;
padding: 7px 10px;
border-bottom: 1px solid #aaa;
background: #F6F6F6;
text-align: left;
select {
line-height: 1;
font-size: 13px;
max-width: 265px;
.transition(0.5s);
&.highlighted {
background: #daeaf7;
}
}
.close {
float: right;
margin: 2px 4px 0 0;
}
}
.section-tabs {
list-style: none;
height: auto;
margin: 0;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
li {
box-sizing: border-box;
float: left;
width: 33.333%;
padding: 10px 7px;
border: 1px solid #aaa;
background: #F6F6F6;
font-weight: bold;
border-top: 0;
border-left: 0;
font-size: 13px;
line-height: 1em;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
color: #666;
&:hover {
background: #fff;
}
.fa {
float: left;
display: block;
margin: -1px 6px -1px 0;
font-size: 15px;
color: #666;
}
&:last-child {
border-right: 0;
}
&.active {
color: #444;
background: #e8e8e8;
.fa {
color: #333;
}
}
}
}
.sections {
.section {
display: none;
padding: 10px;
}
.fields-table {
width: 100%;
padding-top: 5px;
th, td {
position: relative;
.clearfix();
}
th[scope="row"] {
font-weight: bold;
font-size: 12px;
padding-right: 10px;
text-align: left;
width: 36%;
vertical-align: top;
}
td {
padding: 0 0 12px 0 ;
}
input, select {
display: block;
margin: 0 25px 0 0;
border: 1px solid #c0c0c0;
width: 175px;
box-sizing: border-box;
border-radius: 0;
}
.select {
display: block;
position: absolute;
top: 0px;
right: 1px;
padding: 5px;
cursor: pointer;
font-size: 15px;
}
.select-tabs {
margin: 0;
height: 40px;
.select-tab {
cursor: pointer;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
border: 1px solid #c0c0c0;
padding: 4px 2px;
border-right-width: 0;
background: #f7f7f7;
.fa {
line-height: 14px;
font-size: 14px;
color: #777;
}
&:last-child {
border-right-width: 1px;
}
&:hover, &.active {
background: #e9e9e9;
.fa {
color: #333;
}
}
}
}
.side-tabs {
height: 26px;
.side-tab {
width: 20%;
text-align: center;
padding: 5px;
line-height: 0;
div {
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid #aaa;
}
@border_color: #12609b;
.spacing-all {
border-color: @border_color;
}
.spacing-top {
border-top-color: @border_color;
}
.spacing-left {
border-left-color: @border_color;
}
.spacing-bottom {
border-bottom-color: @border_color;
}
.spacing-right {
border-right-color: @border_color;
}
}
}
.sides {
.side > div {
margin-bottom: 5px;
&:last-child {
margin-bottom: 0;
}
}
}
}
}
}
.css-editor-snippet-browser {
display: none;
.snippet-browser-overlay {
position: fixed;
z-index: 100000;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.8);
}
.snippet-browser-dialog {
@dialog_side_space: 40px;
> div {
position: fixed;
z-index: 100001;
background: #fff;
box-sizing: border-box;
}
.toolbar {
top: @dialog_side_space;
left: @dialog_side_space;
right: @dialog_side_space;
height: 50px;
background: #FCFCFC;
border-bottom: 1px solid #dddddd;
overflow: hidden;
h1 {
padding: 0 16px;
font-size: 22px;
line-height: 50px;
margin: 0;
color: #444;
}
.close {
cursor: pointer;
color: #777;
background-color: transparent;
height: 50px;
width: 50px;
padding: 15px 0 0 0;
position: absolute;
text-align: center;
border: 0;
border-left: 1px solid #ddd;
top: 0;
right: 0;
text-decoration: none;
box-sizing: border-box;
&:hover {
background: #dddddd;
}
.icon {
&:before {
content: '\f158';
font: normal 20px/1 'dashicons';
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #666;
}
}
}
}
.sidebar {
top: @dialog_side_space + 50px;
left: @dialog_side_space;
bottom: @dialog_side_space + 50px;
width: 300px;
background: #f3f3f3;
border-right: 1px solid #dddddd;
padding: 16px;
overflow: auto;
.snippet-search {
width: 100%;
margin-bottom: 20px;
padding: 8px;
}
.snippets {
margin: 0;
.snippet {
cursor: pointer;
font-size: 1.1em;
line-height: 1.35em;
margin-bottom: 20px;
&.active {
font-weight: bold;
}
}
}
}
.main {
top: @dialog_side_space + 50px;
left: @dialog_side_space + 300px;
right: @dialog_side_space;
bottom: @dialog_side_space + 50px;
background: #fff;
overflow: auto;
.snippet-view {
padding: 20px;
.snippet-title {
margin: 0 0 0.75em 0;
padding: 0;
}
.snippet-description {
font-size: 1.1em;
color: #666;
margin-bottom: 2em;
}
.snippet-code {
padding: 20px;
border: 1px solid #d0d0d0;
background: #f8f8f8;
}
}
}
.buttons {
bottom: @dialog_side_space;
left: @dialog_side_space;
right: @dialog_side_space;
height: 50px;
background: #FCFCFC;
border-top: 1px solid #dddddd;
text-align: right;
padding: 10px 20px;
overflow: hidden;
}
}
}
.socss-field-measurement {
position: relative;
input.socss-field-input {
min-height: 1.5em;
padding-right: 50px;
width: 120px !important;
box-sizing: border-box;
}
.dashicons-arrow-down {
position: absolute;
top: 4px;
left: 97px;
cursor: pointer;
}
.dropdown {
display: none;
background: #F5F5F5;
border: 1px solid #c0c0c0;
position: absolute;
top: 27px;
left: 120px - 50px + 1px;
width: 50px;
z-index: 2;
margin: 0;
box-sizing: border-box;
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
li {
padding: 5px 0;
text-align: center;
line-height: 1.1em;
font-size: 11px;
margin: 0;
&:hover, &.active {
background: #e8e8e8;
cursor: pointer;
}
}
}
.units {
position: absolute;
top: 5px;
left: 12px;
color: #bbb;
pointer-events: none;
}
}
.socss-diw {
position: absolute;
top: 0px;
left: 124px;
.inc-button,
.dec-button{
cursor: pointer;
box-sizing: border-box;
float: left;
padding: 8px;
user-select: none;
text-align: center;
margin: 0;
width: 27px;
height: 27px;
font-size: 10px;
}
.inc-button {
border-left: 0;
}
}
.socss-button {
cursor: pointer;
line-height: 1em;
display: inline-block;
border: 1px solid #c0c0c0;
background: #f7f7f7;
text-decoration: none;
padding: 6px;
font-weight: bold;
color: #555;
font-size: 0.95em;
margin-left: 5px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
&:hover {
border-color:#b0b0b0;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
.fa {
color: #333;
}
}
.fa {
color: #555;
}
}
.CodeMirror-lint-tooltip,
.CodeMirror-hints {
/* This is above the editor in full-screen mode */
z-index: 100002;
}