|
Tags: Blanking Manual revert |
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| /* ========================================
| |
| BackToTopButton.css
| |
| Botão "Back to Top" (BtT)
| |
| ======================================== */
| |
|
| |
|
| /* ==========================================================================
| |
| Base
| |
| ========================================================================== */
| |
| .btt-button {
| |
| position: fixed;
| |
| bottom: 30px;
| |
| right: 30px;
| |
| width: 50px;
| |
| height: 50px;
| |
| border: none;
| |
| border-radius: 12px;
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
| |
| z-index: 1000;
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| transform: translateY(20px) scale(0.8);
| |
| backdrop-filter: blur(10px);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Estados
| |
| ========================================================================== */
| |
| .btt-button.show {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| transform: translateY(0) scale(1);
| |
| }
| |
|
| |
| .btt-button:hover {
| |
| transform: translateY(-3px) scale(1.05);
| |
| }
| |
|
| |
| .btt-button:active {
| |
| transform: translateY(-1px) scale(0.98);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Ícone (seta)
| |
| ========================================================================== */
| |
| .btt-button::before {
| |
| content: '';
| |
| width: 0;
| |
| height: 0;
| |
| border-left: 8px solid;
| |
| border-right: 8px solid;
| |
| border-bottom: 12px solid;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| .btt-button:hover::before {
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Animação (pulse)
| |
| ========================================================================== */
| |
| @keyframes btt-pulse {
| |
| 0% { opacity: 1; }
| |
| 50% { opacity: 1; }
| |
| 100% { opacity: 1; }
| |
| }
| |
|
| |
| .btt-button.pulse {
| |
| animation: btt-pulse 2s ease-in-out 3;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Responsividade
| |
| ========================================================================== */
| |
| @media (max-width: 768px) {
| |
| .btt-button {
| |
| bottom: 20px;
| |
| right: 20px;
| |
| width: 45px;
| |
| height: 45px;
| |
| }
| |
|
| |
| .btt-button::before {
| |
| border-left-width: 7px;
| |
| border-right-width: 7px;
| |
| border-bottom-width: 10px;
| |
| }
| |
| }
| |
|
| |
| @media (max-width: 480px) {
| |
| .btt-button {
| |
| bottom: 15px;
| |
| right: 15px;
| |
| width: 40px;
| |
| height: 40px;
| |
| }
| |
|
| |
| .btt-button::before {
| |
| border-left-width: 6px;
| |
| border-right-width: 6px;
| |
| border-bottom-width: 9px;
| |
| }
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Acessibilidade
| |
| ========================================================================== */
| |
| @media (prefers-contrast: high) {
| |
| .btt-button {
| |
| border: 2px solid;
| |
| }
| |
| }
| |
|
| |
| @media (prefers-reduced-motion: reduce) {
| |
| .btt-button {
| |
| transition: opacity 0.3s ease;
| |
| }
| |
|
| |
| .btt-button:hover {
| |
| transform: none;
| |
| }
| |
|
| |
| .btt-button::before {
| |
| transition: none;
| |
| }
| |
|
| |
| .btt-button:hover::before {
| |
| transform: none;
| |
| }
| |
|
| |
| .btt-button.pulse {
| |
| animation: none;
| |
| }
| |
| }
| |
|
| |
| /* ========================================
| |
| ContentContainer.css
| |
| Container principal de conteúdo (#content / .mw-body)
| |
| ======================================== */
| |
|
| |
| body.skin-vector-legacy #content,
| |
| body.skin-vector-legacy .mw-body {
| |
| border: 1px solid !important;
| |
| border-radius: 12px !important;
| |
| margin: 50px auto !important;
| |
| max-width: 1500px;
| |
| }
| |
|
| |
| #content::before,
| |
| .mw-body::before {
| |
| content: '' !important;
| |
| position: absolute !important;
| |
| inset: -1px !important;
| |
| border-radius: 12px !important;
| |
| z-index: -1 !important;
| |
| opacity: 0.1 !important;
| |
| }
| |
|
| |
| /* ========================================
| |
| Forms.css
| |
| Inputs e formulários (search, text, select, textarea)
| |
| ======================================== */
| |
|
| |
| input[type="text"],
| |
| input[type="search"],
| |
| textarea,
| |
| select {
| |
| border: 2px solid !important;
| |
| border-radius: 8px !important;
| |
| padding: 8px 16px !important;
| |
| font-family: inherit !important;
| |
| transition: 0.15s ease !important;
| |
|
| |
| }
| |
|
| |
| input[type="text"]:focus,
| |
| input[type="search"]:focus,
| |
| textarea:focus,
| |
| select:focus {
| |
|
| |
| }
| |
|
| |
| /* ========================================
| |
| HamburguerMenu.css
| |
| Sidebar (Vector Legacy) + menu hambúrguer + overlay
| |
| ======================================== */
| |
|
| |
| /* ==========================================================================
| |
| Variáveis reutilizáveis (dimensões e cores)
| |
| ========================================================================== */
| |
|
| |
| /* ==========================================================================
| |
| Sidebar (container)
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #mw-panel {
| |
| border-right: 2px solid;
| |
| padding: 18px 0;
| |
| border-radius: 14px;
| |
| transform: translateX(-100%);
| |
| transition: transform .3s ease;
| |
| position: fixed;
| |
| z-index: 1000;
| |
| height: 100vh;
| |
| width: 220px;
| |
| overflow-y: auto;
| |
| overflow-x: hidden;
| |
| }
| |
|
| |
| /* Exibe sidebar somente quando mobile-open está presente */
| |
| body.skin-vector-legacy #mw-panel.mobile-open {
| |
| transform: translateX(0);
| |
| }
| |
|
| |
| /* Overlay ao abrir a sidebar */
| |
| body.sidebar-open::before {
| |
| content: '';
| |
| position: fixed;
| |
| top: 0;
| |
| left: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| z-index: 999;
| |
| opacity: 1;
| |
| transition: opacity .3s ease;
| |
| background: rgba(0, 0, 0, 0.5);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Sidebar (portais e itens)
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal,
| |
| body.skin-vector-legacy #mw-panel .portal {
| |
| padding: 10px;
| |
| border: 3px solid;
| |
| border-radius: 14px;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
| |
| body.skin-vector-legacy #mw-panel .portal h3 {
| |
| margin: 0;
| |
| padding: 10px 12px;
| |
| font-size: 0.92em;
| |
| font-weight: 700;
| |
| letter-spacing: .3px;
| |
| text-decoration: underline;
| |
| border-bottom: 1px;
| |
| text-shadow: 0 1px 2px rgb(0, 0, 0) !important;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| position: relative;
| |
| transition: background 0.3s ease, transform 0.2s ease;
| |
| border-radius: 14px;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
| |
| body.skin-vector-legacy #mw-panel .portal h3:hover {
| |
| transform: translateY(-1px);
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading::after,
| |
| body.skin-vector-legacy #mw-panel .portal h3::after {
| |
| content: '▼';
| |
| position: absolute;
| |
| right: 12px;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| font-size: 0.8em;
| |
| transition: transform 0.3s ease;
| |
| border-radius: 14px;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-heading::after,
| |
| body.skin-vector-legacy #mw-panel .portal.collapsed h3::after {
| |
| transform: translateY(-50%) rotate(-90deg);
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content ul,
| |
| body.skin-vector-legacy #mw-panel .portal .body ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 4px 0;
| |
| border-radius: 14px;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content,
| |
| body.skin-vector-legacy #mw-panel .portal .body {
| |
| max-height: none;
| |
| overflow: hidden;
| |
| transition: max-height 0.4s ease, opacity 0.3s ease;
| |
| opacity: 1;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-content,
| |
| body.skin-vector-legacy #mw-panel .portal.collapsed .body {
| |
| max-height: 0 !important;
| |
| opacity: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed,
| |
| body.skin-vector-legacy #mw-panel .portal.collapsed { margin-bottom: 8px; }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal.collapsed .vector-menu-heading,
| |
| body.skin-vector-legacy #mw-panel .portal.collapsed h3 {
| |
| border-bottom: none;
| |
| border-radius: 14px;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content li,
| |
| body.skin-vector-legacy #mw-panel .portal .body li { border-bottom: 1px solid; }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content li:last-child,
| |
| body.skin-vector-legacy #mw-panel .portal .body li:last-child { border-bottom: 0; }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content a,
| |
| body.skin-vector-legacy #mw-panel .portal .body a {
| |
| display: block;
| |
| padding: 8px 14px;
| |
| text-decoration: none;
| |
| border-radius: 10px;
| |
| border-left: 3px solid;
| |
| transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
| |
| body.skin-vector-legacy #mw-panel .portal .body a:hover {
| |
| padding-left: 18px;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Scrollbar (sidebar)
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar { width: 6px; }
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb { border-radius: 3px; }
| |
|
| |
| /* ==========================================================================
| |
| Menu hambúrguer (toggle)
| |
| ========================================================================== */
| |
| .mobile-hamburger-menu {
| |
| display: flex;
| |
| position: fixed;
| |
| top: 20px;
| |
| left: 20px;
| |
| z-index: 1002;
| |
| width: 50px;
| |
| height: 50px;
| |
| border: none;
| |
| border-radius: 14px;
| |
| cursor: pointer;
| |
| flex-direction: column;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: 4px;
| |
| transition: transform .3s ease, box-shadow .3s ease;
| |
| padding: 0;
| |
| background: linear-gradient(135deg, #ff6b9d, #ff8fb0);
| |
| }
| |
|
| |
| .mobile-hamburger-menu:hover {
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
| .mobile-hamburger-menu span {
| |
| display: block;
| |
| width: 25px;
| |
| height: 3px;
| |
| border-radius: 2px;
| |
| transition: transform .3s ease, opacity .3s ease;
| |
| transform-origin: center;
| |
| background: #ffffff;
| |
| }
| |
|
| |
| .mobile-hamburger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
| |
| .mobile-hamburger-menu.active span:nth-child(2) { opacity: 0; }
| |
| .mobile-hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
| |
|
| |
| /* ==========================================================================
| |
| Logo “peek” (quando sidebar está recolhida/aberta)
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #p-logo { margin: 0 12px 18px; }
| |
|
| |
| body.skin-vector-legacy #p-logo a {
| |
| display: block;
| |
| border: 1px solid;
| |
| border-radius: 14px;
| |
| padding: 12px;
| |
| transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-logo a:hover {
| |
| transform: translateY(-2px);
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-logo {
| |
| position: absolute;
| |
| top: 12px;
| |
| left: calc(100% + 12px);
| |
| margin: 0;
| |
| z-index: 1001;
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-logo a {
| |
| width: 56px;
| |
| height: 56px;
| |
| padding: 0;
| |
| display: block;
| |
| border-radius: 10px;
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| background-size: contain;
| |
| border: 1px solid;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel.mobile-open #p-logo {
| |
| position: relative;
| |
| left: auto;
| |
| top: auto;
| |
| margin: 0 12px 18px;
| |
| }
| |
|
| |
| body.skin-vector-legacy #mw-panel.mobile-open #p-logo a {
| |
| width: auto;
| |
| height: auto;
| |
| padding: 12px;
| |
| background-size: contain;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Acessibilidade
| |
| ========================================================================== */
| |
| @media (prefers-contrast: more) {
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content a:hover { text-decoration: underline; }
| |
| }
| |
|
| |
| /* ========================================
| |
| Header.css
| |
| Cabeçalho (#mw-head) do Vector Legacy
| |
| ======================================== */
| |
|
| |
| #mw-head {
| |
| padding: 10px ;
| |
| border-bottom: 2px solid;
| |
| border: 1px solid;
| |
| border-radius: 8px;
| |
|
| |
| }
| |
|
| |
| /* ========================================
| |
| HeaderTabs.css
| |
| Abas e ações do cabeçalho (views/actions/watch)
| |
| ======================================== */
| |
|
| |
| /* ==========================================================================
| |
| Botões base
| |
| ========================================================================== */
| |
| #ca-view a,
| |
| #ca-viewsource a,
| |
| #ca-ve-edit a,
| |
| #ca-edit a,
| |
| #ca-history a,
| |
| #p-cactions .vector-menu-heading ,
| |
| #ca-delete a,
| |
| #ca-move a,
| |
| #ca-protect a {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| gap: 6px !important;
| |
| padding: 8px 12px !important;
| |
| margin: 4px 6px 0 0 !important;
| |
| border-radius: 10px !important;
| |
| border: 2px solid !important;
| |
| font-weight: 700 !important;
| |
| text-decoration: none !important;
| |
| transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Watch / Unwatch (ícones)
| |
| ========================================================================== */
| |
| #ca-watch a,
| |
| #ca-unwatch a {
| |
| font-size: 0;
| |
| width: 24px;
| |
| height: 24px;
| |
| padding: 0;
| |
| border-radius: 50%;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
|
| |
| #ca-watch a {
| |
| content: "";
| |
| display: block;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-image: url("https://mewsie.world/CoraTOWiki/images/2/28/EmptyPinkStar.png");
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| border-radius: 10px !important;
| |
| }
| |
|
| |
| #ca-unwatch a {
| |
| content: "";
| |
| display: block;
| |
| width: 16px;
| |
| height: 16px;
| |
| background-image: url("https://mewsie.world/CoraTOWiki/images/c/cc/FullPinkStar.png");
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| border-radius: 10px !important;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Hover / active
| |
| ========================================================================== */
| |
| #ca-view a:hover,
| |
| #ca-viewsource a:hover,
| |
| #ca-edit a:hover,
| |
| #ca-history a:hover,
| |
| #ca-watch a:hover,
| |
| #ca-unwatch a:hover,
| |
| #p-cactions .vector-menu-heading:hover,
| |
| #ca-delete a:hover,
| |
| #ca-move a:hover,
| |
| #ca-protect a:hover {
| |
| transform: translateY(-2px) !important;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Remoções e resets do cabeçalho
| |
| ========================================================================== */
| |
| #pt-anontalk,
| |
| #p-namespaces,
| |
| #pt-anoncontribs,
| |
| #ca-talk,
| |
| #ca-nstab-main,
| |
| #ca-nstab-mediawiki {
| |
| display: none !important;
| |
| }
| |
|
| |
| #ca-talk,
| |
| #ca-nstab-main,
| |
| #ca-nstab-mediawiki,
| |
| #ca-view,
| |
| #ca-viewsource,
| |
| #ca-edit,
| |
| #ca-ve-edit,
| |
| #ca-history,
| |
| #ca-watch,
| |
| #ca-unwatch,
| |
| #ca-more,
| |
| #mw-page-base {
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| margin: 0 4px !important;
| |
| }
| |
|
| |
| // Variáveis LESS que recebem valores das variáveis CSS
| |
| @bg-1: var(--bg-1);
| |
| @border: var(--border);
| |
| @shadow-soft: var(--shadow-soft);
| |
| @heading-gradient-start: var(--heading-gradient-start);
| |
| @heading-gradient-end: var(--heading-gradient-end);
| |
| @text-muted: var(--text-muted);
| |
| @text-strong: var(--text-strong);
| |
| @primary: var(--primary);
| |
|
| |
| // Estilos
| |
| .hero {
| |
| background: @bg-1;
| |
| border: 2px solid @border;
| |
| border-radius: 20px;
| |
| max-width: 1200px;
| |
| margin: 0 auto 16px auto;
| |
| box-shadow: 0 6px 24px @shadow-soft;
| |
| }
| |
|
| |
| .hero-inner {
| |
| padding: clamp(18px, 3vw, 36px);
| |
| text-align: center;
| |
| }
| |
|
| |
| .hero-title {
| |
| margin: 8px 0 4px 0;
| |
| font-size: clamp(22px, 4vw, 36px);
| |
| font-weight: 800;
| |
| background: linear-gradient(135deg, @heading-gradient-start, @heading-gradient-end);
| |
| background-clip: text;
| |
| }
| |
|
| |
| .hero-subtitle {
| |
| color: @text-muted;
| |
| font-size: clamp(14px, 2.2vw, 18px);
| |
| }
| |
|
| |
| .status-pill {
| |
| display: inline-block;
| |
| margin-top: 10px;
| |
| padding: 8px 14px;
| |
| border-radius: 999px;
| |
| font-weight: 700;
| |
| color: @text-strong;
| |
| background: @primary;
| |
| animation: fadeInOut 2s ease-in-out infinite;
| |
| }
| |
|
| |
| body.skin-vector-legacy.has-user-menu-collapsible #p-personal,
| |
| body.skin-vector-legacy.has-personal-menu-collapsible #p-personal {
| |
| display: none;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-container {
| |
| position: fixed;
| |
| top: 120px;
| |
| right: 0;
| |
| z-index: 1000;
| |
| overflow: visible;
| |
| display: flex;
| |
| flex-direction: row;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-header {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 6px 12px;
| |
| top: 2;
| |
| right: 0;
| |
| position: fixed;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| transition: background 0.3s ease;
| |
| border-radius: 14px 0 0 14px;
| |
| white-space: nowrap;
| |
| font-weight: bold;
| |
| height: auto;
| |
| writing-mode: horizontal-tb;
| |
| border: 1px solid;
| |
| flex-direction: row;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-header::after {
| |
| content: '';
| |
| display: inline-block;
| |
| width: 25px;
| |
| height: 25px;
| |
| font-weight: bold;
| |
| background-image: url( https://mewsie.world/CoraTOWiki/images/9/97/LeftArrow.png );
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| position: relative;
| |
| margin-left: 6px;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-container.expanded .personal-menu-header::after {
| |
| transform: rotate( 180deg );
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-content {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 100%;
| |
| border: 1px solid;
| |
| border-radius: 14px;
| |
| padding: 10px;
| |
| width: 0;
| |
| overflow: hidden;
| |
| opacity: 0;
| |
| transition: width 0.4s ease, opacity 0.3s ease;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-container.expanded .personal-menu-content {
| |
| width: 180px;
| |
| opacity: 1;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list li {
| |
| margin: 5px 0;
| |
| white-space: nowrap;
| |
| border-bottom: 1px solid;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list li:last-child {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list a {
| |
| display: block;
| |
| text-decoration: none;
| |
| padding: 8px 10px;
| |
| border-radius: 10px;
| |
| border-left: 3px solid;
| |
| transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list a:hover {
| |
| padding-left: 18px;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list #pt-anonuserpage {
| |
| display: block;
| |
| padding: 8px 10px;
| |
| border-radius: 10px;
| |
| border-left: 3px solid;
| |
| background: none;
| |
| color: inherit;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list #pt-anonuserpage:hover {
| |
| padding-left: 18px;
| |
| }
| |
|
| |
| body.skin-vector-legacy .personal-menu-list a.mw-ui-button {
| |
| background: none;
| |
| border: 0;
| |
| box-shadow: none;
| |
| font-weight: inherit;
| |
| text-shadow: none;
| |
| }
| |
|
| |
|
| |
| #pt-theme-menu {
| |
| position: relative;
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu {
| |
| position: relative;
| |
| display: inline-block;
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu-toggle {
| |
| appearance: none;
| |
| background: transparent;
| |
| border: 1px solid transparent;
| |
| border-radius: 4px;
| |
| color: inherit;
| |
| cursor: pointer;
| |
| font: inherit;
| |
| line-height: 1.2;
| |
| padding: 0.25em 0.55em;
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu-toggle:hover,
| |
| #pt-theme-menu .themeMenu.is-open .themeMenu-toggle {
| |
| background: var( --surface );
| |
| border-color: var( --border );
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu-dropdown {
| |
| display: none;
| |
| position: absolute;
| |
| right: 0;
| |
| top: calc( 100% + 0.35em );
| |
| min-width: 180px;
| |
| margin: 0;
| |
| padding: 0.25em 0;
| |
| list-style: none;
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| border-radius: 6px;
| |
| box-shadow: 0 6px 18px var( --shadow-medium );
| |
| z-index: 9999;
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu.is-open .themeMenu-dropdown {
| |
| display: block;
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu-itemWrap {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu-item {
| |
| display: block;
| |
| padding: 0.45em 0.8em;
| |
| color: var( --text );
| |
| text-decoration: none;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu-item:hover,
| |
| #pt-theme-menu .themeMenu-item:focus {
| |
| background: var( --bg-1 );
| |
| color: var( --text-strong );
| |
| }
| |
|
| |
| #pt-theme-menu .themeMenu-item.is-current {
| |
| font-weight: 700;
| |
| }
| |
|
| |
| #mw-theme-floating {
| |
| position: fixed;
| |
| top: 0.6em;
| |
| right: 0.8em;
| |
| z-index: 10000;
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu {
| |
| position: relative;
| |
| display: inline-block;
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu-toggle {
| |
| appearance: none;
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| border-radius: 6px;
| |
| color: var( --text );
| |
| cursor: pointer;
| |
| font: inherit;
| |
| line-height: 1.2;
| |
| padding: 0.35em 0.65em;
| |
| box-shadow: 0 6px 18px var( --shadow-soft );
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu-toggle:hover,
| |
| #mw-theme-floating .themeMenu.is-open .themeMenu-toggle {
| |
| background: var( --bg-1 );
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu-dropdown {
| |
| display: none;
| |
| position: absolute;
| |
| right: 0;
| |
| top: calc( 100% + 0.35em );
| |
| min-width: 180px;
| |
| margin: 0;
| |
| padding: 0.25em 0;
| |
| list-style: none;
| |
| background: var( --surface );
| |
| border: 1px solid var( --border );
| |
| border-radius: 6px;
| |
| box-shadow: 0 6px 18px var( --shadow-medium );
| |
| z-index: 10001;
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu.is-open .themeMenu-dropdown {
| |
| display: block;
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu-item {
| |
| display: block;
| |
| padding: 0.45em 0.8em;
| |
| color: var( --text );
| |
| text-decoration: none;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu-item:hover,
| |
| #mw-theme-floating .themeMenu-item:focus {
| |
| background: var( --bg-1 );
| |
| color: var( --text-strong );
| |
| }
| |
|
| |
| #mw-theme-floating .themeMenu-item.is-current {
| |
| font-weight: 700;
| |
| }
| |
|
| |
| /* ========================================
| |
| UserMenu.css
| |
| Menu de usuário lateral (custom)
| |
| ======================================== */
| |
|
| |
| /* ==========================================================================
| |
| Container (posição e layout)
| |
| ========================================================================== */
| |
| body.skin-vector-legacy .user-menu-container {
| |
| position: fixed;
| |
| top: 120px;
| |
| right: 0;
| |
| z-index: 1000;
| |
| overflow: visible;
| |
| display: flex;
| |
| flex-direction: row;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Header (toggle)
| |
| ========================================================================== */
| |
| body.skin-vector-legacy .user-menu-header {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 6px 12px;
| |
| top: 2;
| |
| right: 0;
| |
| position: fixed;
| |
| cursor: pointer;
| |
| user-select: none;
| |
| transition: background 0.3s ease;
| |
| border-radius: 14px 0 0 14px;
| |
| white-space: nowrap;
| |
| font-weight: bold;
| |
| height: auto;
| |
| writing-mode: horizontal-tb;
| |
| border: 1px solid;
| |
| flex-direction: row;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-header::after {
| |
| content: '';
| |
| display: inline-block;
| |
| width: 25px;
| |
| height: 25px;
| |
| font-weight: bold;
| |
| background-image: url( https://mewsie.world/CoraTOWiki/images/9/97/LeftArrow.png );
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| position: relative;
| |
| margin-left: 6px;
| |
| transition: transform 0.3s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-container.expanded .user-menu-header::after {
| |
| transform: rotate( 180deg );
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Conteúdo (área expansível)
| |
| ========================================================================== */
| |
| body.skin-vector-legacy .user-menu-content {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 100%;
| |
| border: 1px solid;
| |
| border-radius: 14px;
| |
| padding: 10px;
| |
| width: 0;
| |
| overflow: hidden;
| |
| opacity: 0;
| |
| transition: width 0.4s ease, opacity 0.3s ease;
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-container.expanded .user-menu-content {
| |
| width: 180px;
| |
| opacity: 1;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| Lista de links
| |
| ========================================================================== */
| |
| body.skin-vector-legacy .user-menu-list {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list li {
| |
| margin: 5px 0;
| |
| white-space: nowrap;
| |
| border-bottom: 1px solid;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list li:last-child {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list a {
| |
| display: block;
| |
| text-decoration: none;
| |
| padding: 8px 10px;
| |
| border-radius: 10px;
| |
| border-left: 3px solid;
| |
| transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list a:hover {
| |
| padding-left: 18px;
| |
| }
| |