/home/arranoyd/magicraft/wp-content/plugins/titan-framework/css/admin-styles.css
/*
* TODO: separate styles into multiple imports
*/
/*
* Table of Contents
*
* 1.0 - Styles for metaboxes in the sidebar
* 2.0 - Base styling for admin pages
* 2.1 - main wrapper
* 2.2 - Tabs
* 2.3 - option tables
* 2.4 - font options description
* 2.5 - google font iframe
* 2.6 - notifications
* 2.7 - notes
* 2.8 - heading
* 2.9 - radio-palette
* 2.10 - radio images
* 2.11 - code
* 2.12 - sortable
* 2.13 - number slider
* 2.14 - google webfont new
* 2.15 - We're using dashicons instead of font-awesome, this fixed the incompatibility
* 2.16 - group
* 3.0 - Enable option styles
*/
@import "class-option-font.css";
@import "class-option-date.css";
/* note option padding issue */
.tf-note .updated p {
margin-bottom: 4px;
}
@media screen and (min-width: 783px) {
.tf-select-googlefont iframe {
width: 100%;
height: 120px;
background: #FFF;
background: rgba(255, 255, 255, .7);
margin-top: 4px;
}
.form-table td.tf-select-googlefont fieldset label {
display: inline-block;
padding-left: 20px;
width: 200px;
}
}
/*
* 1.0 - Styles for metaboxes in the sidebar
*/
#side-sortables .tf-form-table,
#side-sortables .tf-form-table tbody,
#side-sortables .tf-form-table tr,
#side-sortables .tf-form-table th,
#side-sortables .tf-form-table td {
display:block;
}
#side-sortables .tf-form-table th {
padding: 10px 0px 0px;
}
#side-sortables .tf-form-table td {
padding: 5px 0px;
}
#side-sortables .tf-form-table td input {
max-width:100%;
}
#side-sortables .tf-radio-image label:first-child,
#side-sortables .tf-radio-image label {
display: inline-block;
margin-left: 10px;
margin-top: 10px;
}
/*
* 2.0 - Base styling for admin pages
*/
/* 2.1 - main wrapper */
.titan-framework-panel-wrap {
margin-bottom: 20px;
}
/* 2.2 - Tabs */
.titan-framework-panel-wrap .nav-tab-wrapper { margin-bottom: 20px; }
/* 2.3 - option tables */
.titan-framework-panel-wrap .form-table th,
.titan-framework-panel-wrap .form-table td {
padding: 20px 20px;
}
.titan-framework-panel-wrap .form-table tbody:first-child tr th:first-child,
.titan-framework-panel-wrap .form-table tbody:first-child tr td:first-child {
border-left: 1px solid #DFDFDF;
}
.titan-framework-panel-wrap .form-table tbody:first-child tr th:last-child,
.titan-framework-panel-wrap .form-table tbody:first-child tr td:last-child {
border-right: 1px solid #DFDFDF;
}
.titan-framework-panel-wrap .wp_themeSkin table td {
padding: 0;
}
.titan-framework-panel-wrap .form-table {
margin-top: 0;
}
.titan-framework-panel-wrap .nav-tab-active,
.titan-framework-panel-wrap .nav-tab-active:hover {
background: #ffffff;
border-bottom: 1px solid #ffffff;
}
.titan-framework-panel-wrap .form-table tr {
background: white;
border-bottom: 1px solid #eee;
}
.titan-framework-panel-wrap .form-table .wp_themeSkin .mceStatusbar { padding: 0 0 0 8px; }
.titan-framework-panel-wrap .form-table .wp_themeSkin .mceToolbar { padding: 1px; }
.titan-framework-panel-wrap p.submit {
background: #FFF;
margin-top: 0;
margin-bottom: 0;
padding: 15px 20px;
border-bottom: 1px solid #eee;
}
.titan-framework-panel-wrap .form-table + p.submit {
padding: 15px 20px;
border-left: 1px solid #DFDFDF;
border-right: 1px solid #DFDFDF;
border-bottom: 1px solid #DFDFDF;
}
/* 2.4 - font options description */
.titan-framework-panel-wrap .tf-font p.description,
.titan-framework-panel-wrap .tf-radio p.description,
.titan-framework-panel-wrap .tf-multicheck p.description {
margin-bottom: 8px;
}
/* 2.5 - google font iframe */
.tf-select-googlefont iframe {
background: #fafafa;
}
/* 2.6 - notifications */
.titan-framework-panel-wrap div.updated,
.titan-framework-panel-wrap div.error {
}
.titan-framework-panel-wrap h2 + div.updated,
.titan-framework-panel-wrap h2 + div.error {
}
.titan-framework-panel-wrap h2 + div.error {
}
/* 2.7 - notes */
.titan-framework-panel-wrap .tf-note .updated {
}
/* 2.8 - heading */
.titan-framework-panel-wrap .tf-heading th {
background: #F1F1F1;
background: none repeat scroll 0 0 #F5F5F5;
border-left: 1px solid #DFDFDF;
border-top: 1px solid #DFDFDF;
border-right: 1px solid #DFDFDF;
border-bottom: 1px solid #DFDFDF;
color: #222222;
padding: 10px 20px;
}
.titan-framework-panel-wrap .tf-heading h3 {
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.titan-framework-panel-wrap .tf-heading p {
font-weight: normal;
margin-top: 5px;
}
.titan-framework-panel-wrap .tf-heading p:last-child {
margin-bottom: 0;
}
.titan-framework-panel-wrap .options-container h2 {
background: none repeat scroll 0 0 #F5F5F5;
border-left: 1px solid #DFDFDF;
border-top: 1px solid #DFDFDF;
border-right: 1px solid #DFDFDF;
border-bottom: 1px solid #DFDFDF;
color: #222222;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
margin: 20px 0 0;
padding: 10px 20px;
}
.titan-framework-panel-wrap .options-container h2 { margin-bottom: -6px; }
/* 2.9 - radio-palette */
.tf-radio-palette span {
display: inline-block;
height: 40px;
}
.tf-radio-palette span span {
width: 15px;
}
.tf-radio-palette > label > span {
padding: 2px;
border: 1px solid #ddd;
}
.tf-radio-palette input[type=radio] {
vertical-align: top;
margin-top: 17px;
}
.tf-radio-palette label {
margin: 0 30px 10px 0;
display: inline-block;
}
.tf-radio-palette label:first-child {
margin-left: 0
}
.tf-ajax-button .button + .button {
margin-left: 5px;
}
/* 2.10 - radio images */
.tf-radio-image label {
white-space: nowrap;
display: inline-block;
margin-right: 30px;
margin-bottom: 10px;
}
.form-table .tf-radio-image input[type=radio] {
margin-top: 0;
}
.tf-radio-image img {
vertical-align: middle;
}
/* 2.11 - code */
.tf-code > div:first-of-type {
border-radius: 3px;
border: 1px solid #DDD;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
position: relative;
font-size: 14px;
}
/* 2.12 - sortable */
.tf-sortable li {
cursor: move;
background: #fafafa;
padding: 0 0 0 15px;
border: 1px solid #DDD;
position: relative;
line-height: 40px;
}
.tf-sortable ul {
margin-top: 0;
background: rgba(0, 0, 0, 0);
border: 1px solid #EEE;
padding: 5px;
display: inline-block;
}
.tf-sortable ul li:last-of-type {
margin-bottom: 0;
}
.tf-sortable ul li i {
float: right;
background: #fcfcfc;
display: inline-block;
border-left: 1px solid #ddd;
border-bottom: 1px solid #DDD;
width: 40px;
line-height: 40px;
text-align: center;
color: #777;
}
.tf-sortable ul li i.visibility {
cursor: pointer;
}
.tf-sortable ul li i:last-of-type {
margin-left: 50px;
}
.tf-sortable li.tf-invisible {
color: #ccc;
background: transparent;
}
/* 2.13 - number slider */
.tf-number .ui-slider-handle {
position: absolute;
z-index: 2;
border-radius: 3px;
cursor: move;
margin-left: -6px;
pointer-events: none;
outline: none;
top: -5px;
background: #EEE;
border: 1px solid #CCC;
height: 23px;
width: 12px;
}
.tf-number .ui-slider a:focus {
outline: none;
}
.tf-number .ui-slider-range {
background: #eee;
height: 100%;
}
.tf-number .number-slider {
position: relative;
background: #fcfcfc;
border: 1px solid #ddd;
border-radius: 3px;
width: 250px;
height: 15px;
margin-right: 20px;
display: inline-block;
vertical-align: bottom;
margin-bottom: 6px;
}
/* 2.14 - google webfont new */
.tf-font label {
border: 1px solid #DDD;
vertical-align: middle;
display: inline-block;
padding: 4px 4px 4px 13px;
margin-right: 10px;
background: #fcfcfc;
margin-bottom: 10px;
}
.tf-font select {
margin-left: 10px;
}
.tf-font .wp-picker-container {
line-height: 28px;
height: 28px;
margin: 1px;
display: inline-block;
}
.tf-font .wp-picker-container.wp-picker-active .wp-picker-input-wrap label {
border: none;
padding: 0;
}
.tf-font .wp-picker-container.wp-picker-active .wp-picker-default {
margin: 1px 2px 2px 3px;
}
.tf-font .wp-picker-container > a {
margin: 2px 7px 2px 10px;
}
.tf-font .wp-picker-container .wp-picker-default {
margin: 2px 2px 2px 7px;
}
.tf-font iframe {
width: 100%;
height: 200px;
background: #FCFCFC;
border: 1px solid #DDD;
}
.tf-font div {
position: relative;
}
.tf-font i {
position: absolute;
top: 0;
left: 0;
line-height: 30px !important;
width: 30px;
background: #EEE;
text-align: center;
border: 1px solid #DDD;
cursor: pointer;
}
.tf-font i:hover {
background: #333;
color: #FFF;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
}
.tf-font .wp-picker-container {
z-index: 9;
}
.tf-font .wp-picker-container .wp-color-result.button {
margin-left: 10px;
top: 1px;
position: relative;
}
.dashicons-visibility-faint:before {
opacity: .2;
}
/* We're using dashicons instead of font-awesome, this fixed the incompatibility */
[class*=tf-] i.dashicons {
height: auto;
}
/*
* 2.16 - group
*/
.tf-group .wp-color-result {
margin: 0 0 -2px;
}
.tf-group .wp-picker-active .wp-color-result {
margin: 2px 6px -2px 0;
}
.tf-group .wp-picker-active .wp-picker-input-wrap {
margin-top: 2px;
margin-bottom: -2px;
}
.tf-group .wp-picker-active .wp-picker-holder {
margin-top: 12px;
}
.tf-group {
padding-left: 16px;
padding-right: 16px;
}
.tf-group > * {
margin: 0 4px;
display: inline-block;
}
/*
* 3.0 - Enable option styles
*/
.tf-enable input {
width: 0;
height: 0;
overflow: hidden;
float: right;
z-index: -9999;
position: absolute;
}
.tf-enable .button {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.tf-enable .button + .button-primary {
background: #6C7A89;
border-color: #56606B;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
pointer-events: none;
}
.tf-enable .button-primary:first-of-type {
pointer-events: none;
}
.tf-enable .button:first-of-type {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.tf-enable .button-secondary:first-of-type {
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}
.tf-enable .button + .button {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
}
.tf-upload .tf-image-preview img {
margin-top: 0px;
margin-left: 0px;
top: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
}
.tf-file-upload {
min-height: 20px;
padding: 10px 20px;
width: 250px;
background-color: #FAFAFA;
box-shadow: inset 0 0 0 1px #EEE;
cursor: pointer;
position: relative;
}
.tf-file-upload:hover {
box-shadow: inset 0 0 0 4px #EEE;
}
.tf-file-upload p{
margin-top: 0 !important;
}
.tf-file-upload i{
position: absolute;
right: 10px;
}