|
|
| Line 1: |
Line 1: |
| /* ========================================
| |
| CORA TO WIKI - VECTOR LEGACY SPECIFIC STYLES
| |
| Styles specific to Vector Legacy 2010 skin
| |
| ======================================== */
| |
|
| |
|
| /* NAVIGATION MENU - TABLE OF CONTENTS
| |
| ----------------------------------------
| |
| SECTION 1: VARIABLES [search: variables, colors, spacing, css-vars]
| |
| SECTION 2: SIDEBAR STYLES [search: sidebar, mw-panel, navigation]
| |
| SECTION 3: LOGO AREA [search: logo, p-logo, wiki-logo]
| |
| SECTION 4: PORTALS [search: portals, vector-menu-portal]
| |
| SECTION 5: HEADINGS [search: headings, collapsible, vector-menu-heading]
| |
| SECTION 6: INDICATORS [search: indicators, open-close, arrows]
| |
| SECTION 7: LISTS & CONTENT [search: lists, collapsible-content, menu-items]
| |
| SECTION 8: SCROLLBAR [search: scrollbar, webkit-scrollbar]
| |
| SECTION 9: CONTENT SPACING [search: spacing, margins, desktop]
| |
| SECTION 10: RESPONSIVENESS [search: responsive, media-queries, mobile]
| |
| SECTION 11: MOBILE MENU [search: hamburger, mobile-menu, sidebar-mobile]
| |
| SECTION 12: HEADER TABS [search: header, tabs, vector-tabs]
| |
| SECTION 13: USER MENU [search: user-menu, personal-menu, account]
| |
| ---------------------------------------- */
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* ==========================================================================
| |
| SECTION 2: VECTOR LEGACY SIDEBAR STYLES [sidebar, mw-panel, navigation]
| |
| ========================================================================== */
| |
|
| |
| /* [MEDIAWIKI] COMPATIBILITY LAYER
| |
| ======================================== */
| |
| .mw-page-scope {
| |
| padding: 20px;
| |
| }
| |
|
| |
|
| |
|
| |
| #mw-head {
| |
| padding: 20px 0;
| |
| border-bottom: 2px solid #ff8fcf;
| |
| background-color: rgba(255, 255, 255, 0.932);
| |
| border: 1px solid rgba(255, 255, 255, 0.2);
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
| |
| }
| |
|
| |
| .utility-banner {
| |
| position: relative;
| |
| min-height: 48px;
| |
| padding: clamp(18px, 3vw, 36px);
| |
| }
| |
|
| |
| .utility-banner > * {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 8px;
| |
| }
| |
|
| |
| /* MediaWiki Main Content */
| |
| body.skin-vector-legacy #content,
| |
| body.skin-vector-legacy .mw-body {
| |
| border: 1px solid #f0f0f0 !important;
| |
| border-radius: 12px !important;
| |
| margin: 24px 24px 0 !important;
| |
| box-shadow: 0 0px 20px rgb(253, 91, 205) !important;
| |
| background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255, 205, 233, 0));
| |
|
| |
| }
| |
|
| |
| #content::before,
| |
| .mw-body::before {
| |
| content: '' !important;
| |
| position: absolute !important;
| |
| inset: -1px !important;
| |
| background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%) !important;
| |
| border-radius: 12px !important;
| |
| z-index: -1 !important;
| |
| opacity: 0.1 !important;
| |
|
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
| body.skin-vector-legacy #mw-panel {
| |
| background: rgba(255, 255, 255, 0.8);
| |
| border-right: 2px solid rgba(255, 107, 157, 0.25);
| |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
| |
| 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;
| |
| }
| |
| /* Header top-right Menu */
| |
| body.skin-vector-legacy
| |
| #pt-userpage a,
| |
| #pt-mytalk a,
| |
| #pt-preferences a,
| |
| #pt-watchlist a,
| |
| #pt-mycontris a,
| |
| #pt-logout a {
| |
| color: #ff73a9 !important;
| |
| text-decoration: none !important;
| |
| display: inline-block !important;
| |
| padding: 10px !important;
| |
| border-radius: 10px !important;
| |
| border-left: 3px solid transparent !important;
| |
| transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease !important;
| |
| }
| |
| body.skin-vector-legacy
| |
| #pt-userpage a:hover,
| |
| #pt-mytalk a:hover,
| |
| #pt-preferences a:hover,
| |
| #pt-watchlist a:hover,
| |
| #pt-mycontris a:hover,
| |
| #pt-logout a:hover {
| |
|
| |
| color: #fff !important;
| |
| background-color: #ff6b9d !important;
| |
| border-color: #ff6b9d !important;
| |
| padding: 7px 9px !important;
| |
| border-radius: 10px !important;
| |
| border-left: 3px solid transparent !important;
| |
| transition: color .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease !important;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 3: LOGO AREA [logo, p-logo, wiki-logo]
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #p-logo { margin: 0 12px 18px; }
| |
| body.skin-vector-legacy #p-logo a {
| |
| display: block;
| |
| background-color: #fff0f7;
| |
| border: 1px solid #f7d6e6;
| |
| 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);
| |
| border-color: #ff6b9d;
| |
| box-shadow: 0 8px 24px rgba(255, 107, 157, 0.18);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 4: PORTALS [portals, vector-menu-portal]
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal,
| |
| body.skin-vector-legacy #mw-panel .portal {
| |
| margin: 1px;
| |
| border: 1px solid #f7d6e6;
| |
| border-radius: 14px;
| |
| background: #fff;
| |
| overflow: hidden;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 5: HEADINGS [headings, collapsible, vector-menu-heading]
| |
| ========================================================================== */
| |
| 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;
| |
| color: #ffffff !important;
| |
| background: linear-gradient(135deg, #ff6b9d, #ff8fb0);
| |
| border-bottom: 1px solid #f7d6e6;
| |
| 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;
| |
| box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
| |
| }
| |
| body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
| |
| body.skin-vector-legacy #mw-panel .portal h3:hover {
| |
| background: linear-gradient(135deg, #ff8fb0, #ff6b9d);
| |
| transform: translateY(-1px);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 6: INDICATORS [indicators, open-close, arrows]
| |
| ========================================================================== */
| |
| 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;
| |
| }
| |
| 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);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 7: LISTS & CONTENT [lists, collapsible-content, menu-items]
| |
| ========================================================================== */
| |
| 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;
| |
| background: #fff
| |
| }
| |
|
| |
| 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;
| |
| }
| |
|
| |
| /* Collapsed state */
| |
| 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;
| |
| }
| |
|
| |
| /* Items and links */
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content li,
| |
| body.skin-vector-legacy #mw-panel .portal .body li { border-bottom: 1px solid #f3e2ea; }
| |
| 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 {
| |
| color: #ff6b9d;
| |
| display: block;
| |
| padding: 8px 14px;
| |
| text-decoration: none;
| |
| border-radius: 10px;
| |
| border-left: 3px solid transparent;
| |
| 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 {
| |
|
| |
| color: #fa4abf ;
| |
| background: #fff5fb;
| |
| border-left-color: #ff6b9d;
| |
| padding-left: 18px;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 8: SCROLLBAR [scrollbar, webkit-scrollbar]
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar { width: 6px; }
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar-track { background: #ffe6f0; }
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb { background: #ff8fb0; border-radius: 3px; }
| |
| body.skin-vector-legacy #mw-panel::-webkit-scrollbar-thumb:hover { background: #ff6b9d; }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 9: CONTENT SPACING [spacing, margins, desktop]
| |
| ========================================================================== */
| |
| body.skin-vector-legacy #content,
| |
| body.skin-vector-legacy .mw-body {
| |
| margin-left: 0;
| |
| }
| |
|
| |
| /* Show sidebar only when mobile-open class is present */
| |
| body.skin-vector-legacy #mw-panel.mobile-open {
| |
| transform: translateX(0);
| |
| }
| |
|
| |
| /* Add overlay when sidebar is open */
| |
| body.sidebar-open::before {
| |
| content: '';
| |
| position: fixed;
| |
| top: 0; left: 0; right: 0; bottom: 0;
| |
| background: rgba(0, 0, 0, 0.5);
| |
| z-index: 999;
| |
| opacity: 1;
| |
| transition: opacity .3s ease;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 11: MOBILE MENU [hamburger, mobile-menu, sidebar-mobile]
| |
| ========================================================================== */
| |
| .mobile-hamburger-menu {
| |
| display: flex;
| |
| position: fixed;
| |
| top: 20px;
| |
| left: 20px;
| |
| z-index: 1002;
| |
| width: 50px;
| |
| height: 50px;
| |
| background: linear-gradient(135deg, #ff6b9d, #ff8fb0);
| |
| border: none;
| |
| border-radius: 14px;
| |
| cursor: pointer;
| |
| flex-direction: column;
| |
| justify-content: center;
| |
| align-items: center;
| |
| gap: 4px;
| |
| box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
| |
| transition: transform .3s ease, box-shadow .3s ease;
| |
| padding: 0;
| |
| }
| |
| .mobile-hamburger-menu:hover {
| |
| transform: translateY(-2px);
| |
| box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3);
| |
| }
| |
| .mobile-hamburger-menu span {
| |
| display: block;
| |
| width: 25px;
| |
| height: 3px;
| |
| background: white;
| |
| border-radius: 2px;
| |
| transition: transform .3s ease, opacity .3s ease;
| |
| transform-origin: center;
| |
| }
| |
| .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); }
| |
|
| |
| @media (max-width: 768px) {
| |
|
| |
| }
| |
|
| |
| /* Sidebar peek tab with image (Vector Legacy only) */
| |
| 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-color: #fff0f7;
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| background-size: contain;
| |
| border: 1px solid #f7d6e6;
| |
| box-shadow: 0 8px 20px rgba(255, 107, 157, 0.22);
| |
| }
| |
|
| |
| /* When sidebar is opened, return the logo to the panel */
| |
| 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;
| |
| }
| |
|
| |
| /* High contrast fallback */
| |
| @media (prefers-contrast: more) {
| |
| body.skin-vector-legacy #mw-panel .vector-menu-content a:hover { text-decoration: underline; }
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 12: HEADER TABS [header, tabs, vector-tabs]
| |
| ========================================================================== */
| |
| #p-views{
| |
| background: none !important;
| |
| }
| |
|
| |
| /* ------------------------------------ [FORMS] FORM ELEMENTS ------------------------------------ */
| |
| #searchInput,
| |
| Input::placeholder{
| |
| color: #ff6b9d;
| |
| border-color: rgba(255, 107, 157, 0.22) !important;
| |
|
| |
| }
| |
|
| |
| input[type="text"],
| |
| input[type="search"],
| |
| textarea,
| |
| select {
| |
| border: 2px solid #f0f0f0 !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 {
| |
| border-color: #ff6b9d !important;
| |
| outline: none !important;
| |
| box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.2) !important;
| |
| }
| |
|
| |
| /*------------------------------------ Base styling for all buttons ------------------------------------ */
| |
| #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;
| |
| background: rgba(255,255,255,0.92) !important;
| |
| color: #ff6b9d !important;
| |
| border: 2px solid transparent !important;
| |
| border-color: rgba(255, 107, 157, 0.22) !important;
| |
| font-weight: 700 !important;
| |
| text-decoration: none !important;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
| |
| transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease !important;
| |
| }
| |
|
| |
| /*------------------------------------ Hide text while keeping link clickable ------------------------------------ */
| |
| #ca-watch a,
| |
| #ca-unwatch a {
| |
| font-size: 0; /* esconde o texto sem sumir com o botão */
| |
| width: 24px; /* largura do botão */
| |
| height: 24px; /* altura do botão */
| |
| padding: 0; /* remove padding extra */
| |
| border-radius: 50%; /* deixa redondo */
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| }
| |
| /* Empty Star Icon */
| |
| #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;
| |
| }
| |
|
| |
| /* Full Star Icon */
| |
| #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 ------------------------------------*/
| |
| #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;
| |
| color: #d63384 !important;
| |
| border-color: #ff6b9d !important;
| |
| box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3) !important;
| |
| }
| |
|
| |
|
| |
| /*------------------------------------ Active button styling ------------------------------------ */
| |
| #ca-view.selected a,
| |
| #ca-viewsource.selected a,
| |
| #ca-edit.selected a,
| |
| #ca-ve-edit.selected a,
| |
| #ca-history.selected a,
| |
| #ca-watch.selected a,
| |
| #ca-unwatch.selected a,
| |
| #ca-more.selected a {
| |
| background: linear-gradient(135deg, #ff6b9d 0%, #ffc3e0 100%) !important;
| |
| color: #fff !important;
| |
| border-color: transparent !important;
| |
| box-shadow: 0 8px 30px rgba(255, 107, 157, 0.3) !important;
| |
| }
| |
|
| |
| /*------------------------------------ Remove mw Buttons ------------------------------------ */
| |
| #pt-anontalk,
| |
| #p-namespaces,
| |
| #pt-anoncontribs,
| |
| #ca-talk,
| |
| #ca-nstab-main,
| |
| #ca-nstab-mediawiki {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* ------------------------------------ Remove mw header LI background and border ------------------------------------ */
| |
| #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 {
| |
| background: none !important;
| |
| border: none !important;
| |
| padding: 0 !important;
| |
| margin: 0 4px !important; /* espaço entre os botões */
| |
| box-shadow: none !important;
| |
| }
| |
|
| |
| ----------------------
| |
| /* Container style */
| |
| body.skin-vector-legacy #p-personal {
| |
| position: relative;
| |
| max-width: 220px;
| |
| font-family: sans-serif;
| |
| background: rgba(255,255,255,0.96);
| |
| border: 1px solid rgba(255, 107, 157, 0.25);
| |
| border-radius: 14px;
| |
| box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
| |
| padding: 10px;
| |
| }
| |
|
| |
| /* User Menu Collapsible Styles */
| |
| body.skin-vector-legacy .user-menu-container {
| |
| position: fixed;
| |
| top: 120px;
| |
| right: 0;
| |
| background: transparent;
| |
| z-index: 1000;
| |
| overflow: visible;
| |
| display: flex;
| |
| flex-direction: row;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| SECTION 13: USER MENU [user-menu, personal-menu, account]
| |
| ========================================================================== */
| |
| body.skin-vector-legacy .user-menu-header {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: 6px 12px ;
| |
| top: 2;
| |
| right: 0;
| |
| position: fixed;
| |
| color: #ff6b9d;
| |
| background: #fff;
| |
| 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;
| |
| box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
| |
| border: 1px solid rgba(255, 107, 157, 0.25);
| |
| flex-direction: row;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-header:hover {
| |
| background: #ffebf5;
| |
| }
| |
|
| |
| 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);
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-content {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 100%;
| |
| background: rgba(255,255,255,0.96);
| |
| border: 1px solid rgba(255, 107, 157, 0.25);
| |
| border-radius: 14px;
| |
| box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
| |
| 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;
| |
| }
| |
|
| |
| 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 #f3e2ea;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list li:last-child {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list a {
| |
| display: block;
| |
| color: #ff6b9d;
| |
| text-decoration: none;
| |
| padding: 8px 10px;
| |
| border-radius: 10px;
| |
| border-left: 3px solid transparent;
| |
| transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy .user-menu-list a:hover {
| |
| background: #fff5fb;
| |
| color: #fa4abf;
| |
| padding-left: 18px;
| |
| border-left-color: #ff6b9d;
| |
| }
| |
|
| |
| /* Adjust the position of menu items in the vertical menu */
| |
| body.skin-vector-legacy .user-menu-content li {
| |
| margin: 5px 0;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| /* Item styles */
| |
| body.skin-vector-legacy #p-personal li {
| |
| margin: 4px 0;
| |
| border-bottom: 1px solid #f3e2ea;
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-personal li:last-child {
| |
| border-bottom: none;
| |
| }
| |
|
| |
| /* Link styles */
| |
| body.skin-vector-legacy #p-personal a {
| |
| display: block;
| |
| color: #ff6b9d;
| |
| text-decoration: none;
| |
| padding: 6px 10px;
| |
| border-radius: 10px;
| |
| border-left: 3px solid transparent;
| |
| transition: background 0.3s ease, padding-left 0.3s ease, color 0.3s ease;
| |
| }
| |
|
| |
| body.skin-vector-legacy #p-personal a:hover {
| |
| background: #fff5fb;
| |
| color: #fa4abf;
| |
| padding-left: 18px;
| |
| border-left-color: #ff6b9d;
| |
| }
| |
|
| |
| /*------------------------------------BtT---------------------------------*/
| |
|
| |
| /* Back to Top Button Styles */
| |
| .btt-button {
| |
| position: fixed;
| |
| bottom: 30px;
| |
| right: 30px;
| |
| width: 50px;
| |
| height: 50px;
| |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
| |
| border: none;
| |
| border-radius: 12px;
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
| |
| 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);
| |
| }
| |
|
| |
| /* Show state */
| |
| .btt-button.show {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| transform: translateY(0) scale(1);
| |
| }
| |
|
| |
| /* Hover effects */
| |
| .btt-button:hover {
| |
| transform: translateY(-3px) scale(1.05);
| |
| box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
| |
| background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
| |
| }
| |
|
| |
| /* Active state */
| |
| .btt-button:active {
| |
| transform: translateY(-1px) scale(0.98);
| |
| box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
| |
| }
| |
|
| |
| /* Arrow icon */
| |
| .btt-button::before {
| |
| content: '';
| |
| width: 0;
| |
| height: 0;
| |
| border-left: 8px solid transparent;
| |
| border-right: 8px solid transparent;
| |
| border-bottom: 12px solid #ffffff;
| |
| transition: all 0.3s ease;
| |
| }
| |
|
| |
| /* Arrow animation on hover */
| |
| .btt-button:hover::before {
| |
| transform: translateY(-2px);
| |
| border-bottom-color: #f8f9ff;
| |
| }
| |
|
| |
| /* THEME TOGGLE (top-right) */
| |
| #pt-theme-toggle a {
| |
| width: 32px;
| |
| height: 32px;
| |
| display: inline-flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| border-radius: 50%;
| |
| background: rgba(255,255,255,0.92);
| |
| color: #ff6b9d;
| |
| border: 1px solid rgba(255, 107, 157, 0.25);
| |
| box-shadow: 0 6px 20px rgba(255, 107, 157, 0.15);
| |
| transition: transform .2s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
| |
| }
| |
| #pt-theme-toggle a:hover { transform: translateY(-2px) }
| |
| #pt-theme-toggle a.pressed { transform: scale(.95) }
| |
| #pt-theme-toggle .theme-toggle-icon { line-height: 0; display: inline-flex }
| |
|
| |
| /* DARK THEME OVERRIDES (Vector Legacy) */
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-head {
| |
| background-color: #121a29;
| |
| border-bottom-color: rgba(159,208,255,.2);
| |
| border-color: rgba(159,208,255,.2);
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #content,
| |
| html[data-theme="dark"] body.skin-vector-legacy .mw-body {
| |
| border-color: rgba(159,208,255,.25) !important;
| |
| border-radius: 12px !important;
| |
| box-shadow: 0 0 20px rgba(12,18,30,.55) !important;
| |
| background: linear-gradient(to bottom, rgba(20,26,38,.92), rgba(20,26,38,.6)) !important;
| |
| color: #cfe6ff !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #content::before,
| |
| html[data-theme="dark"] body.skin-vector-legacy .mw-body::before {
| |
| background: linear-gradient(135deg, #274c77, #1b2b41) !important;
| |
| opacity: .12 !important;
| |
| }
| |
| html[data-theme="dark"] #mw-page-base,
| |
| html[data-theme="dark"] #mw-head-base {
| |
| background: #101625 !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel {
| |
| background: rgba(16,22,32,.95);
| |
| border-right-color: rgba(159,208,255,.25);
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .mw-portlet {
| |
| background: #141c2a !important;
| |
| border: 1px solid rgba(159,208,255,.2) !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal {
| |
| background: #141c2a;
| |
| border-color: rgba(159,208,255,.2);
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content ul,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body ul {
| |
| background: #141c2a !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body {
| |
| background: #141c2a !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content li {
| |
| background: #0f1422 !important;
| |
| border-bottom-color: rgba(159,208,255,.15) !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal h3 {
| |
| color: #cfe6ff !important;
| |
| background: linear-gradient(135deg, #274c77, #1b2b41);
| |
| text-shadow: none !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-portal .vector-menu-heading:hover,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal h3:hover {
| |
| background: linear-gradient(135deg, #1b2b41, #274c77);
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a {
| |
| color: #9fd0ff !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a:hover,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a:hover {
| |
| background: rgba(61,97,146,.22) !important;
| |
| color: #cfe6ff !important;
| |
| border-left-color: #7bbbff !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .vector-menu-content a,
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body a {
| |
| background: #0f1422 !important;
| |
| border: 1px solid rgba(159,208,255,.25) !important;
| |
| box-shadow: 0 2px 6px rgba(12,18,30,.5) !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #mw-panel .portal .body li {
| |
| border-bottom-color: rgba(159,208,255,.15);
| |
| }
| |
|
| |
| /* Top-right personal menu links (Vector) */
| |
| html[data-theme="dark"] body.skin-vector-legacy
| |
| #pt-userpage a,
| |
| #pt-mytalk a,
| |
| #pt-preferences a,
| |
| #pt-watchlist a,
| |
| #pt-mycontris a,
| |
| #pt-logout a { color: #9fd0ff !important }
| |
| html[data-theme="dark"] body.skin-vector-legacy
| |
| #pt-userpage a:hover,
| |
| #pt-mytalk a:hover,
| |
| #pt-preferences a:hover,
| |
| #pt-watchlist a:hover,
| |
| #pt-mycontris a:hover,
| |
| #pt-logout a:hover { background: rgba(61,97,146,.22) !important; color: #cfe6ff !important; border-color: #7bbbff !important }
| |
| html[data-theme="dark"] body.skin-vector-legacy #p-personal {
| |
| background: #141c2a;
| |
| border-color: rgba(159,208,255,.2);
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #p-personal a {
| |
| color: #9fd0ff;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #p-personal a:hover {
| |
| background: rgba(61,97,146,.22);
| |
| color: #cfe6ff;
| |
| border-left-color: #7bbbff;
| |
| }
| |
| html[data-theme="dark"] #pt-theme-toggle a {
| |
| background: #1a2332;
| |
| color: #9fd0ff;
| |
| border-color: rgba(159,208,255,.3);
| |
| }
| |
| html[data-theme="dark"] .user-menu-container {
| |
| background: transparent;
| |
| }
| |
| html[data-theme="dark"] .user-menu-header {
| |
| color: #9fd0ff;
| |
| background: #1a2332;
| |
| border-color: rgba(159,208,255,.3);
| |
| }
| |
| html[data-theme="dark"] .user-menu-content {
| |
| background: #141c2a;
| |
| border-color: rgba(159,208,255,.2);
| |
| }
| |
| html[data-theme="dark"] .user-menu-list a {
| |
| color: #9fd0ff;
| |
| }
| |
| html[data-theme="dark"] .user-menu-list a:hover {
| |
| background: rgba(61,97,146,.22);
| |
| color: #cfe6ff;
| |
| border-left-color: #7bbbff;
| |
| }
| |
| html[data-theme="dark"] #searchInput {
| |
| background: #111726 !important;
| |
| color: #cfe6ff !important;
| |
| border-color: rgba(159,208,255,.25) !important;
| |
| }
| |
| html[data-theme="dark"] #searchInput::placeholder {
| |
| color: #7ea6d6 !important;
| |
| }
| |
| html[data-theme="dark"] body.skin-vector-legacy #p-logo a {
| |
| background-color: #1a2332;
| |
| border-color: rgba(159,208,255,.3);
| |
| }
| |
| html[data-theme="dark"] #ca-view a,
| |
| html[data-theme="dark"] #ca-viewsource a,
| |
| html[data-theme="dark"] #ca-ve-edit a,
| |
| html[data-theme="dark"] #ca-edit a,
| |
| html[data-theme="dark"] #ca-history a,
| |
| html[data-theme="dark"] #p-cactions .vector-menu-heading,
| |
| html[data-theme="dark"] #ca-delete a,
| |
| html[data-theme="dark"] #ca-move a,
| |
| html[data-theme="dark"] #ca-protect a {
| |
| background: rgba(20,26,38,.92) !important;
| |
| color: #9fd0ff !important;
| |
| border-color: rgba(159,208,255,.25) !important;
| |
| }
| |
| html[data-theme="dark"] #ca-view.selected a,
| |
| html[data-theme="dark"] #ca-viewsource.selected a,
| |
| html[data-theme="dark"] #ca-edit.selected a,
| |
| html[data-theme="dark"] #ca-ve-edit.selected a,
| |
| html[data-theme="dark"] #ca-history.selected a,
| |
| html[data-theme="dark"] #ca-watch.selected a,
| |
| html[data-theme="dark"] #ca-unwatch.selected a,
| |
| html[data-theme="dark"] #ca-more.selected a {
| |
| background: linear-gradient(135deg, #274c77, #1b2b41) !important;
| |
| color: #cfe6ff !important;
| |
| border-color: transparent !important;
| |
| }
| |
|
| |
| html[data-theme="dark"] .mobile-hamburger-menu {
| |
| background: linear-gradient(135deg, #274c77, #1b2b41);
| |
| border: 1px solid rgba(159,208,255,.25);
| |
| box-shadow: 0 6px 20px rgba(12,18,30,.45);
| |
| }
| |
| html[data-theme="dark"] .mobile-hamburger-menu:hover {
| |
| box-shadow: 0 8px 30px rgba(123,187,255,.25);
| |
| }
| |
| html[data-theme="dark"] .mobile-hamburger-menu span {
| |
| background: #cfe6ff;
| |
| }
| |
|
| |
| /* Pulse animation for attention */
| |
| @keyframes btt-pulse {
| |
| 0% {
| |
| box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
| |
| }
| |
| 50% {
| |
| box-shadow: 0 4px 25px rgba(102, 126, 234, 0.5);
| |
| }
| |
| 100% {
| |
| box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
| |
| }
| |
| }
| |
|
| |
| /* Apply pulse animation when first shown */
| |
| .btt-button.pulse {
| |
| animation: btt-pulse 2s ease-in-out 3;
| |
| }
| |
|
| |
| /* Responsive design */
| |
| @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;
| |
| }
| |
| }
| |
|
| |
| /* Dark theme support */
| |
| @media (prefers-color-scheme: dark) {
| |
| .btt-button {
| |
| background: linear-gradient(135deg, #4c63d2 0%, #5a4fcf 100%);
| |
| box-shadow: 0 4px 20px rgba(76, 99, 210, 0.4);
| |
| }
| |
|
| |
| .btt-button:hover {
| |
| background: linear-gradient(135deg, #5a4fcf 0%, #4c63d2 100%);
| |
| box-shadow: 0 8px 30px rgba(76, 99, 210, 0.5);
| |
| }
| |
| }
| |
|
| |
| /* High contrast mode support */
| |
| @media (prefers-contrast: high) {
| |
| .btt-button {
| |
| background: #000000;
| |
| border: 2px solid #ffffff;
| |
| }
| |
|
| |
| .btt-button::before {
| |
| border-bottom-color: #ffffff;
| |
| }
| |
|
| |
| .btt-button:hover {
| |
| background: #333333;
| |
| }
| |
| }
| |
|
| |
| /* Reduced motion support */
| |
| @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;
| |
| }
| |
| }
| |