|
Server : Microsoft-IIS/10.0 System : Windows NT HMW9050 6.2 build 9200 (Unknow Windows version Standard Edition) i586 User : fatorc ( 0) PHP Version : 5.3.28 Disable Function : escapeshellarg, escapeshellcmd, exec, passthru, proc_close, proc_open, shell_exec, system, dl, popen, php_check_syntax, php_strip_whitespace, symlink, link, openlog, apache_child_terminate Directory : e:/home/fatorc/Web/wp-content/plugins/siteorigin-panels/css/ |
Upload File : |
@import "mixins";
@font-face {
font-family: 'siteorigin-panels';
src:url('icons/siteorigin-panels.eot?-yv2c11');
src:url('icons/siteorigin-panels.eot?#iefix-yv2c11') format('embedded-opentype'),
url('icons/siteorigin-panels.woff?-yv2c11') format('woff'),
url('icons/siteorigin-panels.ttf?-yv2c11') format('truetype'),
url('icons/siteorigin-panels.svg?-yv2c11#siteorigin-panels') format('svg');
font-weight: normal;
font-style: normal;
}
#panels{
}
/* This is for the metabox */
#so-panels-panels {
&.attached-to-editor{
margin-top: 20px;
h3.hndle {
display: none;
}
.inside {
margin: 0 !important;
padding: 0 !important;
}
.so-toolbar .so-switch-to-standard{
display: block;
}
}
}
/* Everything for the main builder interface */
.siteorigin-panels-builder {
position: relative;
.so-builder-container {
/* Top padding for the toolbar */
padding-top: 38px;
position: relative;
}
/* These are generic iconic buttons used in the page builder interface */
.so-tool-button {
padding: 6px 7px;
font-size: 11px;
text-decoration: none;
line-height: 0.9em;
float: left;
margin-right: 2px;
display: block;
visibility: visible;
position: relative;
border: 1px solid #C0C0C0;
.gradient(#F0F0F0, #F0F0F0, #F9F9F9);
.box-shadow(~"0 1px 1px rgba(0,0,0,0.04)");
outline: none;
.rounded(2px);
span {
display: inline-block;
color: #666666;
text-shadow: 0 1px 0 #FFFFFF;
min-width: 10px;
text-align: center;
}
&:hover {
background: #FFFFFF;
span {
color: #444444;
}
}
}
.so-builder-toolbar {
.box-sizing(border-box);
border-bottom: 1px solid #D0D0D0;
background: #F5F5F5;
line-height: 1em;
position: absolute;
z-index: 101;
white-space: nowrap;
overflow-x: hidden;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
top: 0;
left: 0;
width: 100%;
padding: 6px 9px;
margin-top: 0 !important;
.clearfix();
/* The toolbar buttons */
> .so-tool-button {
display: inline-block;
color: #666666;
padding-right: 8px;
.so-panels-icon {
float: left;
margin: 0 5px 0 0;
}
&:hover {
color: #444444;
}
}
.so-switch-to-standard {
position: absolute;
top: 5px;
right: 10px;
display: none;
text-decoration: none;
color: #666666;
padding: 5px 6px;
.rounded(2px);
border: 1px solid transparent;
margin-top: 2px;
font-size: 11px;
&:hover {
background: #fafafa;
border: 1px solid #999999;
color: #444444;
}
}
}
@media screen and (max-width: 600px) {
.so-builder-toolbar {
padding: 10px;
> .so-tool-button {
padding-right: 2px;
.so-panels-icon {
font-size: 20px;
}
span.so-button-text {
display: none;
}
}
}
}
.so-rows-container{
padding: 20px 15px 0 15px;
.so-row-toolbar {
.clearfix();
.so-tool-button {
.box-sizing(border-box);
height: 22px;
padding: 5px;
font-size: 10px;
float: right;
&.so-row-move {
cursor: move;
}
}
margin-bottom: 4px;
.so-dropdown-wrapper {
position: relative;
float: right;
.so-dropdown-links-wrapper {
display: none;
z-index: 11;
position:absolute;
right: -10px;
padding: 6px 0 0 0;
top: 22px;
width: 125px;
ul {
margin: 0;
border: 1px solid #C0C0C0;
background: #F9F9F9;
.rounded(2px);
padding: 4px 0;
.box-shadow(~"0 2px 2px rgba(0,0,0,0.1)");
li {
margin: 0;
&:first-child {
border-top-width: 1px;
}
a {
display: block;
padding: 2px 8px;
text-decoration: none;
color: #666;
font-size: 11px;
font-weight: bold;
outline: 0 !important;
.box-shadow(none);
&:hover {
background: #F0F0F0;
color: #444;
}
.dashicons {
font-size: 16px;
margin: 0;
float: right;
line-height: 16px;
}
/* Specific drop down hovers */
&.so-row-delete {
color: #a00;
&:hover {
color: #FFF;
background: #a00;
}
}
}
}
.so-pointer {
width: 12px;
height: 6px;
position: absolute;
z-index: 12;
background: url("./images/dropdown-pointer.png");
background-size: 12px 6px;
top: 1px;
right: 18px;
}
}
}
&:hover {
.so-dropdown-links-wrapper {
display: block;
}
}
}
}
.ui-sortable-placeholder {
visibility: visible !important;
background: #F7F7F7;
.box-sizing(border-box);
}
.so-row-container {
margin-bottom: 20px;
.user-select(none);
.so-cells {
.clearfix();
margin: 0 -5px;
position: relative;
.ui-resizable-handle.ui-resizable-w{
width: 10px;
left: -11px;
cursor: col-resize;
background: rgba(0,150,211, 0);
background: rgba(0,150,211, 0.25);
-webkit-transition: background 0.25s ease-in-out;
-moz-transition: background 0.25s ease-in-out;
-o-transition: background 0.25s ease-in-out;
transition: background 0.25s ease-in-out;
&:hover{
background: rgba(0,150,211, 0.1);
}
}
.cell {
.box-sizing(border-box);
float: left;
position: relative;
padding: 0 5px;
&.so-first{
margin-left: 0;
}
&.so-last{
margin-right: 0;
}
.cell-wrapper{
background: #e4eff4;
border: 1px solid #bcccd2;
padding: 10px 10px 4px 10px; /* 6px bottom to remove bottom margin from panels */
height: 100%;
min-height: 70px;
}
&.cell-selected .cell-wrapper{
background: #cae7f4 url("images/cell-selected.png") repeat;
border-color: #9abcc7;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
&.cell-selected .cell-wrapper{
background-size: 3px 3px;
}
}
&, .cell-wrapper {
.box-sizing(border-box);
}
.widgets-container {
.so-widget {
cursor: move;
margin-bottom: 5px;
background: #f9f9fb;
border: 1px solid #9bafb5;
max-height: 49px;
.box-sizing(border-box);
.box-shadow(~"0 1px 2px rgba(0,0,0,0.075)");
&:hover {
border: 1px solid #93a7ad;
background: #feffff;
.box-shadow(~"0 2px 2px rgba(0,0,0,0.075)");
}
.so-widget-wrapper{
padding: 7px 9px;
overflow: hidden;
position: relative;
}
h4{
display: block;
cursor: pointer;
margin: 0 15px 3px 0;
font-weight: 600;
line-height: 1.25em;
color: #474747;
text-shadow: 0 1px 0 #FFF;
white-space: nowrap;
span {
font-weight: normal;
display: inline-block;
color: #999;
text-shadow: 0 1px 0 #FFF;
margin-left: 12px;
margin-right: 5px;
font-style: italic;
}
}
.title {
.actions {
font-size: 12px;
position: absolute;
top: 5px;
right: 7px;
cursor: pointer;
padding: 2px 2px 2px 15px;
z-index: 10;
&:hover {
background: #feffff;
a{
opacity: 1;
}
}
a{
display: none;
margin-right: 3px;
text-decoration: none;
}
a.widget-delete{
color: #FF0000;
&:hover {
color: white;
background: #FF0000;
}
}
}
}
&:hover {
.title a{
display: inline-block;
opacity: 0.5;
}
}
&.panel-being-dragged .title .actions {
display: none;
}
small{
display: block;
height: 16px;
overflow: hidden;
color: #777;
}
.form{
display: none;
}
&.widget-being-dragged {
opacity: 0.9;
pointer-events: none;
}
}
.so-widget-sortable-highlight{
border: 1px solid;
.box-sizing(border-box);
height: 49px;
background: #ddebef;
border-color: #bcccd2;
margin-bottom: 5px;
position: relative;
.box-shadow(~"inset 2px 2px 2px rgba(0,0,0,0.01)");
}
}
.resize-handle{
z-index: 100;
position: absolute;
top: 0;
width: 10px;
left: -5px;
cursor: col-resize;
background: #e5f4fa;
height: 100%;
.transition(0.25s, background, ease-in-out);
&:hover{
background: #bfe4f3;
}
}
&:first-child {
.resize-handle {
display: none;
}
}
}
}
}
}
/* Page Builder icons */
.so-panels-icon {
font-family: 'siteorigin-panels';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&.so-panels-icon-plus:before {
content: "\f067";
}
&.so-panels-icon-eye:before {
content: "\f06e";
}
&.so-panels-icon-arrows-v:before {
content: "\f07d";
}
&.so-panels-icon-wrench:before {
content: "\f0ad";
}
&.so-panels-icon-columns:before {
content: "\f0db";
}
&.so-panels-icon-rotate-left:before {
content: "\f0e2";
}
&.so-panels-icon-puzzle-piece:before {
content: "\f12e";
}
&.so-panels-icon-cubes:before {
content: "\f1b3";
}
}
.so-panels-welcome-message {
text-align: center;
padding: 0px 15px 20px 15px;
color: #555;
line-height: 1.8em;
.so-message-wrapper {
padding: 15px 10px;
background: #F8F8F8;
border: 1px solid #E0E0E0;
}
.so-tool-button {
font-size: inherit;
display: inline-block;
float: none;
color: #666;
padding: 5px 10px;
margin: 0 3px;
.so-panels-icon {
color: #777;
font-size: 0.8em;
}
}
}
}
/* This is to display a draggable widget */
.so-widget.ui-sortable-helper.widget-being-dragged {
/* Need a high z-index for layout builder widget */
z-index: 500002 !important;
.siteorigin-panels-builder.so-rows-container.so-row-container.so-cells.cell.widgets-container.so-widget;
}
/* Handles displaying a builder in the WordPress widget interface */
.widgets-holder-wrap .widget-inside {
.siteorigin-panels-builder {
.so-builder-container {
padding-top: 0;
}
.so-rows-container {
padding: 10px 0 0 0;
}
.so-builder-toolbar {
padding-left: 15px;
padding-right: 15px;
margin: 0 -15px;
}
}
}
.so-panels-dialog {
@edge_spacing: 30px;
@title_bar_height: 50px;
@toolbar_height: 58px;
@sidebar_width: 290px;
@pane_padding: 15px;
@border_color: #D8D8D8;
.so-overlay, .so-content, .so-title-bar, .so-toolbar, .so-left-sidebar, .so-right-sidebar {
z-index: 100000;
position: fixed;
.box-sizing(border-box);
padding: @pane_padding;
}
.so-content, .so-left-sidebar, .so-right-sidebar {
overflow-y: auto;
}
.so-overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
}
.so-content {
top: @edge_spacing + @title_bar_height;
left: @edge_spacing;
right: @edge_spacing;
bottom: @edge_spacing + @toolbar_height;
background-color: #fdfdfd;
overflow-x: hidden;
.box-shadow(~"inset 0 2px 2px rgba(0,0,0,0.03)");
> *:first-child {
margin-top: 0;
}
> *:last-child {
margin-bottom: 0;
}
.so-content-tabs > * {
display: none;
}
}
.so-title-bar {
left: @edge_spacing;
right: @edge_spacing;
top: @edge_spacing;
height: @title_bar_height;
background-color: #fafafa;
border-bottom: 1px solid @border_color;
h3.so-title {
margin: 0 !important;
padding: 0 !important;
}
h3.so-parent-link {
cursor: pointer;
position: relative;
float: left;
margin: 0 @pane_padding 0 0 !important;
padding: 0 @pane_padding+12px 0 0 !important;
.so-separator {
position: absolute;
top: -@pane_padding;
right: 0;
width: 12px;
height: @title_bar_height;
display: block;
background: url(./images/dialog-separator.png) no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.so-separator {
background: url(./images/dialog-separator@2x.png) no-repeat;
background-size: cover;
}
}
}
/* These are the action buttons in the title bar */
a {
cursor: pointer;
position: absolute;
box-sizing: border-box;
width: 50px;
height: 50px;
display: block;
top: 0;
right: 0;
.transition(0.2s);
background: #fafafa;
border-left: 1px solid #d8d8d8;
border-bottom: 1px solid #d8d8d8;
&:hover {
background: #e9e9e9;
.so-dialog-icon {
color: #333333;
}
}
.so-dialog-icon {
position: absolute;
top: 50%;
left: 50%;
text-decoration: none;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
color: #666666;
text-align: center;
&:before {
font: 400 20px/1em dashicons;
top: 7px;
left: 13px;
}
}
&.so-close {
right: 0;
.so-dialog-icon:before {
content: "\f335";
}
}
&.so-next {
right: 50px;
.so-dialog-icon:before {
content: '\f345';
}
}
&.so-previous {
right: 100px;
.so-dialog-icon:before {
content: '\f341';
}
}
/* Disabled nav */
&.so-nav.so-disabled {
cursor: default;
pointer-events:none;
.so-dialog-icon {
color: #dddddd;
}
}
}
}
.so-toolbar {
left: @edge_spacing;
right: @edge_spacing;
bottom: @edge_spacing;
height: @toolbar_height;
background-color: #fafafa;
border-top: 1px solid @border_color;
.so-status {
float: left;
padding-top: 6px;
padding-bottom: 6px;
font-style: italic;
color: #999999;
line-height: 1em;
&.so-panels-loading {
padding-left: 26px;
background-position: left center;
}
}
.so-buttons {
.action-buttons {
position: absolute;
left: 15px;
top: 50%;
margin-top: -0.65em;
a {
display: inline;
padding: 0.2em 0.5em;
line-height: 1em;
margin-right: 0.5em;
text-decoration: none;
}
.so-delete {
color: #a00;
&:hover {
background: #a00;
color: #FFFFFF;
}
}
.so-duplicate:hover {
text-decoration: underline;
}
}
float: right;
}
}
.so-left-sidebar, .so-right-sidebar {
background-color: #f3f3f3;
}
.so-left-sidebar {
display: none;
top: @edge_spacing;
left: @edge_spacing;
bottom: @edge_spacing;
width: @sidebar_width;
border-right: 1px solid @border_color;
h4 {
margin: 0 0 20px 0;
font-size: 18px;
}
.so-sidebar-search {
width: 100%;
padding: 6px;
margin-bottom: 20px;
}
.so-sidebar-tabs {
list-style: none;
margin: 0 -15px;
li {
margin-bottom: 0;
a {
padding: 7px 16px;
display: block;
font-size: 14px;
text-decoration: none;
&:hover {
background: #FFFFFF;
}
box-shadow: none !important;
}
&.tab-active {
a {
color: #555;
font-weight: bold;
background: #FFFFFF;
&:hover {
background: #FFFFFF;
}
}
}
}
}
}
.so-right-sidebar {
display: none;
top: @edge_spacing + @title_bar_height;
right: @edge_spacing;
bottom: @edge_spacing + @toolbar_height;
width: @sidebar_width;
border-left: 1px solid @border_color;
h3 {
color: #333;
&:first-child {
margin-top: 0;
}
}
}
.so-sidebar {
.form-field {
margin-bottom: 20px;
label{
font-weight: 500;
font-size: 15px;
display: block;
margin-bottom: 10px;
}
input[type=text] {
}
}
}
&.so-panels-dialog-has-left-sidebar {
.so-content, .so-toolbar, .so-title-bar {
left: @edge_spacing + @sidebar_width;
}
.so-content {
.box-shadow(~"inset 2px 2px 2px rgba(0,0,0,0.03)");
}
.so-left-sidebar {
display: block;
}
}
&.so-panels-dialog-has-right-sidebar {
.so-content {
right: @edge_spacing + @sidebar_width;
}
.so-right-sidebar {
display: block;
}
}
&.so-panels-dialog-edit-widget {
.so-left-sidebar {
.so-widgets {
.so-widget {
.rounded(2px);
border: 1px solid #cccccc;
cursor: pointer;
padding: 10px;
background: #f9f9f9;
.box-shadow(~"0 1px 2px rgba(0,0,0,0.075), inset 0 1px 0 #FFFFFF");
margin-bottom: 15px;
&:hover {
border: 1px solid #BBBBBB;
background: #FFFFFF;
}
&.so-current {
border-color: #0074a2;
background: #2ea2cc;
cursor: auto;
.box-shadow(~"0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2)");
h3 {
color: #FFFFFF;
}
small {
color: #eeeeee;
}
&:hover {
border-color: #0074a2;
background: #2ea2cc;
}
}
&:last-child {
margin-bottom: 0;
}
h3 {
margin: 0 0 7px 0;
padding: 0;
height: 1.2em;
color: #222222;
font-size: 14px;
}
small{
font-size: 11px;
line-height: 1.25em;
display: block;
overflow: hidden;
color: #888888;
}
}
}
}
}
/* The add widget dialog */
&.so-panels-dialog-add-widget {
.widget-type-list {
.clearfix();
margin: 0 -5px -10px -5px;
min-height: 10px;
.widget-type {
-ms-user-select: none; /* IE 10+ */
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
.box-sizing(border-box);
width: 25%;
padding: 0 5px;
margin-bottom: 10px;
float: left;
@media (max-width: 1280px) {
& {
width: 33.333%;
}
}
@media (max-width: 960px) {
& {
width: 50%;
}
}
h3 {
margin: 0 0 7px 0;
padding: 0;
color: #222222;
font-size: 14px;
}
small{
font-size: 11px;
min-height: 2.5em;
line-height: 1.25em;
display: block;
overflow: hidden;
color: #888888;
}
.widget-icon {
font-size: 20px;
width: 20px;
height: 20px;
color: #666;
float: left;
margin: -1px 0.5em 0 0;
}
}
.widget-type-wrapper {
border: 1px solid #cccccc;
cursor: pointer;
padding: 10px;
background: #F8F8F8;
.box-shadow(~"0 1px 2px rgba(0,0,0,0.075)");
&:hover {
border: 1px solid #BBBBBB;
background: #FFFFFF;
.box-shadow(~"0 2px 2px rgba(0,0,0,0.075)");
}
}
}
}
/* The row edit dialog */
&.so-panels-dialog-row-edit {
.so-content {
@preview_height: 360px;
.row-set-form {
.clearfix();
padding: 8px;
border: 1px solid #ccc;
margin-bottom: 20px;
background: #F3F3F3;
input, select, button, strong, span {
display: inline;
margin: 1px 5px;
outline: none;
box-shadow: none;
}
button {
margin-top: 2px;
}
label{
display: inline;
}
}
.row-preview {
margin: 0 -6px;
height: @preview_height;
position: relative;
.preview-cell, .preview-cell-in, .preview-cell-weight {
.box-sizing(border-box);
}
white-space: nowrap;
.preview-cell {
display: inline-block;
position: relative;
padding: 0 6px;
.preview-cell-in {
border: 1px solid #bcccd2;
min-height: @preview_height;
background: #e4eff4;
position: relative;
.preview-cell-weight,
.preview-cell-weight-input {
position: absolute;
font-size: 17px;
font-weight: bold;
top: 50%;
left: 50%;
width: 80px;
text-align: center;
color: #5e6d72;
margin: -0.95em 0 0 -40px;
padding: 10px 0;
border: 1px solid transparent;
line-height: 1.4em !important;
&:after{
content: '%';
}
overflow: hidden;
cursor: pointer;
&:hover {
background: #F6F6F6;
border: 1px solid #D0D0D0;
}
}
.preview-cell-weight-input {
background: #F6F6F6;
border: 1px solid #D0D0D0;
.box-shadow(none);
}
}
.resize-handle{
z-index: 100;
position: absolute;
top: 0;
width: 12px;
left: -6px;
cursor: col-resize;
background: #e5f4fb;
height: @preview_height;
.transition(0.15s, background, ease-in-out);
&:hover, &.ui-draggable-dragging {
background: #b7e0f1;
}
}
}
}
}
}
&.so-panels-dialog-history {
.so-left-sidebar {
padding: 0;
}
.history-entries {
.history-entry {
padding: 10px;
background: #F8F8F8;
cursor: pointer;
h3 {
margin: 0 0 0.6em 0;
font-size: 12px;
font-weight: bold;
color: #444444;
line-height: 1em;
}
.timesince {
color: #999999;
font-size: 11px;
line-height: 1em;
}
border-bottom: 1px solid #ccc;
&:hover {
background: #F0F0F0;
}
&.so-selected {
background: #EEEEEE;
}
.count {
color: #999999;
}
}
}
.so-content {
padding: 0;
overflow-y: hidden;
form.history-form {
display: none;
}
iframe.siteorigin-panels-history-iframe {
width: 100%;
height: 100%;
}
}
}
/* For prebuilt layouts */
&.so-panels-dialog-prebuilt-layouts {
.so-content {
padding-left: 10px;
padding-right: 10px;
.layout {
.box-sizing(border-box);
float: left;
width: 33.333%;
padding: 0 5px 10px 5px;
.layout-inside {
padding: 10px 15px;
cursor: pointer;
border: 1px solid #cccccc;
background: #F8F8F8;
.box-shadow(~"0 1px 2px rgba(0,0,0,0.075)");
&:hover {
border: 1px solid #BBBBBB;
background: #FFFFFF;
.box-shadow(~"0 2px 2px rgba(0,0,0,0.075)");
}
h4 {
font-size: 15px;
margin: 0;
line-height: 1.2em;
height: 1.2em;
overflow: hidden;
}
.description {
line-height: 1.2em;
height: 1.2em;
margin-top: 0.7em;
font-size: 12px;
color: #888;
overflow: hidden;
}
.dashicons {
display: none;
float: left;
margin-top: 10px;
}
}
&.so-selected {
.layout-inside {
border: 1px solid #aaaaaa;
background: #F2F2F2;
h4, .description {
margin-left: 35px;
}
.dashicons {
display: inline-block;
}
}
}
}
.so-error-message {
font-size: 14px;
border: 1px solid #cccccc;
background: #F8F8F8;
padding: 15px 20px;
}
.export-file-ui {
padding: 5px 15px;
text-align: right;
}
.import-upload-ui {
padding: 15px;
.drag-drop-message {
display: none;
}
&.has-drag-drop .drag-drop-message {
display: block;
}
p.drag-drop-message{
font-size: 0.9em;
}
.drag-upload-area {
display: block;
.box-sizing(border-box);
padding: 50px 30px;
border: 4px dashed #E0E0E0;
text-align: center;
.transition(0.25s);
&.file-dragover {
background-color: #f2f9fc;
border-color: #0074a2;
}
}
.progress-bar {
display: none;
padding: 2px;
border: 2px solid #2181b1;
.rounded(2px);
margin-top: 20px;
.progress-percent{
height: 14px;
background-color: #358ebe;
.rounded(1px);
}
}
.file-browse-button {
padding: 12px 30px;
height: auto;
}
}
}
}
/* Everything we need for the style fields */
.so-visual-styles {
margin: -15px;
h3 {
line-height: 1em;
margin: 0;
padding: 20px 15px;
border-bottom: 1px solid #ddd;
}
.style-section-head {
background: white;
padding: 15px 10px;
border-bottom: 1px solid #ddd;
cursor: pointer;
.user-select(none);
h4 {
margin: 0;
}
}
.style-section-fields {
padding: 15px;
border-bottom: 1px solid #ddd;
background: #F7F7F7;
.style-field-wrapper {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
> label {
font-weight: bold;
display: block;
margin-bottom: 3px;
}
.style-field {
.clearfix();
input {
font-size: 12px;
}
}
}
}
.style-input-wrapper {
.clearfix();
input {
max-width: 100%;
}
}
/* All the field types */
.style-field-measurement {
input[type="text"] {
width: 60px;
float: left;
}
select {
float: left;
}
}
.style-field-image {
@image_field_height: 28px;
.so-image-selector {
display: inline-block;
background-color: #f7f7f7;
border: 1px solid #ccc;
height: @image_field_height;
float: left;
.rounded(3px);
cursor: pointer;
.box-shadow(~"inset 0 1px #FFFFFF");
.current-image {
height: @image_field_height;
width: @image_field_height;
float: left;
background: #ffffff;
border-right: 1px solid #ccc;
background-size: cover;
.border-radius(0, 0, 3px, 3px);
}
.select-image {
font-size: 12px;
line-height: @image_field_height;
float: left;
padding: 0 8px;
color: #555;
}
}
.remove-image {
font-size: 12px;
margin-top: 4px;
margin-left: 15px;
display: inline-block;
float: left;
color: #666;
text-decoration: none;
.remove-image {
color: #333;
}
}
}
.so-field-code {
font-size: 12px;
font-family: "Courier 10 Pitch", Courier, monospace;
}
.so-description {
color: #999;
font-size: 12px;
margin-top: 5px;
margin-bottom: 0;
font-style: italic;
clear:both;
}
}
/* Special case of the builder interface being inside a dialog */
.so-content {
.siteorigin-panels-builder {
.so-builder-toolbar {
border: 1px solid #dedede;
}
.so-rows-container {
padding: 20px 0 0 0;
}
.so-panels-welcome-message {
padding-left: 0;
padding-right: 0;
}
}
}
}
/* Display the dialog with a proper z-index in the customizer */
.wp-customizer .so-panels-dialog {
.so-overlay, .so-content, .so-title-bar, .so-toolbar, .so-left-sidebar, .so-right-sidebar {
z-index: 500001;
}
}
.so-panels-live-editor {
> div {
position: fixed;
z-index: 99999;
}
.live-editor-form {
display: none;
}
.so-overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.75);
}
.so-sidebar {
top: 0;
left: 0;
bottom: 0;
width: 260px;
overflow-y: auto;
background: #F2F2F2;
border-right: 1px solid #D0D0D0;
.box-sizing(border-box);
.so-sidebar-tools {
background: #eee;
border-bottom: 1px solid #ddd;
.live-editor-close {
.box-sizing(border-box);
display: block;
width: 45px;
height: 45px;
background: #eee;
border-right: 1px solid #ddd;
color: #444;
cursor: pointer;
text-decoration: none;
position: relative;
text-align: center;
padding-top: 12px;
&:hover {
background: #FFFFFF;
}
&:before {
font: 400 22px/1 dashicons;
content: "\f341";
top: 7px;
left: 13px;
}
}
}
.page-widgets {
.page-widgets-section {
.section-header {
cursor: pointer;
background: white;
padding: 15px 10px;
border: solid #ddd;
border-width: 1px 0;
h4 {
margin: 0;
font-size: 16px;
}
}
.section-widgets {
padding: 10px;
}
&:first-child {
.section-header {
border-top: 0;
}
}
}
.so-widget {
border: 1px solid #cccccc;
cursor: pointer;
padding: 10px;
background: #F8F8F8;
.box-shadow(~"0 1px 2px rgba(0,0,0,0.075), inset 0 1px 0 #FFFFFF");
margin-bottom: 6px;
&:hover, &.so-hovered {
.box-shadow(~"0 2px 2px rgba(0,0,0,0.0125), inset 0 1px 0 #FFFFFF");
border: 1px solid #9bafb5;
background: #f4f9fd;
}
&.so-current {
border-color: #0074a2;
background: #2ea2cc;
cursor: auto;
.box-shadow(~"0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2)");
h4 {
color: #FFFFFF;
}
small {
color: #eeeeee;
}
&:hover {
border-color: #0074a2;
background: #2ea2cc;
}
}
&:last-child {
margin-bottom: 0;
}
h4 {
margin: 0 0 7px 0;
padding: 0;
height: 1.2em;
color: #222222;
font-size: 14px;
}
.actions {
display: none;
}
small{
font-size: 11px;
line-height: 1.2em;
height: 1.2em;
display: block;
overflow: hidden;
color: #888888;
}
}
}
}
.so-preview {
top: 0;
right: 0;
bottom: 0;
left: 260px;
background: #F4F4F4;
iframe{
width: 100%;
height: 100%;
}
}
}
.so-panels-loading {
background-image: url("images/wpspin_light.gif");
background-position: center center;
background-repeat: no-repeat;
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
& {
background-image: url(images/wpspin_light-2x.gif);
background-size: 16px 16px;
}
}
}
/* For the custom home page interface */
#panels-home-page {
.siteorigin-panels-builder {
border: 1px solid #D0D0D0;
background-color: #ffffff;
margin: 10px 0;
&.so-panels-loading {
min-height: 150px;
}
}
/* The Switch - © 2013 Thibaut Courouble - MIT License */
.switch {
@switch_height: 24px;
@switch_width: 68px;
@switch_padding: 3px;
margin: 0 10px 0 0;
float: left;
position: relative;
display: inline-block;
vertical-align: top;
width: @switch_width;
height: @switch_height;
padding: @switch_padding;
background-color: white;
border-radius: @switch_height;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
background-image: -o-linear-gradient(top, #eeeeee, white 25px);
background-image: linear-gradient(to bottom, #eeeeee, white 25px);
.switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: @switch_height/2;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: opacity background;
-moz-transition-property: opacity background;
-o-transition-property: opacity background;
transition-property: opacity background;
}
.switch-label:before,
.switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: @switch_height/2 + 1px;
color: white;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #47a8d8;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 4px;
left: @switch_padding + 1px;
width: @switch_height - 2px;
height: @switch_height - 2px;
background: white;
border-radius: @switch_height/2;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
.switch-handle:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
margin: -7px 0 0 -7px;
width: @switch_height/2 + 2px;
height: @switch_height/2 + 2px;
background: #f9f9f9;
border-radius: (@switch_height/2 + 2px) / 2;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
background-image: -webkit-linear-gradient(top, #eeeeee, white);
background-image: -moz-linear-gradient(top, #eeeeee, white);
background-image: -o-linear-gradient(top, #eeeeee, white);
background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-input:checked ~ .switch-handle {
left: @switch_width - @switch_height + 2px + 2px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-green > .switch-input:checked ~ .switch-label {
background: #4fb845;
}
}
#panels-view-as-page {
display: inline-block;
margin-left: 50px;
}
}
.siteorigin-page-builder-widget {
.siteorigin-panels-display-builder {
display: inline-block !important;
}
.siteorigin-panels-no-builder {
display: none !important;
}
}