| Current File : /home/kelaby89/sergio-cuchi.tattoo/wp-content/plugins/envira-gallery-lite/assets/scss/metabox.scss |
/* ==========================================================================
metabox.css loads on any Envira Gallery and Album Create/Edit Screen
Any styles that will be used by the main Gallery / Album editor screen should be
added to this file
========================================================================== */
/* ==========================================================================
Imports
========================================================================== */
@import 'vars';
@import 'mixins';
/* ==========================================================================
Messages
========================================================================== */
body.post-type-envira {
/**
* Add left and right margins to ensure the message notification horizontally lines up
* with the metaboxes
*/
#message {
margin: 5px 20px 15px 20px;
}
#wp-link-wrap {
z-index: 180105 !important;
}
#wp-link-backdrop {
z-index: 160105 !important;
}
}
/* ==========================================================================
Form
- The envira-gallery class is assigned to the Gallery and Album Add/Edit screens form.
========================================================================== */
form#post.envira-gallery {
/**
* Re-establish the left and right margins, so there's spacing between the Admin Menu
* and the content
*/
margin: 0 20px;
/**
* Defined so we override WordPress' default styles
*/
#poststuff {
/* ==========================================================================
Envira Gallery Shared Styles for Types and Settings
========================================================================== */
/**
* Intro Text
*/
p.envira-intro {
margin: 0;
padding: 0 0 30px 0;
border-bottom: 1px solid #ddd;
font-size: 16px;
font-weight: 700;
small {
margin: 5px 0 0 0;
display: block;
font-weight: 400;
a {
text-decoration: none;
font-weight: 600;
}
}
}
/**
* Help Video
* - Can be placed inside p.envira-intro by JS, or outside p.envira-intro when
* viewing the Images tab for a Dynamic or Default Gallery
*/
div.envira-video-help {
position: relative;
z-index: 1;
width: 100%;
margin: 20px 0 0 0;
iframe {
position: relative;
z-index: 1;
width: 100%;
height: auto;
min-height: 300px;
}
a.envira-video-close {
position: absolute;
z-index: 2;
top: -12px;
right: -12px;
width: 24px;
height: 24px;
line-height: 24px;
@include borderRadius(50%);
background: #f5f5f5;
color: #000;
text-align: center;
text-decoration: none;
}
}
/**
* Image Grid
* - Used on the Images tab for Default Galleries, as well as the Preview Metabox
*/
ul.envira-gallery-images-output {
width: 100%;
li {
position: relative;
display: inline-block;
width: 150px;
margin: 0 20px 20px 0;
padding: 0;
list-style: none;
vertical-align: top;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #f7f7f7;
img {
display: block;
width: 150px;
height: 150px;
}
/**
* If, for some reason, the image doesn't exist or fails to load,
* the placeholder logo is displayed
*/
div.placeholder-image {
display: block;
width: 148px;
height: 149px;
background: url(images/icons/leaf.svg) center no-repeat;
background-size: 64px 64px;
border-left: 1px solid #dfdfdf;
border-top: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
}
/**
* Metadata
*/
div.meta {
width: 148px;
overflow: hidden;
text-align: center;
border-left: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
/**
* Title
*/
div.title {
font-size: 12px;
font-weight: 700;
width: 138px;
height: 18px;
line-height: 18px;
margin: 8px 5px;
overflow: hidden;
/**
* Hint
* - Displays the full title on hover
*/
a.hint {
position: absolute;
display: inline-block;
bottom: 10px;
right: 10px;
width: 16px;
height: 16px;
background: #f7f7f7;
&.hidden {
display: none;
}
}
}
/**
* Additional metadata
*/
div.additional {
display: none;
margin: 5px 0 0 0;
font-weight: 400;
}
}
/**
* Tick Icon
*/
a.check {
display: none;
position: absolute;
right: 5px;
top: 5px;
width: 24px;
height: 24px;
background-color: #eee;
-webkit-box-shadow: 0 0 0 1px #fff,
0 0 0 2px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(0, 0, 0, 0.15);
div.media-modal-icon {
display: none;
width: 15px;
height: 15px;
margin: 5px 0 0 5px;
background-position: -21px 0;
}
}
/**
* Edit / Delete Buttons
*/
a.dashicons {
position: absolute;
display: block;
top: 5px;
left: 5px;
width: 25px;
height: 25px;
line-height: 25px;
font-size: 18px; /* Controls the icon size */
outline: none;
z-index: 20;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
&.envira-gallery-modify-image {
background: #0085ba;
color: $white;
}
&.envira-gallery-remove-image {
left: 35px;
background: #e02626;
color: $white;
}
}
/**
* Selected state
*/
&.selected {
width: 148px;
border: 2px solid $primary_color !important;
a.check {
display: block;
background-color: $primary_color;
-webkit-box-shadow: 0 0 0 1px #fff,
0 0 0 2px $primary_color;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px $primary_color;
div.media-modal-icon {
display: block;
}
}
div.meta {
width: 146px;
}
}
/**
* Multiple selection sorting - stacks images when the user has selected more than one image + dragged them
*/
&.ui-sortable-helper {
li {
position: absolute;
top: 0;
left: 0;
}
}
}
/**
* List View
*/
&.list {
li {
position: relative;
z-index: 2;
display: block;
width: 100%;
margin: 0 0 10px 0;
padding: 10px 15px;
background: #fff;
border: 1px solid #ddd;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
img {
display: inline-block;
width: 75px;
margin-left: 45px;
}
/**
* Metadata
*/
div.meta {
position: absolute;
z-index: 1;
left: 0;
display: inline-block;
width: 100%;
padding: 0 80px 0 150px;
border: none;
font-weight: 700;
text-align: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/**
* Title
*/
div.title {
display: block;
width: 100%;
height: auto;
font-size: 16px;
margin: 0;
padding: 0;
a.hint {
display: none;
}
}
/**
* Additional metadata
* - Displayed in list view
*/
div.additional {
display: block;
}
}
/**
* Checkbox
* - Always display
*/
a.check {
display: block;
position: absolute;
left: 15px;
top: 35px;
}
a.envira-gallery-remove-image {
left: auto;
top: 10px;
right: 10px;
}
a.envira-gallery-modify-image {
left: auto;
top: 10px;
right: 40px;
}
}
}
}
.envira-toggle {
cursor: pointer;
display: inline-block;
}
.envira-switch {
display: inline-block;
background: #ccc;
border-radius: 18px;
width: 32px;
height: 18px;
position: relative;
vertical-align: middle;
transition: background 0.25s;
&:before,
&:after {
content: "";
}
&:before {
display: block;
background: linear-gradient(to bottom, #fff 0%,#eee 100%);
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
width: 16px;
height: 16px;
position: absolute;
top: 1px;
left: 1px;
transition: left 0.25s;
}
.envira-toggle:hover &:before {
background: linear-gradient(to bottom, #fff 0%,#fff 100%);
box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
}
}
input[type='checkbox']:checked + .envira-switch {
background: #3871AC;
&:before {
left: 15px;
}
}
input[type='checkbox'] {
position: absolute;
visibility: hidden;
}
.description {
margin-left: 5px;
position: relative;
top: 2px;
}
/* ==========================================================================
Envira Gallery Type
========================================================================== */
#envira-gallery {
margin: 60px 0 20px 0;
}
#envira-gallery {
/**
* Hide the title bar of the metabox, so we have a seamless style
*/
.handlediv {
display: none;
}
.hndle {
display: none;
}
/**
* Tabs
* - Move up vertically so they sit above the metabox
*/
h2.nav-tab-wrapper {
margin: -56px 0 0 -1px; /* The height of the tab */
padding: 0;
border-bottom: none;
/**
* Increase tab sizes and style
*/
.nav-tab {
display: inline-block;
width: 33.2%;
margin: 0;
padding: 15px 0;
text-align: center;
font-size: 16px;
border-color: #e5e5e5; /* Matches the metabox border for a seamless UI */
background: #f5f5f5;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
/**
* Envira Gallery Icon
*/
&.nav-tab-native-envira-gallery {
span {
display: inline-block;
background: url(images/icons/leaf.svg) 0 5px
no-repeat;
background-size: 14px 14px;
text-indent: 20px;
}
}
/**
* Envira AI Tab
*/
&.nav-tab-envira-ai {
margin-right: -1px;
span {
display: inline-block;
background: url(images/icons/envira-ai-black.svg) 0 5px no-repeat;
background-size: 19px 18px;
text-indent: 24px;
}
&.envira-active {
span {
background: url(images/icons/envira-ai-green.svg) 0 5px no-repeat;
background-size: 19px 18px;
}
}
}
/**
* Hover and Active States
*/
&:hover,
&.envira-active {
background: $white;
border-bottom: 1px solid $white;
}
/**
* Focus State
* - Remove WordPress' blue focus box from tabs
*/
&:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
&:last-child {
float: right;
}
/**
* Hides the radio input on a label
* The radio input will be selected when the label is clicked
*/
input[type='radio'] {
display: none;
}
}
}
/**
* Tab Settings
*/
.inside {
margin: 0;
padding: 0;
/**
* Native Envira Gallery Uploader / Select Files
* - Styles the pluploader instance to look the way we want it
* - Also see responsive styles at the end of this file
*/
#envira-gallery-native {
#plupload-upload-ui {
/* Reserves the space needed for the drag-drop-area, which is loaded using JS */
height: 210px;
/**
* A drag-drop-area div is always output, whether we're on a touch
* device or not. WordPress will only style this div if its parent
* has the .drag-drop class (i.e. touch devices won't get any CSS styling)
*
* The below CSS ensures that the drag drop area looks consistent
* regardless of device used, and then adjusts the layout if drag-drop is supported.
*/
#drag-drop-area {
display: none;
border: 4px dashed #b4b9be;
height: 200px;
.drag-drop-inside {
margin: 0 auto 0 auto;
p {
display: block;
text-align: center;
color: #a0a5aa;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px;
/**
* "Drop Files here"
*/
&.drag-drop-info {
display: none;
font-size: 20px;
}
&.drag-drop-buttons {
text-align: center;
position: relative;
top: 20px;
left: 0;
margin: 0;
#plupload-browse-button {
border-radius: 6px;
border-color: $primary_color;
color: $white;
background-color: $primary_color;
}
}
}
}
}
/**
* Select Files from Other Sources Button
*/
a.envira-media-library.button {
display: none;
position: absolute;
margin: 0 auto;
left: 280px;
right: 0;
width: 230px;
top: 115px;
text-align: center;
}
/**
* When the uploader supports drag and drop, a .drag-drop
* class is appended to #drag-drop-area by WordPress
*
* We use this to show certain descriptions
*/
&.drag-drop {
#drag-drop-area {
.drag-drop-inside {
width: 520px;
margin: 50px auto 0 auto;
p {
position: relative;
top: 0;
left: 0;
margin: 0;
}
p.drag-drop-info {
display: block;
}
p.drag-drop-buttons {
margin: 10px 0 0 0;
text-align: left;
}
}
}
}
/**
* Upload Progress Bar
*/
.envira-progress-bar {
display: none;
width: 100%;
position: relative;
height: 10px;
width: 100%;
margin: 10px auto;
border-radius: 10px;
background: #dfdfdf;
background: rgba(0, 0, 0, 0.1);
.envira-progress-bar-inner {
height: 10px;
min-width: 20px;
width: 0;
background: #aaa;
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
-webkit-transition: width 300ms;
-moz-transition: width 300ms;
-ms-transition: width 300ms;
-o-transition: width 300ms;
transition: width 300ms;
}
.envira-progress-bar-status {
clear: both;
position: absolute;
right: 0;
width: 50%;
height: 30px;
margin: 12px 0 0 0;
text-align: right;
.uploading {
}
.done {
display: none;
}
}
}
/**
* Upload Progress Bar
*/
.envira-progress-adding-images {
display: none;
width: 100%;
position: relative;
height: 10px;
width: 100%;
margin: 5px auto;
border-radius: 10px;
/* background: #dfdfdf;
background: rgba(0,0,0,.1);
*/
.envira-progress-bar-inner {
height: 10px;
min-width: 20px;
width: 0;
/* background: #aaa;
background: rgba(0,0,0,.2);*/
border-radius: 10px;
/* -webkit-transition: width 300ms;
-moz-transition: width 300ms;
-ms-transition: width 300ms;
-o-transition: width 300ms;
transition: width 300ms;*/
}
.envira-progress-status {
clear: both;
position: absolute;
right: 0;
width: 50%;
height: 30px;
margin: 12px 0 0 0;
text-align: right;
color: green;
-webkit-transition: 0.05s color ease-in-out;
transition: 0.05s color ease-in-out;
.spinner {
float: right;
margin-top: 0;
visibility: visible;
}
.adding_images {
float: right;
display: inline-block;
}
}
}
p.upload-flash-bypass {
display: none;
}
}
}
div.envira-tab {
padding: 20px;
/**
* External Gallery Tab Area
*/
&#envira-gallery-external {
text-align: center;
/**
* Header
*/
p.envira-intro {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
/**
* External Gallery Types
*/
ul#envira-gallery-types-nav {
margin: 0 0 40px 0;
text-align: center;
li {
display: inline-block;
margin: 0 20px 0 0;
vertical-align: top;
&:last-child {
margin: 0;
}
/**
* Pro uses a <label> element so the user can select the Gallery Type
* Lite uses an <a> element so the user can go to the Upgrade URL
*/
label,
a {
float: left;
width: 110px;
input {
display: none;
}
div.icon {
width: 110px;
height: 110px;
margin: 0 0 10px 0;
border: 1px solid #ddd;
background-size: 64px 64px;
background-position: center;
background-repeat: no-repeat;
}
div.title {
font-weight: 700;
}
}
/**
* Hover State
* Selected State
*/
&:hover,
&.envira-active {
label,
a {
div.icon {
background-color: #f7fcf3;
border-color: #7cc048;
}
}
}
/**
* Featured Content
*/
&#envira-gallery-type-fc {
label,
a {
div.icon {
background-image: url(../images/types/fc.png);
}
}
}
/**
* Instagram
*/
&#envira-gallery-type-instagram {
label,
a {
div.icon {
background-image: url(../images/types/instagram.png);
}
}
}
}
}
/**
* Upgrade Button
*/
a.button.button-x-large {
margin-top: 30px;
}
}
/**
* Envira AI Tab Area
*/
&#envira-gallery-envira-ai {
text-align: center;
padding: 50px;
/**
* AI create button.
*/
a.button.button-envira-ai-tab {
text-transform: none;
margin-top: 5px;
border-radius: 6px;
font-size: 14px;
height: 40px;
line-height: 38px;
}
}
}
}
}
/* ==========================================================================
Envira Albums Drag & Drop Area
========================================================================== */
#envira-albums {
.inside {
#envira-types {
#envira-album-native {
position: relative;
/**
* Galleries (Drop Target)
*/
ul#envira-album-drag-drop-area {
z-index: 2;
min-height: 200px;
margin: 0;
padding: 20px;
border: 4px dashed #b4b9be;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
li {
cursor: move;
}
}
/**
* Drag & Drop Instructions
*/
p.drag-drop-info {
position: absolute;
top: 80px;
z-index: 1;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
color: #a0a5aa;
font-size: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
span {
display: block;
&.drag {
}
&.click {
font-size: 18px;
}
}
small {
display: block;
margin: 5px 0;
font-size: 14px;
}
}
}
}
}
}
/* ==========================================================================
Envira Gallery Settings
Envira Albums Settings
========================================================================== */
#envira-gallery-settings,
#envira-albums-settings {
background: $beige_light; /* The background for tabs, full height */
/**
* Clearfix
*/
&:after {
content: '';
display: table;
clear: both;
}
/**
* Hide the title bar of the metabox, so we have a seamless style
*/
.handlediv {
display: none;
}
.hndle {
display: none;
}
.inside {
margin: 0;
padding: 0;
}
/**
* Tabs
*/
ul#envira-tabs-nav {
width: 160px;
margin: 0;
padding: 0;
border-right: 1px solid #ddd;
li {
float: left;
width: 100%;
margin: 0;
padding: 0;
a {
float: left;
width: 120px;
margin: 0 20px;
padding: 20px 0 20px 25px;
text-decoration: none;
color: #999;
border-bottom: 1px solid #ddd;
background-position: left center;
background-repeat: no-repeat;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: none;
-webkit-transition: none;
/**
* Hover and Active States
*/
&:hover,
&.envira-active {
width: 161px;
margin: -1px 0 0 0;
padding: 20px 20px 20px (20px + 25px);
text-decoration: none;
color: #444;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid $white;
background-color: $white;
background-position: 20px center;
border-left: 5px solid $primary_color;
}
/**
* Focus State
* - Remove WordPress' blue focus box from tabs
*/
&:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}
/**
* Last Item
*/
&:last-child {
a {
border-bottom: none;
&:hover {
border-bottom: none;
}
}
}
/**
* Tab Icons
*/
&.envira-images,
&.envira-galleries {
a {
background-image: url(images/icons/leaf.svg);
background-size: 16px 16px;
}
}
&.envira-config {
a {
background-image: url(images/icons/configuration.svg);
background-size: 16px 16px;
}
}
&.envira-lightbox {
a {
background-image: url(images/icons/lightbox.svg);
background-size: 16px 16px;
}
}
&.envira-mobile {
a {
background-image: url(images/icons/mobile.svg);
background-size: 16px 16px;
}
}
&.envira-breadcrumbs {
a {
background-image: url(images/icons/breadcrumbs.svg);
background-size: 16px 16px;
}
}
&.envira-comments {
a {
background-image: url(images/icons/comments.svg);
background-size: 16px 16px;
}
}
&.envira-search {
a {
background-image: url(images/icons/search.svg);
background-size: 16px 16px;
}
}
&.envira-downloads {
a {
background-image: url(images/icons/downloads.svg);
background-size: 16px 16px;
}
}
&.envira-exif {
a {
background-image: url(images/icons/exif.svg);
background-size: 16px 16px;
}
}
&.envira-pagination {
a {
background-image: url(images/icons/pagination.svg);
background-size: 16px 16px;
}
}
&.envira-pinterest {
a {
background-image: url(images/icons/pinterest.svg);
background-size: 16px 16px;
}
}
&.envira-proofing {
a {
background-image: url(images/icons/proofing.svg);
background-size: 16px 16px;
}
}
&.envira-printing {
a {
background-image: url(images/icons/printing.svg);
background-size: 16px 16px;
}
}
&.envira-slideshow {
a {
background-image: url(images/icons/slideshow.svg);
background-size: 16px 16px;
}
}
&.envira-standalone {
a {
background-image: url(images/icons/standalone.svg);
background-size: 16px 16px;
}
}
&.envira-social {
a {
background-image: url(images/icons/social.svg);
background-size: 16px 16px;
}
}
&.envira-tags {
a {
background-image: url(images/icons/tags.svg);
background-size: 16px 16px;
}
}
&.envira-videos {
a {
background-image: url(images/icons/video.svg);
background-size: 16px 16px;
}
}
&.envira-watermarking {
a {
background-image: url(images/icons/watermark.svg);
background-size: 16px 16px;
}
}
&.envira-woocommerce {
a {
background-image: url(images/icons/woocommerce.svg);
background-size: 16px 16px;
}
}
&.envira-zoom {
a {
background-image: url(images/icons/zoom.svg);
background-size: 16px 16px;
}
}
&.envira-misc {
a {
background-image: url(images/icons/misc.svg);
background-size: 16px 16px;
}
}
&.envira-animations {
a {
background-image: url(images/icons/animations.svg);
background-size: 16px 16px;
}
}
}
}
/**
* Settings
*/
#envira-tabs {
margin: 0 0 0 160px; /* Must match #ul#envira-tabs-nav width */
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: $white;
border-left: 1px solid #ddd;
/**
* Headings
*/
h2 {
clear: none; // Prevents config layouts breaking in WordPress 4.3 and older
}
/**
* All Tabs
*/
table.form-table {
clear: none;
margin: 0 0 40px 0;
&.no-margin {
margin: 0;
}
/**
* Row padding
*/
th,
td {
padding-top: 20px;
padding-bottom: 20px;
}
/**
* Sub Headings
* - Used to denote an Addon's settings within a settings tab e.g. the Mobile tab
*/
tr.sub-heading {
th {
margin: 0;
padding: 20px 0 0 0;
font-style: italic;
font-weight: 400;
font-size: 16px;
}
}
/**
* Full width labels (used for checkboxes that we don't want to be inline)
*/
label.full-width {
display: block;
margin: 0 0 5px 0;
&:first-child {
margin-top: 5px;
}
}
/**
* Full width textareas
*/
textarea {
width: 100%;
}
/**
* Checkbox alignment
*/
input[type='checkbox'] {
margin-bottom: 2px;
}
/**
* Descriptions
*/
p.description,
span.description {
font-size: 13px;
font-style: italic;
color: #666;
}
}
/**
* Upsell/Upgrade Call To Actions
*/
.upgrade-header {
display: table;
margin-bottom: 10px;
width: 100%;
border-bottom: 1px solid #ccc;
padding-bottom: 15px;
img {
float: left;
}
h2 {
float: left;
font-size: 24px;
line-height: 24px;
font-weight: 500;
margin-top: 0px;
max-width: 80%;
padding-top: 0;
}
}
.upgrade-content {
.hero-image-exterior {
border: 1px solid #ccc;
width: 100%;
max-width: 100%;
display: table;
.interior {
padding: 10px;
img {
width: 100%;
display: table;
}
}
}
.two-column-list {
display: table;
width: 100%;
ul {
list-style: none;
list-style-position: inside;
width: 45%;
float: left;
}
}
.cta-buttons {
margin-top: 30px;
a {
display: inline-block;
margin-right: 20px;
}
}
}
/**
* Tab: Images
*/
#envira-tab-images {
/**
* Inline Navigation
* - Select All
* - List View / Grid View
* - Edit / Delete Selected Items
*/
nav {
width: 100%;
&.envira-tab-options {
margin: 20px 0;
}
a.dashicons {
position: absolute;
color: #999;
&.dashicons-grid-view {
right: 20px;
}
&.dashicons-list-view {
right: 50px;
}
&.selected {
color: #23282d;
}
span {
display: inline-block;
text-indent: -9999px;
}
}
/**
* Edit / Delete Selected
* - Hidden by default, shown by JS when image(s) are selected
*/
&.envira-select-options {
display: none;
}
}
/**
* Images
* - Show move cursor
*/
ul#envira-gallery-output {
li {
cursor: move;
}
}
}
/**
* Tab: Galleries
* - Used on Albums
*/
#envira-tab-galleries {
/**
* Inline Navigation
* - Search
*/
nav {
width: 100%;
&.envira-tab-options {
height: 40px;
margin: 20px 0;
position: relative;
/**
* Add Galleries to Album Button
*/
a.envira-galleries-add {
display: none; /* Displayed via JS when Galleries selected */
position: absolute;
top: 0;
left: 0;
}
/**
* Search
*/
input#envira-albums-gallery-search {
position: absolute;
top: 0;
right: 0;
}
}
/**
* Bulk Action Buttons
* - Hidden by default, shown by JS when galleries(s) are selected
*/
&.envira-select-options {
display: none;
}
}
/**
* Images
* - Show move cursor
* - Hide Edit & Delete icons, as these are only displayed when the gallery is assigned to the Album
*/
ul.envira-gallery-images-output {
li {
cursor: move;
a.envira-gallery-remove-image,
a.envira-gallery-modify-image {
display: none;
}
}
}
}
/**
* Clearfix
*/
&:after {
content: '';
display: table;
clear: both;
}
}
}
/* ==========================================================================
Envira Gallery Preview Metabox
========================================================================== */
#envira-gallery-preview {
/**
* Clearfix
*/
&:after {
content: '';
display: table;
clear: both;
}
/**
* Hide the title bar of the metabox, so we have a seamless style
*/
button.handlediv {
display: none;
}
h2.hndle {
display: none;
}
.inside {
margin: 0;
padding: 20px;
}
}
}
}
/* ==========================================================================
Media Modal (Insert Images and Edit Metadata)
========================================================================== */
.media-modal {
/**
* Header Buttons
*/
.edit-attachment-frame {
.edit-media-header {
button.right {
border-right: 1px solid #ddd;
}
}
}
/**
* Upload
*/
.uploader-inline {
/**
* Don't display the 'Select Files from Other Sources' button that we add to plupload
* when we're in a modal.
*/
a.envira-media-library.button {
display: none;
}
}
.envira-progress-bar {
.envira-progress-bar-status {
display: none;
}
}
/**
* Insert
*/
.attachment.details {
-webkit-box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px $primary_color;
box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 7px $primary_color;
.check {
background-color: $primary_color;
-webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px $primary_color;
box-shadow: 0 0 0 1px #fff, 0 0 0 2px $primary_color;
}
}
/**
* Attachments
* - Ensures that images fill each <li> attachment block, providing compatibility from WordPress 4.0 upwards
* - Removed as breaks 4.4, 4.5
ul.attachments {
li.attachment {
width: 20%;
img {
width: 100%;
height: 100%;
}
}
}
*/
/**
* Albums: Select Gallery Cover Image
* - Add some top spacing so that a selected cover image that's on the first line of the results
* doesn't have its checkmark cut off
*/
ul.attachments.envira-albums-gallery-cover-image {
padding: 10px;
}
/**
* Bulk Edit Attachments
* - Restore cursor to default, so the user doesn't think they can click an image
*/
ul.attachments.envira-bulk-edit {
li.attachment {
cursor: default;
.attachment-preview {
cursor: default;
}
}
}
/**
* Edit
*/
.attachment-details {
.attachment-info {
padding: 16px;
/**
* Settings
* - Contains one or more setting elements (Title, Alt etc)
*/
.settings {
margin: 0;
padding: 0;
border: none;
/**
* Individual Setting (Title, Alt etc)
*/
.setting {
margin: 0 0 20px 0;
padding: 0 0 20px 0;
border-bottom: 1px solid #ddd;
/**
* Input
*/
input[type='text'],
textarea {
display: block;
width: 100%;
min-width: 100%;
margin: 0;
}
input[type='checkbox'] {
float: left;
margin: 0 5px 0 0;
}
select {
margin: 0;
}
span {
/**
* Title
*/
&.name {
display: block;
width: 100%;
min-width: 100%;
margin: 0;
padding: 0;
text-align: left;
font-weight: 700;
font-size: 14px;
}
/**
* Description
*/
&.description {
text-align: left;
font-style: normal;
font-size: 13px;
font-style: italic;
color: #666;
}
}
div.description {
clear: both;
float: left;
margin: 5px 0 0 0;
text-align: left;
font-size: 13px;
font-style: italic;
color: #666;
}
}
}
/**
* Actions
* - Save Button
* - Spinner
*/
div.actions {
/**
* Ensure button renders at correct height
*/
a.button {
display: inline-block;
}
}
}
}
}
/* ==========================================================================
Retina
========================================================================== */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
/**
* WP media-views.css doesn't use .wp-core-ui for the x2 icons, therefore they never get applied
*/
.wp-core-ui a.check .media-modal-icon {
background-image: url(../../../../../wp-includes/images/uploader-icons-2x.png) !important;
-webkit-background-size: 134px 15px;
background-size: 134px 15px;
}
}
/* ==========================================================================
Responsive
========================================================================== */
@media screen and (max-width: 1100px) {
/* ==========================================================================
Form
- The envira-gallery class is assigned to the Gallery and Album Add/Edit screens form.
========================================================================== */
form#post.envira-gallery {
#poststuff {
#envira-gallery,
#envira-albums {
/**
* Tab Settings
*/
.inside {
/**
* Native Envira Gallery
*/
#envira-gallery-native {
#plupload-upload-ui {
&.drag-drop {
#drag-drop-area {
border-color: #d5d5d5;
.drag-drop-inside {
width: 100%;
margin-top: 20px;
p.drag-drop-buttons {
text-align: center;
}
}
}
}
a.envira-media-library.button {
left: 0;
right: 0;
width: 235px;
top: 145px;
}
}
}
}
}
}
}
}
@media screen and (max-width: 768px) {
/* ==========================================================================
Form
- The envira-gallery class is assigned to the Gallery and Album Add/Edit screens form.
========================================================================== */
form#post.envira-gallery {
#poststuff {
/* ==========================================================================
Envira Gallery Settings
Envira Albums Settings
========================================================================== */
#envira-gallery-settings,
#envira-albums-settings {
/**
* Tabs
*/
ul#envira-tabs-nav {
width: 60px;
li {
a {
width: 60px;
height: 60px;
margin: 0;
padding: 0;
text-indent: -9999px;
background-position: center;
&:hover,
&.envira-active {
width: 60px;
height: 60px;
margin: 0;
padding: 0;
text-indent: -9999px;
background-position: center;
}
}
}
}
/**
* Settings
*/
#envira-tabs {
margin: 0 0 0 60px; /* Must match #ul#envira-tabs-nav width */
}
}
}
}
}
/**
* Envira AI tab.
*/
@media screen and (min-width: 2349px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab.nav-tab-envira-ai {
margin-right: -3px !important;
}
}
}
}
@media screen and (min-width: 1446px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab.nav-tab-envira-ai {
margin-right: -3px !important;
}
}
}
}
@media screen and (max-width: 1445px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab.nav-tab-envira-ai {
margin-right: -3px !important;
}
}
}
}
@media screen and (max-width: 1345px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab.nav-tab-envira-ai {
margin-right: -3px !important;
}
}
}
}
@media screen and (max-width: 1354px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab.nav-tab-envira-ai {
margin-right: -4px !important;
}
}
}
}
@media screen and (max-width: 768px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab.nav-tab-envira-ai {
margin-right: -5px !important;
}
}
}
}
@media screen and (max-width: 567px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab {
&.nav-tab-envira-ai span,
&.nav-tab-external-gallery span,
&.nav-tab-native-envira-gallery span {
white-space: normal;
}
}
.nav-tab {
&.nav-tab-envira-ai,
&.nav-tab-external-gallery,
&.nav-tab-native-envira-gallery {
height: 60px;
}
}
}
}
}
@media screen and (max-width: 489px) {
#envira-gallery {
h2.nav-tab-wrapper {
.nav-tab.nav-tab-envira-ai {
margin-right: -6px !important;
}
}
}
}
/**
* Envira Gallery Admin layout
* - Styles for the Envira Gallery admin area
*/
@import './image-select';
/**
* Envira AI Upsell Modal
*/
@import './image-create-ai';