Weak hands cannot be planted, meager skills have no foundation. Shallow wisdom is futile, how can one hope for a good name?扰扰从役倦，屑屑身事微。少壮轻年月，迟暮惜光辉。
@import 'common';
.lc_wrap {
a {
cursor: pointer;
color: $brand_color_dark;
}
.button-primary, .button-secondary {
border-radius: 0;
padding: 5px 20px;
}
.button-primary {
background: $brand_color_dark;
border: 1px solid $brand_color_dark;
color: $brand_color_light;
&:hover {
background: $brand_color_light;
border: 1px solid $brand_color_dark;
color: $brand_color_dark;
}
}
.button-secondary {
background: $brand_color_light;
border: 1px solid $brand_color_dark;
color: $brand_color_dark;
&:hover {
background: $brand_color_dark;
border: 1px solid $brand_color_dark;
color: $brand_color_light;
}
}
.nav-tab-wrapper {
border: none !important;
.nav-tab {
background-color: $brand_color_light;
color: $brand_color_dark;
border: 1px solid $brand_color_dark;
font-weight: normal;
&.nav-tab-active {
background-color: $brand_color_dark;
color: $brand_color_light;
border: 1px solid $brand_color_dark;
}
}
}
.du_notice {
background: $light_text;
border: 1px solid $light_grey;
border-left-width: 4px;
box-shadow: 0 1px 1px $lighter_grey;
margin: 10px 0;
padding: 1px 12px;
}
.du_notice_error {
border-left-color: $alert_highlight;
}
.du_col_half {
float: left;
width: 49.5%;
margin-right: 1%;
}
.du_col_half:nth-child(odd) {
}
.du_col_half:nth-child(odd) {
margin-right: 0%;
}
.du-pagination {
text-align: center;
padding-bottom: 20px;
width: 100%;
float: left;
.du-page-link {
display: inline-block;
padding: 5px;
background-color: $brand_color_dark;
margin: 3px;
color: $light_text;
font-weight: 700;
text-decoration: none;
min-width: 15px;
text-align: center;
cursor: pointer;
&.du-current-page-link {
background-color: $alert_highlight;
}
&:hover {
background-color: $alert_highlight;
}
}
}
.du-pagination.du-pagination-first {
margin-bottom: 0;
}
#poststuff {
.du_settings_dashboard {
.du_not_premium {
font-size: 20px;
font-weight: 400;
background-color: $brand_color_dark;
color: $light_text;
padding: 50px 20px;
text-align: center;
line-height: 1.5em;
margin-bottom: 20px;
a {
color: $light_text;
}
}
}
.du-manage-categories {
padding: 0 !important;
border: none !important;
margin: 0 !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.du-manage-keys {
padding: 0 !important;
border: none !important;
margin: 0 !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.du-key-item {
h2 {
padding: 0;
font-size: 16px;
}
}
}
.du-tab {
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 40px;
overflow: auto;
opacity: 0;
padding: 20px;
#et_pb_select_category {
display: none !important;
}
.et_pb_saved_layouts_list {
display: none !important;
}
ul {
display: none;
}
}
.du-gallery {
padding: 20px;
background-color: $light_text;
border: 1px solid $light_grey;
-webkit-box-shadow: 0 1px 1px $lighter_grey;
box-shadow: 0 1px 1px $lighter_grey;
position: relative;
float: left;
width: calc(100% - 40px);
.du-tab {
opacity: 1;
padding: 0;
overflow: inherit;
float: left;
width: 100%;
}
.du-search-filter {
font-size: 18px;
border: none;
padding: 8px;
}
.du-search-container {
width: 250px;
}
.du-layout-filters {
> div {
input[type=button] {
padding: 16px;
font-size: 20px;
}
}
}
.du-content {
padding: 0;
float: left;
width: 100%;
margin-top: 20px;
}
}
.du-account-active {
color: green;
}
.du-account-expired {
color: red;
}
.du-layouts-container {
width: 100%;
clear: both;
.du-category-filter-container {
position: relative;
}
&.du-layouts-container-half {
width: 50%;
float: left;
}
.du-filter-reset {
display: none;
}
}
.du-layout-filters {
background-color: $brand_color_dark;
color: $light_text;
position: relative;
margin: auto;
> div {
padding: 9px;
h2 {
color: $light_text;
margin-top: 0;
a {
background-color: $brand_color_light;
padding: 10px;
font-size: 13px;
display: inline-block;
margin-left: 10px;
color: $dark_text;
border: none;
line-height: 1em;
cursor: pointer;
text-decoration: none;
font-weight: 400;
text-transform: uppercase;
}
}
input[type=button] {
display: block;
color: $dark_text;
background-color: $brand_color_light;
padding: 14px;
margin: 0;
text-decoration: none;
cursor: pointer;
text-align: center;
font-size: 18px;
border: none;
line-height: 1em;
&:hover {
background-color: $brand_color_light;
}
}
}
div.du-checkbox-row {
&:first-child {
input[type=button] {
margin: 0 5px 5px 0;
font-size: 16px;
padding: 8px;
width: 100%;
margin-top: 10px;
}
}
}
}
.du-filter-label {
float: left;
padding: 0 10px;
margin: 0;
font-size: 18px;
line-height: 40px;
}
.du-layouts-error {
width: 100%;
background-color: $brand_color_light;
color: $dark_text;
position: relative;
margin: auto;
margin-top: 15px;
div {
padding: 20px;
font-size: 18px;
text-align: center;
}
}
.du-category-filters {
position: absolute;
left: 1px;
margin-top: 0;
top: 100%;
background-color: $white;
z-index: 999;
padding: 20px;
box-shadow: 0 5px 5px $light_grey;
width: calc(100% - 42px);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.1s linear;
&.active {
visibility: visible;
opacity: 1;
}
button {
background-color: $brand_color_dark;
padding: 8px 16px;
font-size: 16px;
display: block;
width: 50%;
max-width: 200px;
margin-right: 10px;
margin-bottom: 5px;
float: left;
color: $light_text;
border: none;
line-height: 1em;
cursor: pointer;
position: relative;
span {
background-color: $alert_highlight;
padding: 2px 6px;
position: absolute;
right: 0;
top: 0;
font-size: 12px;
}
}
}
.du-assign-category-cta {
width: 100%;
float: left;
text-align: right;
button {
display: block;
color: $light_text;
background-color: $brand_color_dark;
padding: 14px;
margin: 0;
text-decoration: none;
cursor: pointer;
text-align: center;
font-size: 18px;
border: none;
line-height: 1em;
width: 60px;
padding: 5px;
display: inline-block;
span {
color: $light_text;
}
}
input {
display: block;
color: $light_text;
background-color: $brand_color_light;
padding: 14px;
margin: 0;
text-decoration: none;
cursor: pointer;
text-align: center;
font-size: 18px;
border: none;
line-height: 1em;
margin: 0 5px 5px 0;
font-size: 16px;
padding: 8px;
width: 100%;
margin-top: 10px;
}
}
.du-user-category-filters {
div.du-checkbox-row {
&:first-child {
button {
padding: 5px;
display: block;
width: 100%;
margin-bottom: 5px;
padding: 10px;
}
}
}
}
.du-search-filter {
display: block;
width: 100%;
line-height: 1em;
font-size: 15px;
padding: 10px;
}
.du-search-container {
float: left;
width: 15%;
}
.du-layout-edit-popout {
p {
margin-top: 0;
color: $brand_color_dark;
margin-bottom: 10px;
}
input, textarea {
font-size: 12px;
font-weight: normal;
}
button {
background-color: $brand_color_dark;
border: none;
color: $light_text;
cursor: pointer;
display: inline-block;
font-size: 18px;
line-height: 1em;
margin: 0;
padding: 5px;
text-align: center;
text-decoration: none;
float: right;
margin-left: 8px;
&.du-btn-no {
background-color: #EF223D;
}
}
input[type="text"], textarea {
color: $brand_color_dark;
margin-bottom: 0 !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
width: 100%;
}
textarea {
height: 110px;
}
label {
float: left;
font-size: 11px;
margin: 0 0 5px;
text-align: left;
text-transform: uppercase;
width: 100%;
}
}
div {
button.du-filter-user-cat-selected {
background-color: $alert_highlight;
}
}
.du-filters-container {
float: left;
.du-filter-container {
float: left;
&.du-search-submit-container {
a {
background-color: $alert_highlight;
color: $light_text;
}
}
}
}
.du-checkbox-row {
line-height: 2em;
display: inline-block;
width: 20%;
font-size: 14px;
float: left;
color: $dark_text;
h3 {
color: $dark_text;
text-align: left;
margin-top: 0;
padding-top: 0;
font-size: 16px;
line-height: 1.5em;
}
input[type=text] {
padding: 8px;
width: 100%;
display: block;
margin-bottom: 8px;
}
}
input[type=checkbox] {
&:checked {
&:before {
margin: -3px 0 0 -5px !important;
}
}
}
.et_pb_modal_settings_container {
min-width: 1000px;
width: 80%;
left: 10%;
right: 10%;
margin: 0;
input[type=checkbox] {
&:checked {
&:before {
margin-top: -3px !important;
margin-left: -7px !important;
}
}
}
}
.du_layouts_page_container {
&.du_overlay_active {
.du_overlay {
display: block;
}
.du-layouts-container {
display: none;
}
}
}
.add-to-favourites {
.dashicons {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 30px;
display: inline-block;
z-index: 9;
position: relative;
color: $light_text;
text-shadow: 0 0 2px #000;
cursor: pointer;
transition: all .5s;
-ms-transition: all .37s;
-moz-transition: all .5s;
-o-transition: all .5s;
-webkit-transition: all .5s;
&:hover {
color: #ff0f43;
text-shadow: 0 0 10px rgba(100, 0, 0, .1);
}
}
.dashicons.favourited {
color: #ff0f43;
text-shadow: 0 0 10px rgba(100, 0, 0, .1);
}
}
.du_overlay {
display: none;
position: absolute;
top: 40px;
left: 0;
width: 100%;
background-color: $white;
z-index: 99;
.du_overlay_close {
position: absolute;
top: 0;
right: 20px;
z-index: 999;
.dashicons {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 30px;
color: $light_text;
background-color: $brand_color_dark;
padding: 10px;
}
}
.du_overlay_content {
padding: 50px;
position: relative;
float: left;
width: calc(100% - 100px);
.du_notes_section {
padding-top: 25px;
margin-top: 25px;
border-top: 1px solid $trans_grey;
.du_layout_note_output {
padding: 20px;
border: 1px solid $trans_grey;
max-height: 150px;
overflow: scroll;
p {
margin-top: 0;
font-size: $text_size;
}
}
.du_notes_label {
font-weight: bold;
margin-bottom: 10px;
font-size: $mid_heading_size;
}
}
.add-to-favourites {
position: absolute;
left: -50px;
top: 15px;
}
.du_layout_spotlight {
float: left;
width: 100%;
.du_layout_col {
width: 50%;
float: left;
}
.du_row_actions {
padding-top: 25px;
margin-top: 25px;
border-top: 1px solid $trans_grey;
&.import-complete .apply-layout {
background-color: $alert_highlight;
}
a {
background-color: $brand_color_dark;
color: $light_text;
padding: 10px 20px;
display: block;
font-size: 15px;
text-align: center;
margin-bottom: 10px;
max-width: 500px;
&:hover {
background-color: $dark_text;
}
.dashicons {
margin-left: 10px;
}
}
}
.du_layout_image {
max-width: 700px;
height: 700px;
border: 1px solid $trans_grey;
overflow: scroll;
img {
width: 100%;
display: block;
}
}
.du_scroll_hint {
max-width: 700px;
text-align: center;
font-size: 12px;
margin: 5px 0;
}
.du_layout_info {
position: relative;
h2 {
font-size: 38px;
line-height: 1.5em;
margin: 0;
}
.du_publish_date {
font-size: $text_size;
font-style: italic;
}
.du_set_items {
width: 100%;
padding-top: 25px;
margin-top: 25px;
border-top: 1px solid $trans_grey;
.du_set_label {
font-weight: bold;
margin-bottom: 10px;
font-size: $mid_heading_size;
}
.du_set_data {
.du_set_item {
float: left;
width: 100px;
margin-right: 10px;
cursor: pointer;
&.du_active_set {
span {
border-color: $alert_highlight;
}
}
span {
display: block;
width: 100px;
height: 120px;
border: 1.5px solid $trans_grey;
background-position: top;
background-size: cover;
}
h3 {
font-size: 14px;
}
}
}
}
.du_row_meta {
padding-top: 25px;
margin-top: 25px;
border-top: 1px solid $trans_grey;
.du_meta_type {
margin-bottom: 20px;
.du_meta_label {
font-weight: bold;
margin-bottom: 10px;
font-size: $mid_heading_size;
}
.du_meta_data {
span {
display: inline-block;
padding: 4px 6px;
margin-right: 5px;
margin-bottom: 5px;
background-color: $brand_color_dark;
color: $light_text;
font-size: $small_text_size;
text-transform: uppercase;
}
}
}
}
}
}
}
}
.du_layouts_page_container_section {
.du_overlay {
.du_layout_image {
height: 500px !important;
}
}
}
.du-layout-item {
position: relative;
background: $white;
a {
cursor: pointer;
}
.add-to-favourites {
position: absolute;
bottom: -16px;
text-align: center;
width: 100%;
}
.bg {
> .du-hover-spotlight {
position: absolute;
z-index: 7;
top: 45%;
left: 0;
width: 100%;
text-align: center;
.dashicons {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 30px;
color: $dark_text;
background-color: $brand_color_light;
border: 1px solid $dark_text;
padding: 10px;
}
}
}
.du-layout-edit-popout {
background-color: $light_text;
color: $brand_color_dark;
display: none;
padding: 10px;
width: calc(100% - 20px);
position: absolute;
left: 0;
top: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.du-category-assign-labels {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
height: 200px;
margin-bottom: 10px;
margin-top: 20px;
overflow-y: scroll;
width: 100%;
label {
display: block;
margin-bottom: 5px;
}
}
.du-no-access {
position: absolute;
left: 0;
top: 0;
width: 100%;
display: block;
height: 100%;
z-index: 999;
background-color: $light_grey;
border: 1px solid $light_grey;
-moz-transition: all .8s;
-webkit-transition: all .8s;
span {
display: block;
padding: 50px 10px;
text-align: center;
color: $light_text;
text-shadow: 0 0 20px $dark_text;
p {
margin: 0;
padding: 0;
}
}
}
&:hover {
.du-no-access {
background-color: transparent;
}
h2 {
transition: all .41s;
-ms-transition: all .41s;
-moz-transition: all .41s;
-o-transition: all .41s;
-webkit-transition: all .41s;
}
.bg {
background-position: bottom;
}
.du-layout-owner {
opacity: 0;
}
}
h2 {
position: absolute;
padding: 10px;
top: 0;
background-color: $brand_color_light;
color: $dark_text;
margin: 0 !important;
-webkit-box-shadow: 0 2px 50px -15px $light_grey;
-moz-box-shadow: 0 2px 50px -15px $light_grey;
box-shadow: 0 2px 50px -15px $light_grey;
width: calc(100% - 20px);
z-index: 9;
font-size: $heading_size;
> span {
color: $dark_text;
/*width: calc(100% - 28px);*/
}
}
a.du-dashicons-button {
color: $dark_text;
cursor: pointer;
display: inline-block;
font-size: 14px !important;
letter-spacing: .6px;
padding: 0px 0 0 5px;
position: relative;
text-decoration: none;
transition: ease .35s all !important;
span.du-tooltip {
background-color: $brand_color_dark;
color: $light_text;
bottom: 105%;
display: none;
font-size: 11px;
right: -30px;
padding: 4px 8px;
position: absolute;
text-transform: uppercase;
white-space: nowrap;
z-index: 999;
}
&:hover {
span.du-tooltip {
display: block;
}
}
}
.actions {
position: absolute;
bottom: -30px;
left: -1px;
text-align: center;
background-color: $brand_color_light;
color: $dark_text;
margin: 0;
width: 100%;
z-index: 1;
border: 1px solid $brand_color_light;
border-top: none;
.du-hover-spotlight {
display: none;
width: 100%;
background-color: $brand_color_light;
}
a {
color: $light_text;
font-size: 14px !important;
display: inline-block;
text-decoration: none;
cursor: pointer;
letter-spacing: .6px;
transition: ease .35s all !important;
padding: 5px 0;
width: 25%;
position: relative;
.upgrade-for-layout {
color: $dark_text;
}
&:hover {
span.du-tooltip {
display: block;
}
}
span.du-tooltip {
display: none;
position: absolute;
bottom: 105%;
left: 0;
padding: 4px 8px;
z-index: 999;
background-color: $dark_text;
font-size: 11px;
text-transform: uppercase;
white-space: nowrap;
}
}
a.apply-layout.import-complete {
.tick {
color: $light_text;
}
}
a.first-button {
float: left;
background-color: $dark_text;
}
a.last-button {
float: right;
}
a.et_pb_layout_button_delete {
background-color: $alert_stop;
}
}
.actions.action-count-2 {
a {
width: 50% !important;
}
}
.actions.action-count-3 {
a {
width: 33%;
}
}
.du-category-assign {
display: none;
padding: 10px;
background-color: $light_text;
}
.du-category-assign-labels {
border-bottom: 1px solid $lighter_grey;
overflow-y: scroll;
height: 200px;
margin-bottom: 10px;
margin-top: 20px;
}
}
.du-layout-item.import-complete {
h2 {
border-color: $alert_highlight;
background-color: $alert_highlight;
}
.apply-layout {
background-color: $alert_highlight;
}
}
.du-my-cloud-container {
padding-top: 20px;
}
.du-my-cloud-container, .du-layouts-container {
width: calc(100% - 2px);
border: 1px solid $brand_color_light;
background-color: $brand_color_light;
border-top: none;
float: left;
&.list-view {
width: calc(100% - 40px);
.bg {
> .du-hover-spotlight {
display: none;
}
}
.actions {
.du-hover-spotlight {
display: inline-block;
color: $brand_color_dark;
}
}
}
.du-my-cloud-item.import-complete {
border-color: $alert_highlight;
background-color: $alert_highlight;
}
}
.du-my-cloud-item.import-complete {
.et_pb_layout_button_delete {
display: none;
}
.et_pb_layout_button_preview {
display: none;
}
}
a.du_overlaid_button {
&:hover {
span.du-tooltip {
display: block;
}
}
span.du-tooltip {
display: none;
position: absolute;
bottom: 105%;
left: 0;
padding: 4px 8px;
z-index: 999;
background-color: $dark_text;
font-size: 11px;
text-transform: uppercase;
white-space: nowrap;
bottom: initial;
top: 105%;
left: initial;
right: 0;
}
}
a.du_tooltip_icon_button {
&:hover {
span.du-tooltip {
display: block;
}
}
span.du-tooltip {
display: none;
position: absolute;
bottom: 105%;
left: 0;
padding: 4px 8px;
z-index: 999;
background-color: $dark_text;
font-size: 11px;
text-transform: uppercase;
white-space: nowrap;
}
}
.du_iframe_apply_layout {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
a {
display: inline-block;
padding: 15px 20px;
color: $light_text;
background-color: $brand_color_dark;
font-size: 14px;
cursor: pointer;
transition: all .3s;
-moz-transition: all .3s;
-webkit-transition: all .3s;
text-decoration: none;
&:hover {
background-color: $brand_color_light;
}
}
}
.du_iframe_preview_own_layout {
position: absolute;
bottom: 0;
left: 0;
text-align: center;
width: 100%;
span {
display: inline-block;
padding: 15px 20px;
color: $light_text;
background-color: $brand_color_dark;
font-size: 14px;
cursor: pointer;
}
}
.et_pb_layout_button_load {
display: inline-block;
padding: 10px 20px;
background-color: $brand_color_dark;
font-size: 15px;
color: $light_text;
cursor: pointer;
&:hover {
background-color: $brand_color_dark;
color: $light_text;
}
}
.et_pb_layout_button_preview {
display: inline-block;
padding: 10px 20px;
background-color: $brand_color_dark;
font-size: 15px;
color: $light_text;
cursor: pointer;
}
.du-tab-section {
.du-my-cloud {
display: none;
}
}
.du-tab-module {
.du-my-cloud {
display: none;
}
}
.du-cloud-date {
font-size: 10px;
display: inline-block;
line-height: 2em;
}
.du-cloud-status {
font-size: 10px;
display: inline-block;
line-height: 2em;
.du-cloud-status-publish {
color: $brand_color_dark;
}
.du-cloud-status-pending {
color: $alert_highlight;
}
}
.du-cloud-categories {
font-size: 10px;
display: inline-block;
line-height: 2em;
}
.du-cloud-category-text {
margin-right: 6px;
display: inline-block;
}
.du-gallery.du-gallery-pulldown {
padding: 20px !important;
width: calc(100% - 60px);
display: none;
z-index: 99;
margin-bottom: 20px;
}
#cboxLoadedContent {
.du-gallery {
padding: 20px;
padding-bottom: 0 !important;
border: none;
}
}
.du_stats {
margin-top: 20px;
.du_stat {
float: left;
border: 1px solid $light_grey;
margin-right: 20px;
padding: 10px 40px;
font-size: 40px;
text-align: center;
line-height: 1em;
font-weight: 900;
a {
text-decoration: none;
}
span {
font-size: 16px;
display: block;
line-height: 1em;
margin-top: 5px;
font-weight: 400;
}
}
}
.du-gallery-layout-types {
position: absolute;
top: -30px;
left: 0;
width: 100%;
text-align: center;
}
.du-layout-type-filter {
display: inline-block;
padding: 15px 40px;
margin: 5px 11px;
background-color: $dark_text;
font-size: 18px;
color: $light_text;
transition: ease .3s all !important;
cursor: pointer;
&:hover {
background-color: $brand_color_dark;
}
}
.du-layout-type-filter.active {
background-color: $brand_color_dark;
&:hover {
background-color: $dark_text;
}
}
.du-clear {
clear: both;
width: 0;
height: 0;
}
.du_admin_button {
display: inline-block;
padding: 5px 10px;
background-color: $brand_color_dark;
color: $light_text;
text-decoration: none;
&:hover {
opacity: .9;
color: $light_text;
}
}
.du_admin_button.du_gallery_pulldown_close {
background-color: $brand_color_light;
}
.du_layout_imported {
padding: 50px 0;
h2 {
font-weight: 400;
span {
margin-right: 10px;
display: inline-block;
}
}
}
.du_gallery_modal_trigger {
float: right;
border-radius: 0 0 4px 4px;
}
.du-content {
padding: 20px 0;
}
.et_pb_library_modal {
.active-container.du-tab {
overflow: auto;
}
}
.et-pb-main-settings.active-container {
.du-layout-item {
width: 23.4% !important;
}
}
.du-category-assign {
h3 {
margin-top: 0;
}
input[type="checkbox"] {
margin-bottom: 0 !important;
}
label {
float: left;
margin: 0 0 5px;
font-size: 11px;
width: 100%;
text-align: left;
text-transform: uppercase;
}
}
.du-add-edit-cloud-cats {
display: inline-block;
padding: 1px 5px;
color: $light_text;
background-color: $alert_highlight;
cursor: pointer;
}
.du_settings_form {
p {
clear: both;
margin-bottom: 20px;
float: left;
width: 100%;
label {
display: inline-block;
width: 200px;
float: left;
}
span {
float: left;
max-width: 500px;
clear: right;
}
select {
padding: 6px;
width: 250px;
margin-bottom: 10px;
}
input[type=text] {
padding: 6px;
width: 250px;
margin-bottom: 10px;
}
small {
display: block;
}
}
}
.du-view-switcher {
float: right;
margin-left: 10px;
a {
padding: 10px;
background-color: $brand_color_dark;
color: $light_text;
display: block;
cursor: pointer;
text-transform: uppercase;
}
}
.du-category-items {
margin-bottom: 20px;
}
.du-filter-toggle {
float: right;
margin-left: 10px;
a {
padding: 10px;
color: $dark_text;
background-color: $brand_color_light;
display: block;
cursor: pointer;
text-transform: uppercase;
}
}
.du-filter-toggle.du-filter-reset {
a {
background-color: $alert_highlight;
color: $brand_color_light;
}
}
.du-layouts-container.du-filtered {
.du-filter-reset {
display: block;
}
}
.du-layouts-container-source-cloud {
padding-top: 20px;
}
.du-my-cloud-container, .du-layouts-container {
.du-no-layouts {
display: none;
background-color: $brand_color_light;
margin: 0 20px 20px 20px;
float: left;
width: calc(100% - 40px);
&.active {
display: block;
}
div {
color: $dark_text;
padding: 20px;
font-size: 18px;
text-align: center;
}
}
}
.du-snippet-gallery .du-layouts-container, .du-manage-keys .du-layouts-container {
background-color: transparent;
border: none;
}
.du-snippet-gallery {
.du-snippet-item-existing {
margin-top: 10px;
}
}
.du-my-cloud-container.grid-view, .du-layouts-container.grid-view {
.du-layout-item {
background: $white;
margin: 0px 1% 20px;
float: left;
width: calc((100% / 6) - 2%);
box-shadow: $trans_grey 0 0 25px;
z-index: 9;
.du-category-assign {
z-index: 8;
position: absolute;
}
.bg {
background-position: 0 35px;
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
width: 100%;
height: 300px;
margin-bottom: 30px;
transition: background-position 8s;
-ms-transition: background-position 8s;
-moz-transition: background-position 8s;
-o-transition: background-position 8s;
-webkit-transition: background-position 8s;
}
h2 {
a {
float: right;
}
}
}
}
.du-layouts-container-type-section.du-layouts-container.grid-view {
.du-layout-item {
width: calc((100% / 3) - 2%);
.bg {
height: 220px;
}
}
}
.du-my-cloud-container.list-view, .du-layouts-container.list-view {
padding: 20px;
.du-no-layouts {
margin: 0;
width: 100%;
}
.du-layout-item {
margin-bottom: 20px;
box-shadow: $trans_grey 0 0 25px;
background-color: $white;
.bg {
background: none !important;
}
h2 {
background-color: transparent;
position: relative;
top: inherit;
text-align: left;
padding: 16px 10px !important;
color: $dark_text;
text-shadow: none;
width: initial;
z-index: initial;
font-weight: 400;
font-size: 12px;
> span {
padding: 0 !important;
background-color: transparent;
color: $dark_text;
width: initial;
font-size: 12px;
}
.du-dashicons-button {
color: $dark_text;
}
}
.du-cloud-date {
font-size: 10px;
padding: 6px;
display: inline-block;
line-height: 2em;
position: absolute;
top: 8px;
right: 300px;
z-index: 99;
}
.du-category-assign {
position: absolute;
width: 300px;
right: 0;
z-index: 999;
top: 100%;
border: 1px solid $lighter_grey;
box-shadow: $trans_grey 0 0 25px;
}
.du-layout-edit-popout {
position: absolute;
left: 0;
top: 100%;
width: 300px;
z-index: 999;
border: 1px solid $lighter_grey;
box-shadow: $trans_grey 0 0 25px;
}
.actions {
bottom: inherit;
left: initial;
width: 250px;
top: 8px;
right: 10px;
z-index: initial;
a {
width: 20%;
font-size: 14px !important;
line-height: 1.4em;
padding: 6px 0;
}
}
}
}
.du-key-item {
border-bottom: 1px solid $brand_color_light;
margin-bottom: 20px;
padding-bottom: 20px;
h2 {
color: $light_text;
margin: 0;
line-height: 40px;
}
.du-key-content-container {
font-size: 16px;
.du-input {
padding: 10px;
margin: 10px 0;
width: 100%;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
font-size: 14px;
margin: 0;
}
}
.du-key-title-container {
color: $light_text;
background-color: $brand_color_dark;
padding: 10px 20px;
}
}
.du-snippet-item {
margin-bottom: 10px;
z-index: 1;
border: 1px solid $brand_color_light;
background-color: $brand_color_light;
.du-category-assign-labels {
border-bottom: 1px solid $brand_color_dark;
margin-bottom: 20px;
padding-bottom: 10px;
}
h2 {
color: $dark_text;
margin: 0;
line-height: 40px;
float: left;
margin-right: 20px;
}
.du-snippet-content-container {
display: none;
}
.du-snippet-title-container {
color: $dark_text;
background-color: $brand_color_light;
border: 1px solid $light_grey;
padding: 10px 20px;
.du-current-cats {
display: block;
float: left;
color: $light_text;
background-color: $alert_highlight;
padding: 4px;
margin-top: 6px;
}
.du-layout-notes {
float: left;
width: 100%;
font-size: 12px;
}
}
.et_pb_layout_buttons {
float: right;
}
textarea {
border: none;
height: 150px;
width: 100%;
padding: 20px;
font-size: 14px;
border: 1px solid $brand_color_light;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-bottom: 10px;
&.du-snippet-content {
height: 350px;
}
}
}
.du-snippet-content-container {
.du-snippet-name, .du_text_field {
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid $brand_color_light;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
font-size: 14px;
font-size: 16px;
line-height: 2;
min-height: 30px;
}
p {
font-weight: 700;
}
}
.du-snippet-item-new {
margin-top: 50px;
.du-layout-filters {
margin-bottom: 0;
}
.du-snippet-content-container {
display: block;
border: 1px solid $light_grey;
padding: 0 20px 20px;
.du-snippet-content {
padding: 10px;
margin: 10px 0;
width: 100%;
border: 1px solid $brand_color_light;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
font-size: 14px;
}
.et_pb_layout_buttons {
float: left;
}
}
}
.du-key-item.du-key-item-new {
margin-top: 50px;
}
.du-key-item-new {
.du-key-content-container {
display: block;
border: 1px solid $brand_color_light;
padding: 0 20px 20px;
}
}
.du-snippet-content-container {
.du-snippet-content-markup {
position: relative;
padding: 20px;
pre {
margin: 0;
min-height: 180px;
overflow-x: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
.du_overlaid_button {
position: absolute;
top: 30px;
right: 30px;
z-index: 99;
color: $light_text;
background-color: transparent;
.dashicons {
width: 30px;
height: 30px;
line-height: 30px;
font-size: 30px;
}
}
.du_overlaid_button.du_edit_snippet {
right: 70px;
}
}
.du-snippet-editor {
display: none;
padding: 20px;
}
.du_tooltip_icon_button {
position: relative;
cursor: pointer;
color: $light_text;
background-color: $brand_color_dark;
display: inline-block;
padding: 5px 40px;
.dashicons {
width: 25px;
height: 25px;
line-height: 25px;
font-size: 25px;
}
}
.du_tooltip_icon_button.du_cancel_edit_snippet {
background-color: $alert_stop;
margin-left: 10px;
}
}
.du-key-content-container {
.du_tooltip_icon_button {
position: relative;
color: $light_text;
background-color: $brand_color_dark;
display: inline-block;
padding: 12px 10px;
.dashicons {
width: 25px;
height: 25px;
line-height: 25px;
font-size: 25px;
}
}
.du_tooltip_icon_button.du_delete_key {
background-color: $alert_stop;
}
.du-column {
float: left;
width: 60%;
margin: 10px 1.5% 10px 0;
position: relative;
&.du-col-label {
width: 25%;
}
&.du-col-actions {
float: right;
margin-right: 0;
width: 10%;
text-align: right;
}
&.du-col-permissions {
label {
margin-right: 5px;
margin-bottom: 5px;
padding: 14px 5px;
float: left;
}
}
&.du-col-key {
a.du-key-visibility-switch {
color: $dark_text;
position: absolute;
right: 15px;
cursor: pointer;
top: 15px;
}
}
}
}
.du-key-item-existing {
.du-key-content-container {
.du-column {
width: 20%;
}
.du-column.du-col-permissions {
width: 34%;
label {
padding: 0 5px;
}
}
.du-column.du-col-label {
width: 20%;
}
.du-column.du-col-enabled {
width: 5%;
}
.du-column.du-col-actions {
width: 10%;
}
}
}
.du-col-enabled {
.dashicons {
width: 36px;
height: 36px;
font-size: 36px;
line-height: 36px;
padding: 6px;
border: 1px solid $alert_go;
color: $alert_go;
cursor: pointer;
}
.dashicons.dashicons-no-alt {
color: $alert_stop;
border-color: $alert_stop;
}
}
}
.du-ajax-spinner {
position: fixed;
background-color: $trans_light;
text-align: center;
z-index: 9999999;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
.du-spinner-container {
position: absolute;
top: 45%;
left: 0;
width: 100%;
z-index: 99999;
margin: 0 auto;
text-align: center;
img {
display: inline-block;
margin-bottom: 20px;
}
span {
font-size: 14px;
color: $dark_text;
display: block;
}
}
}
@media screen and (max-width: 550px) {
.du-user-category-filters {
.du-checkbox-row.du-checkbox-row-add-cat {
width: 100%;
}
.du-checkbox-row.du-checkbox-row-list-cats {
width: 100%;
}
}
.du-category-admin {
.du-checkbox-row.du-checkbox-row-add-cat {
width: 100%;
}
.du-checkbox-row.du-checkbox-row-list-cats {
width: 100%;
}
}
.du-layout-item {
width: calc((100% / 1) - 2%);
}
.du-view-switcher {
display: none;
}
}
@media screen and (min-width: 550px) {
.du-user-category-filters {
.du-checkbox-row.du-checkbox-row-add-cat {
width: 45%;
margin-right: 2%;
padding-right: 2%;
}
.du-checkbox-row.du-checkbox-row-list-cats {
width: 50%;
}
}
.du-category-admin {
.du-checkbox-row.du-checkbox-row-add-cat {
width: 45%;
margin-right: 2%;
padding-right: 2%;
}
.du-checkbox-row.du-checkbox-row-list-cats {
width: 50%;
}
}
}
@media screen and (min-width: 1200px) {
.du-user-category-filters {
.du-checkbox-row.du-checkbox-row-add-cat {
width: 30%;
border-right: 1px solid $light_grey;
}
.du-checkbox-row.du-checkbox-row-list-cats {
width: 60%;
}
}
.du-category-admin {
.du-checkbox-row.du-checkbox-row-add-cat {
width: 30%;