/* ===================================================================== Widget de Comentários — skin DashLite (GLOBAL, escopado em .comments e .comment_login_box). comments.php injeta reset.css e DEPOIS este arquivo no , então comments.css vence o reset.css por ordem de cascata (usa !important só onde o reset.css força !important — botões). Brand-aware: a cor de marca vem de var(--bs-primary)/var(--bs-primary-rgb) e o fundo suave (--wcc-soft) de var(--wc-bg-alt) — o "fundo alternativo" do tema (SITE_THEME_BG_ALT, injetado por wcSiteThemeVars no :root). É o mesmo token que os temas wc_agency/wc_clinic usam p/ superfícies suaves (.bg-light = --ag-surface-2). Quando não há SITE_THEME_BG_ALT (temas DashLite puros: wc_default/ecommerce/imobi), cai em var(--bs-lighter) = #f5f6fa. Assim o widget herda as cores do tema ativo — tornando os bridges por-tema do wc-custom.css desnecessários. O HTML de comentário inserido via AJAX (comments.ajax.php) reusa estas MESMAS classes (.comments_single, .comments_single_avatar, etc.), por isso os nomes são preservados — só a aparência muda aqui. ===================================================================== */ .comments, .comment_login_box { --wcc-primary: var(--bs-primary, #6576ff); --wcc-primary-rgb: var(--bs-primary-rgb, 101, 118, 255); --wcc-head: #364a63; --wcc-text: #526484; --wcc-muted: #8094ae; --wcc-border: #e5e9f2; --wcc-line: #dbdfea; --wcc-soft: var(--wc-bg-alt, var(--bs-lighter, #f5f6fa)); --wcc-radius: .375rem; } /* ---- seção ----------------------------------------------------------- */ .comments { float: none; display: block; width: 100%; clear: both; text-align: left; padding: 1.5rem 0; } .comments > header { display: block; text-align: left; margin-bottom: 1.5rem; } .comments > header h1 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; color: var(--wcc-head); text-transform: none; } .comments > header h1 span { display: block; margin-top: .25rem; font-size: .9rem; font-weight: 600; text-transform: none; color: var(--wcc-primary); } .comments_count { float: none; display: block; width: 100%; margin-bottom: 1.25rem; padding: .75rem 1rem; background: var(--wcc-soft); color: var(--wcc-muted); border-radius: .5rem; font-size: .875rem; text-transform: none; text-align: left; } /* ---- comentário (card) ----------------------------------------------- */ .comments_single { float: none; display: flex; gap: 1rem; align-items: flex-start; width: 100%; padding: 1.25rem 0; border-top: 1px solid var(--wcc-border); } .comments_single_avatar { float: none; width: 48px; flex: 0 0 48px; } .comments_single_avatar img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; } .comments_single_content { float: none; flex: 1 1 auto; width: auto; min-width: 0; padding-left: 0; } .comments_single_content > header { display: block; width: 100%; margin-bottom: .15rem; } .comments_single_content header h1 { font-size: 1rem; font-weight: 600; color: var(--wcc-head); } /* destaque verde do comentário recém-enviado (backend usa .font_green) */ .comments .font_green { color: #0a8f6c !important; } .comments_single_comment { float: none; width: auto; margin: .25rem 0 .75rem; font-size: .9375rem; line-height: 1.6; color: var(--wcc-text); font-weight: 400; } /* ---- meta (estrelas / data / curtir / responder) -------------------- */ .comments_single_ui { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; width: 100%; font-size: .8125rem; color: var(--wcc-muted); } .comments_single_ui span { display: inline-block; margin: 0; } .comments_single_ui .stars { color: #f4bd0e; font-size: .95rem; letter-spacing: .03em; } .comments_single_ui .date, .comments_single_ui .liked { color: var(--wcc-muted); } .comments_single_ui .like { color: var(--wcc-primary); cursor: pointer; font-weight: 600; } .comments_single_ui .response { color: var(--wcc-head); cursor: pointer; font-weight: 600; } .comments_single_ui .like:hover, .comments_single_ui .response:hover { text-decoration: underline; } .comments_single_likes { display: block; width: 100%; margin: .75rem 0 0; padding: .5rem .75rem; background: var(--wcc-soft); border-radius: var(--wcc-radius); font-size: .75rem; text-transform: none; color: var(--wcc-muted); } .comments_single_likes:before { content: "\2665"; margin-right: .5rem; color: #e85347; } .comments_single_likes .na { color: var(--wcc-muted); } /* ---- resposta (subcomentário) --------------------------------------- */ .comment_response { border-top: 1px dashed var(--wcc-border); margin: 0; padding: 1rem 0 .5rem; } .comment_response:last-child { padding-bottom: 0; } .ajax_response { display: none; } /* ---- formulários ----------------------------------------------------- */ .comments > form { float: none; width: 100%; margin-top: 1.5rem; background: var(--wcc-soft); border: 0; border-radius: .5rem; padding: 1.25rem; } .comments_single form { float: none; width: 100%; margin: 1rem 0; display: none; background: var(--wcc-soft); border-radius: .5rem; padding: 1rem; } .comments form label { display: block; width: 100%; margin-bottom: .75rem; } .comments form label span { display: block; margin-bottom: .4rem; font-size: .8125rem; font-weight: 600; font-variant: normal; text-transform: none; color: var(--wcc-head); } .comments form textarea, .comments form select, .comments form input { width: 100%; border: 1px solid var(--wcc-line); border-radius: var(--wcc-radius); padding: .55rem .85rem; font-size: .9375rem; color: var(--wcc-text); background: #fff; background-image: none; } .comments form textarea { min-height: 90px; resize: vertical; } .comments form select { appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; cursor: pointer; } .comments form textarea:focus, .comments form select:focus, .comments form input:focus { outline: 0; border-color: rgba(var(--wcc-primary-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--wcc-primary-rgb), .15); } .comments_form_actions { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; } .comments_form_actions img { height: 22px; display: none; margin-left: auto; } .comments > form .wc_close { display: none; } /* botões (reset.css força .btn{color:#fff!important;text-decoration:none!important}) */ .comments .btn { display: inline-block; cursor: pointer; padding: .5rem 1.25rem; border: 0; border-radius: var(--wcc-radius); font-size: .875rem; font-weight: 500; text-align: center; text-shadow: none; text-decoration: none !important; } .comments .btn_blue { background: var(--wcc-primary); color: #fff !important; } .comments .btn_blue:hover { filter: brightness(.94); } .comments .btn_red { background: #fff !important; color: var(--wcc-text) !important; border: 1px solid var(--wcc-line); } .comments .btn_red:hover { background: var(--wcc-soft) !important; } /* ---- modal de login -------------------------------------------------- */ .comment_login_box { position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(15, 21, 30, .5); display: none; z-index: 9999; } .comment_login_content { width: 460px; max-width: 92%; margin: 6vh auto; background: #fff; border-radius: .75rem; overflow: hidden; box-shadow: 0 12px 48px rgba(15, 21, 30, .25); } .comment_login_content header { position: relative; padding: 1.5rem; text-align: center; background: var(--wcc-primary); color: #fff; } .comment_login_content header h1 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; text-transform: none; } .comment_login_content header p { font-size: .8125rem; opacity: .9; margin-top: .25rem; } .comment_login_content header .trigger { margin-top: .75rem; background: rgba(255, 255, 255, .15); color: #fff; border-color: transparent; } .comment_login_content header .trigger .comment_recover_password { color: #fff; text-decoration: underline; } .comment_login_error { color: #fff; } .comment_login_close { position: absolute; right: 1rem; top: 1rem; width: 1.75rem; height: 1.75rem; padding: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer; border-radius: 50%; } .comment_login_close:hover { background: #e85347; } .comment_login_content input { width: 100%; border: 1px solid var(--wcc-line); border-radius: var(--wcc-radius); padding: .55rem .85rem; font-size: .9375rem; font-weight: 400; color: var(--wcc-text); } .comment_login_content input:focus { outline: 0; border-color: rgba(var(--wcc-primary-rgb), .5); box-shadow: 0 0 0 3px rgba(var(--wcc-primary-rgb), .15); } .comment_login_fields { padding: 1.5rem 1.5rem .5rem; } .comment_login_fields label { float: none; display: block; width: 100%; margin-bottom: 1rem; } .comment_login_fields span { display: block; margin-bottom: .4rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; color: var(--wcc-muted); } .comment_login_fields .comment_login_create, .comment_login_fields .comment_login_join { display: none; } .comment_login_actions { padding: 1.25rem 1.5rem; background: var(--wcc-soft); border-top: 1px solid var(--wcc-border); text-align: center; } .comment_login_actions .btn { width: 100%; padding: .625rem 0; border: 0; border-radius: var(--wcc-radius); font-size: .9375rem; font-weight: 500; text-transform: none; text-shadow: none; text-decoration: none !important; } .comment_login_actions .btn_green { background: var(--wcc-primary); color: #fff !important; } .comment_login_actions .btn_green:hover { filter: brightness(.94); } .comment_login_actions img { height: 22px; display: none; margin-left: .5rem; vertical-align: middle; } /* recuperação de código (dentro do modal) */ .comment_recover_label { display: none; padding: 1.25rem 1.5rem; background: var(--wcc-soft); border-radius: .5rem; } .comment_recover_label > span { display: block; margin-bottom: .75rem; text-align: center; font-size: .8125rem; color: var(--wcc-text); } .comment_recover_label b { font-size: 1.1em; text-transform: lowercase; color: var(--wcc-head); } .comment_recover_label input { text-align: center; } .comment_recover_back, .comment_recover_password { font-weight: 600; cursor: pointer; text-decoration: underline; color: var(--wcc-primary); } .comment_recover_password:hover { text-decoration: none; } .comment_recover_label .comment_recover_back, .comment_recover_label .comment_recover_password { display: inline-block; margin-top: 1rem; font-size: .75rem; text-transform: uppercase; font-weight: 600; text-decoration: none; } .comment_recover_label .comment_recover_back { margin-left: .75rem; } .comment_recover_label .comment_recover_back:hover, .comment_recover_label .comment_recover_password:hover { text-decoration: underline; } /* ---- responsivo ------------------------------------------------------ */ @media (max-width: 600px) { .comments_single_avatar { display: none; } .comments_single_content { width: 100%; padding-left: 0; } .comments_form_actions { flex-wrap: wrap; } .comments_form_actions .btn { flex: 1 1 auto; } .comments_form_actions img { margin-left: 0; } }