/* ===== Dashboard Widget ===== */ #easyel_notice_widget .inside { margin: 0; padding: 0; } .easyel-notice-widget { display: flex; flex-direction: column; gap: 0; } .easyel-notice-widget-empty { margin: 0; padding: 16px; color: #6b7280; font-style: italic; text-align: center; } .easyel-notice-widget-card { padding: 14px 16px 16px; border-bottom: 1px solid #f0f0f1; } .easyel-notice-widget-card:last-child { border-bottom: 0; } .easyel-notice-widget-eyebrow { font-size: 12px; font-weight: 600; color: #1d2327; text-transform: none; letter-spacing: 0; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f1; } .easyel-notice-widget-thumb { position: relative; border-radius: 8px; overflow: hidden; margin: 0 0 12px; background: #0f0f10; line-height: 0; } .easyel-notice-widget-thumb img { width: 100%; height: auto; display: block; border-radius: 8px; transition: transform .35s ease; } .easyel-notice-widget-thumb-link { display: block; position: relative; line-height: 0; box-shadow: none; text-decoration: none; } .easyel-notice-widget-thumb-link:focus { box-shadow: 0 0 0 2px #2271b1; outline: none; } .easyel-notice-widget-thumb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.35); opacity: 0; transition: opacity .25s ease; } .easyel-notice-widget-thumb.has-link:hover .easyel-notice-widget-thumb-overlay, .easyel-notice-widget-thumb-link:focus .easyel-notice-widget-thumb-overlay { opacity: 1; } .easyel-notice-widget-thumb.has-link:hover img { transform: scale(1.03); } .easyel-notice-widget-thumb-overlay-text { display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); width: 32px; height: 32px; border-radius: 50%; } .easyel-notice-widget-thumb-overlay-text .dashicons { font-size: 16px; width: 16px; height: 16px; line-height: 1; } .easyel-notice-widget-content { color: #3c434a; font-size: 13px; line-height: 1.5; margin: 0 0 12px; } .easyel-notice-widget-content p { margin: 0 0 8px; } .easyel-notice-widget-content p:last-child { margin-bottom: 0; } .easyel-notice-widget-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; } .easyel-notice-widget-action { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: #2271b1; background: none; border: 0; padding: 0; text-decoration: none; line-height: 1.3; transition: color .15s ease; box-shadow: none; } .easyel-notice-widget-action:hover, .easyel-notice-widget-action:focus { color: #135e96; background: none; text-decoration: none; box-shadow: none; } .easyel-notice-widget-action:hover .easyel-notice-widget-action-text, .easyel-notice-widget-action:focus .easyel-notice-widget-action-text { text-decoration: underline; } .easyel-notice-widget-action .dashicons { font-size: 14px; width: 14px; height: 14px; line-height: 1; text-decoration: none; } /* ===== Top Notice Bar ===== */ .easyel-notice.notice { display: flex; align-items: stretch; gap: 0; padding: 0; margin: 16px 20px 16px 2px; border: 1px solid #e5e7eb; border-left-width: 4px; border-left-color: #2271b1; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .easyel-notice .notice-logo-link, .easyel-notice > .notice-logo { flex-shrink: 0; display: block; width: 250px; align-self: stretch; background: #0f0f10; line-height: 0; box-shadow: none; text-decoration: none; overflow: hidden; position: relative; } .easyel-notice .notice-logo-link { transition: opacity .15s ease; } .easyel-notice .notice-logo-link:hover { opacity: 0.92; } .easyel-notice .notice-logo-link:focus { outline: none; box-shadow: inset 0 0 0 2px #2271b1; } .easyel-notice .notice-logo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } .easyel-notice .notice-logo-link::after { content: "\f504"; /* dashicons-external */ font-family: dashicons; position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; line-height: 26px; text-align: center; font-size: 14px; color: #fff; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); border-radius: 50%; opacity: 0; transition: opacity .2s ease; } .easyel-notice .notice-logo-link:hover::after, .easyel-notice .notice-logo-link:focus::after { opacity: 1; } .easyel-notice .notice-right-container { flex: 1; min-width: 0; padding: 14px 38px 14px 18px; display: flex; flex-direction: column; justify-content: center; } .easyel-notice .notice-sub-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #1d2327; line-height: 1.3; } .easyel-notice .notice-contents { color: #3c434a; font-size: 13px; line-height: 1.55; } .easyel-notice .notice-contents p { margin: 0 0 6px; } .easyel-notice .notice-contents p:last-child { margin-bottom: 0; } .easyel-notice .notice-contents strong, .easyel-notice .notice-contents b { color: #1d2327; font-weight: 700; background: linear-gradient(180deg, transparent 65%, rgba(115, 75, 230, 0.18) 65%); padding: 0 2px; border-radius: 2px; } .easyel-notice-widget-content strong, .easyel-notice-widget-content b { color: #1d2327; font-weight: 700; background: linear-gradient(180deg, transparent 65%, rgba(115, 75, 230, 0.18) 65%); padding: 0 2px; border-radius: 2px; } .easyel-notice .easyel-notice-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; } .easyel-notice .easyel-notice-button { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; background: #2271b1; color: #fff; border: 1px solid #2271b1; border-radius: 5px; font-size: 12px; font-weight: 600; line-height: 1.5; text-decoration: none; transition: all .15s ease; box-shadow: 0 1px 2px rgba(91, 61, 245, 0.2); min-height: auto; text-shadow: none; height: auto; } .easyel-notice .easyel-notice-button:hover, .easyel-notice .easyel-notice-button:focus { background: #2271b1; border-color: #2271b1; color: #fff; box-shadow: 0 2px 5px rgba(91, 61, 245, 0.3); text-decoration: none; transform: translateY(-1px); } .easyel-notice .easyel-notice-maybe-later { display: inline-flex; align-items: center; padding: 4px 2px; background: transparent; color: #50575e; border: 0; box-shadow: none; font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color .15s ease; } .easyel-notice .easyel-notice-maybe-later:hover, .easyel-notice .easyel-notice-maybe-later:focus { color: #1d2327; background: transparent; outline: none; box-shadow: none; } .easyel-notice .notice-dismiss { top: 8px; right: 4px; } @media (max-width: 782px) { .easyel-notice.notice { flex-direction: column; } .easyel-notice .notice-logo-link, .easyel-notice > .notice-logo { width: 100%; max-height: 180px; } }