JezK
Edit File: admin.css
:root { --speedycache-color: #3d5afe; --speedycache-txcolor: #0f172a; --speedycache-red: #dc3545; --speedycache-promo-primary: #6366f1; --speedycache-promo-primary-dark: #4f46e5; --speedycache-promo-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); --speedycache-promo-bg-surface: #ffffff; --speedycache-promo-text-main: #1f2937; --speedycache-promo-text-muted: #6b7280; } #speedycache-admin{ display:flex; flex-direction:row; margin-top: 20px; color: var(--speedycache-txcolor); } #speedycache-navigation{ display:flex; flex-direction:column; flex:0 0 200px; padding: 10px; margin-right:10px; } #speedycache-admin *{ box-sizing:border-box; } .speedycache-tabs{ display:flex; flex-direction:column; flex: 1 1 auto; max-width: 960px; } .speedycache-tab{ position:relative; display:none; flex-direction: column; background-color:white; color: #0F172A; border-radius: 8px; padding: 20px 25px; box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; } .speedycache-disabled{ position:relative; } .speedycache-disabled::after{ position:absolute; height:100%; width:100%; top:0; left:0; background: rgba(0, 0, 0, 0.3); } .speedycache-tab svg{ color:#0F172A; } .speedycache-tab h2{ display: flex; align-items: center; gap:10px; padding: 0 0 15px 0; border-bottom: 1px solid #e0e0e0; font-size:1.3rem; line-height:2rem; } .speedycache-tab h3{ display: flex; align-items: center; gap:10px; padding: 0 0 15px 0; border-bottom: 1px solid #e0e0e0; } .speedycache-tab h4{ font-size:1rem; margin: 0; padding: 0; } .speedycache-logo{ text-align:center; padding: 20px 0; } .speedycache-logo span{ display:inline-block; color: #6b6b6b; } #speedycache-navigation li a { display:flex; align-items: center; gap:10px; color: black; padding: 10px; text-decoration:none; font-size: 16px; font-weight:500; border-radius:5px; cursor:pointer; border: 1px solid transparent; } #speedycache-navigation li a:hover{ background-color: #2ca5eb22; border: 1px solid #106fa5; } #speedycache-navigation li a:focus{ outline: none; background-color: #2ca5eb22; border: 1px solid #106fa5; box-shadow:none; } #speedycache-navigation li a.speedycache-nav-selected:not(:focus){ background-color: #2ca5eb22; border: 1px solid #106fa5; } .speedycache-sidebar{ display:flex; flex-direction:column; flex: 0 0 250px; padding: 0 10px 10px 10px; margin-left: 10px; } .speedycache-need-help{ display:flex; flex-direction:column; word-wrap:wrap; border-radius: 20px; padding: 5px; background-color:#FFF; } .speedycache-quick-links{ background-color:#f1f1f191; border-radius: 15px; padding: 10px; } .speedycache-quick-access-item{ display:flex; gap:10px; align-items:center; padding: 7px 4px; } .speedycache-quick-access-item a{ text-decoration:none; color: #000; } .speedycache-need-help p{ font-size:0.8rem; font-weight:500; line-height:1rem; text-align:center; margin: 0 0 4px 0; color:#000; } .speedycache-admin-row{ display:flex; gap: 10px; margin-bottom: 20px; } .speedycache-admin-row .speedycache-is-block{ border: 1px solid #E2E8F0; padding: 10px; width: 100%; border-radius:1px; } .speedycache-perf-score{ flex: 0 0 60%; } .speedycache-dashboard-info{ display:flex; flex-direction:column; gap: 8px; width:100%; } .speedycache-dashboard-info > div{ display:flex; flex-direction:column; gap: 6px; } .speedycache-dashboard-info > div > h4{ display:flex; align-items:center; gap:5px; margin-bottom:9px; } .speedycache-perf-score-meter{ display:flex; flex-direction: column; width:50%; } .speedycache-perf-score-meter-heading{ display: flex; align-items: center; gap:10px; } #speedycache-analyze{ display:inline-flex; font-size: 12px; font-weight:400; color: blue; cursor:pointer; } .speedycache-perf-score-donut{ display: flex; justify-content: center; } .speedycache-perf-score-guide{ display:flex; justify-content: space-evenly; font-size: 12px; } .speedycache-perf-score-guide span{ display: inline-block; height: 10px; width: 10px; border-radius: 50px; background-color: red; } /* CSS for Single option starts here */ div.speedycache-option-wrap{ display:flex; flex-direction:row; align-items:center; column-gap: 13px; margin: 4px 0 4px 0; padding-top: 5px; line-height: 18px; } .speedycache-option-info > span { display:block; } .speedycache-option-info span.speedycache-option-desc { font-size: 0.85rem; line-height: 1.5rem; color: #6b6b6b; } .speedycache-option-info .speedycache-option-name { font-weight: 600; color: #212529de; font-size: 1rem; line-height:1.5rem; } .speedycache-stacked-option-wrap{ display:flex; flex-direction:column; gap: 5px; margin: 10px 0 4px 0; padding-top: 5px; line-height: 18px; } .speedycache-custom-checkbox { display:inline-block; width:40px; height:22px; position:relative; flex-shrink: 0; } .speedycache-custom-checkbox input { display:none; } .speedycache-input-slider { background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: background-color .4s; border-radius: 4px; width:40px; } .speedycache-input-slider:before { content: ""; background-color: #fff; top:50%; transform: translateY(-50%); height: 15px; left: 4px; position: absolute; transition: transform .4s; width: 15px; border-radius:4px; } input:checked + .speedycache-input-slider { background-color: var(--speedycache-color); } input:checked + .speedycache-input-slider:before { transform: translate(18px, -50%); } /* CSS for Single option ends here */ /* Components */ /* Buttons */ .speedycache-button{ display: inline-flex; outline: 0; text-align: center; cursor: pointer; padding: 8px 13px; border-radius: 3px; border: 1px solid transparent; transition: background .3s ease, border-color .3s ease; font-weight: 600; text-transform: uppercase; font-size: 11px; text-decoration: none; gap: 8px; align-items:center; justify-content:center; } .speedycache-btn-black{ background: var(--speedycache-txcolor); border-color: var(--speedycache-txcolor); color: #fff; } .speedycache-btn-black:hover{ background: #e4461b; border-color: #e4461b; } .speedycache-btn-transparent{ background-color:transparent; color: currentcolor; } .speedycache-btn-transparent:active{ outline:0; } .speedycache-100{ width:100%; } .speedycache-delay-suggestions{ position: absolute; top: 12px; right: 40px; background: var(--speedycache-color); color: #fff; border: none; border-radius: 7px; box-shadow: 1px 0 5px 0 #ccc; padding: 8px 20px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 10px; } /*Modal Classes start here*/ .speedycache-modal{ display:flex !important; visibility:hidden; justify-content:center; align-items:center; position:fixed; top:0; left:0; width: 100%; height: 100% !important; z-index:99999; background-color: #00000040 !important; /*hexa decimal opacity used here*/ backdrop-filter: blur(2px); } .speedycache-close-modal { cursor: pointer; } .speedycache-modal-wrap{ padding: 6px; height: auto; width: 440px; z-index: 10001; background-color:#FFF; /* box-shadow: 0 0 8px 0 #ccc; */ box-shadow: 0 3px 10px 2px rgba(0 0 0 / 30%); transition: height 1s ease-in; border-radius: 6px; } .speedycache-modal-wrap * { box-sizing:border-box; } .speedycache-modal-header { color: #000; font-weight:bold; display:flex; justify-content: space-between; align-items:center; padding:15px; border-radius: 3px 3px 0 0; border-bottom: 1px dashed #ccc; } .speedycache-modal-header > * { font-size:20px !important; } .speedycache-modal-content{ padding:10px; background-color: #FFF; overflow-y:auto; max-height: 75vh; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255, 255, 255, 0)), linear-gradient(rgba(255, 255, 255, 0), white 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 0 100%; background-repeat: no-repeat; background-color: white; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; background-attachment: local, local, scroll, scroll; } .speedycache-modal-content .speedycache-form-input { display:flex; justify-content:space-between; width:100%; margin:7px 0; float: none !important; } .speedycache-modal-content .speedycache-modal-block { padding: 15px; border-bottom: 1px dashed #ccc; } .speedycache-modal-content .speedycache-modal-block:first-child { padding-top: 5px; } .speedycache-modal-content .speedycache-modal-block:last-of-type { border:none; padding-bottom:0; } .speedycache-modal-footer{ background-color: #FFF; padding:10px; display:flex; width:100%; justify-content:center; } .speedycache-modal-footer > button { outline:none; border:none; background-color:#24b974; color: #FFF; border-radius:3px; box-shadow: 1px 0 5px 0 #ccc; padding: 8px 20px; font-weight:bold; cursor:pointer; } .speedycache-info-modal { margin: 10px; } .speedycache-info-modal p{ /* color:#666; */ background-color: #f2f2f2; padding: 10px; border-radius: 6px; font-family: monospace; } .speedycache-modal-highlight { background-color: #e4dcdc; border-radius: 6px; padding: 10px; } .speedycache-modal-scripts{ display: block; max-height: 100px; overflow-y: auto; } /*Ends Modal Classes*/ .speedycache-db-row{ display:flex; width: 100%; justify-content:space-between; padding: 10px 7px; align-items:center; } .speedycache-db-row > div{ display:flex; align-items:center; gap:4px; padding: 5px 0; } .speedycache-db-info{ display:flex; flex-direction:column; gap:4px; } .speedycache-db-info > div:first-child{ font-weight: 600; font-size: 1rem; line-height: 1.5rem; } .speedycache-db-info > div:last-child{ font-size: 0.85rem; line-height: 1.5rem; color: #6b6b6b; font-style: italic; } .speedycache-db-row:not(:last-child){ border-bottom: 1px solid #e0e0e0; } .speedycache-save-settings-wrapper{ position:sticky; bottom:0px; background-color:white; padding:15px 10px; border-top:1px solid #e2e2e2; margin-top:30px; } .speedycache-spinner{ display:none; border: 2px solid #dddcdc80; border-left-color: #e3e3e3; height: 15px; width: 15px; border-radius:50%; animation: speedycache-spinner 1s linear infinite; } .speedycache-spinner-active{ display:inline-block; } .speedycache-spinner-done{ display:none; } .speedycache-spinner-done-active{ display:inline-block; } @keyframes speedycache-spinner{ 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .speedycache-table-actions{ display:flex; justify-content:space-between; } .speedycache-table{ width:100%; margin-top:10px; } .speedycache-table > table{ width:100%; border-collapse: collapse; } .speedycache-table thead tr { } .speedycache-table thead th { border-bottom: 1px solid #595b5e; text-align:left; } .speedycache-table th, .speedycache-table td { padding: 16px; border-bottom: 1px solid rgb(228, 228, 231); } .speedycache-table tr:hover{ background-color: rgba(244, 244, 245, 0.5) } .speedycache-radio-input{ display:flex; justify-content:center; align-items:center; gap:10px; width:100%; } .speedycache-radio-input label{ padding:8px 10px; border:2px solid var(--speedycache-color); border-radius:7px; font-weight:500; } .speedycache-radio-input label:hover{ box-shadow: 0 0 0 0.1rem rgba(61, 90, 254, 0.4); } #speedycache_delayjs_selected, #speedycache_delayjs_all{ display:none; } #speedycache_delayjs_selected:checked ~ div.speedycache-radio-input > label[for="speedycache_delayjs_selected"], #speedycache_delayjs_all:checked ~ div.speedycache-radio-input > label[for="speedycache_delayjs_all"]{ box-shadow: 0 0 0 0.20rem rgba(61, 90, 254, 0.4); } .speedycache-delay_js_list label{ display:none; font-weight:500; margin:10px 0 3px 0; } .speedycache-delay_js_list textarea, .speedycache-unusedcss-excludes textarea{ width: 100%; } #speedycache_delayjs_selected:checked ~ div.speedycache-delay_js_list > label[for="speedycache_delay_js_scripts"], #speedycache_delayjs_all:checked ~ div.speedycache-delay_js_list > label[for="speedycache_delay_js_excludes"]{ display:block; } #speedycache_unusedcss_async, #speedycache_unusedcss_interaction, #speedycache_unusedcss_remove{ display:none; } #speedycache_unusedcss_async:checked ~ div.speedycache-radio-input > label[for="speedycache_unusedcss_async"], #speedycache_unusedcss_interaction:checked ~ div.speedycache-radio-input > label[for="speedycache_unusedcss_interaction"], #speedycache_unusedcss_remove:checked ~ div.speedycache-radio-input > label[for="speedycache_unusedcss_remove"]{ box-shadow: 0 0 0 0.20rem rgba(61, 90, 254, 0.4); } .speedycache-exclude-btn-wrap{ margin-top:2.2rem; } .speedycache-input-wrap{ display:flex; justify-content:space-between; align-items:center; gap: 10px; margin-bottom: 15px; } .speedycache-info-modal .speedycache-input-wrap select, .speedycache-info-modal .speedycache-input-wrap input{ max-width: 60%; } .speedycache-modal-settings-link, .speedycache-action-link{ font-size:0.75rem; color: var(--speedycache-color); cursor: pointer; } .speedycache-premium-tag{ position:relative; display:inline-block; font-size: 12px; margin-left: 10px; padding: 0 8px; border-radius: 3px; background-color: gold; } .speedycache-premium-tag::before { content: ''; display: inline-block; position: absolute; background: rgba(255, 255, 255, 0.5); width: 10px; height: 100%; top: 0; left:0; filter:blur(3px); transform: skewX(-15deg); animation: speedycache-shine 2s ease-in-out infinite; } @keyframes speedycache-shine { 0% { opacity: 0.5; left: 60px; transition-property: opacity, left; }, 100% { opacity: 0.6; left: 50px; transition-property: opacity, left; } } /* Terminal CSS Here */ .speedycache-logs{ background: #22212c; box-shadow: 0 22px 70px 4px rgba(0, 0, 0, 0.46); width: 100%; border-radius: 6px; color:#fff; } .speedycache-logs-header{ height: 40px; background: #191a22; border-radius: 6px 6px 0px 0px; display: flex; align-items: center; justify-content:center; padding: 0px 14px; position: relative; text-align:center; font-weight:500; } .speedycache-logs-content{ padding: 20px; min-height: 30vh; border-radius: 6px 6px 0px 0px; max-height: 50vh; overflow-y: scroll; } .speedycache-hidden{ display:none; } .speedycache-logs-row{ padding: 5px 0; font-family:monospace; } .speedycache-stat-status{ display:inline-flex; align-items:center; justify-content:center; padding: 3px 10px; margin-top:10px; border-radius: 50px; border:1px solid #e2e2e2; line-height: 1.3; } .speedycache-stats-block{ position:relative; overflow:hidden; } .speedycache-stats-block img{ position: absolute; width: 80px; top: 0px; right: -12px; transform: rotate(40deg); opacity: 0.1; } .speedycache-stats-name{ margin-bottom:5px; font-weight:500; } .speedycache-stat-status-indicator{ border-radius:50%; width: 12px; height:12px; background-color: #e2e2e2; margin-right: 10px; } .speedycache-stats-number{ font-size:2.5rem; line-height:3.2rem; } .speedycache-object-stat{ display:flex; flex-direction:column; max-width: 350px; gap: 5px; } .speedycache-flush-db{ margin-top:10px; width: 40%; display:flex; gap:10px; align-items:center; } .speedycache-img-stat-info { display: flex; flex-wrap:wrap; align-items:top; justify-content:flex-end; } .speedycache-img-main-stat { display:flex; flex-direction:column; justify-content: flex-start; align-items: center; flex-grow: 1; flex-basis: calc(100% / 3); padding: 5px; min-width: 85px; max-width: 100px; font-size:0.9rem; border-right: 1px dashed #ccc; } .speedycache-img-main-stat:last-child{ border-right: none; } .speedycache-img-main-stat span { font-size: 1.1rem; padding-top:4px; font-weight: bold; } .speedycache-img-optimize-all { margin-top: 30px; align-items:flex-end; } .speedycache-optm-close { display : flex; justify-content : center; margin-top: 10px; gap:5px; } .speedycache-optm-close button{ padding: 7px 20px; font-weight: bold; } .speedycache-disabled-methods > *:not(.speedycache-more-info, .speedycache-img-method-actions){ opacity:0.5; cursor: not-allowed; } .speedycache-img-remain-optm{ margin-left:auto; display:flex; align-items: center; vertical-align: middle; font-weight: 500; } .speedycache_img_optm_status{ height: 15px; width: 15px; margin-right: 5px; border-radius: 50%; display: inline-block; } .speedycache-img-delete-all-conv { margin-left:5px; } .speedycache-img-start-optm{ display:flex; flex-direction:column; justify-content: space-around; align-items:center; height:100%; } .speedycache-img-opt-stat { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; } .speedycache-img-optm-count { font-size:3.3rem !important; font-weight:400; line-height:1.4; } .speedycache-img-optm-count-text{ font-size:1rem; line-height:1.2; padding:20px; text-align:center; } .speedycache-img-reduced-size{ color:var(--speedycache-color); font-weight:bold; font-size:1rem; } .speedycache-img-optm-close{ display:none; } .speedycache-tooltip { position:absolute; top:-50px; background-color: rgba(0, 0, 0, 0.9); color: #FFF; padding: 5px; border-radius: 3px; } .speedycache-already-optm{ text-align:center; margin : 30px; } .speedycache-already-optm i { font-size: 5em; color: var(--speedycache-color); } .speedycache-already-optm span { font-size:1.5rem; font-weight: 500; display: block; margin-top: 10px; line-height: normal; } .speedycache-img-optm-counter { font-size: 3.3rem; line-height: 1.5; text-align: center; font-weight: bold; } .speedycache-scheduled-count { position: relative; color: var(--speedycache-color); cursor: pointer; } .speedycache-scheduled-count-indicator::after { content: ''; position: absolute; height: 12px; width: 12px; margin-right: 5px; border-radius: 50%; display: inline-block; top:8px; right: -25px; background: rgb(220,105,53); background: radial-gradient(circle, rgba(220,105,53,1) 24%, rgba(242,242,242,0.89) 100%); animation: speedycache-blink 2s ease-out 0s infinite; } @keyframes speedycache-blink { 0%{ opacity: 1; }, 25% { opacity: 0.5; } 50% { opacity: 0.0; } } .speedycache-table-item { padding: 10px 5px; text-align: left; border-bottom: 1px dashed #ccc; } .speedycache-table-hitem{ border-bottom: 2px solid #ccc; padding: 10px 5px; text-align: left; } .speedycache-img-optm-error{ display:block; text-align:center; } .speedycache-img-optm-error > i { font-size: 5rem; color: var(--speedycache-red); } .speedycache-img-optm-error > p { font-size: 1.4rem; font-weight: 500; } .speedycache-more-info{ position:relative; cursor:pointer; } .speedycache-more-info:hover:before{ content: attr(data-info); position: absolute; bottom: 16px; left:auto; padding: 10px; background-color: rgba(0 0 0 / 90%); color: #FFF; width: 170px; border-radius:3px; max-width: 200px; } .speedycache-img-method-actions{ display:block; } td div.speedycache-revert:before{ font-family: "dashicons"; content: "\f531"; } td div.speedycache-revert{ width:30px; height:28px; vertical-align: middle; margin: auto; position:relative; cursor:pointer; border-radius: 3px 3px; border:1px solid #aaa; background:#ddd; padding:3px; background-color: white; } td div.speedycache-revert:hover{ border-color:#000; background-color: white; } td div.speedycache-revert:active{ background-color: #F5F5F5; } #speedycache-revert-loader{ display: none; background: rgba(255, 255, 255, .7) url(../images/loader.gif) no-repeat center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; } .speedycache-perf-extras{ display:flex; flex-direction:column; gap:5px; font-size:14px; justify-content:space-around; width:50%; } .speedycache-perf-extras div { display:flex; justify-content:space-between; align-items:center; } .speedycache-perf-extras div span{ margin-left: 10px; padding: 6px; border-radius: 2px; background-color: #0c6; color: white; } #speedycache-exact-time-selector{ display:flex; flex-direction:column; gap:5px; margin-top:8px; } .speedycache-link-tooltip{ display:none; position:absolute; left:50%; transform: translate(-50%, -50%); background-color: white; border-radius: 15px; max-width: 300px; width: 300px; padding: 13px 18px; z-index:20; border: 1px solid rgb(0 0 0 / 5%); box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1); } .speedycache-link-tooltip h4{ color:black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .speedycache-link-tooltip p{ margin:5px 0 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .speedycache-tooltip-link{ position:relative; margin: 0 2px; } .speedycache-deletion-roles{ display:flex; flex-direction:row; flex-wrap:wrap; gap:15px; max-width:500px; } .speedycache-stacked-label{ display:inline-flex; margin:5px 5px 5px 0; } .speedycache-stacked-label label{ display:inline-flex; flex-direction:column; gap:2px; } .speedycache-promo-modern-card { margin-top:20px; background: var(--speedycache-promo-bg-surface); border-radius: 8px; padding: 24px; /* Modern 'floating' shadow */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); border: 1px solid rgba(0,0,0,0.05); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 100%; box-sizing: border-box; position: relative; overflow: hidden; } /* Subtle radial sheen in background */ .speedycache-promo-modern-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: var(--speedycache-promo-gradient); opacity: 0.1; filter: blur(40px); border-radius: 50%; pointer-events: none; } .speedycache-promo-header-group { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .speedycache-promo-title { font-size: 18px; font-weight: 700; color: var(--speedycache-promo-text-main); margin: 0; letter-spacing: -0.025em; } .speedycache-promo-badge-pro { background: var(--speedycache-promo-gradient); color: #fff; font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 4px 8px; border-radius: 20px; letter-spacing: 0.05em; line-height: 1; } .speedycache-promo-desc { font-size: 13px; color: var(--speedycache-promo-text-muted); margin: 0 0 20px 0; line-height: 1.5; } .speedycache-promo-feature-list { list-style: none; padding: 0; margin: 0 0 24px 0; } .speedycache-promo-feature-item { display: flex; align-items: center; margin-bottom: 12px; font-size: 14px; color: var(--speedycache-promo-text-main); font-weight: 500; } /* Custom Gradient Checkmark */ .speedycache-promo-check-circle { width: 20px; height: 20px; border-radius: 50%; background: rgba(99, 102, 241, 0.1); /* Low opacity brand color */ display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .speedycache-promo-check-icon { width: 10px; height: 6px; border-left: 2px solid var(--speedycache-promo-primary); border-bottom: 2px solid var(--speedycache-promo-primary); transform: rotate(-45deg); margin-top: -2px; } .speedycache-promo-btn-main { display: flex; justify-content: center; align-items: center; width: 100%; padding: 12px; background: var(--speedycache-promo-gradient); color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 14px; transition: all 0.2s ease; box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.3); border: none; cursor: pointer; } .speedycache-promo-btn-main:hover { transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4); color: #ffffff; } .speedycache-promo-btn-main:active { transform: translateY(0); } .speedycache-promo-btn-text { margin-right: 6px; } /* Simple arrow animation on hover */ .speedycache-promo-arrow { transition: transform 0.2s ease; } .speedycache-promo-btn-main:hover .speedycache-promo-arrow { transform: translateX(3px); } /* TOOL TIP */ [spdf-hover-tooltip] { position: relative; color:black; cursor: default; } [spdf-hover-tooltip]:hover::before { content: attr(spdf-hover-tooltip); font-size: 14px; text-align: center; position: absolute; display: block; left: 50%; min-width: 150px; max-width: 200px; bottom: calc(100% + 10px); transform: translate(-50%); animation: fade-in 300ms ease; background: #272727; border-radius: 4px; padding: 10px; color: #ffffff; z-index: 999999; } [spdf-hover-tooltip]:hover::after { content: ''; position: absolute; display: block; left: 50%; width: 0; height: 0; bottom: calc(100% + 6px); margin-left: -3px; border: 1px solid black; border-color: #272727 transparent transparent transparent; border-width: 4px 6px 0; animation: spdf-fade-in 300ms ease; z-index: 1; } [spdf-hover-tooltip][spdf-tooltip-position="bottom"]:hover::before { bottom: auto; top: calc(100% + 10px); } [spdf-hover-tooltip][spdf-tooltip-position="bottom"]:hover::after { bottom: auto; top: calc(100% + 6px); border-color: transparent transparent #272727; border-width: 0 6px 4px; } @keyframes spdf-fade-in { from { opacity: 0; } to { opacity: 1; } } /* END Tooltip */ .speedycache-already-optm .dashicons{ width:100%; }