#as3cf-settings.wpome button, #as3cf-settings.wpome a, #as3cf-settings.wpome input { transition: all 0.3s ease; } #as3cf-settings.wpome button, #as3cf-settings.wpome a.button { font-weight: 500; border-radius: 6px; white-space: nowrap; min-width: 4rem; } #as3cf-settings.wpome button.btn-lg, #as3cf-settings.wpome a.button.btn-lg { font-size: 0.875rem; padding: 0.95rem 1.2rem; min-width: 6rem; } #as3cf-settings.wpome button.btn-md, #as3cf-settings.wpome a.button.btn-md { font-size: 0.875rem; padding: 0.75rem 1.05rem; } #as3cf-settings.wpome button.btn-sm, #as3cf-settings.wpome a.button.btn-sm { font-size: 0.875rem; padding: 0.55rem 0.9rem; } #as3cf-settings.wpome button.btn-xs, #as3cf-settings.wpome a.button.btn-xs { font-size: 0.7rem; padding: 0.4rem 0.6rem; min-width: 3rem; } #as3cf-settings.wpome button.btn-primary, #as3cf-settings.wpome .btn-row button.btn-primary, #as3cf-settings.wpome a.button.btn-primary { color: var(--as3cf-color-white); background: var(--as3cf-color-primary-500); border: 1px solid rgba(0, 0, 0, 0.12); } #as3cf-settings.wpome button.btn-primary:hover, #as3cf-settings.wpome a.button.btn-primary:hover { background-color: var(--as3cf-color-primary-600); } #as3cf-settings.wpome button.btn-outline, #as3cf-settings.wpome .btn-row button.btn-outline, #as3cf-settings.wpome a.button.btn-outline { color: var(--as3cf-color-primary-500); background: none; border: 1px solid var(--as3cf-color-primary-500); } #as3cf-settings.wpome button.btn-outline:hover, #as3cf-settings.wpome a.button.btn-outline:hover { color: var(--as3cf-color-primary-600); background-color: var(--as3cf-color-primary-50); border: 1px solid var(--as3cf-color-primary-600); } #as3cf-settings.wpome button.btn-outline:focus, #as3cf-settings.wpome button.btn-outline:active, #as3cf-settings.wpome a.button.btn-outline:focus, #as3cf-settings.wpome a.button.btn-outline:active { border: 1px solid var(--as3cf-color-primary-200); } #as3cf-settings.wpome button.btn-primary:focus, #as3cf-settings.wpome button.btn-primary:active, #as3cf-settings.wpome button.btn-outline:focus, #as3cf-settings.wpome button.btn-outline:active, #as3cf-settings.wpome a.button.btn-primary:focus, #as3cf-settings.wpome a.button.btn-primary:active, #as3cf-settings.wpome a.button.btn-outline:focus, #as3cf-settings.wpome a.button.btn-outline:active { box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-primary-400); outline: 0; } #as3cf-settings.wpome button.btn-disabled, #as3cf-settings.wpome .btn-row button.btn-disabled, #as3cf-settings.wpome a.button.btn-disabled { color: var(--as3cf-text-disabled); border: 1px solid var(--as3cf-color-gray-400); opacity: 0.5; cursor: default; } #as3cf-settings.wpome button.btn-disabled.btn-primary, #as3cf-settings.wpome a.button.btn-disabled.btn-primary { background: var(--as3cf-color-gray-300); } #as3cf-settings.wpome button.btn-disabled:hover, #as3cf-settings.wpome a.button.btn-disabled:hover { box-shadow: none !important; } #as3cf-settings.wpome button.btn-disabled.btn-outline:hover, #as3cf-settings.wpome a.button.btn-disabled.btn-outline:hover { color: var(--as3cf-text-disabled); border: 1px solid var(--as3cf-color-gray-400); } #as3cf-settings.wpome button.btn-expandable, #as3cf-settings.wpome a.button.btn-expandable { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 auto; width: 24px; height: 24px; min-width: 24px; min-height: 24px; background: url(../img/icon/arrow.svg) no-repeat center/18px; border-radius: 12px; transition: all 0.2s ease-in; } #as3cf-settings.wpome button.btn-expandable.btn-expanded, #as3cf-settings.wpome a.button.btn-expandable.btn-expanded { transform: rotate(180deg); } #as3cf-settings.wpome button.btn-expandable:hover, #as3cf-settings.wpome button.btn-expandable:focus, #as3cf-settings.wpome button.btn-expandable:active, #as3cf-settings.wpome a.button.btn-expandable:hover, #as3cf-settings.wpome a.button.btn-expandable:focus, #as3cf-settings.wpome a.button.btn-expandable:active { box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome button.btn-refresh, #as3cf-settings.wpome a.button.btn-refresh { all: unset; display: flex; align-items: center; gap: 0.25rem; box-sizing: border-box; cursor: pointer; flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--as3cf-link-color); border-radius: 3px; padding: 0.1rem; margin-right: 0 -0.1rem; text-decoration: underline; } #as3cf-settings.wpome button.btn-refresh img.refresh, #as3cf-settings.wpome a.button.btn-refresh img.refresh { width: 12px; height: 12px; min-width: 12px; min-height: 12px; } #as3cf-settings.wpome button.btn-refresh img.refresh.refreshing, #as3cf-settings.wpome a.button.btn-refresh img.refresh.refreshing { animation: spin 1s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } } #as3cf-settings.wpome button.btn-refresh.btn-refreshing, #as3cf-settings.wpome a.button.btn-refresh.btn-refreshing { cursor: default; } #as3cf-settings.wpome button.btn-refresh:hover, #as3cf-settings.wpome button.btn-refresh:active, #as3cf-settings.wpome button.btn-refresh:focus, #as3cf-settings.wpome a.button.btn-refresh:hover, #as3cf-settings.wpome a.button.btn-refresh:active, #as3cf-settings.wpome a.button.btn-refresh:focus { text-decoration: none !important; box-shadow: 0; } #as3cf-settings.wpome button.btn-refresh:focus-visible, #as3cf-settings.wpome a.button.btn-refresh:focus-visible { text-decoration: none; box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome button.btn-refresh:disabled, #as3cf-settings.wpome a.button.btn-refresh:disabled { color: var(--as3cf-color-gray-800); text-decoration: none; } #as3cf-settings.wpome a, #as3cf-settings.wpome button { cursor: pointer; } #as3cf-settings.wpome .btn-row { width: 100%; display: flex; flex-direction: row; margin: 2.5rem 0 2.5rem 0; } #as3cf-settings.wpome .btn-row .buttons-left .btn-primary { margin-left: 0.85rem; } #as3cf-settings.wpome .btn-row .btn-outline { margin-left: auto; } #as3cf-settings.wpome .btn-row .btn-primary { margin-left: auto; } #as3cf-settings.wpome .btn-row .btn-outline + .btn-primary { margin-left: 0.85rem; } #as3cf-settings.wpome .buttons-right { margin-left: auto; flex: 0 0 auto; } #as3cf-settings.wpome .buttons-right .pause { margin-right: 0.7rem; } #as3cf-settings.wpome .fixed-cta-block { width: calc(100% - 160px); display: flex; flex-direction: row; background: var(--as3cf-color-white); box-shadow: 0 -11px 24px 0 rgba(151, 146, 175, 0.2); box-sizing: border-box; z-index: 9999; position: fixed; bottom: 0; left: 160px; } @media screen and (max-width: 960px) { #as3cf-settings.wpome .fixed-cta-block { width: calc(100% - 36px); left: 36px; } } @media screen and (max-width: 782px) { #as3cf-settings.wpome .fixed-cta-block { width: 100%; left: 0; } } #as3cf-settings.wpome .fixed-cta-block .buttons { margin: 0; padding: 1rem 2rem; display: flex; justify-content: flex-end; width: calc(1220px + 4rem); max-width: calc(1220px + 4rem); box-sizing: border-box; } @media screen and (max-width: 1100px) { #as3cf-settings.wpome .fixed-cta-block .buttons { max-width: calc(780px + 4rem); } } @media screen and (max-width: 872px) { #as3cf-settings.wpome .fixed-cta-block .buttons { max-width: 100%; } } #as3cf-settings.wpome .fixed-cta-block .buttons .btn-outline { margin-right: 1rem; } #as3cf-settings.wpome .button-tab { background: var(--as3cf-color-white); border: 1px solid var(--as3cf-color-gray-400); border-radius: 6px; height: 3rem; display: flex; flex-direction: row; align-items: center; padding: 0 1.3rem; text-decoration: none; margin-right: 1.5rem; position: relative; transition-duration: 0.15s; transition-timing-function: linear; } #as3cf-settings.wpome .button-tab.active { border: 1px solid var(--as3cf-color-primary-500); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05), 0 2px 1px 0 rgba(0, 0, 0, 0.05); } #as3cf-settings.wpome .button-tab:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 2px 1px 0 rgba(0, 0, 0, 0.05); } #as3cf-settings.wpome .button-tab:focus, #as3cf-settings.wpome .button-tab:active { box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome .button-tab.btn-disabled { cursor: default; } #as3cf-settings.wpome .button-tab.btn-disabled:hover { box-shadow: none; } #as3cf-settings.wpome a.help { width: 18px; height: 18px; min-width: 18px; min-height: 18px; border: none; border-radius: 100%; } #as3cf-settings.wpome a.help:hover, #as3cf-settings.wpome a.help:focus, #as3cf-settings.wpome a.help:active { filter: brightness(90%); box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome a.help .icon.help { width: 18px; height: 18px; min-width: 18px; min-height: 18px; border: none; border-radius: 100%; } #as3cf-settings.wpome .icon.status { width: 16px; height: 16px; } #as3cf-settings.wpome .icon.status:hover { filter: brightness(90%); } #as3cf-settings.wpome .icon.close:hover { filter: brightness(90%); } #as3cf-settings.wpome .icon.bucket { width: 18px; height: 18px; margin-right: 1.4rem; } #as3cf-settings.wpome .icon.region { width: 18px; height: 18px; } #as3cf-settings.wpome .icon.notice-icon { width: 24px; height: 24px; margin-right: 0.8rem; } #as3cf-settings.wpome .icon.notice-icon.assets-wizard { margin-top: -2px; } #as3cf-settings.wpome label { font-size: 0.875rem; color: var(--as3cf-color-gray-900); cursor: pointer; display: flex; align-items: center; } #as3cf-settings.wpome .disabled > label { cursor: default; } #as3cf-settings.wpome input[type=checkbox], #as3cf-settings.wpome input[type=radio] { all: unset; box-sizing: border-box; background: var(--as3cf-color-white); border: 1px solid var(--as3cf-color-gray-400); width: 18px; height: 18px; min-width: 18px; min-height: 18px; margin: 0 0.85rem 0 0; padding: 0; } #as3cf-settings.wpome input[type=checkbox]:disabled, #as3cf-settings.wpome input[type=checkbox]:disabled:hover, #as3cf-settings.wpome input[type=radio]:disabled, #as3cf-settings.wpome input[type=radio]:disabled:hover { box-shadow: none; } #as3cf-settings.wpome input[type=checkbox]:disabled:checked, #as3cf-settings.wpome input[type=checkbox]:disabled:hover:checked, #as3cf-settings.wpome input[type=radio]:disabled:checked, #as3cf-settings.wpome input[type=radio]:disabled:hover:checked { color: var(--as3cf-color-gray-400); background-color: var(--as3cf-color-gray-200); border: 1px solid var(--as3cf-color-gray-400); } #as3cf-settings.wpome input[type=checkbox]:disabled:not(:checked), #as3cf-settings.wpome input[type=checkbox]:disabled:hover:not(:checked), #as3cf-settings.wpome input[type=radio]:disabled:not(:checked), #as3cf-settings.wpome input[type=radio]:disabled:hover:not(:checked) { background-color: var(--as3cf-color-gray-100); border: 1px solid var(--as3cf-color-gray-300); } #as3cf-settings.wpome input[type=radio] { border-radius: 100%; } #as3cf-settings.wpome input[type=radio]:checked { border: 1px solid var(--as3cf-color-secondary-700); background: var(--as3cf-color-secondary-500) url('data:image/svg+xml;utf8,') no-repeat center; } #as3cf-settings.wpome input[type=radio]:checked:disabled { background-image: url('data:image/svg+xml;utf8,'); } #as3cf-settings.wpome input[type=radio]:checked::before { content: none; } #as3cf-settings.wpome input[type=radio]:hover { box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome input[type=radio]:hover:not(:checked) { background-color: var(--as3cf-color-secondary-50); } #as3cf-settings.wpome input[type=checkbox] { border-radius: 3px; margin-top: -2px; } #as3cf-settings.wpome input[type=checkbox]:checked { background: var(--as3cf-color-secondary-500) url('data:image/svg+xml;utf8,') no-repeat center/75%; border: 1px solid var(--as3cf-color-secondary-600); } #as3cf-settings.wpome input[type=checkbox]:checked:disabled { background-image: url('data:image/svg+xml;utf8,'); } #as3cf-settings.wpome input[type=checkbox]:checked::before { content: none; } #as3cf-settings.wpome input[type=checkbox]:hover { box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome input[type=checkbox]:hover:not(:checked) { background-color: var(--as3cf-color-secondary-50); } #as3cf-settings.wpome .checkbox, #as3cf-settings.wpome .radio-btn { display: flex; flex-direction: row; align-items: center; margin-bottom: 0.75rem; } #as3cf-settings.wpome .checkbox:last-of-type, #as3cf-settings.wpome .radio-btn:last-of-type { margin-bottom: 0; } #as3cf-settings.wpome .checkbox label { line-height: 1; display: flex; align-items: center; } #as3cf-settings.wpome input[type=text], #as3cf-settings.wpome textarea { background: var(--as3cf-color-white); border: 1px solid var(--as3cf-color-gray-400); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05); border-radius: 8px; padding: 0.95rem 1rem; font-size: 0.875rem; color: var(--as3cf-color-gray-900); line-height: 1.2; margin: 0; box-sizing: border-box; } #as3cf-settings.wpome input[type=text].licence-field, #as3cf-settings.wpome textarea.licence-field { width: 510px; margin-right: 0.75rem !important; letter-spacing: 0.75px; } #as3cf-settings.wpome input[type=text].licence-field::placeholder, #as3cf-settings.wpome textarea.licence-field::placeholder { letter-spacing: 0.25px; } #as3cf-settings.wpome textarea { line-height: 1.3 !important; /* Standards compliant scrollbar (future) */ /* scrollbar-color: var(--as3cf-secondary-color) var(--as3cf-color-white); scrollbar-width: 12px; */ /* Ye olde webkit scrollbar */ } #as3cf-settings.wpome textarea::-webkit-scrollbar { width: 12px; } #as3cf-settings.wpome textarea::-webkit-scrollbar-track { background: var(--as3cf-color-white); border-radius: 6px; } #as3cf-settings.wpome textarea::-webkit-scrollbar-corner { background-color: var(--as3cf-color-white); border-radius: 6px; } #as3cf-settings.wpome textarea::-webkit-resizer { background-color: var(--as3cf-color-white); border-radius: 6px; } #as3cf-settings.wpome textarea::-webkit-scrollbar-thumb { background-color: var(--as3cf-secondary-color); border: 1px solid var(--as3cf-color-white); border-radius: 5px; } #as3cf-settings.wpome select { all: unset; background: var(--as3cf-color-white) url(../img/icon/arrow.svg) no-repeat calc(100% - 18px) 50%; border: 1px solid var(--as3cf-color-gray-400); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05); border-radius: 8px; padding: 0 1rem !important; font-size: 0.875rem !important; color: var(--as3cf-color-gray-900); line-height: 1.2 !important; margin: 0; box-sizing: border-box; cursor: pointer; appearance: none; height: 46px !important; display: flex; align-items: center; } #as3cf-settings.wpome input::placeholder, #as3cf-settings.wpome textarea::placeholder, #as3cf-settings.wpome select::placeholder { color: var(--as3cf-color-gray-500); } #as3cf-settings.wpome input:hover, #as3cf-settings.wpome textarea:hover, #as3cf-settings.wpome select:hover { border: 1px solid var(--as3cf-color-gray-500); } #as3cf-settings.wpome input:focus, #as3cf-settings.wpome input:active, #as3cf-settings.wpome textarea:focus, #as3cf-settings.wpome textarea:active, #as3cf-settings.wpome select:focus, #as3cf-settings.wpome select:active { box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome input:disabled, #as3cf-settings.wpome textarea:disabled, #as3cf-settings.wpome select:disabled { cursor: default; } #as3cf-settings.wpome input.disabled, #as3cf-settings.wpome textarea.disabled, #as3cf-settings.wpome select.disabled { color: var(--as3cf-color-gray-500); background-color: var(--as3cf-color-gray-100); border: 1px solid var(--as3cf-color-gray-300); cursor: default; } #as3cf-settings.wpome .input-label { font-size: 0.78125rem; color: var(--as3cf-color-gray-500); margin-bottom: 0.5rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.3px; } #as3cf-settings.wpome .input-error { color: var(--as3cf-wordpress-notice-error-color); font-weight: 400; } #as3cf-settings.wpome .panel div.setting .input-error { margin-left: 5rem; margin-right: 1.5rem; margin-bottom: 1rem; } #as3cf-settings.wpome .toggle-switch { display: flex; align-items: center; } #as3cf-settings.wpome .toggle-switch input[type=checkbox] { all: unset; height: 0; width: 0; border: none !important; } #as3cf-settings.wpome .toggle-switch label { box-sizing: border-box; cursor: pointer; text-indent: -9999px; width: 36px; height: 20px; background: var(--as3cf-color-gray-400); border: none; border-radius: 100px; display: block; position: relative; } #as3cf-settings.wpome .toggle-switch label:after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--as3cf-color-white); border-radius: 100%; transition: 0.3s; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.1); } #as3cf-settings.wpome .toggle-switch input:checked + label { background: var(--as3cf-complete-color); transition: 0.3s; } #as3cf-settings.wpome .toggle-switch input:checked + label:after { left: calc(100% - 2px); transform: translateX(-100%); } #as3cf-settings.wpome .toggle-switch label:active:after { width: 26px; } #as3cf-settings.wpome .toggle-switch input:focus + label, #as3cf-settings.wpome .toggle-switch input:active + label { border: none; box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome .toggle-switch input:disabled + label { cursor: default; background: var(--as3cf-color-gray-300); } #as3cf-settings.wpome .toggle-switch input:disabled + label:after { background: var(--as3cf-color-gray-100); } #as3cf-settings.wpome > .header { padding: 0 2rem; background-color: #FFE4CD; display: flex; align-items: center; height: 96px; } #as3cf-settings.wpome > .header .header-wrapper { width: 1110px; max-width: 1110px; height: 100%; background-image: url("../img/brand/ome-branding-transparent.svg"); background-repeat: no-repeat; background-size: contain; background-position: center top; display: flex; align-items: center; } #as3cf-settings.wpome > .header .header-wrapper h1 { font-size: 1.3125rem; font-weight: 500; color: #490D32; } #as3cf-settings.wpome > .header .header-wrapper .medallion { filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.15)); margin-right: 1rem; width: 52px; height: 52px; } #as3cf-settings.wpome > .header .header-wrapper .licence { display: flex; flex-direction: column; margin-left: auto; } #as3cf-settings.wpome > .header .header-wrapper .licence .licence-type { color: #EB422D; display: flex; align-items: center; justify-content: flex-end; } #as3cf-settings.wpome > .header .header-wrapper .licence .licence-type a { font-size: 0.825rem; font-weight: 500; margin-left: 0.6rem; text-decoration: underline; color: var(--as3cf-color-primary-500) !important; } #as3cf-settings.wpome > .header .header-wrapper .licence .licence-type a:hover { filter: brightness(105%); } #as3cf-settings.wpome > .header .header-wrapper .licence p { font-size: 0.8125rem; color: #4D443D; margin: 0.5rem 0 0; } #as3cf-settings.wpome > .header .header-wrapper button, #as3cf-settings.wpome > .header .header-wrapper a.button { text-transform: uppercase; } #as3cf-settings.wpome div.nav { width: 100%; margin: 0 auto 2.5rem 0; background: var(--as3cf-color-white); border-bottom: 1px solid var(--as3cf-wordpress-border-color); } #as3cf-settings.wpome div.nav div.items { max-width: 1110px; display: flex; flex-direction: row; align-items: baseline; padding: 0 2rem; } #as3cf-settings.wpome div.nav div.items ul.nav { display: flex; flex-direction: row; align-items: baseline; margin: 0; padding: 1.5rem 2rem 0 0; font-size: 0.75rem; font-weight: 500; text-transform: uppercase; } #as3cf-settings.wpome div.nav div.items ul.nav li { margin-right: 1.75rem; padding: 0.6rem 0.2rem 0.65rem; border-bottom: 3px solid #fff; } #as3cf-settings.wpome div.nav div.items ul.nav li a { color: var(--as3cf-color-gray-600); text-decoration: none; } #as3cf-settings.wpome div.nav div.items ul.nav li a:hover { color: var(--as3cf-color-primary-600); } #as3cf-settings.wpome div.nav div.items ul.nav li a:focus, #as3cf-settings.wpome div.nav div.items ul.nav li a:active { box-shadow: none; } #as3cf-settings.wpome div.nav div.items ul.nav li a:focus-visible { color: var(--as3cf-color-primary-600); box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-primary-400); border-radius: 3px; outline: none; } #as3cf-settings.wpome div.nav div.items ul.nav li.focus, #as3cf-settings.wpome div.nav div.items ul.nav li.hover { border-bottom: 3px solid var(--as3cf-color-gray-600); } #as3cf-settings.wpome div.nav div.items ul.nav li.active { border-bottom: 3px solid var(--as3cf-color-primary-500); } #as3cf-settings.wpome div.nav div.items ul.nav li.active a { color: var(--as3cf-active-nav-color); } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper { display: flex; flex-direction: row; align-items: center; margin-left: auto; text-decoration: none; gap: 0.5rem; align-self: stretch; min-width: 20px; /* When complete there's an icon prefix that takes up more room. */ /* When a tool is running there is longer status text taking up room. */ } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper:focus { box-shadow: none; outline: none; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper .nav-status { height: 100%; display: flex; flex-direction: row; align-items: center; gap: 0.5rem; min-width: 20px; cursor: pointer; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper p { font-size: 0.75rem; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper p.status-text { flex: 0 0 max-content; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper > p { cursor: pointer; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper .progress-bar { cursor: pointer; width: 200px; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper button { flex: 0 0 max-content; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper .animation-running { cursor: pointer; display: none; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper .animation-running img { height: 42px; } @media (max-width: 1120px) { #as3cf-settings.wpome div.nav div.items .nav-status-wrapper > button:not(.btn-expandable) { display: none; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper .animation-running { display: block; } } @media (max-width: 700px) { #as3cf-settings.wpome div.nav div.items .nav-status-wrapper .progress-bar { display: none; } } @media (max-width: 640px) { #as3cf-settings.wpome div.nav div.items .nav-status-wrapper { display: none; } } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper.complete { /* Remove complete icon before removing whole status. */ } @media (max-width: 720px) { #as3cf-settings.wpome div.nav div.items .nav-status-wrapper.complete .progress-bar { display: none; } } @media (max-width: 670px) { #as3cf-settings.wpome div.nav div.items .nav-status-wrapper.complete img.icon.type { display: none; } } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper.tool-running { /* Because there is an animated icon giving context we can reduce text. */ } @media (max-width: 800px) { #as3cf-settings.wpome div.nav div.items .nav-status-wrapper.tool-running .progress-bar { display: none; } } @media (max-width: 740px) { #as3cf-settings.wpome div.nav div.items .nav-status-wrapper.tool-running .status-text strong { font-size: 1.1rem; } #as3cf-settings.wpome div.nav div.items .nav-status-wrapper.tool-running .status-text span { display: none; } } #as3cf-settings.wpome .subnav { display: flex; border-bottom: 1px solid var(--as3cf-wordpress-border-color); padding: 0; align-items: baseline; margin: 0 0 3rem; } #as3cf-settings.wpome .subnav.subpage { display: none; } @media (max-width: 1100px) { #as3cf-settings.wpome .subnav.subpage { display: flex; } } #as3cf-settings.wpome .subnav li { font-size: 0.875rem; font-weight: 500; padding-bottom: 1rem; margin: 0 2rem 0 0; } #as3cf-settings.wpome .subnav li.step-arrow { all: unset; display: flex; align-self: flex-start; margin: 0 2rem 0 0; } #as3cf-settings.wpome .subnav li.has-icon { margin: 0 0.5625rem 0 0; } #as3cf-settings.wpome .subnav li a { color: var(--as3cf-color-gray-600); text-decoration: none; } #as3cf-settings.wpome .subnav li a:hover { color: var(--as3cf-color-primary-600); } #as3cf-settings.wpome .subnav li a:focus, #as3cf-settings.wpome .subnav li a:active { box-shadow: none; outline: none; } #as3cf-settings.wpome .subnav li a:focus-visible { color: var(--as3cf-color-primary-600); box-shadow: 0 0 0 1.5px var(--as3cf-wordpress-background-color), 0 0 0 3.5px var(--as3cf-color-primary-400); border-radius: 3px; outline: none; } #as3cf-settings.wpome .subnav li.focus, #as3cf-settings.wpome .subnav li.hover { border-bottom: 3px solid var(--as3cf-color-gray-600); } #as3cf-settings.wpome .subnav li.active { border-bottom: 3px solid var(--as3cf-color-primary-500); } #as3cf-settings.wpome .subnav li.active a { color: var(--as3cf-active-nav-color); } #as3cf-settings.wpome .lite-wrapper .subnav { display: flex !important; } #as3cf-settings.wpome.wpomepro > .header .header-wrapper { width: 1220px; max-width: 1220px; } #as3cf-settings.wpome.wpomepro > .nav div.items { max-width: 1220px; } #as3cf-settings.wpome .notifications.wrapper { margin: 0 0 2rem 0; } #as3cf-settings.wpome .notification { box-sizing: border-box; padding: 0; margin: 0 0 0.5rem 0; box-shadow: 0 2px 8px -5px rgba(50, 50, 93, 0.25), 0px 8px 5px -12px rgba(0, 0, 0, 0.3); border-radius: 8px; display: flex; flex-direction: column; /* Probably redundant now, but keeping until verified post 3.0 release. */ } #as3cf-settings.wpome .notification .content { box-sizing: border-box; padding: 10px 14px 10px 12px; margin: 0; display: flex; align-items: center; gap: 14px; } #as3cf-settings.wpome .notification .content div.icon.type { margin: 0; padding: 0; width: 28px; height: 28px; border-radius: 6px; flex: 0 0 28px; align-self: flex-start; display: flex; align-items: center; justify-content: center; } #as3cf-settings.wpome .notification .content div.icon.type.in-panel { align-self: auto; } #as3cf-settings.wpome .notification .content div.icon.type img.icon.type { width: 16px; height: 16px; } #as3cf-settings.wpome .notification .content h3 { margin: 0 0.5rem 0.5rem 0; font-size: 0.8125rem; line-height: 1.3rem; font-weight: 600; color: var(--as3cf-color-gray-900); width: 100%; } #as3cf-settings.wpome .notification .content p { margin: 0 0.5rem 0.5rem 0; font-size: 0.8125rem; line-height: 1.3rem; color: var(--as3cf-color-gray-900); } #as3cf-settings.wpome .notification .content p li { list-style: disc; } #as3cf-settings.wpome .notification .content p:last-of-type { margin-bottom: 0; } #as3cf-settings.wpome .notification .content code { padding: 0.05rem 0.4rem; margin: 0 0.1rem; border-radius: 5px; line-height: 1; } #as3cf-settings.wpome .notification .content .body { margin: 0; padding: 0; width: 100%; overflow-wrap: anywhere; display: flex; flex-direction: column; } #as3cf-settings.wpome .notification .content .body .heading { display: flex; flex-direction: row; align-items: center; } #as3cf-settings.wpome .notification .content .body .heading p { width: 100%; } #as3cf-settings.wpome .notification .content .body .heading .close { flex: 0 0 16px; width: 16px; height: 16px; min-width: 16px; min-height: 16px; background: url(../img/icon/close.svg) no-repeat; border: none; border-radius: 100%; cursor: pointer; } #as3cf-settings.wpome .notification .content .body .links a { margin-right: 0.75rem; } #as3cf-settings.wpome .notification.multiline .content { padding: 14px 14px 14px 12px; } #as3cf-settings.wpome .notification.multiline .content .body .heading .close { align-self: first baseline; } #as3cf-settings.wpome .notification.multiline .content.in-panel { padding: 0.875rem 1.5rem 0.875rem 1.5rem; gap: 16px; } #as3cf-settings.wpome .notification.inline.multiline .content { padding: 16px; gap: 16px; } #as3cf-settings.wpome .notification.inline.multiline .content div.icon.type { margin-top: 4px; } #as3cf-settings.wpome .notification.expandable .heading { gap: 8px; } #as3cf-settings.wpome .notification.expandable.expanded .details { max-height: 14.5rem; overflow-y: auto; margin: 0; padding: 0; } #as3cf-settings.wpome .notification.expandable.expanded .details .item { margin: 0; padding: 1.5rem; line-height: 1.4; display: flex; flex-direction: column; } #as3cf-settings.wpome .notification.expandable.expanded .details .item .summary { margin-bottom: 0.75rem; display: flex; align-items: center; width: 100%; } #as3cf-settings.wpome .notification.expandable.expanded .details .item .summary .title { width: 100%; font-weight: 600; } #as3cf-settings.wpome .notification.expandable.expanded .details .item ul.detail { margin: 0; padding: 0; } #as3cf-settings.wpome .notification.expandable.expanded .details .item ul.detail > li { padding: 0.3rem 0 0; line-height: 1.4; } #as3cf-settings.wpome .notification.expandable button { color: var(--as3cf-link-color); background-color: rgba(17, 17, 17, 0.04); border: 1px solid rgba(17, 17, 17, 0.08); } #as3cf-settings.wpome .notification.expandable button.btn-expandable { width: 22px; height: 22px; min-width: 22px; min-height: 22px; background-size: 11px; border-radius: 11px; filter: invert(27%) sepia(84%) saturate(1886%) hue-rotate(177deg) brightness(90%) contrast(103%); } #as3cf-settings.wpome .notification.expandable button.btn-expandable:hover, #as3cf-settings.wpome .notification.expandable button.btn-expandable:focus, #as3cf-settings.wpome .notification.expandable button.btn-expandable:active { filter: brightness(90%); } #as3cf-settings.wpome .notification.expandable button.dismiss { box-sizing: border-box; flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; padding: 5px 10px; gap: 4px; border-radius: 6px; } #as3cf-settings.wpome .notification.expandable button.dismiss:before { content: url(../img/icon/x.svg); width: 7.5px; } #as3cf-settings.wpome .notification button:not(.btn-refresh):focus, #as3cf-settings.wpome .notification button:not(.btn-refresh):active { filter: brightness(90%); box-shadow: 0 0 0 1.5px var(--as3cf-color-white), 0 0 0 3.5px var(--as3cf-color-secondary-500); outline: 0; } #as3cf-settings.wpome .notification.info { background: var(--as3cf-notice-info-background-color); border: 1px solid var(--as3cf-notice-info-border-color); } #as3cf-settings.wpome .notification.info div.icon.type { background: var(--as3cf-notice-info-color); } #as3cf-settings.wpome .notification.info.expandable.expanded .details .item { border-top: 1px solid rgba(46, 107, 222, 0.16); } #as3cf-settings.wpome .notification.success { background: var(--as3cf-notice-success-background-color); border: 1px solid var(--as3cf-notice-success-border-color); } #as3cf-settings.wpome .notification.success div.icon.type { background: var(--as3cf-notice-success-color); } #as3cf-settings.wpome .notification.success.expandable.expanded .details .item { border-top: 1px solid rgba(232, 99, 94, 0.16); } #as3cf-settings.wpome .notification.warning { background: var(--as3cf-notice-warning-background-color); border: 1px solid var(--as3cf-notice-warning-border-color); } #as3cf-settings.wpome .notification.warning div.icon.type { background: var(--as3cf-notice-warning-color); } #as3cf-settings.wpome .notification.warning code { background: var(--as3cf-notice-warning-code-background-color); } #as3cf-settings.wpome .notification.warning.expandable.expanded .details .item { border-top: 1px solid rgba(99, 185, 105, 0.16); } #as3cf-settings.wpome .notification.error { background: var(--as3cf-notice-error-background-color); border: 1px solid var(--as3cf-notice-error-border-color); } #as3cf-settings.wpome .notification.error div.icon.type { background: var(--as3cf-notice-error-color); } #as3cf-settings.wpome .notification.error.expandable.expanded .details .item { border-top: 1px solid rgba(232, 99, 94, 0.16); } #as3cf-settings.wpome .notification.in-panel { border-left: 0; border-right: 0; border-radius: 0; } #as3cf-settings.wpome .notification.wordpress { background: var(--as3cf-color-white); border: 1px solid var(--as3cf-wordpress-border-color); } #as3cf-settings.wpome .notification.wordpress.info { border-left: 5px solid var(--as3cf-wordpress-notice-info-color); } #as3cf-settings.wpome .notification.wordpress.success { border-left: 5px solid var(--as3cf-wordpress-notice-success-color); } #as3cf-settings.wpome .notification.wordpress.warning { border-left: 5px solid var(--as3cf-wordpress-notice-warning-color); } #as3cf-settings.wpome .notification.wordpress.error { border-left: 5px solid var(--as3cf-wordpress-notice-error-color); } #as3cf-settings.wpome .indicator, #as3cf-settings.wpome .progress-bar { height: 8px; border-radius: 8px; } #as3cf-settings.wpome .progress-bar { background: var(--as3cf-color-gray-300); } #as3cf-settings.wpome .progress-bar.stripe.animate, #as3cf-settings.wpome .progress-bar.stripe > .indicator.animate { background-size: 30px 30px; background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(25%, rgba(255, 255, 255, 0.2)), color-stop(25%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0.2)), color-stop(75%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.15) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0) 100%); animation: progress 5s linear infinite; } @keyframes progress { from { background-position: 0 0; } to { background-position: -60px -60px; } } #as3cf-settings.wpome .progress-bar.stripe.animate { background-color: var(--as3cf-secondary-color); } #as3cf-settings.wpome .progress-bar .indicator { display: block; background-color: var(--as3cf-color-primary-500); width: 40%; } #as3cf-settings.wpome .progress-bar .indicator.running { background-color: var(--as3cf-color-secondary-500); } #as3cf-settings.wpome .progress-bar .indicator.complete { background-color: var(--as3cf-complete-color); width: 100%; } /* * Storage and Delivery Provider specific styles. */ #as3cf-settings.wpome .delivery.aws .gradient { background: linear-gradient(225deg, rgba(255, 213, 213, 0.5) 0%, rgba(255, 213, 213, 0) 50%); } #as3cf-settings.wpome .delivery.cloudflare .gradient { background: linear-gradient(225deg, rgba(255, 221, 192, 0.5) 0%, rgba(255, 221, 192, 0) 50%); } #as3cf-settings.wpome .delivery.do .gradient { background: linear-gradient(225deg, rgba(205, 230, 255, 0.5) 0%, rgba(205, 230, 255, 0) 50%); } #as3cf-settings.wpome .delivery.gcp .gradient { background: linear-gradient(225deg, rgba(226, 226, 226, 0.5) 0%, rgba(226, 226, 226, 0) 50%); } #as3cf-settings.wpome .delivery.keycdn .gradient { background: linear-gradient(225deg, rgba(4, 122, 237, 0.16) 0%, rgba(4, 122, 237, 0) 50%); } #as3cf-settings.wpome .delivery.other .gradient { background: linear-gradient(225deg, rgba(228, 234, 241, 0.5) 0%, rgba(228, 234, 241, 0) 50%); } #as3cf-settings.wpome .delivery.stackpath .gradient { background: linear-gradient(225deg, rgba(226, 226, 226, 0.5) 0%, rgba(226, 226, 226, 0) 50%); } #as3cf-settings.wpome .storage.aws .gradient { background: linear-gradient(225deg, rgba(255, 214, 197, 0.5) 0%, rgba(255, 214, 197, 0) 50%); } #as3cf-settings.wpome .storage.do .gradient { background: linear-gradient(225deg, rgba(205, 230, 255, 0.5) 0%, rgba(205, 230, 255, 0) 50%); } #as3cf-settings.wpome .storage.gcp .gradient { background: linear-gradient(225deg, rgba(226, 226, 226, 0.5) 0%, rgba(226, 226, 226, 0) 50%); } #as3cf-settings.wpome { /** * Misc */ } #as3cf-settings.wpome .as3cf-sidebar { width: 292px; min-width: 292px; height: max-content; margin-left: 2.25rem; margin-top: -0.5rem; } #as3cf-settings.wpome .as3cf-sidebar.lite { background: white; border-radius: 7px; border: 1px solid #D9E1EB; overflow: hidden; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1); } #as3cf-settings.wpome .as3cf-sidebar .block { padding: 20px; border: 1px solid #ccc; } #as3cf-settings.wpome .as3cf-sidebar .subscribe { border-top: none; text-align: center; padding: 40px 20px; } #as3cf-settings.wpome .as3cf-sidebar .subscribe h2 { padding: 0; margin: 0; margin-bottom: 0.5em; color: #666; font-size: 17px; line-height: 1.2em; float: none; text-transform: none; font-weight: 500; } #as3cf-settings.wpome .as3cf-sidebar .subscribe .button { width: 100% !important; margin: 1rem auto; text-transform: uppercase; display: flex; justify-content: center; align-items: center; text-align: center !important; } #as3cf-settings.wpome .as3cf-sidebar .subscribe p { margin: 0; } #as3cf-settings.wpome .as3cf-sidebar .subscribe .discount-applied { color: rgba(0, 0, 0, 0.4); font-size: 12px; line-height: 1.4em; margin-top: 10px; } @media screen and (max-width: 1052px) { #as3cf-settings.wpome .as3cf-sidebar { position: relative; top: auto; right: auto; } } #as3cf-settings.wpome .as3cf-active-provider, #as3cf-settings.wpome .as3cf-active-bucket { font-weight: bold; margin-right: 10px; } #as3cf-settings.wpome .as3cf-banner { width: 292px; height: 156px; display: block; background: #f8cfae url(../img/sidebar/os3-banner.svg) left bottom/100% no-repeat; } #as3cf-settings.wpome .as3cf-banner:focus { box-shadow: none; } #as3cf-settings.wpome .as3cf-upgrade-details { background-color: #4e0d33; padding: 10px 20px 20px 20px; color: #eee; font-size: 12.5px; display: block; text-decoration: none; } #as3cf-settings.wpome .as3cf-upgrade-details h1 { font-size: 27px; color: #f8cfae; margin: 0 0 15px 0; padding: 0; font-weight: 300; line-height: 1; } #as3cf-settings.wpome .as3cf-upgrade-details h2 { font-size: 15px; color: #F8CFAE; margin: 0 0 30px 0; font-weight: 600; line-height: 20px; } #as3cf-settings.wpome .as3cf-upgrade-details p { margin: 0; } #as3cf-settings.wpome .as3cf-upgrade-details a { color: #eee; font-weight: bold; text-decoration: none; font-size: 16px; box-shadow: none; } #as3cf-settings.wpome .as3cf-upgrade-details a:hover { color: #fff; } #as3cf-settings.wpome .as3cf-upgrade-details ul { margin: 0 !important; padding: 0; list-style: none; } #as3cf-settings.wpome .as3cf-upgrade-details ul li { margin-bottom: 15px; line-height: 18px; padding-left: 25px; background: url(../img/sidebar/item-checked.svg) left center no-repeat; } #as3cf-settings.wpome { /* * Add an external link icon after any link that uses "_blank" target. * There's a couple of classes where we don't want the icon too. */ } #as3cf-settings.wpome a, #as3cf-settings.wpome button, #as3cf-settings.wpome h1, #as3cf-settings.wpome h2, #as3cf-settings.wpome h3, #as3cf-settings.wpome h4, #as3cf-settings.wpome h5, #as3cf-settings.wpome input, #as3cf-settings.wpome li, #as3cf-settings.wpome p, #as3cf-settings.wpome pre, #as3cf-settings.wpome select, #as3cf-settings.wpome span, #as3cf-settings.wpome textarea { letter-spacing: 0.25px; line-height: 1; margin: 0; } #as3cf-settings.wpome li { list-style: none; } #as3cf-settings.wpome .semibold { font-weight: 600; } #as3cf-settings.wpome .bold { font-weight: 700; } #as3cf-settings.wpome p { font-size: 0.875rem; color: var(--as3cf-color-gray-900); font-weight: 400; } #as3cf-settings.wpome .page-title { margin-bottom: 3rem; } #as3cf-settings.wpome a[target=_blank]:not(.help):not(.licence):not(.email):after { box-sizing: border-box; content: "\f504"; display: inline-block; font-family: "dashicons", emoji; font-size: larger; text-decoration: none; vertical-align: sub; margin-left: 0.2rem; margin-right: -1rem; } #as3cf-settings.wpome .link { font-size: 0.8125rem; color: #0073AA; } #as3cf-settings.wpome .link:hover { filter: brightness(115%); } #as3cf-settings.wpome pre, #as3cf-settings.wpome textarea.pre { background: var(--as3cf-code-background); border: 1px solid #D2CFCF; border-radius: 6px; padding: 1rem 1.2rem; display: flex; flex: 1; font-size: 0.8125rem; line-height: 1.6; color: var(--as3cf-color-white); font-weight: 400; margin: 0 0 1.5rem; box-sizing: border-box; width: 100%; overflow-y: scroll; /* Standards compliant scrollbar (future) */ /* scrollbar-color: var(--as3cf-secondary-color) var(--as3cf-code-background); scrollbar-width: 12px; */ /* Ye olde webkit scrollbar */ } #as3cf-settings.wpome pre::-webkit-scrollbar, #as3cf-settings.wpome textarea.pre::-webkit-scrollbar { width: 12px; } #as3cf-settings.wpome pre::-webkit-scrollbar-track, #as3cf-settings.wpome textarea.pre::-webkit-scrollbar-track { background: var(--as3cf-code-background); border-radius: 6px; } #as3cf-settings.wpome pre::-webkit-scrollbar-corner, #as3cf-settings.wpome textarea.pre::-webkit-scrollbar-corner { background-color: var(--as3cf-code-background); border-radius: 6px; } #as3cf-settings.wpome pre::-webkit-resizer, #as3cf-settings.wpome textarea.pre::-webkit-resizer { background-color: var(--as3cf-code-background); border-radius: 6px; } #as3cf-settings.wpome pre::-webkit-scrollbar-thumb, #as3cf-settings.wpome textarea.pre::-webkit-scrollbar-thumb { background-color: var(--as3cf-secondary-color); border: 1px solid var(--as3cf-code-background); border-radius: 5px; } #as3cf-settings.wpome .page-wrapper h2.page-title { font-size: 0.9375rem; color: var(--as3cf-color-gray-900); font-weight: 500; margin: 0 0 1.25rem; } #as3cf-settings.wpome .lite-wrapper { display: flex; max-width: 1110px; } @media (max-width: 1024px) { #as3cf-settings.wpome .lite-wrapper .as3cf-sidebar { display: none; } } #as3cf-settings.wpome .lite-wrapper .page-wrapper { width: 840px; } #as3cf-settings.wpome .lite-wrapper .page-wrapper.assets, #as3cf-settings.wpome .lite-wrapper .page-wrapper.tools { width: 768px; } #as3cf-settings.wpome .lite-wrapper .page-wrapper.media { width: 780px; max-width: 780px; } #as3cf-settings.wpome .lite-wrapper .media-page.wrapper { flex-direction: column !important; } #as3cf-settings.wpome .lite-wrapper .media-page.wrapper .panel { width: 100%; max-width: 780px; } #as3cf-settings.wpome .lite-wrapper .media-page.wrapper .delivery-settings { margin: 0; display: none; } #as3cf-settings.wpome .lite-wrapper .media-page.wrapper .delivery-settings.active { display: flex; } #as3cf-settings.wpome .lite-wrapper .media-page.wrapper .storage-settings { margin: 0; display: none; } #as3cf-settings.wpome .lite-wrapper .media-page.wrapper .storage-settings.active { display: flex; } #as3cf-settings.wpome .lite-wrapper .panel.url-preview { width: 100%; max-width: 780px; } #as3cf-settings.wpome .lite-wrapper .fixed-cta-block .buttons { width: calc(1110px + 4rem); max-width: calc(1110px + 4rem); } @media screen and (max-width: 1024px) { #as3cf-settings.wpome .lite-wrapper .fixed-cta-block .buttons { max-width: calc(780px + 4rem); } } #as3cf-settings.wpome .media-page.wrapper { margin: 0; display: flex; flex-direction: row; justify-content: space-between; } @media (max-width: 1100px) { #as3cf-settings.wpome .media-page.wrapper { flex-direction: column; } } @media (max-width: 1100px) { #as3cf-settings.wpome .media-page.wrapper .panel { max-width: 100%; } } #as3cf-settings.wpome .media-page.wrapper .delivery-settings, #as3cf-settings.wpome .media-page.wrapper .storage-settings { display: flex; flex-direction: column; } #as3cf-settings.wpome .media-page.wrapper .storage-settings { margin: 0 2rem 0 0; } @media (max-width: 1100px) { #as3cf-settings.wpome .media-page.wrapper .storage-settings { margin: 0; display: none; } #as3cf-settings.wpome .media-page.wrapper .storage-settings.active { display: flex; } } #as3cf-settings.wpome .media-page.wrapper .delivery-settings { margin: 0 0 0 2rem; } @media (max-width: 1100px) { #as3cf-settings.wpome .media-page.wrapper .delivery-settings { margin: 0; display: none; } #as3cf-settings.wpome .media-page.wrapper .delivery-settings.active { display: flex; } } #as3cf-settings.wpome .subpage.wrapper, #as3cf-settings.wpome .subpage.page-wrapper { margin: 0; max-width: 840px; } #as3cf-settings.wpome .storage-page.wrapper .panel.multi .panel-container .panel-row.tab-buttons { gap: 1.5rem; flex-wrap: wrap; } #as3cf-settings.wpome .storage-page.wrapper .panel.multi .panel-container .panel-row.tab-buttons .button-tab { margin: 0; flex: 0 0 auto; } #as3cf-settings.wpome .storage-page.wrapper .panel.multi .panel-container .notification.notice-qsg { width: 100%; } #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row { margin-bottom: 1.25rem; display: flex; align-items: center; width: 100%; } #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row:last-of-type { margin-bottom: 0; } #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row .button-tab { width: 12rem; } #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row .button-tab:not(.btn-disabled):hover ~ p, #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row .button-tab.active ~ p { font-weight: 600; opacity: 1; } #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row p { margin: 0; } #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row .speed, #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row .private-media { margin-left: 1.5rem; opacity: 0.7; font-size: 0.8125rem; } #as3cf-settings.wpome .delivery-provider-settings-page.wrapper .panel.multi .panel-container .panel-row.delivery-provider-buttons .row .help { margin-left: auto; display: flex; } #as3cf-settings.wpome .licence-page.wrapper { margin: 0 0 2rem; max-width: 700px; display: flex; flex-direction: row; } #as3cf-settings.wpome .licence-page.wrapper.defined { flex-direction: column; align-items: flex-start; gap: 0.5rem; } #as3cf-settings.wpome .licence-page.wrapper.defined .wp-config { margin-left: 0; flex: 0 0 auto; } #as3cf-settings.wpome .support-page.wrapper { margin: 0; max-width: 960px; } #as3cf-settings.wpome .support-page.wrapper .columns { display: flex; flex-direction: row; justify-content: space-between; } #as3cf-settings.wpome .support-page.wrapper .licence-type { margin-bottom: 3rem; } #as3cf-settings.wpome .support-page.wrapper .licence-type span { font-weight: 700; color: var(--as3cf-color-primary-500); } #as3cf-settings.wpome .support-page.wrapper .lite-support { margin-bottom: 2rem; } #as3cf-settings.wpome .support-page.wrapper .lite-support p { line-height: 1.8; font-weight: 400; } #as3cf-settings.wpome .assets-page.wrapper { margin: 0; max-width: 768px; } #as3cf-settings.wpome .assets-page.wrapper .assets-panel { padding: 0.45rem 0; max-width: 768px; } #as3cf-settings.wpome .assets-page.wrapper .notice { margin-right: auto; } #as3cf-settings.wpome .assets-page.wrapper .settings { margin-bottom: 2rem; max-width: 100%; } #as3cf-settings.wpome .assets-page.wrapper .panel-row.status { padding: 1.75rem 0 0 4rem !important; height: max-content; } #as3cf-settings.wpome .assets-page.wrapper .panel-row.status img { width: 18px; height: 18px; } #as3cf-settings.wpome .assets-page.wrapper .panel-row.status h4 { margin-left: 0.8rem; } #as3cf-settings.wpome .assets-page.wrapper .panel-row.status p { margin: 0 !important; } #as3cf-settings.wpome .assets-page.wrapper .panel-row.last-checked { display: flex; align-items: center; margin: 0.7rem 0 0 4.7rem !important; height: max-content; } #as3cf-settings.wpome .assets-page.wrapper .panel-row.last-checked p { font-size: 0.75rem; margin: 0 !important; } #as3cf-settings.wpome .assets-page.wrapper .panel-row.last-checked a { margin-left: 1rem; text-decoration: underline; } #as3cf-settings.wpome .tools-page.wrapper { margin: 0; max-width: 768px; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel { padding: 0 0 0.45rem; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.header { height: 4.5rem !important; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.header img { margin-right: 2rem; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.header button { margin-left: auto; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.header .emoji-party { font-size: 28px; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.body { padding: 1.6rem 2.6rem 1.6rem 6.1rem; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.body.show-progress { margin: 0; display: flex; flex-direction: column; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.body.show-progress .status { display: flex; flex-direction: row; width: 100%; align-items: baseline; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.body.show-progress .status h4 { font-size: 0.8125rem; color: var(--as3cf-color-gray-900); font-weight: 400; margin: 0; opacity: 80%; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.body.show-progress .status h4 strong { font-size: 1.0625rem; font-weight: 600; opacity: 100%; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.body.show-progress .progress-bar { width: 100%; margin-top: 1rem; } #as3cf-settings.wpome .tools-page.wrapper .panel.multi .panel-container.tools-panel .panel-row.desc { font-size: 0.8125rem; color: var(--as3cf-color-gray-500); line-height: 1.65; } #as3cf-settings.wpome .panel.url-preview { max-width: 100%; } #as3cf-settings.wpome .panel.url-preview .panel-row { /* Good for Firefox & Safari, but Chrome isn't ready for this yet, experimental in v105. * @see https://developer.mozilla.org/en-US/docs/Web/CSS/contain#inline-size */ /* Required until Chrome gets contain: inline-size */ } #as3cf-settings.wpome .panel.url-preview .panel-row.desc p { font-size: 0.8125rem; color: var(--as3cf-color-gray-600); line-height: 1.625; margin: 1.5rem 0 0; } @supports (contain: inline-size) { #as3cf-settings.wpome .panel.url-preview .panel-row.body { contain: inline-size; } } #as3cf-settings.wpome .panel.url-preview .panel-row dl { margin: 1rem -1.5rem; padding: 0 1.5rem 1rem; display: flex; gap: 0.5rem; overflow-x: auto; } #as3cf-settings.wpome .panel.url-preview .panel-row dl div { margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; background: #E1E5E9; border-radius: 6px; } #as3cf-settings.wpome .panel.url-preview .panel-row dl div dt { margin: 0; padding: 0.5rem 1rem 0.375rem; white-space: nowrap; font-weight: 510; } #as3cf-settings.wpome .panel.url-preview .panel-row dl div dd { margin: 0; padding: 0.407rem 1rem; white-space: nowrap; display: flex; flex-direction: column; align-items: center; align-self: stretch; background: #FAFAFA; border: 1px solid #CBD5E0; border-radius: 6px; font-weight: 400; font-size: 0.75rem; } @supports not (contain: inline-size) { #as3cf-settings.wpome .panel.url-preview .panel-row dl { contain: size; width: 100%; height: 68px; } } #as3cf-settings.wpome .panel { flex: 1 0 auto; max-width: 575px; margin-bottom: 3rem; display: flex; flex-direction: column; } #as3cf-settings.wpome .panel .heading { display: flex; flex-direction: row; align-items: flex-start; gap: 0.5rem; } #as3cf-settings.wpome .panel h2 { font-size: 0.9375rem; color: var(--as3cf-color-gray-900); font-weight: 500; margin: 0 0 1.25rem; } #as3cf-settings.wpome .panel .notification.inline { margin-left: 5rem; margin-right: 1.5rem; } #as3cf-settings.wpome .panel .panel-container { flex: 1 0 auto; display: flex; flex-direction: column; background: var(--as3cf-color-white); border: 1px solid var(--as3cf-wordpress-border-color); box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.05), 0 2px 1px 0 rgba(0, 0, 0, 0.03); border-radius: 6px; } #as3cf-settings.wpome .panel .panel-container .panel-row { display: flex; align-items: center; padding: 0 1.5rem; } #as3cf-settings.wpome .panel .panel-container .panel-row.header { height: 6rem; border-bottom: 1px solid var(--as3cf-separator-color); } #as3cf-settings.wpome .panel .panel-container .panel-row.footer { border-top: 1px solid var(--as3cf-separator-color); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } #as3cf-settings.wpome .panel .panel-container .panel-row h3, #as3cf-settings.wpome .panel .panel-container .panel-row h4 { font-size: 0.875rem; font-weight: 500; color: var(--as3cf-color-gray-800); margin-left: 1rem; margin-right: auto; } #as3cf-settings.wpome .panel .panel-container .panel-row .link { font-size: 0.8125rem; text-align: right; line-height: 1.5; margin-left: auto; font-weight: 500; } #as3cf-settings.wpome .panel .panel-container .panel-row .link + .help { margin-left: 1rem; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.option { margin-top: 1.5rem; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.option h4 { margin: 0 0 0 var(--as3cf-settings-option-indent); } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.option a { margin-left: auto; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.desc { padding-right: var(--as3cf-settings-option-indent-right); } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.desc p { font-size: 0.8125rem; color: var(--as3cf-color-gray-600); line-height: 1.625; margin-left: calc(var(--as3cf-settings-ctrl-width) + var(--as3cf-settings-option-indent)); margin-top: 0.57rem; margin-bottom: 0.75rem; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.input { padding-right: var(--as3cf-settings-option-indent-right); } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.input input[type=text] { margin-left: calc(var(--as3cf-settings-ctrl-width) + var(--as3cf-settings-option-indent)); margin-bottom: 1.2rem; width: 100%; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.input input[type=text] + label { visibility: collapse; } #as3cf-settings.wpome .panel .panel-container .setting.nested { margin: 0 0 0.125rem 5.25rem; display: flex; flex-direction: column; border-left: 2px dotted #C2CBD3; } #as3cf-settings.wpome .panel .panel-container .setting.nested .panel-row { height: max-content; margin-bottom: 0; } #as3cf-settings.wpome .panel .panel-container .setting.nested .panel-row img { margin-left: auto; } #as3cf-settings.wpome .panel .panel-container .setting.nested .panel-row h4 { margin: 0; } #as3cf-settings.wpome .panel .panel-container .setting.nested .panel-row.option { margin-top: 1rem; } #as3cf-settings.wpome .panel .panel-container .setting.nested .panel-row.desc { height: max-content; padding: 0.4rem 2.25rem 0.85rem 1.65rem; } #as3cf-settings.wpome .panel .panel-container .setting.nested .panel-row.desc p { font-size: 0.8125rem; color: var(--as3cf-color-gray-600); line-height: 1.625; margin: 0; } #as3cf-settings.wpome .panel .panel-container .setting.nested .panel-row.input input[type=text] { margin-left: var(--as3cf-settings-input-indent); } #as3cf-settings.wpome .panel .panel-container .setting:last-of-type { margin-bottom: 0.75rem; } #as3cf-settings.wpome .panel .panel-container hr { height: 1px; width: 100%; border: 0; margin: 0; background: var(--as3cf-separator-color); } #as3cf-settings.wpome .panel.multi { max-width: 840px; margin-bottom: 2rem; } #as3cf-settings.wpome .panel.multi .panel-container.toggle-header .toggle-switch { margin-right: 1.25rem; } #as3cf-settings.wpome .panel.multi .panel-container.toggle-header .toggle-reveal label { display: inline-flex; } #as3cf-settings.wpome .panel.multi .panel-container.toggle-header .toggle-reveal a { margin-left: 0.3rem; display: contents; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row { height: auto; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row h3 { margin: 0; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row p:last-of-type { margin-bottom: 0; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.header { height: 4rem; display: flex; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.header a { margin-left: auto; display: flex; align-items: center; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.header .provider { display: flex; margin-left: auto; align-items: center; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.header .provider a { display: flex; align-items: center; margin-left: auto; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.header .provider img { width: 24px; height: 24px; margin-right: 0.5rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.header .wp-config + .provider { margin-left: 1rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body { padding: 2.5rem; align-items: flex-start; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .row { margin: 0; width: 100%; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .row.radio-btns { margin-bottom: 2.2rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .radio-desc { margin: -0.35rem 0 1.25rem 2rem; font-size: 12px; font-weight: 500; line-height: 1.4; opacity: 0.75; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body.access-keys > p { margin-bottom: 1.5rem !important; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body input[type=text], #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body textarea { width: 100%; margin-bottom: 1.5rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-name, #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .cdn-name { width: 100%; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body p { margin: 0 0 1.5rem; line-height: 1.5; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body p:last-of-type { margin-bottom: 0; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .link { text-decoration: underline; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .button-tab img { width: 24px; height: 24px; margin-right: 0.9rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .button-tab .checkmark { width: 16px; height: 16px; position: absolute; right: -19px; top: -5px; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .button-tab p { font-weight: 500; margin-bottom: 0; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .radio-btn { margin-bottom: 0.8rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .radio-btn:last-of-type { margin-bottom: 0; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .radio-btn.list { margin: 0 1.5rem 0 0; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list { background: var(--as3cf-color-white); border: 1px solid var(--as3cf-wordpress-border-color); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05); border-radius: 6px; width: 100%; max-width: 580px; padding: 0 0.4rem; display: flex; flex-direction: column; height: 260px; overflow-y: scroll; box-sizing: border-box; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row { display: flex; align-items: center; padding: 0.78rem 1.4rem; background: #F6F7F8; border-radius: 4px; margin: 0 0 0.3rem; cursor: pointer; box-sizing: border-box; flex: none; /* TODO: Better styling for no buckets in browse list? */ } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row.active { background: rgba(236, 112, 94, 0.1); border: 1px solid var(--as3cf-color-primary-500); border-radius: 4px; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row:first-of-type { margin-top: 0.4rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row:last-of-type { margin-bottom: 0.4rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row:nth-child(even) { background: var(--as3cf-color-white); } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row p { margin: 0; font-size: 0.84375rem; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row .status { margin-left: auto; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .bucket-list .row.nothing-found { cursor: default; justify-content: center; align-items: center; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .new-bucket-details { display: flex; flex-direction: column; box-sizing: border-box; margin-right: 1.8rem; flex: 5; } #as3cf-settings.wpome .panel.multi .panel-container .panel-row.body .region { width: 30%; flex: 3; margin-left: auto; margin-bottom: 1.5rem; box-sizing: border-box; } #as3cf-settings.wpome .panel.flyout { position: absolute; top: 50px; right: 0; min-width: 384px; z-index: 99; cursor: default; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.header { height: auto; padding: 1rem 1.5rem; align-items: center; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.header h3 { font-size: 13px; font-weight: 600; flex: 1 1 auto; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary { padding: 0; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table { width: 100%; border-collapse: collapse; /* Indent the columns. */ /* Table header has different styling and vertical padding. */ /* Top and bottom rows have different vertical padding than between rows. */ } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table th, #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table td { padding: 0 0 1rem 2rem; color: var(--as3cf-color-gray-800); font-size: 12px; text-align: left; /* Make title column cell's width stretch, numerics are compact. */ width: 100%; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table th:first-of-type, #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table td:first-of-type { padding-left: 1.5rem; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table th:last-of-type, #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table td:last-of-type { padding-right: 1.5rem; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table thead { background-color: var(--as3cf-color-gray-100); } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table thead tr { border-bottom: 1px solid var(--as3cf-separator-color); } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table thead tr th { padding-top: 10px; padding-bottom: 10px; color: var(--as3cf-color-gray-700); font-weight: 500; font-size: 10px; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table tbody tr:first-of-type td, #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table tfoot tr:first-of-type td { padding-top: 1rem; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table tbody tr:last-of-type td, #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table tfoot tr:last-of-type td { padding-bottom: 1rem; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table tfoot { /* * Hack in an indented border even though table header has * full width background and borders, without using extra * cells, and retaining relationship between header * and main body columns. * * PhpStorm will complain that there's no colours here, but there are! */ background-image: linear-gradient(var(--as3cf-separator-color), var(--as3cf-separator-color)); background-repeat: no-repeat; background-size: calc(100% - 1.5rem - 1.5rem) 1px; background-position: 1.5rem 0; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table tfoot td { font-weight: 500; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table .numeric { text-align: right; width: max-content; min-width: max-content; white-space: nowrap; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.summary table a { color: var(--as3cf-color-primary-500); } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer { padding: 1.5rem; display: flex; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.upsell { border-top: 1px solid var(--as3cf-color-primary-100); background-color: var(--as3cf-color-primary-50); flex-direction: column; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.upsell p { margin-bottom: 0.5rem; white-space: nowrap; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.upsell .button { margin: 0; width: 100%; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.offload-remaining { background-color: var(--as3cf-color-gray-100); } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.offload-remaining button { flex: 100%; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.licence { display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; background-color: var(--as3cf-color-gray-200); font-size: 12px; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.licence .details { flex: 1 1 auto; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.licence .details p { color: var(--as3cf-color-gray-600); line-height: 18px; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.licence .details .title { color: var(--as3cf-color-gray-700); font-size: 10px; } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.licence a { color: var(--as3cf-color-primary-500); } #as3cf-settings.wpome .panel.flyout.multi .panel-container .panel-row.footer.licence a.upgrade { margin-right: 1rem; } #as3cf-settings.wpome p.wp-config { margin-left: auto; padding: 0.4rem 0.75rem; color: var(--as3cf-color-gray-500) !important; background: rgba(113, 135, 154, 0.15) !important; border: 1px solid rgba(113, 135, 154, 0.15) !important; border-radius: 5px; font-size: 0.84375rem; font-weight: 500; white-space: nowrap; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.option p.wp-config + a { margin-left: 1rem; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row.desc p.wp-config { margin-right: 0; } #as3cf-settings.wpome .panel .panel-container .setting .panel-row label.input-label p.wp-config { text-transform: none; padding: 0.2rem 0.5rem; } #as3cf-settings.wpome .notice { all: unset; display: flex; flex-direction: row; background: rgba(56, 125, 189, 0.1); border: 1px solid #AFC8ED; border-radius: 5px; padding: 0.8rem 1.25rem; align-items: center; } #as3cf-settings.wpome .notice a, #as3cf-settings.wpome .notice p { margin: 0 !important; } #as3cf-settings.wpome .notice a { display: inline-block; text-decoration: underline; font-size: 0.875rem !important; } #as3cf-settings.wpome .support-form { width: 600px; } #as3cf-settings.wpome .support-form input[type=text], #as3cf-settings.wpome .support-form select, #as3cf-settings.wpome .support-form textarea { width: 100%; margin-bottom: 1rem; } #as3cf-settings.wpome .support-form textarea { margin-bottom: 1.5rem; } #as3cf-settings.wpome .support-form .note { font-size: 0.78125rem; color: var(--as3cf-color-gray-500); margin-bottom: 2.5rem; line-height: 1.5; } #as3cf-settings.wpome .support-form .note.first { margin-bottom: 0.5rem; } #as3cf-settings.wpome .support-form .actions { display: flex; width: 100%; margin-bottom: 2rem; align-items: center; } #as3cf-settings.wpome .support-form .actions .btn-primary { margin-left: auto; } #as3cf-settings.wpome .diagnostic-info { max-width: 600px; padding: 0.25rem 0; } #as3cf-settings.wpome .diagnostic-info pre { height: 14.375rem; white-space: pre-wrap; word-break: keep-all; } #as3cf-settings.wpome .diagnostic-info hr { background: #D3D7DB; height: 3px; width: 100%; border: 0; margin-bottom: 3rem; } #as3cf-settings.wpome .diagnostic-info .btn-outline { display: flex; justify-content: center; margin-left: auto; width: max-content; } #as3cf-settings.wpome .documentation { background: #E4E5E7; border: 1px solid var(--as3cf-wordpress-border-color); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05); border-radius: 6px; padding: 2.5rem; display: flex; flex-direction: column; margin: 1.4rem 0 0 3rem; height: max-content; width: 240px; box-sizing: border-box; } #as3cf-settings.wpome .documentation h3 { font-size: 1.03125rem; color: var(--as3cf-color-gray-900); letter-spacing: 0.15px; font-weight: 500; margin: 0 0 2.25rem; } #as3cf-settings.wpome .documentation a { font-size: 0.875rem; margin-bottom: 1.25rem; } #as3cf-settings.wpome .documentation a:last-of-type { margin-bottom: 0; } #as3cf-settings.wpome .upsell.panel { max-width: 768px; } #as3cf-settings.wpome .upsell .panel-container { padding: 0; flex-direction: row; background: linear-gradient(136.01deg, rgba(255, 228, 205, 0.7) 0.94%, rgb(255, 255, 255) 33.33%); } #as3cf-settings.wpome .upsell .branding { background: url(../../assets/img/brand/upsell-bunny.svg) no-repeat left bottom; min-width: 280px; border-radius: 5px; margin-right: -1.25rem; } @media (max-width: 840px) { #as3cf-settings.wpome .upsell .branding { display: none; } } #as3cf-settings.wpome .upsell .button { margin: 1rem auto; display: flex; justify-content: center; align-items: center; text-align: center !important; } /* * Our CSS variables, namespaced so they can be used anywhere. */ :root { --as3cf-code-type: consolas, monospace; --as3cf-color-white: #FFF; --as3cf-color-black: #000; --as3cf-color-gray-50: #FCFDFD; --as3cf-color-gray-100: #F9FAFB; --as3cf-color-gray-200: #F2F4F7; --as3cf-color-gray-300: #EAECF0; --as3cf-color-gray-400: #D0D5DD; --as3cf-color-gray-500: #98A2B3; --as3cf-color-gray-600: #667085; --as3cf-color-gray-700: #344054; --as3cf-color-gray-800: #1D2939; --as3cf-color-gray-900: #101828; --as3cf-color-primary-50: #FDF1EF; --as3cf-color-primary-100: #FBE2DF; --as3cf-color-primary-200: #F7C6BF; --as3cf-color-primary-300: #F4A99E; --as3cf-color-primary-400: #F08D7E; --as3cf-color-primary-500: #EC705E; --as3cf-color-primary-600: #C15B4C; --as3cf-color-primary-700: #96453A; --as3cf-color-primary-800: #6B3027; --as3cf-color-primary-900: #401A15; --as3cf-color-secondary-50: #EFF8FF; --as3cf-color-secondary-100: #D1E9FF; --as3cf-color-secondary-200: #B2DDFF; --as3cf-color-secondary-300: #84CAFF; --as3cf-color-secondary-400: #52B1FD; --as3cf-color-secondary-500: #2C90FA; --as3cf-color-secondary-600: #1270EF; --as3cf-color-secondary-700: #155CD3; --as3cf-color-secondary-800: #1749A9; --as3cf-color-secondary-900: #184185; --as3cf-secondary-color: #D8DDE2; --as3cf-text-disabled: #98A2B3; --as3cf-code-background: #102B44; --as3cf-separator-color: #EBEFF3; --as3cf-complete-color: #5BCB86; --as3cf-active-nav-color: #4E0D34; --as3cf-link-color: #0073AA; --as3cf-wordpress-background-color: #F1F1F1; --as3cf-wordpress-border-color: #D6D6D6; --as3cf-wordpress-notice-info-color: #02A0D2; --as3cf-notice-info-color: #2D69DA; --as3cf-notice-info-border-color: #2E6BDE; --as3cf-notice-info-background-color: #E7EFF9; --as3cf-wordpress-notice-success-color: #45B450; --as3cf-notice-success-color: #52AA59; --as3cf-notice-success-border-color: #63B969; --as3cf-notice-success-background-color: #EDF7EF; --as3cf-wordpress-notice-warning-color: #FFBA00; --as3cf-notice-warning-color: #F49C53; --as3cf-notice-warning-border-color: #E29936; --as3cf-notice-warning-background-color: #FDF8EB; --as3cf-notice-warning-code-background-color: #FCECC6; --as3cf-wordpress-notice-error-color: #DD3232; --as3cf-notice-error-color: #DA5A39; --as3cf-notice-error-border-color: #E8635E; --as3cf-notice-error-background-color: #F7EEEB; --as3cf-settings-ctrl-width: 36px; --as3cf-settings-option-indent: 1.2rem; --as3cf-settings-input-indent: 0; --as3cf-settings-option-indent-right: 2.25rem; } body.settings_page_amazon-s3-and-cloudfront { background: var(--as3cf-wordpress-background-color); } body.settings_page_amazon-s3-and-cloudfront #wpcontent { padding-left: 0 !important; } body.settings_page_amazon-s3-and-cloudfront #wpcontent #wpbody #wpbody-content > .notice { display: none; } body.settings_page_amazon-s3-and-cloudfront #wpcontent #wpbody #wpbody-content .wpome .wpome-wrapper { max-width: 1220px; margin: 0 2rem 3rem 2rem; } body.settings_page_amazon-s3-and-cloudfront #wpfooter { font-style: italic; } .locked { opacity: 0.55; } .flex-row { display: flex; flex-direction: row; } .flex-column { display: flex; flex-direction: column; } .align-center { align-items: center; } .align-center { align-items: center; } .align-baseline { align-items: baseline !important; } /*# sourceMappingURL=style.css.map */