@font-face { font-family: 'envira'; src: url("../fonts/envira.eot"); src: url("../fonts/envira.eot?#iefix") format("embedded-opentype"), url("../fonts/envira.woff") format("woff"), url("../fonts/envira.ttf") format("truetype"), url("../fonts/envira.svg#envira") format("svg"); font-weight: normal; font-style: normal; } [class*='envira-']:before { display: inline-block; font-family: 'envira'; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .envira-configuration:before { content: '\0041'; } .envira-leaf:before { content: '\0042'; } .envira-lightbox:before { content: '\0044'; } .envira-misc:before { content: '\0045'; } .envira-mobile:before { content: '\0046'; } .envira-pagination:before { content: '\0047'; } .envira-proofing:before { content: '\0048'; } .envira-slideshow:before { content: '\0049'; } .envira-tags:before { content: '\004a'; } .envira-thumbnails:before { content: '\004b'; } .envira-video:before { content: '\004c'; } .envira-watermark:before { content: '\004d'; } .envira-cloud-download:before { content: '\004e'; } .envira-toggle-on:before { content: '\004f'; } .envira-plus-circle:before { content: '\0050'; } .envira-down-arrow:before { content: '\0051'; } .envira-list:before { content: '\0052'; } .envira-grid:before { content: '\0053'; } .envira-pinterest-p:before { content: '\0054'; } .envira-whatsapp-p:before { content: '\0054'; } .envira-pencil:before { content: '\0055'; } .envira-close:before { content: '\0056'; } .envira-check:before { content: '\0057'; } .envira-welcome-wrap { padding: 20px 30px; .nav-tab-wrapper { a { font-weight: 400; font-size: 18px; line-height: 24px; } a.nav-tab-active { font-weight: 600; } } .nav-tab { margin-right: 0.85em; } .envira-title { width: 100%; margin-bottom: 20px; h1.welcome-header { background: none; font-size: 42px; font-weight: 400; padding-left: 0; span { color: #7cc048; margin-right: -10px; text-indent: 0; line-height: 1; font-size: 33px; } } h1.welcome-header, .about-text { text-indent: 10px; } .about-text { font-size: 21px; line-height: 32px; font-weight: 200; } } .envira-welcome-sidebar { float: right; width: 20%; padding: 15px; .sidebox { background: #e6e6e6; padding: 20px; font-size: 14px; margin-bottom: 20px; h4 { font-weight: 600; line-height: 1.3; color: #000; margin: 0 0 10px 0; } input[type='password'], input[type='text'], input[type='email'] { width: 100%; } input[type='submit'], input[type='button'] { margin: 10px 0 0; } input[type='checkbox'] { } .form-row { input[type='checkbox'] { margin: 2px; } label { margin-left: 5px; font-size: 12px; } margin: 2px 0; width: 100%; font-size: 14px; line-break: 14px; } &.warning { background: #950303; color: white; h4 { color: #ffae00; } p { strong { color: #ffae00; } } } } sidebox:last-of-type { margin-bottom: 0; } } .envira-welcome-main, .envira-get-started-main, .envira-support-main { width: 75%; float: left; } .envira-wrap { padding: 20px; } } .changelog-main { padding: 0 10px; ul { list-style: disc; list-style-position: inside; } } /*------------------------------------------------------------------------------ * 1.0 Welcome Screen *----------------------------------------------------------------------------*/ /* * 1.1 Version Badge */ .envirabadge { color: #d84800; display: inline-block; font: 400 150px/1 dashicons !important; } .envirabadge:before { content: "\f448"; } .about-wrap .envirabadge { position: absolute; top: 0; right: 0; } .index_page_enviracredits code, .index_page_enviraabout code { background-color: #e0e0e0; color: #636363; font-size: 1em; } @media only screen and (max-width: 500px) { .about-wrap .envirabadge { position: relative; margin: 10px auto; top: auto; right: auto; } } /* * 1.2 About Panel */ body.post-type-envira div.wrap.about-wrap { padding-top: 20px; padding-left: 20px; h1.welcome-header { background: none; font-size: 42px; font-weight: 400; padding-left: 0; } h1.welcome-header, .about-text { text-indent: 10px; } .nav-tab { padding: 15px; } } /* * 1.2.1 Headline Feature */ .envira_page_envira-gallery-lite-welcome .enviraheadline-feature { margin-bottom: 2em; margin-top: 3em; padding: 2em 3em; } .envira_page_envira-gallery-lite-welcome .enviraheadline { margin: 0 auto; width: 45em; } .envira_page_envira-gallery-lite-welcome .enviraheadline span.dashicons { background-color: #f1f1f1; color: #d84800; clear: left; font-size: 100px; float: left; height: 100px; line-height: 100px; margin: 0 15px 15px 0; text-align: center; width: 100px; } .envira_page_envira-gallery-support { .headline-title { font-size: 2.2em; font-weight: 300; line-height: 2; margin: 1em 0 1em; text-align: center; } } .envira_page_envira-gallery-lite-welcome .enviraheadline-feature p { font-size: 1.15em; margin: 1.15em auto 0.6em 0; } .envira_page_envira-gallery-lite-welcome, .envira_page_envira-gallery-lite-get-started, .envira_page_envira-gallery-support { .envira-features-section, .envira-recent-section { border-bottom: 1px solid #ccc; clear: both; margin-bottom: 20px; margin-top: 10px; overflow: hidden; padding-bottom: 2em; word-break: break-word; p { font-size: 14px; line-height: 1.5; } img { margin-bottom: 20px; } code { word-break: break-all; } span.dashicons { /* DELETE */ background-color: #fff; border-radius: 50%; clear: left; color: #d84800; font-size: 50px; float: left; height: 80px; line-height: 80px; margin: 0 15px 15px 0; text-align: center; width: 80px; } img.icon { background-color: transparent; clear: left; font-size: 50px; float: left; // height: 80px; line-height: 80px; margin: 0 15px 15px 0; text-align: center; width: 80px; } h4.feature-title { color: #7cc048; font-size: 1.35em; margin-bottom: 0.6em; margin-top: 0; } span.badge { font-size: 0.7em; font-weight: 500; display: inline-block; text-transform: uppercase; background-color: #7cc048; color: white; padding: 3px 5px; border-radius: 15%; &.new { } &.updated { } } .headline-title { font-size: 25px; font-weight: 400; line-height: 1.5; margin: 1em auto 2em; text-align: center; color: #000; } .envira-feature-with-images { border-bottom: 1px solid #ccc; margin-bottom: 5em; padding-bottom: 2em; } .envira-feature, .envira-feature-imaged { float: left; margin-bottom: 3em; margin-right: 4.799999999%; width: 47.6%; } .envira-feature.opposite, .envira-feature-imaged.anon { margin-right: 0; } .envira-feature code { font-size: 0.95em; line-height: 1.5; } .envira-big-icon { font-size: 80px; float: left; margin-left: 10px; &.envira-leaf { color: #7cc048; } } } .envira-feature:after { clear: both; content: ""; margin-bottom: 2em; } .envira-feature-imaged p { clear: left; font-size: 1.1em; } .envira-feature-imaged img { clear: left; } .envira-feature .feature-title { font-size: 1em; line-height: 1.5; margin-bottom: 0; margin-left: 110px; margin-top: 0; text-align: left; } .envira-feature p { margin-left: 110px; } } /* * 1.2.3 Changelog Section */ .envira_page_envira-gallery-lite-welcome, .envira_page_envira-gallery-lite-get-started, .envira_page_envira-gallery-support { .envira-recent-section, .envira-posts { clear: both; margin-bottom: 20px; margin-top: 10px; padding-bottom: 0; h3 { margin-top: 0; color: #7cc048; font-size: 1.50em; line-height: 1.5; font-weight: 500; } img { &.post-image { max-width: 100%; } } } .envira-recent-section { padding-bottom: 20px; } .envira-recent-section:after { clear: both; content: ""; display: table; } .enviratwo-column div { float: left; margin-right: 4.799999999%; position: relative; width: 47.6%; } .envirathree-column .enviracolumn { float: left; margin-right: 5%; position: relative; width: 29.95%; } .enviratwo-column .enviracolumn:nth-of-type(2n), .envirathree-column .enviracolumn:nth-of-type(3n) { margin-right: 0; } .envira-recent { margin-right: 0; p { margin-bottom: 0; } } .envira-recent:after { clear: both; content: ""; display: table; } .envira-recent .title { font-size: 14px; margin-bottom: 0.75em; margin-top: 0; } .envira-recent-url { text-align: center; } .envira-assets { clear: both; margin-bottom: 3em; } article { &.docs { li { width: 45%; display: inline-block; } } } } .envira_page_envira-gallery-support { h3.headline-title { margin-bottom: 1em; } } .envira_page_envira-gallery-lite-welcome { .envira-recent-section { padding-bottom: 30px; h3.headline-title { margin-bottom: 1.25em; } &.last-section { padding-top: 0px; padding-bottom: 0; h3 { margin-bottom: 1.25em; } } } } #changelog-envira-gallery { h3 { background: #7cc048; color: white; font-weight: 500; width: 100%; padding: 5px; } ul { list-style: inside; } li { width: 80%; vertical-align: top; } } .envira-headline-button { margin: 20px auto 0 auto; .button.button-primary { font-size: 17px; line-height: 30px; // margin: -15px 0 40px 0; // padding: 0 60px; // line-height: 60px; // font-weight: 700; // font-size: 21px; // height: 60px; } } div.label { float: left; margin-right: 10px; } div.icons-container { display: table; clear: both; } ul.social-icons { float: left; margin-top: 0px; margin-bottom: 5px; li { float: left; width: 20px; height: 20px; margin-right: 5px; a { width: 20px; height: 20px; background-size: 20px 20px; text-decoration: none; text-indent: -999em; float: left; } a.facebook { background-image: url(../images/icons/facebook-black.svg); background-repeat: no-repeat; } a.twitter { background-image: url(../images/icons/twitter-black.svg); background-repeat: no-repeat; } a.instagram { background-image: url(../images/icons/instagram-black.svg); background-repeat: no-repeat; opacity: 0.7; } a.youtube { background-image: url(../images/icons/youtube-black.svg); background-repeat: no-repeat; } a.pinterest { background-image: url(../images/icons/pinterest-black.svg); background-repeat: no-repeat; } } } /*------------------------------------------------------------------------------ * 2.0 Addon Screen *----------------------------------------------------------------------------*/ body.envira_page_envira-gallery-lite-welcome-addons { #wpfooter { position: relative; } .envira-addons-area.unlicensed { h3 { display: none; } } #envira-addons .envira-addons-area .envira-addon p { font-size: 18px; } } /*------------------------------------------------------------------------------ * 3.0 Upgrade Screen *----------------------------------------------------------------------------*/ .upgrade-wrap { text-align: center; h3 { font-size: 28px; line-height: 28px; font-weight: 400; margin: 35px auto 10px auto; } h4.headline-subtitle { font-size: 20px; line-height: 24px; font-weight: 200; margin: 20px auto; display: block; } a.button { margin: 10px auto; display: table; clear: both; } } .upgrade-list { display: table; margin-bottom: 40px; border-bottom: 1px solid #ccc; padding-bottom: 35px; ul { width: 85%; margin: 20px auto; } li { width: 50%; margin: 20px auto; float: left; display: block; font-size: 16px; line-height: 18px; min-height: 75px; .interior { padding: 0 10px; } h5 { font-size: 18px; line-height: 24px; margin: 5px auto; font-weight: 700; } p { margin: 0; } } } .upgrade-video { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .upgrade-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*------------------------------------------------------------------------------ * 4.0 Lite vs Pro *----------------------------------------------------------------------------*/ body.envira_page_envira-gallery-lite-litevspro { .envira-get-started-main { width: 100%; } } #envira-admin-litevspro { .centered { text-align: center; } h1 { font-size: 34px; line-height: 32px; } p.centered { font-size: 18px; line-height: 21px; } &.wrap { margin-left: 0; margin-right: 0; } .litevspro-table-header { background: #fff; // border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; border-left: 1px solid #DDDDDD; } .envira-admin-litevspro-section { margin: 0 0 30px 0; padding: 30px; line-height: 2; &.no-bottom { margin-bottom: 0; padding-bottom: 0; } &.litevspro-table-header { padding-bottom: 15px; } } table tr td { border-bottom: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; padding: 30px; vertical-align: top; width: 33%; p { font-size: 18px; line-height: 24px; } } table tr td:last-child { border-right: 0; } table { border-bottom: 0; } .envira-admin-litevspro-section-hero { border-top: 0; font-size: 16px; line-height: 18px; p { text-align: center; font-size: 16px; line-height: 18px; } h3.call-to-action { font-size: 21px; font-weight: 500; text-align: center; } span.envira-deal { font-weight: 500; color: green; } } .envira-admin-litevspro-section-table { padding-left: 0; padding-right: 0; padding-top: 0; table { width: 100%; tr td:first-child { border-left: 1px solid #DDDDDD; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; } tr td:last-child { border-right: 1px solid #DDDDDD; border-bottom-color: rgb(221, 221, 221); border-bottom-style: solid; border-bottom-width: 1px; background-color: #F3F9FE; } tr:first-child td { border-top: 1px solid #DDD; } th { text-align: left; font-weight: 600; font-size: 18px; padding-left: 30px; padding-bottom: 20px; padding-top: 20px; border-top: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; vertical-align: middle; } th:last-child { border-right: 1px solid #DDDDDD; } th:first-child { border-left: 1px solid #DDDDDD; } td { background: #fff; strong { display: block; } } p { background-repeat: no-repeat; background-size: 15px auto; background-position: 0 6px; margin: 0; } p.features-full { padding-left: 30px; background-position: 0 4px; background-image: url(../images/icons/litevspro/tick.svg); } p.features-none { padding-left: 30px; background-position: 6px 6px; background-image: url(../images/icons/litevspro/cross_red.svg); background-size: 15px auto; } p.features-partial { padding-left: 30px; background-position: 6px 6px; background-size: 15px auto; background-image: url(../images/icons/litevspro/cross.svg); } } } } /*------------------------------------------------------------------------------ * 5.0 Getting Started (Revised) *----------------------------------------------------------------------------*/ .envira-get-started-section { margin-top: 20px; .centered { text-align: center; } .envira-admin-get-started-panel { display: flex; background: white; padding: 20px; font-size: 16px; line-height: 25px; margin-bottom: 20px; h2 { font-size: 2em; font-weight: 500; line-height: 1.2em; margin-top: 0; margin-bottom: 0; text-transform: capitalize; } p { font-size: 16px; line-height: 20px; a { font-weight: 500; color: #7cc048; text-decoration: none; } a:hover { text-decoration: underline; } } ul { list-style: disc; list-style-position: inside; &.list-of-links { list-style: none; a { color: #7cc048; text-decoration: none; } a:hover { text-decoration: underline; } } } .feature-photo-column { padding-left: 30px; max-width: 360px; min-width: 350px; display: inherit; img { width: 100%; margin: auto; } &.photo-left { padding-left: 0; padding-right: 30px; } } &.mini-panel { .feature-photo-column { padding-top: 10px; a { margin: 0 auto; height: auto; } img { width: auto; margin: 0 auto; } } } } .envira-admin-get-started-banner { display: flex; background: black; color: white; padding: 10px 0; margin-bottom: 20px; .banner-text { display: block; margin: 0 auto; padding: 10px 0 0 0; text-align: center; font-size: 1.5em; text-align: left; h3 { font-size: 1.5em; margin: 5px auto; color: white; } } .banner-button { margin: auto; max-width: 33%; height: 100%; // padding: 0 0 10px 0; // text-align: center; vertical-align: middle; a { height: auto; padding: 15px 25px; font-size: 1.45em; display: block; margin: auto; } } } } /*------------------------------------------------------------------------------ * 1.0 Media Queries *----------------------------------------------------------------------------*/ @media screen and ( max-width: 782px ) { .envira-welcome-wrap { .envira-welcome-sidebar { float: none; width: 100%; padding: 0; } .envira-welcome-main { float: none; width: 100%; } .envira-title { h1.welcome-header { line-height: 42px; } h1.welcome-header, .about-text { text-indent: 0; } } } .enviraheadline-feature, .envira-features-section, .envira-recent-section { margin-left: 20px; margin-right: 20px; } .envira_page_envira-gallery-lite-welcome .enviraheadline-feature { padding: 0; } .envira_page_envira-gallery-lite-welcome .enviraheadline { margin: 0; width: 97%; } .envira_page_envira-gallery-lite-welcome .envira-features-section { clear: both; margin-bottom: 0; margin-top: 2em; padding-bottom: 2em; } .envira_page_envira-gallery-lite-welcome .envira-features-section .envira-feature-with-images { margin-bottom: 2em; } .envira_page_envira-gallery-lite-welcome .envira-features-section .headline-title { margin-bottom: 1em; } .envira_page_envira-gallery-lite-welcome .envira-recent-section .changelog-title { font-size: 1.25em; line-height: 1.5; margin-bottom: 0.5em; margin-top: 0.5em; } .envira_page_envira-gallery-lite-welcome .envira-features-section .feature-title, .envira_page_envira-gallery-lite-welcome .envira-recent-section .title { font-size: 1.25em; line-height: 1.25; margin-top: 0.6em; text-align: left; } .envira_page_envira-gallery-lite-welcome .envira-features-section .envira-feature, .envira_page_envira-gallery-lite-welcome .envira-features-section .envira-feature-imaged { clear: both; float: left; margin-bottom: 1em; margin-top: 1em; margin-right: 0; padding-right: 1em; width: 100%; } .envira_page_envira-gallery-lite-welcome .envira-features-section .envira-feature-imaged p { font-size: 1em; } .envira_page_envira-gallery-lite-welcome .envira-features-section .envira-feature span { margin-top: 0.33em; } .envira_page_envira-gallery-lite-welcome .envira-feature.opposite .feature-title, .envira_page_envira-gallery-lite-welcome .envira-feature.opposite p { float: none; } .envira_page_envira-gallery-lite-welcome .envira-recent-section { clear: both; margin-bottom: 2em; margin-top: 2em; } .envira_page_envira-gallery-lite-welcome .envira-recent { margin-bottom: 0; } .envira_page_envira-gallery-lite-welcome .envira-recent-section .changelog-title { margin-bottom: 0.5em; } .envira_page_envira-gallery-lite-welcome .envira-recent .title { font-size: 1em; } .envira_page_envira-gallery-lite-welcome .envira-recent p { margin-bottom: 1em; } .envira_page_envira-gallery-lite-welcome .envira-recent-section .two-col > div, .envira_page_envira-gallery-lite-welcome .envira-recent-section .three-col .col { margin-top: 0; padding-bottom: 0.5em; width: 100%; } .envira_page_envira-gallery-lite-welcome .envirathree-column .enviracolumn { width: 100%; } } @media screen and ( max-width: 360px ) { .envira_page_envira-gallery-lite-welcome .enviraheadline { text-align: center; } .envira_page_envira-gallery-lite-welcome .enviraheadline span.dashicons { clear: none; font-size: 80px; float: none; height: 80px; line-height: 80px; margin: 0 auto; width: 80px; } .envira_page_envira-gallery-lite-welcome .enviraheadline-feature .headline-title, .envira_page_envira-gallery-lite-welcome .envira-features-section .headline-title { font-size: 1.5em; line-height: 1.5; text-align: left; } .envira_page_envira-gallery-lite-welcome .enviraheadline-feature .headline-title { margin: 1em 0 0; } .envira_page_envira-gallery-lite-welcome .enviraheadline-feature p { margin: 1.15em auto 0.6em 0; text-align: left; width: auto; } .envira_page_envira-gallery-lite-welcome .envira-features-section .envira-feature { text-align: center; } .envira_page_envira-gallery-lite-welcome .envira-features-section span.dashicons { float: none; } .envira_page_envira-gallery-lite-welcome .envira-features-section .feature-title, .envira_page_envira-gallery-lite-welcome .envira-features-section p { margin-left: 0; text-align: left; } }