MediaWiki:Common.css: Difference between revisions

Revision as of 20:14, 1 September 2026

/* ==========================================================================
   14. TARJA DE CENSURA & SEGREDO DINÂMICO (.vtm-segredo)
   ========================================================================== */

.vtm-segredo {
  transition: all 0.3s ease;
}

/* --- CENSURADO: TARJA VERMELHA SANGUE TOTAL --- */
.vtm-segredo,
.vtm-segredo.is-redacted,
span.vtm-segredo:not(.is-revealed),
div.vtm-segredo:not(.is-revealed) {
  background: #8b0000 !important; /* Vermelho Sangue puro */
  background-color: #8b0000 !important;
  color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  border-radius: 2px !important;
  padding: 2px 6px !important;
  cursor: help !important;
  display: inline-block !important;
  vertical-align: baseline !important;
  line-height: inherit !important;
}

.vtm-segredo:not(.is-revealed) *,
.vtm-segredo.is-redacted * {
  color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  background: transparent !important;
}

.vtm-segredo:not(.is-revealed):hover,
.vtm-segredo.is-redacted:hover {
  background: #b30000 !important; /* Vermelho Sangue vivo no hover */
  background-color: #b30000 !important;
  box-shadow: 0 0 10px rgba(255, 42, 63, 0.8) !important;
}

/* --- REVELADO / DESCLASSIFICADO --- */
.vtm-segredo.is-revealed {
  background: rgba(60, 15, 25, 0.5) !important;
  background-color: rgba(60, 15, 25, 0.5) !important;
  color: #f5f0e6 !important;
  font-family: 'Special Elite', 'Courier New', monospace !important;
  border-radius: 3px !important;
  padding: 1px 6px !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  display: inline !important;
}

.vtm-segredo.is-revealed * {
  color: #f5f0e6 !important;
}

/* --- FORMATO BLOCO (tipo=bloco) --- */
.vtm-segredo[data-tipo="bloco"] {
  display: block !important;
  margin: 1.2em 0 !important;
  padding: 16px 20px !important;
  border-radius: 4px !important;
}

.vtm-segredo[data-tipo="bloco"]:not(.is-revealed),
.vtm-segredo[data-tipo="bloco"].is-redacted {
  background: #5c0000 !important;
  background-color: #5c0000 !important;
  min-height: 60px !important;
  border: 1px solid #8b0000 !important;
  border-left: 6px solid #b30000 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 15px rgba(139, 0, 0, 0.5) !important;
}

.vtm-segredo[data-tipo="bloco"].is-revealed {
  background: linear-gradient(135deg, rgba(22, 16, 20, 0.92) 0%, rgba(12, 10, 14, 0.96) 100%) !important;
  border-left: 4px solid #c5a059 !important;
}

/* ==========================================================================
   15. CONTRASTE & LEGIBILIDADE NOS MODAIS OOUI DO VISUALEDITOR
   ========================================================================== */
.oo-ui-window-frame,
.oo-ui-dialog,
.oo-ui-panelLayout-padded,
.oo-ui-processDialog-content,
.ve-ui-mwTransclusionDialog {
  background: #121218 !important;
  background-color: #121218 !important;
  color: #ede9e1 !important;
  border: 1px solid #4a101a !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95) !important;
}

.oo-ui-window-head,
.oo-ui-processDialog-title,
.oo-ui-processDialog-navigation {
  background: #0c0c10 !important;
  border-bottom: 1px solid #3d0a12 !important;
  color: #c5a059 !important;
  font-family: var(--vtm-font-title) !important;
  font-weight: 700 !important;
}

.oo-ui-processDialog-title .oo-ui-labelElement-label {
  color: #ffffff !important;
  font-family: var(--vtm-font-title) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
}

/* Campos de entrada dentro do modal */
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input,
.ve-ui-mwTransclusionDialog input,
.ve-ui-mwTransclusionDialog textarea {
  background: #08080c !important;
  background-color: #08080c !important;
  color: #ffffff !important;
  font-family: var(--vtm-font-body) !important;
  font-size: 0.95em !important;
  border: 1px solid #3d0a12 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

.oo-ui-textInputWidget .oo-ui-inputWidget-input:focus,
.oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input:focus {
  border-color: #ff2a3f !important;
  box-shadow: 0 0 10px rgba(201, 24, 43, 0.5), inset 0 2px 8px rgba(0, 0, 0, 0.9) !important;
  outline: none !important;
}

/* Placeholders claros */
.oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder,
.oo-ui-multilineTextInputWidget .oo-ui-inputWidget-input::placeholder {
  color: #7a766e !important;
  opacity: 1 !important;
}

/* Rótulos e descrições dos parâmetros */
.oo-ui-fieldLayout-header .oo-ui-labelElement-label,
.ve-ui-mwParameterPage-label,
.ve-ui-mwTemplateTitleInputWidget-label {
  color: #c5a059 !important;
  font-family: var(--vtm-font-title) !important;
  font-weight: 700 !important;
  font-size: 0.92em !important;
}

.oo-ui-fieldLayout-helpText,
.ve-ui-mwParameterPage-description,
.oo-ui-fieldLayout-help {
  color: #b0aca4 !important;
  font-size: 0.85em !important;
  line-height: 1.4 !important;
}

/* Painel lateral de seleção de parâmetros */
.oo-ui-bookletLayout-outline,
.oo-ui-outlineSelectWidget,
.oo-ui-outlineOptionWidget {
  background: #0d0d12 !important;
  color: #ddd9d0 !important;
  border-right: 1px solid #3d0a12 !important;
}

.oo-ui-outlineOptionWidget-selected {
  background: #3d0a12 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

.oo-ui-outlineOptionWidget-highlighted {
  background: #251016 !important;
  color: #ff2a3f !important;
}

/* Botão Aplicar Mudanças */
.oo-ui-processDialog-actions-primary .oo-ui-buttonElement-button {
  background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;
  border: 1px solid #ff2a3f !important;
  border-radius: 4px !important;
}

.oo-ui-processDialog-actions-primary .oo-ui-labelElement-label {
  color: #ffffff !important;
  font-family: var(--vtm-font-title) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   16. VISUALEDITOR — VISIBILIDADE TOTAL & EDIÇÃO DE SEGREDO
   ========================================================================== */
.ve-ui-surface,
.ve-ce-surface,
.ve-ce-documentNode,
.ve-init-mw-desktopArticleTarget-surface {
  background: #101015 !important;
  background-color: #101015 !important;
  color: #ede9e1 !important;
  caret-color: #ff2a3f !important;
}

.ve-ce-documentNode p,
.ve-ce-documentNode h1,
.ve-ce-documentNode h2,
.ve-ce-documentNode h3,
.ve-ce-documentNode h4,
.ve-ce-documentNode li,
.ve-ce-documentNode td,
.ve-ce-documentNode div,
.ve-ce-surface .vtm-section-block {
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transform: none !important;
}

/* Dentro do editor, o Segredo DEVE ser visível para o editor poder ler e modificar */
.ve-ce-surface .vtm-segredo,
.ve-ui-surface .vtm-segredo,
.ve-ce-documentNode .vtm-segredo,
.ve-ce-leafNode.ve-ce-mwTransclusionInlineNode,
.ve-ce-leafNode.ve-ce-mwTransclusionBlockNode {
  background: rgba(60, 15, 25, 0.45) !important;
  color: #ffffff !important;
  border: 1px dashed #ff2a3f !important;
  border-radius: 3px !important;
  padding: 2px 6px !important;
  user-select: text !important;
  -webkit-user-select: text !important;
}

.ve-ce-surface .vtm-segredo .vtm-segredo-conteudo,
.ve-ui-surface .vtm-segredo .vtm-segredo-conteudo,
.ve-ce-documentNode .vtm-segredo .vtm-segredo-conteudo {
  opacity: 1 !important;
  visibility: visible !important;
  color: #ffffff !important;
  pointer-events: auto !important;
}

.ve-ce-surface .vtm-segredo::after,
.ve-ui-surface .vtm-segredo::after,
.ve-ce-documentNode .vtm-segredo::after {
  display: none !important;
}

/* Balão pop-up de predefinição no VisualEditor */
.ve-ui-contextItemWidget,
.ve-ui-mwTransclusionContextItem {
  background: #161622 !important;
  border: 1px solid #4a101a !important;
  border-left: 4px solid #8b0000 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9) !important;
  border-radius: 4px !important;
}

.ve-ui-contextItemWidget .oo-ui-labelElement-label {
  color: #ffffff !important;
  font-family: var(--vtm-font-title) !important;
  font-weight: 700 !important;
}

.ve-ui-contextItemWidget .oo-ui-buttonElement-button {
  background: linear-gradient(180deg, #8b1020 0%, #450810 100%) !important;
  border: 1px solid #ff2a3f !important;
  border-radius: 3px !important;
}

.ve-ui-contextItemWidget .oo-ui-buttonElement-button .oo-ui-labelElement-label {
  color: #ffffff !important;
  font-weight: 800 !important;
}