first commit

This commit is contained in:
2026-03-05 13:07:40 +01:00
commit 64ba0721ee
25709 changed files with 4691006 additions and 0 deletions

View File

@@ -0,0 +1,590 @@
/**
*
* ---------------------------------------------------------
* CODESTAR FRAMEWORK RTL CSS MAP
* ---------------------------------------------------------
*
* 01. Base
* 01. 01. Header
* 01. 02. Header Buttons
* 01. 03. Navigation
* 01. 04. Content
* 01. 05. Section
* 01. 06. Show All Settings
* 01. 07. Search Input
* 01. 08. Copyright
* 01. 09. Metabox
* 02. Fields
* 02. 01. Field: typography
* 02. 02. Field: checkbox, radio
* 02. 03. Field: switcher
* 02. 04. Field: upload
* 02. 05. Field: group
* 02. 06. Field: repeater
* 02. 07. Field: help
* 02. 08. Field: icon
* 02. 09. Field: gallery
* 02. 10. Field: sorter
* 02. 11. Field: tabbed
* 02. 12. Field: media
* 02. 13. Field: notice
* 02. 14. Field: border, spacing, dimensions
* 02. 15. Field: background
* 02. 16. Field: spinner
* 02. 17. Field: slider
* 02. 18. Field: button_set
* 02. 19. Field: link_color
* 02. 20. Field: color_group
* 02. 21. Field: palette
* 02. 22. Field: accordion
* 02. 23. Field: date
* 02. 24. Field: map
* 02. 25. Field: sortable
* 02. 26. Field: number
* 03. Taxonomy
* 04. Profile
* 05. Nav Menu
* 06. Modal
* 07. Customizer
* 08. Responsive
* 09. Others
*
* ---------------------------------------------------------
*
*/
/**
* 01. Base
*/
.csf-options {
margin-left: 20px;
margin-right: 0;
}
/**
* 01. 01. Header
*/
.csf-header h1 {
float: right;
}
.csf-header fieldset {
float: left;
}
/**
* 01. 02. Header Buttons
*/
.csf-buttons {
float: left;
direction: ltr;
}
.csf-header-left {
float: right;
}
.csf-header-right {
float: left;
}
/**
* 01. 03. Navigation
*/
.csf-nav {
float: right;
}
.csf-nav ul {
clear: right;
}
.csf-nav ul li .csf-active:after {
right: auto;
left: 0;
border-left-color: #fff;
border-right-color: transparent;
}
.csf-nav ul li .csf-arrow:after {
content: "\f053";
right: auto;
left: 10px;
}
.csf-nav ul li.csf-tab-expanded .csf-arrow:after {
transform: rotate(-90deg);
}
.csf-nav ul ul li a {
padding-right: 25px;
padding-left: 15px;
}
.csf-nav ul ul:before {
left: auto;
right: 15px;
}
.csf-nav .csf-tab-icon {
margin-left: 5px;
margin-right: 0;
}
.csf-nav-background {
left: auto;
right: 0;
}
/**
* 01. 04. Content
*/
.csf-content {
margin-left: 0;
margin-right: 225px;
}
/**
* 01. 05. Section
*/
.csf-sections {
float: right;
}
/**
* 01. 06. Show all options
*/
.csf-show-all .csf-content {
margin-right: 0;
overflow: hidden;
}
.csf-expand-all {
float: right;
right: auto;
left: 40px;
margin-right: 0;
margin-left: 4px;
}
/**
* 01. 07. Search Input
*/
.csf-search {
float: right;
}
.csf-search input {
margin: 0 0 0 5px;
}
/**
* 01. 08. Copyright
*/
.csf-copyright {
float: right;
}
/**
* 01. 09. Metabox
*/
.csf-metabox {
margin: -6px -12px -12px -12px;
}
.csf-metabox .csf-section-title {
padding: 20px;
}
.csf-section-title .csf-section-icon {
margin-left: 5px;
margin-right: 0;
}
/**
* 02. Fields
*/
.csf-field .csf-title {
float: right;
}
.csf-field .csf-fieldset {
float: left;
}
.csf-pseudo-field {
padding: 0 0 0 5px !important;
}
/**
* 02. 01. Field: typography
*/
.csf-field-typography select {
margin: 0;
width: 100%;
}
.csf-field-typography .csf--blocks-inputs .csf--blocks {
flex-direction: row-reverse;
}
.csf-field-typography .csf--unit {
left: 4px;
right: auto;
}
/**
* 02. 02. Field: checkbox, radio
*/
.csf-field-checkbox ul ul li,
.csf-field-radio ul ul li {
margin-left: 0;
margin-right: 8px;
}
.csf-field-checkbox ul ul li:first-child,
.csf-field-radio ul ul li:first-child {
margin-right: 0;
}
.csf-field-checkbox .csf--inline-list li,
.csf-field-radio .csf--inline-list li {
margin-right: 0;
margin-left: 15px;
}
.csf-field-checkbox .csf--text,
.csf-field-radio .csf--text {
margin-left: 0;
margin-right: 5px;
}
/**
* 02. 03. Field: switcher
*/
.csf-field-switcher .csf--switcher {
float: right;
}
.csf-field-switcher .csf--label {
float: right;
margin-left: 0;
margin-right: 5px;
}
/**
* 02. 04. Field: upload
*/
.csf-field-upload .csf--remove,
.csf-field-upload .csf--button {
margin-left: 0;
margin-right: 5px;
}
/**
* 02. 05. Field: group
*/
.csf-field-group .csf-cloneable-title {
padding: 15px 10px 15px 65px;
}
.csf-field-group .csf-cloneable-helper {
right: auto;
left: 10px;
}
/**
* 02. 06. Field: repeater
*/
.csf-field-repeater .csf-repeater-helper {
border-left: 0;
border-right: 1px solid #eee;
}
/**
* 02. 07. Field: help
*/
.csf-help {
right: auto;
left: 5px;
}
/**
* 02. 08. Field: icon
*/
.csf-field-icon .button {
margin-right: 0;
margin-left: 5px;
}
.csf-field-icon .csf-icon-preview i {
margin-right: 0;
margin-left: 5px;
}
/**
* 02. 09. Field: gallery
*/
.csf-field-gallery ul li {
margin-right: 0;
margin-left: 5px;
}
.csf-field-gallery .button {
margin-right: 0;
margin-left: 5px;
}
/**
* 02. 11. Field: tabbed
*/
.csf-field-tabbed .csf-tabbed-nav .csf--icon {
padding-right: 0;
padding-left: 5px;
}
.csf-field-tabbed .csf-tabbed-nav a {
margin-right: 0;
margin-left: 5px;
}
/**
* 02. 12. Field: media
*/
.csf-field-media .button {
margin-left: 0;
margin-right: 7px;
}
.csf-field-media .hidden + .button {
margin-right: 0;
}
/**
* 02. 13. Field: notice
*/
.csf-notice {
border-left: none;
border-right-style: solid;
border-right-width: 4px;
}
/**
* 02. 14. Field: border, spacing, dimensions
*/
.csf-field-dimensions .csf--input,
.csf-field-dimensions .csf-fieldset,
.csf-field-spacing .csf--input,
.csf-field-spacing .csf-fieldset,
.csf-field-border .csf--input,
.csf-field-border .csf-fieldset {
direction: ltr;
}
.csf-field-dimensions .csf--inputs,
.csf-field-dimensions .csf--color,
.csf-field-spacing .csf--inputs,
.csf-field-spacing .csf--color,
.csf-field-border .csf--inputs,
.csf-field-border .csf--color {
float: right;
}
.csf-field-dimensions .csf--color,
.csf-field-spacing .csf--color,
.csf-field-border .csf--color {
margin-right: 4px;
direction: rtl;
}
/**
* 02. 15. Field: background
*/
.csf-field-background .csf--block {
float: right;
}
.csf-field-background .csf--select,
.csf-field-background .csf--media {
padding-right: 0;
}
.csf-field-background .csf--title {
margin-right: 0;
margin-left: 5px;
}
/**
* 02. 16. Field: spinner
*/
.csf-field-spinner .csf--spin {
float: right;
direction: ltr;
}
/**
* 02. 17. Field: slider
*/
.csf-field-slider .csf-slider-ui {
direction: ltr;
margin-right: 0;
margin-left: 15px;
}
.csf-field-slider .csf--input {
direction: ltr;
}
/**
* 02. 18. Field: button_set
*/
.csf-field-button_set .csf--button-group {
float: right;
}
/**
* 02. 19. Field: link_color
*/
.csf-field-link_color .csf--left {
float: right;
margin-right: 0;
margin-left: 10px;
}
/**
* 02. 20. Field: color_group
*/
.csf-field-color_group .csf--left {
float: right;
margin-right: 0;
margin-left: 10px;
}
/**
* 02. 21. Field: palette
*/
.csf-field-palette .csf--palette {
margin-right: 0;
margin-left: 10px;
}
/**
* 02. 22. Field: accordion
*/
.csf-field-accordion .csf--icon {
margin-right: 0;
margin-left: 2px;
}
/**
* 02. 23. Field: date
*/
.csf-field-date .csf--to {
margin-left: 0;
margin-right: 7px;
}
/**
* 02. 24. Field: map
*/
.csf-field-map .csf--map-input:last-child {
padding-left: 0;
padding-right: 10px;
}
/**
* 02. 25. Field: sortable
*/
.csf-field-sortable .csf-sortable-helper {
border-left: none;
border-right: 1px solid #eee;
}
/**
* 02. 26. Field: number
*/
.csf-field-number .csf--wrap {
float: right;
}
.csf-field-number .csf--unit {
left: 4px;
right: auto;
}
/**
* 03. Taxonomy
*/
.csf-taxonomy-add-fields {
margin-right: 0;
margin-left: 30px;
}
.csf-taxonomy-add-fields .csf-field > .csf-fieldset > .csf-help {
left: -5px;
right: auto;
}
.csf-taxonomy-edit-fields {
margin-right: 0;
margin-left: 35px;
}
.csf-taxonomy-edit-fields .csf-field > .csf-fieldset > .csf-help {
right: auto;
left: -5px;
}
/**
* 04. Profile
*/
.csf-profile-options > h2 > .fa {
padding-right: 0;
padding-left: 7px;
}
.csf-profile-options > .csf-field > .csf-fieldset > .csf-help {
left: -5px;
right: auto;
}
/**
* 05. Nav Menu
*/
.csf-nav-menu-options > .csf-fields {
margin-left: 0;
margin-right: -10px;
}
.csf-nav-menu-title {
padding-left: 14px;
padding-right: 12px;
}
.csf-nav-menu-icon {
margin-right: 0;
margin-left: 5px;
}
/**
* 06. Modal
*/
.csf-modal-content .csf-field {
padding: 15px 15px 15px 30px;
}
.csf-modal-title {
padding: 0 16px 0 36px;
}
.csf-modal-close {
right: auto;
left: 0;
}
/**
* 07. Customizer
*/
.control-section .csf-field .csf-fieldset {
margin-right: 0;
}
/**
* 08. Responsive
*/
@media only screen and (max-width: 1200px) {
.csf-metabox .csf-field .csf-fieldset {
margin-left: 0;
}
}
@media only screen and (max-width: 782px) {
.csf .csf-fieldset,
.csf .csf-content {
margin-right: 0;
}
}
/**
* 09. Others
*/
.csf-field .csf--transparent-slider {
margin-left: 0;
margin-right: 2px;
}
.csf-field .csf--transparent-slider .ui-slider-handle {
margin: 0 -11px;
}
.csf-field .csf--transparent-offset {
background-position: center right;
}
.csf-field .csf--transparent-text {
right: auto;
left: 10px;
}

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><g fill="#fff"><path d="M20 10c0-5.52-4.48-10-10-10S0 4.48 0 10s4.48 10 10 10 10-4.48 10-10zM10 1.01c4.97 0 8.99 4.02 8.99 8.99s-4.02 8.99-8.99 8.99S1.01 14.97 1.01 10 5.03 1.01 10 1.01zM8.01 14.82L4.96 6.61c.49-.03 1.05-.08 1.05-.08.43-.05.38-1.01-.06-.99 0 0-1.29.1-2.13.1-.15 0-.33 0-.52-.01 1.44-2.17 3.9-3.6 6.7-3.6 2.09 0 3.99.79 5.41 2.09-.6-.08-1.45.35-1.45 1.42 0 .66.38 1.22.79 1.88.31.54.5 1.22.5 2.21 0 1.34-1.27 4.48-1.27 4.48l-2.71-7.5c.48-.03.75-.16.75-.16.43-.05.38-1.1-.05-1.08 0 0-1.3.11-2.14.11-.78 0-2.11-.11-2.11-.11-.43-.02-.48 1.06-.05 1.08l.84.08 1.12 3.04zm6.02 2.15L16.64 10s.67-1.69.39-3.81c.63 1.14.94 2.42.94 3.81 0 2.96-1.56 5.58-3.94 6.97zM2.68 6.77L6.5 17.25c-2.67-1.3-4.47-4.08-4.47-7.25 0-1.16.2-2.23.65-3.23zm7.45 4.53l2.29 6.25c-.75.27-1.57.42-2.42.42-.72 0-1.41-.11-2.06-.3z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 940 B

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><g fill="#fff"><path d="M13.11 4.36L9.87 7.6 8 5.73l3.24-3.24c.35-.34 1.05-.2 1.56.32.52.51.66 1.21.31 1.55zm-8 1.77l.91-1.12 9.01 9.01-1.19.84c-.71.71-2.63 1.16-3.82 1.16H6.14L4.9 17.26c-.59.59-1.54.59-2.12 0-.59-.58-.59-1.53 0-2.12l1.24-1.24v-3.88c0-1.13.4-3.19 1.09-3.89zm7.26 3.97l3.24-3.24c.34-.35 1.04-.21 1.55.31.52.51.66 1.21.31 1.55l-3.24 3.25z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 482 B

View File

@@ -0,0 +1,79 @@
/**
*
* -----------------------------------------------------------
*
* Codestar Framework Gutenberg Block
* A Simple and Lightweight WordPress Option Framework
*
* -----------------------------------------------------------
*
*/
( function( blocks, blockEditor, element, components ) {
if ( !window.csf_gutenberg_blocks ) { return; }
Object.values(window.csf_gutenberg_blocks).forEach( function( block ) {
var registerBlockType = blocks.registerBlockType;
var PlainText = blockEditor.PlainText;
var createElement = element.createElement;
var RawHTML = element.RawHTML;
var Button = components.Button;
registerBlockType('csf-gutenberg-block/block-'+block.hash, {
title: block.gutenberg.title,
description: block.gutenberg.description,
icon: block.gutenberg.icon || 'screenoptions',
category: block.gutenberg.category || 'widgets',
keywords: block.gutenberg.keywords,
supports: {
html: false,
className: false,
customClassName: false,
},
attributes: {
shortcode: {
string: 'string',
source: 'text',
}
},
edit: function (props) {
return (
createElement('div', {className: 'csf-shortcode-block'},
createElement(Button, {
'data-modal-id': block.modal_id,
'data-gutenberg-id': block.hash,
className: 'is-secondary csf-shortcode-button',
onClick: function () {
window.csf_gutenberg_props = props;
},
}, block.button_title ),
createElement(PlainText, {
placeholder: block.gutenberg.placeholder,
className: 'input-control blocks-shortcode__textarea',
onChange: function (value) {
props.setAttributes({
shortcode: value
});
},
value: props.attributes.shortcode
})
)
);
},
save: function (props) {
return createElement(RawHTML, {}, props.attributes.shortcode);
}
});
});
})(
window.wp.blocks,
window.wp.blockEditor,
window.wp.element,
window.wp.components
);

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,728 @@
/**
*
* ---------------------------------------------------------
* CODESTAR FRAMEWORK RTL CSS MAP
* ---------------------------------------------------------
*
* 01. Base
* 01. 01. Header
* 01. 02. Header Buttons
* 01. 03. Navigation
* 01. 04. Content
* 01. 05. Section
* 01. 06. Show All Settings
* 01. 07. Search Input
* 01. 08. Copyright
* 01. 09. Metabox
* 02. Fields
* 02. 01. Field: typography
* 02. 02. Field: checkbox, radio
* 02. 03. Field: switcher
* 02. 04. Field: upload
* 02. 05. Field: group
* 02. 06. Field: repeater
* 02. 07. Field: help
* 02. 08. Field: icon
* 02. 09. Field: gallery
* 02. 10. Field: sorter
* 02. 11. Field: tabbed
* 02. 12. Field: media
* 02. 13. Field: notice
* 02. 14. Field: border, spacing, dimensions
* 02. 15. Field: background
* 02. 16. Field: spinner
* 02. 17. Field: slider
* 02. 18. Field: button_set
* 02. 19. Field: link_color
* 02. 20. Field: color_group
* 02. 21. Field: palette
* 02. 22. Field: accordion
* 02. 23. Field: date
* 02. 24. Field: map
* 02. 25. Field: sortable
* 02. 26. Field: number
* 03. Taxonomy
* 04. Profile
* 05. Nav Menu
* 06. Modal
* 07. Customizer
* 08. Responsive
* 09. Others
*
* ---------------------------------------------------------
*
*/
/**
* 01. Base
*/
.csf-options{
margin-left: 20px;
margin-right: 0;
}
/**
* 01. 01. Header
*/
.csf-header{
h1{
float: right;
}
fieldset{
float: left;
}
}
/**
* 01. 02. Header Buttons
*/
.csf-buttons{
float: left;
direction: ltr;
}
.csf-header-left{
float: right;
}
.csf-header-right{
float: left;
}
/**
* 01. 03. Navigation
*/
.csf-nav{
float: right;
ul{
clear: right;
li{
.csf-active:after{
right: auto;
left: 0;
border-left-color: #fff;
border-right-color: transparent;
}
.csf-arrow:after{
content: "\f053";
right: auto;
left: 10px;
}
&.csf-tab-expanded .csf-arrow:after{
transform: rotate(-90deg);
}
}
ul{
li{
a{
padding-right: 25px;
padding-left: 15px;
}
}
&:before{
left: auto;
right: 15px;
}
}
}
.csf-tab-icon{
margin-left: 5px;
margin-right: 0;
}
}
.csf-nav-background{
left: auto;
right: 0;
}
/**
* 01. 04. Content
*/
.csf-content{
margin-left: 0;
margin-right: 225px;
}
/**
* 01. 05. Section
*/
.csf-sections{
float: right;
}
/**
* 01. 06. Show all options
*/
.csf-show-all .csf-content{
margin-right: 0;
overflow: hidden;
}
.csf-expand-all{
float: right;
right: auto;
left: 40px;
margin-right: 0;
margin-left: 4px;
}
/**
* 01. 07. Search Input
*/
.csf-search{
float: right;
input{
margin: 0 0 0 5px;
}
}
/**
* 01. 08. Copyright
*/
.csf-copyright{
float: right;
}
/**
* 01. 09. Metabox
*/
.csf-metabox{
margin: -6px -12px -12px -12px;
.csf-section-title{
padding: 20px;
}
}
.csf-section-title{
.csf-section-icon{
margin-left: 5px;
margin-right: 0;
}
}
/**
* 02. Fields
*/
.csf-field{
.csf-title{
float: right;
}
.csf-fieldset{
float: left;
}
}
.csf-pseudo-field{
padding: 0 0 0 5px !important;
}
/**
* 02. 01. Field: typography
*/
.csf-field-typography{
select{
margin: 0;
width: 100%;
}
.csf--blocks-inputs{
.csf--blocks{
flex-direction: row-reverse;
}
}
.csf--unit{
left: 4px;
right: auto;
}
}
/**
* 02. 02. Field: checkbox, radio
*/
.csf-field-checkbox,
.csf-field-radio{
ul ul li{
margin-left: 0;
margin-right: 8px;
&:first-child{
margin-right: 0;
}
}
.csf--inline-list li{
margin-right: 0;
margin-left: 15px;
}
.csf--text{
margin-left: 0;
margin-right: 5px;
}
}
/**
* 02. 03. Field: switcher
*/
.csf-field-switcher{
.csf--switcher{
float: right;
}
.csf--label{
float: right;
margin-left: 0;
margin-right: 5px;
}
}
/**
* 02. 04. Field: upload
*/
.csf-field-upload{
.csf--remove,
.csf--button{
margin-left: 0;
margin-right: 5px;
}
}
/**
* 02. 05. Field: group
*/
.csf-field-group{
.csf-cloneable-title{
padding: 15px 10px 15px 65px;
}
.csf-cloneable-helper{
right: auto;
left: 10px;
}
}
/**
* 02. 06. Field: repeater
*/
.csf-field-repeater{
.csf-repeater-helper{
border-left: 0;
border-right: 1px solid #eee;
}
}
/**
* 02. 07. Field: help
*/
.csf-help{
right: auto;
left: 5px;
}
/**
* 02. 08. Field: icon
*/
.csf-field-icon{
.button{
margin-right: 0;
margin-left: 5px;
}
.csf-icon-preview i{
margin-right: 0;
margin-left: 5px;
}
}
/**
* 02. 09. Field: gallery
*/
.csf-field-gallery{
ul li{
margin-right: 0;
margin-left: 5px;
}
.button{
margin-right: 0;
margin-left: 5px;
}
}
/**
* 02. 11. Field: tabbed
*/
.csf-field-tabbed{
.csf-tabbed-nav{
.csf--icon{
padding-right: 0;
padding-left: 5px;
}
a{
margin-right: 0;
margin-left: 5px;
}
}
}
/**
* 02. 12. Field: media
*/
.csf-field-media{
.button{
margin-left: 0;
margin-right: 7px;
}
.hidden + .button{
margin-right: 0;
}
}
/**
* 02. 13. Field: notice
*/
.csf-notice{
border-left: none;
border-right-style: solid;
border-right-width: 4px;
}
/**
* 02. 14. Field: border, spacing, dimensions
*/
.csf-field-dimensions,
.csf-field-spacing,
.csf-field-border{
.csf--input,
.csf-fieldset{
direction: ltr;
}
.csf--inputs,
.csf--color{
float: right;
}
.csf--color{
margin-right: 4px;
direction: rtl;
}
}
/**
* 02. 15. Field: background
*/
.csf-field-background{
.csf--block{
float: right;
}
.csf--select,
.csf--media{
padding-right: 0;
}
.csf--title{
margin-right: 0;
margin-left: 5px;
}
}
/**
* 02. 16. Field: spinner
*/
.csf-field-spinner{
.csf--spin{
float: right;
direction: ltr;
}
}
/**
* 02. 17. Field: slider
*/
.csf-field-slider{
.csf-slider-ui{
direction: ltr;
margin-right: 0;
margin-left: 15px;
}
.csf--input{
direction: ltr;
}
}
/**
* 02. 18. Field: button_set
*/
.csf-field-button_set{
.csf--button-group{
float: right;
}
}
/**
* 02. 19. Field: link_color
*/
.csf-field-link_color{
.csf--left{
float: right;
margin-right: 0;
margin-left: 10px;
}
}
/**
* 02. 20. Field: color_group
*/
.csf-field-color_group{
.csf--left{
float: right;
margin-right: 0;
margin-left: 10px;
}
}
/**
* 02. 21. Field: palette
*/
.csf-field-palette{
.csf--palette{
margin-right: 0;
margin-left: 10px;
}
}
/**
* 02. 22. Field: accordion
*/
.csf-field-accordion{
.csf--icon{
margin-right: 0;
margin-left: 2px;
}
}
/**
* 02. 23. Field: date
*/
.csf-field-date{
.csf--to {
margin-left: 0;
margin-right: 7px;
}
}
/**
* 02. 24. Field: map
*/
.csf-field-map{
.csf--map-input:last-child {
padding-left: 0;
padding-right: 10px;
}
}
/**
* 02. 25. Field: sortable
*/
.csf-field-sortable{
.csf-sortable-helper{
border-left: none;
border-right: 1px solid #eee;
}
}
/**
* 02. 26. Field: number
*/
.csf-field-number{
.csf--wrap{
float: right;
}
.csf--unit{
left: 4px;
right: auto;
}
}
/**
* 03. Taxonomy
*/
.csf-taxonomy-add-fields{
margin-right: 0;
margin-left: 30px;
.csf-field > .csf-fieldset > .csf-help{
left: -5px;
right: auto;
}
}
.csf-taxonomy-edit-fields{
margin-right: 0;
margin-left: 35px;
.csf-field > .csf-fieldset > .csf-help{
right: auto;
left: -5px;
}
}
/**
* 04. Profile
*/
.csf-profile-options{
> h2 > .fa{
padding-right: 0;
padding-left: 7px;
}
> .csf-field{
> .csf-fieldset{
> .csf-help{
left: -5px;
right: auto;
}
}
}
}
/**
* 05. Nav Menu
*/
.csf-nav-menu-options{
> .csf-fields{
margin-left: 0;
margin-right: -10px;
}
}
.csf-nav-menu-title {
padding-left: 14px;
padding-right: 12px;
}
.csf-nav-menu-icon{
margin-right: 0;
margin-left: 5px;
}
/**
* 06. Modal
*/
.csf-modal-content{
.csf-field{
padding: 15px 15px 15px 30px;
}
}
.csf-modal-title{
padding: 0 16px 0 36px;
}
.csf-modal-close{
right: auto;
left: 0;
}
/**
* 07. Customizer
*/
.control-section{
.csf-field{
.csf-fieldset{
margin-right: 0;
}
}
}
/**
* 08. Responsive
*/
@media only screen and (max-width:1200px){
.csf-metabox .csf-field .csf-fieldset{
margin-left: 0;
}
}
@media only screen and (max-width:782px){
.csf .csf-fieldset,
.csf .csf-content{
margin-right: 0;
}
}
/**
* 09. Others
*/
.csf-field{
.csf--transparent-slider{
margin-left: 0;
margin-right: 2px;
.ui-slider-handle{
margin: 0 -11px;
}
}
.csf--transparent-offset{
background-position: center right;
}
.csf--transparent-text{
right: auto;
left: 10px;
}
}

View File

@@ -0,0 +1,95 @@
/**
*
* ---------------------------------------------------------
* CODESTAR FRAMEWORK CSS MAP
* ---------------------------------------------------------
*
* 01. Base
* 01. 01. Header
* 01. 02. Sticky
* 01. 03. Header Buttons
* 01. 04. Navigation
* 01. 05. Wrapper
* 01. 06. Content
* 01. 07. Section
* 01. 08. Footer
* 01. 09. Copyright
* 01. 10. Show All Settings
* 01. 11. Search Input
* 01. 12. Metabox
* 01. 13. Comment Metabox
* 01. 14. Help Tooltip
* 02. Themes
* 02. 01. Theme Dark
* 02. 02. Theme Light
* 03. Fields
* 03. 01. Field
* 03. 02. Field: accordion
* 03. 03. Field: background
* 03. 04. Field: backup
* 03. 05. Field: border, spacing, dimensions
* 03. 06. Field: button_set
* 03. 07. Field: checkbox, radio
* 03. 08. Field: code_editor
* 03. 09. Field: color
* 03. 10. Field: color_group
* 03. 11. Field: fieldset
* 03. 12. Field: date
* 03. 13. Field: gallery
* 03. 14. Field: group
* 03. 15. Field: icon
* 03. 16. Field: image_select
* 03. 17. Field: link_color
* 03. 18. Field: map
* 03. 19. Field: media
* 03. 20. Field: palette
* 03. 21. Field: repeater
* 03. 22. Field: select
* 03. 23. Field: slider
* 03. 24. Field: sortable
* 03. 25. Field: sorter
* 03. 26. Field: spinner
* 03. 27. Field: switcher
* 03. 28. Field: tabbed
* 03. 29. Field: text
* 03. 30. Field: textarea
* 03. 31. Field: typography
* 03. 32. Field: upload
* 03. 33. Field: wp_editor
* 03. 34. Field: heading
* 03. 35. Field: subheading
* 03. 36. Field: submessage
* 03. 37. Field: notice
* 03. 38. Field: number
* 03. 39. Field: link
* 03. 40. Field: others
* 04. Widget
* 05. Customizer
* 06. Taxonomy
* 07. Profile
* 08. Nav Menu
* 09. Modal
* 09. 01. Shortcode Modal
* 09. 02. Gutenberg Modal
* 09. 03. Icon Modal
* 10. Helper
* 11. Welcome Page
* 12. Responsive
* 13. Others
*
* ---------------------------------------------------------
*
*/
@import "vendor/base";
@import "vendor/themes";
@import "vendor/fields";
@import "vendor/widget";
@import "vendor/customizer";
@import "vendor/taxonomy";
@import "vendor/navmenu";
@import "vendor/profile";
@import "vendor/modal";
@import "vendor/helper";
@import "vendor/welcome";
@import "vendor/responsive";
@import "vendor/chosen";

View File

@@ -0,0 +1,470 @@
/**
* 01. Base
*/
.csf{
position: relative;
label{
padding: 0;
margin: 0;
display: inline-block;
}
}
.csf-ab-icon{
top: 2px;
}
#screen-meta-links + .csf-options{
margin-top: 40px;
}
.csf-options{
margin-top: 20px;
margin-right: 20px;
}
/**
* 01. 01. Header
*/
.csf-header{
position: relative;
}
.csf-header-inner{
padding: 25px;
transition: box-shadow .3s ease;
h1{
float: left;
font-size: 1.5em;
line-height: 26px;
font-weight: 400;
margin: 0;
small{
font-size: 11px;
font-weight: 500;
}
}
}
/**
* 01. 02. Sticky
*/
.csf-sticky{
.csf-header-inner{
position: fixed;
z-index: 99;
top: 32px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
}
/**
* 01. 03. Header Buttons
*/
.csf-buttons{
float: right;
.button{
margin: 0 2px;
line-height: 26px;
&:focus{
outline: none !important;
box-shadow: none !important;
}
}
.csf-save{
min-width: 72px;
}
}
.csf-header-left{
float: left;
}
.csf-header-right{
float: right;
}
/**
* 01. 04. Navigation
*/
.csf-nav{
display: block;
position: relative;
z-index: 10;
float: left;
ul{
clear: left;
margin: 0;
list-style-type: none;
li{
margin-bottom: 0;
a{
font-size: 13px;
position: relative;
display: block;
padding: 14px 12px;
text-decoration: none;
transition-property: color, background;
transition-duration: 0.2s;
transition-timing-function: ease;
&:focus{
outline: none;
box-shadow: none;
}
}
.csf-arrow:after{
content: "\f054";
display: inline-block;
font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome";
font-weight: 900;
font-size: 9px;
line-height: 1;
position: absolute;
right: 10px;
top: 50%;
margin-top: -4px;
}
&.csf-tab-expanded{
.csf-arrow:after{
transform: rotate(90deg);
}
ul{
display: block;
}
}
}
ul{
display: none;
position: relative;
li{
a{
font-size: 12px;
padding: 12px 14px 12px 24px;
}
}
}
}
.csf-tab-icon{
width: 20px;
margin-right: 5px;
font-size: 13px;
text-align: center;
}
.csf-label-error{
margin-left: 4px;
vertical-align: top;
}
}
.csf-nav-normal{
width: 225px;
+ .csf-content{
margin-left: 225px;
}
}
.csf-nav-inline{
width: 100%;
ul{
li{
display: inline-block;
vertical-align: top;
}
}
}
.csf-nav-background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
z-index: 9;
width: 225px;
}
/**
* 01. 05. Wrapper
*/
.csf-wrapper{
position: relative;
}
/**
* 01. 06. Content
*/
.csf-content{
position: relative;
background-color: #fff;
}
/**
* 01. 07. Section
*/
.csf-sections{
float: left;
width: 100%;
}
.csf-section-title{
display: none;
padding: 20px 30px;
background-color: #f5f5f5;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
h3{
margin: 0;
padding: 0 ;
font-size: 13px;
font-weight: bold;
text-transform: uppercase;
}
.csf-section-icon{
margin-right: 5px;
}
}
/**
* 01. 08. Footer
*/
.csf-footer{
padding: 20px;
font-size: 11px;
}
/**
* 01. 09. Copyright
*/
.csf-copyright{
float: left;
margin-top: 5px;
}
/**
* 01. 10. Show All Settings
*/
.csf-search-all,
.csf-show-all{
.csf-nav-background,
.csf-nav{
display: none;
}
.csf-content{
margin-left: 0;
}
.csf-section-title,
.csf-section{
display: block !important;
}
}
.csf-search-all{
.csf-section-title{
display: none !important;
}
}
//
// Expand
//
.csf-expand-all{
float: left;
padding: 0 8px;
margin-right: 4px;
z-index: 1;
font-size: 13px;
line-height: 30px;
cursor: pointer;
user-select: none;
border-radius: 2px;
transition: all .2s;
span{
font-size: 11px;
vertical-align: middle;
}
}
/**
* 01. 11. Search Input
*/
.csf-search{
float: left;
input{
margin: 0 2px 0 0;
border: none;
font-size: 12px;
line-height: 30px;
min-height: 30px;
text-align: inherit;
padding: 0 10px;
border-radius: 2px;
box-shadow: none;
&:focus{
box-shadow: none;
}
}
}
.csf-saving{
.csf-buttons,
.csf-content{
cursor: default;
pointer-events: none;
opacity: 0.5;
}
}
/**
* 01. 12. Metabox
*/
.csf-metabox{
margin: -6px -12px -12px -12px;
.csf-field{
padding: 20px;
}
.csf-section-title{
padding: 20px;
}
}
.block-editor-page{
.csf-metabox{
margin: -6px -14px -14px -14px;
}
}
.block-editor-editor-skeleton__content{
.csf-metabox{
border-left: 1px solid #e2e4e7;
border-right: 1px solid #e2e4e7;
}
}
.csf-sections-reset{
float: left;
width: 100%;
text-align: right;
border-top: 1px solid #eee;
.csf-button-cancel,
input{
display: none;
}
label{
padding: 10px;
}
span{
-webkit-user-select: none;
user-select: none;
}
input:checked ~ .csf-button-reset{
display: none;
}
input:checked ~ .csf-button-cancel{
display: inline-block;
}
}
#side-sortables{
.csf-section-title{
padding: 12px;
}
.csf-field{
padding: 10px 15px;
.csf-title{
float: none;
width: 100%;
margin-bottom: 6px;
}
.csf-fieldset{
float: none;
width: 100%;
}
}
.csf-field-text input{
width: 100%;
}
.csf-notice{
padding: 10px 15px;
}
}
/**
* 01. 13. Comment Metabox
*/
.csf-comment-metabox{
margin: -6px -12px -12px -12px;
.csf-field{
padding: 20px;
}
.csf-section-title{
padding: 20px;
}
}
/**
* 01. 14. Help Tooltip
*/
.csf-tooltip{
position: absolute;
z-index: 5000001;
font-size: 12px;
line-height: 1.4;
text-align: center;
text-decoration: none;
padding: 6px 12px;
max-width: 200px;
color: #fff;
background-color: #000;
background-color: rgba(black, 0.85);
border-radius: 4px;
}

View File

@@ -0,0 +1,405 @@
/**
* Chosen JS Styles
*/
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
user-select: none;
}
.chosen-container * {
box-sizing: border-box;
}
.chosen-container .chosen-drop {
position: absolute;
top: 100%;
z-index: 1010;
width: 100%;
border: 1px solid #aaa;
border-top: 0;
background: #fff;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
clip: rect(0, 0, 0, 0);
clip-path: inset(100% 100%);
}
.chosen-container.chosen-with-drop .chosen-drop {
clip: auto;
clip-path: none;
}
.chosen-container a {
cursor: pointer;
}
.chosen-container .search-choice .group-name, .chosen-container .chosen-single .group-name {
margin-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: normal;
color: #999999;
}
.chosen-container .search-choice .group-name:after, .chosen-container .chosen-single .group-name:after {
content: ":";
padding-left: 2px;
vertical-align: top;
}
.chosen-container-single .chosen-single {
position: relative;
display: block;
overflow: hidden;
padding: 0 0 0 8px;
height: 25px;
border: 1px solid #aaa;
border-radius: 5px;
background-color: #fff;
background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
background-clip: padding-box;
box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(0, 0, 0, 0.1);
color: #444;
text-decoration: none;
white-space: nowrap;
line-height: 24px;
}
.chosen-container-single .chosen-default {
color: #999;
}
.chosen-container-single .chosen-single span {
display: block;
overflow: hidden;
margin-right: 26px;
text-overflow: ellipsis;
white-space: nowrap;
}
.chosen-container-single .chosen-single-with-deselect span {
margin-right: 38px;
}
.chosen-container-single .chosen-single abbr {
position: absolute;
top: 6px;
right: 26px;
display: block;
width: 12px;
height: 12px;
font-size: 1px;
}
.chosen-container-single .chosen-single div {
position: absolute;
top: 0;
right: 0;
display: block;
width: 18px;
height: 100%;
}
.chosen-container-single .chosen-single div b {
display: block;
width: 100%;
height: 100%;
}
.chosen-container-single .chosen-search {
position: relative;
z-index: 1010;
margin: 0;
padding: 3px 4px;
white-space: nowrap;
}
.chosen-container-single .chosen-search input[type="text"] {
margin: 1px 0;
padding: 4px 20px 4px 5px;
width: 100%;
height: auto;
outline: 0;
border: 1px solid #aaa;
font-size: 1em;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
}
.chosen-container-single .chosen-drop {
margin-top: -1px;
border-radius: 0 0 4px 4px;
background-clip: padding-box;
}
.chosen-container-single.chosen-container-single-nosearch .chosen-search {
position: absolute;
clip: rect(0, 0, 0, 0);
clip-path: inset(100% 100%);
}
.chosen-container .chosen-results {
color: #444;
position: relative;
overflow-x: hidden;
overflow-y: auto;
margin: 0 4px 4px 0;
padding: 0 0 0 4px;
max-height: 240px;
-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
display: none;
margin: 0;
padding: 5px 6px;
list-style: none;
line-height: 15px;
word-wrap: break-word;
-webkit-touch-callout: none;
}
.chosen-container .chosen-results li.active-result {
display: list-item;
cursor: pointer;
}
.chosen-container .chosen-results li.disabled-result {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container .chosen-results li.highlighted {
background-color: #3875d7;
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
color: #fff;
}
.chosen-container .chosen-results li.no-results {
color: #777;
display: list-item;
background: #f4f4f4;
}
.chosen-container .chosen-results li.group-result {
display: list-item;
font-weight: bold;
cursor: default;
}
.chosen-container .chosen-results li.group-option {
padding-left: 15px;
}
.chosen-container .chosen-results li em {
font-style: normal;
text-decoration: underline;
}
.chosen-container-multi .chosen-choices {
position: relative;
overflow: hidden;
margin: 0;
padding: 0 5px;
width: 100%;
height: auto;
border: 1px solid #aaa;
background-color: #fff;
background-image: linear-gradient(#eee 1%, #fff 15%);
cursor: text;
}
.chosen-container-multi .chosen-choices li {
float: left;
list-style: none;
}
.chosen-container-multi .chosen-choices li.search-field {
margin: 0;
padding: 0;
white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
margin: 1px 0;
padding: 0;
outline: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none;
color: #999;
font-size: 100%;
font-family: sans-serif;
line-height: normal;
border-radius: 0;
width: 25px;
height: 25px;
min-height: 25px;
}
.chosen-container-multi .chosen-choices li.search-choice {
position: relative;
margin: 3px 5px 3px 0;
padding: 3px 20px 3px 6px;
border: 1px solid #aaa;
max-width: 100%;
border-radius: 3px;
background-color: #eeeeee;
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
background-size: 100% 19px;
background-repeat: repeat-x;
background-clip: padding-box;
box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
color: #333;
line-height: 13px;
cursor: default;
}
.chosen-container-multi .chosen-choices li.search-choice span {
word-wrap: break-word;
white-space: nowrap;
}
.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
position: absolute;
top: 0;
right: 0;
display: block;
width: 12px;
height: 12px;
font-size: 1px;
}
.chosen-container-multi .chosen-choices li.search-choice-disabled {
padding-right: 5px;
border: 1px solid #ccc;
background-color: #e4e4e4;
background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
color: #666;
}
.chosen-container-multi .chosen-choices li.search-choice-focus {
background: #d4d4d4;
}
.chosen-container-multi .chosen-results {
margin: 0;
padding: 0;
}
.chosen-container-multi .chosen-drop .result-selected {
display: list-item;
color: #ccc;
cursor: default;
}
.chosen-container-active .chosen-single {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active.chosen-with-drop .chosen-single {
border: 1px solid #aaa;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
background-image: linear-gradient(#eee 20%, #fff 80%);
box-shadow: 0 1px 0 #fff inset;
}
.chosen-container-active.chosen-with-drop .chosen-single div {
border-left: none;
background: transparent;
}
.chosen-container-active .chosen-choices {
border: 1px solid #5897fb;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.chosen-container-active .chosen-choices li.search-field input[type="text"] {
color: #222 !important;
}
.chosen-disabled {
opacity: 0.5 !important;
cursor: default;
}
.chosen-disabled .chosen-single {
cursor: default;
}
.chosen-disabled .chosen-choices .search-choice .search-choice-close {
cursor: default;
}
.chosen-rtl {
text-align: right;
}
.chosen-rtl .chosen-single {
overflow: visible;
padding: 0 8px 0 0;
}
.chosen-rtl .chosen-single span {
margin-right: 0;
margin-left: 26px;
direction: rtl;
}
.chosen-rtl .chosen-single-with-deselect span {
margin-left: 38px;
}
.chosen-rtl .chosen-single div {
right: auto;
left: 3px;
}
.chosen-rtl .chosen-single abbr {
right: auto;
left: 26px;
}
.chosen-rtl .chosen-choices li {
float: right;
}
.chosen-rtl .chosen-choices li.search-field input[type="text"] {
direction: rtl;
}
.chosen-rtl .chosen-choices li.search-choice {
margin: 3px 5px 3px 0;
padding: 3px 5px 3px 19px;
}
.chosen-rtl .chosen-choices li.search-choice .search-choice-close {
right: auto;
left: 4px;
}
.chosen-rtl.chosen-container-single .chosen-results {
margin: 0 0 4px 4px;
padding: 0 4px 0 0;
}
.chosen-rtl .chosen-results li.group-option {
padding-right: 15px;
padding-left: 0;
}
.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div {
border-right: none;
}
.chosen-rtl .chosen-search input[type="text"] {
padding: 4px 5px 4px 20px;
direction: rtl;
}

View File

@@ -0,0 +1,179 @@
/**
* 05. Widget
*/
.control-section{
.csf-field{
padding: 0;
.csf-title{
float: none;
width: 100%;
margin-bottom: 6px;
h4{
display: block;
font-size: 13px;
line-height: 1;
font-weight: 600;
color: inherit;
}
}
.csf-fieldset{
float: none;
width: 100%;
}
}
.csf-help{
top: -5px;
right: -5px;
}
.csf-field-select select{
width: 100%;
}
.csf-field-heading{
color: inherit;
font-size: 14px;
line-height: 1em;
margin-right: -15px;
margin-left: -15px;
padding: 15px;
}
.csf-field-subheading{
color: inherit;
font-size: 11px;
margin-right: -15px;
margin-left: -15px;
padding: 10px 15px;
}
.csf-subtitle-text{
margin-top: 4px;
font-size: 12px;
}
.csf-field-submessage .csf-submessage{
margin-right: -15px;
margin-left: -15px;
padding: 15px;
}
.csf-fieldset{
.csf-field-submessage .csf-submessage,
.csf-field-heading,
.csf-field-subheading{
margin-left: 0;
margin-right: 0;
}
}
.csf-field-date{
.csf--to{
margin-left: 0;
}
}
.csf-field-sorter{
ul li{
padding: 5px;
}
.csf-modules{
float: none;
width: 100%;
}
.csf-modules:first-child{
padding-right: 0;
padding-bottom: 15px;
}
}
.csf-field-background{
.csf--background-attributes{
flex-direction: column;
}
}
.csf-field-spacing{
input{
width: 90px;
}
}
.csf-field-border{
.csf--input{
flex: 1 50%;
}
input,
select{
width: 100%;
}
}
.csf-field-spinner{
input{
width: 50px;
}
}
.csf-field-number{
.csf--wrap{
width: 100%;
}
}
.csf-field-backup{
.csf-export-data{
display: none;
}
}
.csf-field-fieldset{
.csf-fieldset-content{
border-color: #e5e5e5;
}
}
.csf-tabbed-content,
.csf-sortable-content,
.csf-repeater-content,
.csf-fieldset-content,
.csf-cloneable-content,
.csf-accordion-content{
> .csf-field{
padding: 10px;
.csf-title{
margin-bottom: 5px;
}
h4{
font-size: 12px;
}
}
}
.csf-depend-hidden.csf-depend-on{
display: none !important;
}
.csf-depend-visible.csf-depend-on{
border-top: 0 !important;
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,152 @@
/**
* 10. Helper
*/
.csf-subtitle-text{
margin-top: 6px;
font-weight: 400;
color: #999;
}
.csf-desc-text{
clear: both;
float: left;
width: 100%;
margin-top: 6px;
font-weight: 400;
color: #999;
}
.csf-error-text{
margin-top: 6px;
color: #d02c21;
}
.csf-before-text{
margin-bottom: 6px;
}
.csf-after-text{
margin-top: 6px;
}
.csf-metabox-hide{
display: none !important;
}
.csf-metabox-show{
display: block !important;
}
.csf-depend-hidden.csf-depend-on{
display: none;
}
.csf-depend-visible.csf-depend-on{
display: block;
opacity: 0.75;
filter: grayscale(1);
user-select: none;
border-top: 1px solid #eee;
.clear:before{
content: "";
left: 0;
top: 0;
right: 0;
bottom: 0;
position: absolute;
background-color: #eee;
opacity: 0.25;
z-index: 10;
}
}
.csf-warning-primary{
color: #fff !important;
border-color: #dc3545 !important;
background: #dc3545 !important;
&:hover,
&:focus{
border-color: #bd2130 !important;
background: #bd2130 !important;
}
&:focus{
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #bd2130 !important;
}
&:active{
border-color: #bd2130 !important;
background: #bd2130 !important;
}
}
.csf-form-result{
display: none;
float: left;
padding: 0 8px;
margin-right: 4px;
font-size: 11px;
line-height: 30px;
user-select: none;
border-radius: 2px;
}
.csf-form-show{
display: block;
}
.csf-form-success{
color: #fff;
background-color: #46b450;
}
.csf-form-warning{
color: #8a6d3b;
background-color: #faebcc;
}
.csf-label-error{
position: relative;
top: -2px;
display: inline-block;
font-size: 10px;
line-height: 10px;
height: 10px;
width: 10px;
padding: 1px;
font-style: normal;
text-align: center;
color: #fff;
vertical-align: middle;
background-color: #e10000;
border-radius: 2px;
}
.csf-no-option{
padding: 30px;
}
.csf-input-number{
-moz-appearance:textfield;
}
.csf-input-number::-webkit-inner-spin-button,
.csf-input-number::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
.csf-fa5-shims{
.csf{
.fas,
.far,
.fab{
font-family: "FontAwesome";
font-style: normal;
}
}
}

View File

@@ -0,0 +1,330 @@
/**
* 09. Modal
*/
.csf-modal{
position: fixed;
z-index: 100101;
top: 0;
left: 0;
width: 100%;
height: 100%;
&.hidden{
display: none;
}
}
.csf-modal-icon{
z-index: 100102;
}
.csf-modal-table{
display: table;
width: 100%;
height: 100%;
}
.csf-modal-table-cell{
display: table-cell;
vertical-align: middle;
margin: 100px 0;
}
.csf-modal-inner{
position: relative;
z-index: 10;
width: 760px;
height: 750px;
margin: 0 auto;
background-color: #fff;
}
.csf-modal-content{
position: relative;
overflow: hidden;
overflow-y: auto;
height: 595px;
.csf-shortcode-button{
display: none;
}
.csf-field{
padding: 15px 30px 15px 15px;
}
a{
&:active,
&:focus{
outline: none;
box-shadow: none;
}
}
h4{
font-size: 13px;
small{
font-style: italic;
font-weight: 400;
color: #aaa;
}
}
}
.csf-modal-title{
position: relative;
background-color: #fcfcfc;
border-bottom: 1px solid #ddd;
height: 36px;
font-size: 16px;
font-weight: 600;
line-height: 36px;
margin: 0;
padding: 0 36px 0 16px;
}
.csf-modal-header{
width: 100%;
padding: 14px 0;
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
select{
display: block;
width: 250px;
margin: 0 auto;
font-size: 13px;
line-height: 1;
height: 30px;
min-height: 30px;
background-color: #fff;
}
}
.csf-modal-close{
color: #666;
padding: 0;
position: absolute;
top: 0;
right: 0;
width: 36px;
height: 36px;
text-align: center;
background: none;
border: none;
cursor: pointer;
&:before{
font: normal 20px/36px dashicons;
content: "\f158";
vertical-align: top;
width: 36px;
height: 36px;
}
&:hover{
opacity: 0.5;
}
}
.csf-modal-insert-wrapper{
text-align: center;
width: 100%;
padding: 15px 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
}
.csf-modal-overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
}
/**
* 09. 01. Shortcode Modal
*/
.csf--repeatable{
padding: 15px 15px 0 15px;
}
.csf--repeat-button-block{
text-align: center;
padding-bottom: 15px;
}
.csf--repeat-shortcode{
position: relative;
margin-bottom: 15px;
border: 1px dashed #ddd;
&:first-child{
.csf-repeat-remove{
display: none;
}
}
.csf-repeat-remove{
position: absolute;
right: 10px;
top: 10px;
z-index: 10;
cursor: pointer;
display: inline-block;
font-size: 11px;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
border-radius: 2px;
color: #fff;
background-color: #e14d43;
opacity: 0.5;
&:hover{
opacity: 0.5;
}
}
}
.csf-shortcode-single{
.csf-modal-inner{
height: 750px;
}
.csf-modal-content{
height: 652px;
}
}
.elementor-editor-active{
.csf-shortcode-button{
margin-left: 5px;
}
.csf-modal .hidden{
display: none !important;
}
}
/**
* 09. 02. Gutenberg Modal
*/
.csf-shortcode-block{
text-align: center;
padding: 14px;
font-size: 13px;
background-color: #f5f5f5;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
.csf-shortcode-block .components-button{
margin-bottom: 10px;
}
/**
* 09. 03. Icon Modal
*/
.csf-modal-icon{
.csf-icon-title{
padding: 15px 0;
margin: 4px;
font-size: 14px;
font-weight: bold;
text-align: center;
border: 1px solid #eee;
background-color: #f7f7f7;
}
.csf-modal-header{
text-align: center;
}
.csf-icon-search{
width: 50%;
height: 40px;
line-height: 40px;
}
i{
cursor: pointer;
display: inline-block;
margin: 4px;
width: 35px;
height: 35px;
line-height: 35px;
font-size: 16px;
color: #555;
text-align: center;
border: 1px solid #ccc;
background-color: #f7f7f7;
border-radius: 2px;
box-shadow: 1px 1px 0 rgba(0,0,0,0.05);
&:hover {
color: #fff;
border-color: #222;
background-color: #222;
}
}
.csf-modal-content{
padding: 10px;
height: 618px;
}
.csf-error-text{
padding: 10px;
}
}
.csf-modal-loading{
display: none;
position: absolute;
left: 15px;
top: 15px;
}
.csf-loading{
position: relative;
width: 20px;
height: 20px;
background: #ccc;
border-radius: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.07);
&:after{
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
content: "";
margin-top: -2px;
margin-left: -2px;
background-color: white;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: csfLoader;
border-radius: 4px;
}
}
@keyframes csfLoader {
0% {
transform: rotate(0deg) translateX(-6px) rotate(0deg);
}
100% {
transform: rotate(360deg) translateX(-6px) rotate(-360deg);
}
}

View File

@@ -0,0 +1,60 @@
/**
* 08. Nav Menu
*/
.csf-nav-menu-options{
clear: both;
float: left;
width: 100%;
> .csf-fields{
margin-left: -10px;
margin-top: 10px;
margin-bottom: 10px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
> .csf-field{
padding: 12px 14px 12px 12px;
.csf-title{
float: none;
width: 100%;
margin-bottom: 5px;
}
.csf-fieldset{
float: none;
width: 100%;
}
}
}
.csf-field-text input{
width: 100%;
}
.csf-field-notice .csf-notice{
padding: 15px;
}
}
.csf-nav-menu-title{
padding: 12px 14px 12px 12px;
background-color: #f5f5f5;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
&:first-child{
border-top: 0;
}
h4{
margin: 0;
padding: 0;
color: #23282d;
}
}
.csf-nav-menu-icon{
margin-right: 5px;
}

View File

@@ -0,0 +1,67 @@
/**
* 06. Profile
*/
.csf-profile-options{
> h2 > .fa {
padding-right: 7px;
}
> .csf-field{
max-width: 750px;
padding: 15px 0;
border-top: none !important;
> .csf-title{
width: 200px;
h4{
font-size: 14px;
font-weight: 600;
line-height: 1.3;
display: inline-block;
vertical-align: middle;
}
}
> .csf-fieldset{
width: calc(100% - 220px);
> .csf-help{
top: -15px;
right: -5px;
}
}
}
> .csf-field-heading{
font-size: 1.1em;
}
> .csf-field-subheading{
font-size: 12px;
}
> .csf-field-subheading,
> .csf-field-heading{
margin: 10px 0;
padding: 15px !important;
border: 1px solid #ddd;
}
> .csf-field-submessage{
margin: 20px 0;
.csf-submessage{
padding: 10px;
border-left-width: 1px;
border-left-style: solid;
border-right-width: 1px;
border-right-style: solid;
}
}
> .csf-field-notice{
background-color: transparent;
}
}

View File

@@ -0,0 +1,166 @@
/**
* 12. Responsive
*/
@media only screen and (max-width:1200px){
.csf-metabox{
.csf-field{
.csf-title{
float: none;
width: 100%;
margin-bottom: 10px;
}
.csf-fieldset{
float: none;
width: 100%;
}
}
}
}
@media only screen and (max-width:782px){
.csf-header-inner{
text-align: center;
h1{
width: 100%;
margin-bottom: 10px;
}
}
.csf-form-result{
float: none;
margin-right: 0;
margin-bottom: 10px;
}
.csf-search,
.csf-header-right,
.csf-header-left{
width: 100%;
}
.csf-search{
text-align: center;
margin-bottom: 15px;
}
.csf-footer{
text-align: center;
}
.csf-buttons{
float: none;
}
.csf-copyright{
float: none;
margin-top: 10px;
}
.csf-nav,
.csf-expand-all,
.csf-reset-section,
.csf-nav-background{
display: none !important;
}
.csf-nav-normal + .csf-content{
margin-left: 0;
}
.csf-section-title,
.csf-section{
display: block !important;
}
.csf-field{
.csf-title{
float: none;
width: 100%;
margin-bottom: 10px;
}
.csf-fieldset{
float: none;
width: 100%;
}
}
.csf-field-color{
.button.wp-picker-clear{
padding: 0 8px;
line-height: 2.14285714;
min-height: 32px;
}
}
.csf-modal-inner{
width: 350px;
height: 400px;
}
.csf-modal-content{
height: 237px;
}
.csf-icon-dialog{
.csf-modal-inner{
width: 305px;
height: 380px;
}
.csf-modal-content{
height: 267px;
}
}
.csf-modal-icon{
.csf-modal-inner{
width: 330px;
height: 385px;
}
.csf-modal-content{
height: 252px;
}
}
.csf-profile-options,
.csf-taxonomy-edit-fields{
> .csf-field{
> .csf-title{
float: none;
width: 100%;
margin-bottom: 10px;
}
> .csf-fieldset{
float: none;
width: 100%;
}
}
}
.csf-nav-menu-options{
> .csf-fields{
margin-left: -10px;
margin-right: -10px;
> .csf-field{
padding: 10px;
}
}
}
}

View File

@@ -0,0 +1,114 @@
/**
* 06. Taxonomy
*/
.csf-taxonomy{
max-width: 95%;
> .csf-field{
border-top: none !important;
}
> .csf-field-heading{
font-size: 1.1em;
padding: 20px !important;
border: 1px solid #ddd;
}
> .csf-field-subheading{
font-size: 12px;
padding: 15px !important;
border: 1px solid #ddd;
}
> .csf-field-submessage{
.csf-submessage{
padding: 15px;
border-left-width: 1px;
border-left-style: solid;
border-right-width: 1px;
border-right-style: solid;
}
}
> .csf-field-notice{
background-color: transparent;
}
.csf-section-title{
display: block;
padding: 15px ;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
box-shadow: 0 1px 1px rgba(0,0,0,0.04);
}
}
.csf-taxonomy-add-fields{
> .csf-field{
padding: 8px 0;
> .csf-title{
float: none;
width: 100%;
padding: 2px 2px 4px 0;
h4{
font-size: 12px;
font-weight: normal;
}
}
> .csf-fieldset{
float: none;
width: 100%;
> .csf-help{
right: -5px;
}
}
}
+ p.submit{
margin-top: 0;
}
}
.csf-taxonomy-edit-fields{
> .csf-field{
padding: 20px 0;
> .csf-title{
width: 200px;
h4{
font-size: 14px;
font-weight: 600;
line-height: 1.3;
display: inline-block;
vertical-align: middle;
}
}
> .csf-fieldset{
width: calc(100% - 220px);
> .csf-help{
top: -5px;
right: -5px;
}
}
}
> .csf-field-submessage{
margin: 20px 0;
}
> .csf-field-subheading,
> .csf-field-heading{
margin: 20px 0;
border: 1px solid #ddd;
}
}

View File

@@ -0,0 +1,303 @@
/**
* 02. Themes
*/
/**
* 02. 01. Theme Dark
*/
.csf-theme-dark{
.csf-header-inner{
background-color: #050505;
h1{
color: #fff;
small{
color: #555;
}
}
}
.csf-expand-all{
color: #999;
background-color: #222;
&:hover{
color: #fff;
background-color: #333;
}
}
.csf-search{
input{
color: #fff;
background-color: #222;
}
&:focus{
background-color: #444;
}
&::-webkit-input-placeholder{
color: #666;
}
}
.csf-nav{
ul{
li{
a{
color: #999;
border-color: #2f2f2f;
background-color: #222;
&:hover{
color: #fff;
}
}
.csf-active{
color: #fff;
background-color: #111;
}
}
ul{
li{
a{
border-color: #2f2f2f;
background-color: #191919;
}
.csf-active{
background-color: #101010;
}
}
&:before{
background-color: rgba(#222, 0.75);
}
}
}
> ul > li:last-child > a{
border: none;
}
}
.csf-nav-normal{
ul{
li{
a{
border-bottom-width: 1px;
border-bottom-style: solid;
}
.csf-active:after{
content: " ";
position: absolute;
right: 0;
top: 50%;
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-right-color: #fff;
border-width: 4px;
margin-top: -4px;
}
}
}
}
.csf-nav-inline{
background-color: #222;
ul{
li{
a{
text-align: center;
border-right-width: 1px;
border-right-style: solid;
}
.csf-active:after{
content: " ";
position: absolute;
left: 50%;
bottom: 0;
height: 0;
width: 0;
pointer-events: none;
border: solid transparent;
border-bottom-color: #fff;
border-width: 4px;
margin-left: -4px;
}
}
}
}
.csf-nav-background{
background-color: #222;
}
.csf-footer{
color: #555;
background-color: #050505;
}
}
/**
* 02. 02. Theme Light
*/
.csf-theme-light{
.csf-container{
border: 1px solid #ccd0d4;
box-shadow: 0 0 15 rgba(0,0,0,0.04);
}
.csf-header-inner{
border-bottom: 1px solid #ccd0d4;
background-color: #f5f5f5;
background: linear-gradient(#fefefe, #f5f5f5);
h1{
small{
color: #999;
}
}
}
.csf-expand-all{
color: #999;
background-color: #eee;
&:hover{
color: #555;
}
}
.csf-search{
input{
color: #555;
background-color: #eee;
&::-webkit-input-placeholder{
color: #999;
}
}
}
.csf-nav{
ul{
li{
a{
font-weight: 500;
color: #444;
background-color: #f5f5f5;
&:hover{
color: #111;
background-color: #fff;
}
}
.csf-active{
color: #111;
background-color: #fff;
}
}
ul{
li{
a{
background-color: #eee;
}
}
}
}
}
.csf-nav-normal{
> ul{
margin-right: -1px;
margin-bottom: -1px;
li{
a{
border-bottom: 1px solid #ccd0d4;
border-right: 1px solid #ccd0d4;
}
.csf-active{
border-right-color: #fff;
}
}
}
}
.csf-nav-inline{
background-color: #f5f5f5;
border-bottom: 1px solid #ccd0d4;
> ul{
margin-bottom: -1px;
li{
a{
text-align: center;
border-right: 1px solid #ccd0d4;
border-bottom: 1px solid #ccd0d4;
}
.csf-active{
border-bottom-color: #fff;
}
}
ul{
display: none !important
}
}
.csf-arrow:after{
display: none;
}
}
.csf-nav-background{
background-color: #f5f5f5;
border-right: 1px solid #ccd0d4;
}
.csf-footer{
color: #555;
border-top: 1px solid #ccd0d4;
background-color: #f5f5f5;
background: linear-gradient(#fafafa, #f5f5f5);
}
}

View File

@@ -0,0 +1,346 @@
/**
* 11. Welcome Page
*/
.csf-welcome-wrap{
position: relative;
margin: 25px 40px 0 20px;
font-size: 15px;
max-width: 1200px;
p{
font-size: 14px;
line-height: 1.5;
}
h1{
margin: 0.2em 200px 0 0;
padding: 0;
color: #32373c;
line-height: 1.2em;
font-size: 2.8em;
font-weight: 400;
}
.csf-logo{
position: absolute;
overflow: hidden;
top: 0;
right: 0;
height: 160px;
width: 140px;
background-image: linear-gradient( 45deg, #2d67cb, #ad19f3);
box-shadow: 0 1px 4px rgba(0,0,0,0.25), inset 0 0 0 4px rgba(0,0,0,0.25);
.csf--effects i{
position: absolute;
width: 200px;
height: 100px;
background-color: rgba(0,0,0,0.15);
transform: rotate(-45deg);
}
.csf--effects i:nth-child(1){
bottom: -20px;
right: -70px;
}
.csf--effects i:nth-child(2){
bottom: -35px;
right: -80px;
}
.csf--effects i:nth-child(3){
bottom: -50px;
right: -90px;
}
.csf--effects i:nth-child(4){
bottom: -65px;
right: -100px;
}
.csf--wp-logos{
position: relative;
padding-top: 25px;
text-align: center;
}
.csf--wp-logo{
position: absolute;
left: 20px;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/wp-logo.svg);
}
.csf--wp-plugin-logo{
display: inline-block;
width: 50px;
height: 50px;
border: 3px solid #fff;
background-size: 40px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/wp-plugin-logo.svg);
border-radius: 100%;
vertical-align: middle;
}
.csf--text{
position: absolute;
left: 0;
right: 0;
top: 90px;
color: #fff;
font-size: 13px;
line-height: 1.2em;
font-weight: 600;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
}
.csf--version{
top: auto;
left: auto;
right: 8px;
bottom: 4px;
font-size: 11px;
text-transform: lowercase;
}
}
.csf-about-text{
font-weight: 400;
line-height: 1.6em;
font-size: 19px;
margin: 1em 200px 1em 0;
color: #555d66;
}
.csf-demo-button{
margin: 1em 200px 2em 0;
}
.nav-tab-wrapper{
margin-bottom: 20px;
}
ul{
list-style-type: disc;
padding-left: 15px;
}
.csf--col{
float: left;
padding-right: 20px;
box-sizing: border-box;
}
.csf--col-2{
width: 50%;
}
.csf--col-3{
width: 33.333%;
}
.csf--col-4{
width: 25%;
}
.csf--col-5{
width: 20%;
}
.csf--col-last{
padding-right: 0;
}
.csf--col-upgrade{
padding: 10px 0;
text-align: center;
border-top: 1px solid #e5e5e5;
}
}
.csf--table-compare{
thead,
tfoot{
td{
text-align: center;
}
}
td{
font-size: 14px;
text-align: center;
vertical-align: middle;
padding: 10px;
}
td:first-child{
text-align: left;
}
tfoot{
td{
padding: 15px 0;
}
}
.fa{
font-size: 18px;
}
.fa-check-circle{
color: #46b450;
}
.fa-times-circle{
color: #dc3232;
}
}
.csf-welcome-cols{
clear: both;
margin: 20px 0;
background-color: #fff;
padding: 0 0;
border-radius: 2px;
border: 1px solid #e5e5e5;
.csf--col{
width: 33.333%;
float: left;
padding: 20px;
text-align: center;
box-sizing: border-box;
min-height: 200px;
border-right: 1px solid #e5e5e5;
}
.csf--left,
.csf--block{
float: left;
width: 20%;
padding: 0 30px;
text-align: center;
box-sizing: border-box;
}
.csf--block{
width: 80%;
}
.csf--col-first{
border-bottom: 1px solid #e5e5e5;
}
.csf--last{
border-right: none;
}
.csf--space{
height: 20px;
}
.csf--icon{
display: inline-block;
font-size: 20px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin-bottom: 10px;
color: #fff;
background-color: #555;
border-radius: 30px;
}
.csf--active{
background-color: #5cb85c;
}
.csf--deactive{
background-color: #e14d43;
}
.csf--title{
font-weight: bold;
display: block;
}
p:last-child{
margin-bottom: 0;
}
}
.csf-features-cols{
.csf--key-features{
width: 30%;
}
.csf--available-fields{
width: 70%;
}
}
.csf-code-block{
margin: 20px 0;
padding: 5px 20px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,0.15);
pre{
font-size: 13px;
color: #0073aa;
span{
color: #999;
}
}
}
.csf--table-fields{
td{
font-size: 14px;
}
}
.csf--upgrade a{
color: #5cb85c;
font-weight: bold;
&:focus,
&:hover{
color: #4aa14a;
outline: none;
box-shadow: none;
}
}
@media only screen and (max-width:782px){
.csf-welcome-cols{
.csf--col{
width: 100%;
min-height: auto;
border-right: none;
border-bottom: 1px solid #e5e5e5;
}
}
.csf-features-cols{
.csf--key-features{
width: 100%;
}
.csf--available-fields{
width: 100%;
}
}
}

View File

@@ -0,0 +1,49 @@
/**
* 04. Widget
*/
.csf-widgets{
> .csf-field{
position: relative;
top: -1px;
margin-right: -15px;
margin-left: -15px;
padding: 12px 15px;
.csf-field{
margin-left: 0;
margin-right: 0;
}
.csf-title{
float: none;
width: 100%;
margin-bottom: 5px;
}
.csf-fieldset{
float: none;
width: 100%;
}
}
.csf-field-text input{
width: 100%;
}
.csf-field-notice .csf-notice{
padding: 15px;
}
}
.control-section{
.csf-widgets{
> .csf-field{
margin-right: -10px;
margin-left: -10px;
padding: 10px 12px;
}
}
}