« MediaWiki:Vaulttec.css » : différence entre les versions

/*
 * MediaWiki:Vaulttec.css — v6
 * Chargé uniquement pour les utilisateurs du skin VaultTec.
 */
 
/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  --background-color-dp-00: #06100b;
  --background-color-dp-01: #0a1a0f;
  --background-color-dp-02: #0f2015;
  --background-color-dp-03: #11251a;
  --background-color-dp-04: #142b1e;
  --background-color-dp-06: #173122;
  --background-color-dp-08: #1a3727;
  --background-color-dp-12: #1e3f2c;
  --background-color-dp-16: #214531;
  --background-color-dp-24: #254c36;
  --background-img:         none;
  --background-main:        transparent;
  --box-background-color:   rgba(12, 24, 18, 0.85);
  --box-shadow:             0 0 10px rgba(125, 255, 156, 0.12);
  --color-base:             #cce8d4;
  --color-warning:          #f5c84a;
  --color-link:             #4ab06a;
  --color-link-visited:     #357a4d;
  --border-color-base:      rgba(125, 255, 156, 0.15);
}
 
/* ============================================================
   2. BODY & CONTAINERS
   ============================================================ */
body {
  background: #06100b !important;
  background-image: none !important;
}
.mw-page-container {
  background: transparent !important;
  border: none !important;
  max-width: 100% !important;
  padding: 0 !important;
}
 
/* ============================================================
   3. LAYOUT
   ============================================================ */
.vt-page-container {
  display: flex !important;
  width: 100% !important;
  align-items: flex-start !important;
  min-height: calc(100vh - 54px) !important;
}
.vt-sidebar, #mw-panel { width: 220px !important; flex-shrink: 0 !important; }
.vt-content-container, #content { flex: 1 1 auto !important; min-width: 0 !important; width: 0 !important; }
#bodyContent { max-width: none !important; width: 100% !important; padding: 28px 36px 60px !important; }
 
/* ============================================================
   4. TOC — droite, sticky
   ============================================================ */
#mw-content-text .toc,
#mw-content-text #toc {
  float: right !important;
  clear: right !important;
  margin: 0 0 24px 28px !important;
  min-width: 200px !important;
  max-width: 240px !important;
  position: sticky !important;
  top: 74px !important;
  max-height: calc(100vh - 100px) !important;
  overflow-y: auto !important;
  background: rgba(12, 24, 18, 0.9) !important;
  border: 1px solid rgba(125, 255, 156, 0.15) !important;
  padding: 14px 0 10px !important;
}
#mw-content-text .toctitle h2,
#mw-content-text .toc .toctitle {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(125, 255, 156, 0.5) !important;
  padding: 0 16px 10px !important;
  border-bottom: 1px dashed rgba(125, 255, 156, 0.13) !important;
  margin-bottom: 6px !important;
}
#mw-content-text .toc ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
#mw-content-text .toc li a {
  display: flex !important;
  padding: 5px 16px !important;
  font-size: 11px !important;
  color: #7aaa88 !important;
  font-family: 'IBM Plex Mono', monospace !important;
  border-left: 2px solid transparent !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
}
#mw-content-text .toc li a:hover {
  color: #7dff9c !important;
  background: rgba(125, 255, 156, 0.08) !important;
  border-left-color: #4ab06a !important;
}
#mw-content-text .toc li li a { padding-left: 28px !important; font-size: 10px !important; color: rgba(125, 255, 156, 0.4) !important; }
.tocnumber { color: rgba(125, 255, 156, 0.35) !important; margin-right: 6px !important; }
 
/* ============================================================
   5. INFOBOX
   ============================================================ */
.avt-infobox {
  background-color: rgba(12, 24, 18, 0.9) !important;
  border-color: rgba(125, 255, 156, 0.2) !important;
  box-shadow: 0 0 10px rgba(125, 255, 156, 0.12) !important;
  color: #cce8d4 !important;
}
.avt-infobox-header {
  background-color: #142b1e !important;
  border-color: rgba(125, 255, 156, 0.2) !important;
  color: #7dff9c !important;
}
.avt-infobox p.bloc,
.avt-infobox caption {
  background-color: #142b1e !important;
  color: #7dff9c !important;
}
.avt-infobox th[scope="row"] { color: #4ab06a !important; }
.avt-infobox td { color: #cce8d4 !important; }
.infobox-default-image { background-image: url("/images/1/11/Logo_wiki_LAVT_vert.png") !important; }
 
/* Fix pleine largeur : skin.less applique display:block sur caption,
   ce qui casse le rendu table. On rétablit display:table-caption. */
.avt-infobox caption,
.mw-parser-output .avt-infobox caption {
  display: table-caption !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
 
/* ============================================================
   6. WIKITABLE
   ============================================================ */
.wikitable, .va-table, .mw-datatable {
  background-color: rgba(12, 24, 18, 0.85) !important;
  border-color: rgba(125, 255, 156, 0.15) !important;
  color: #cce8d4 !important;
}
.wikitable > tr > th, .wikitable > * > tr > th,
.va-table > tr > th, .va-table > * > tr > th {
  background-color: #0f2015 !important;
  color: #7dff9c !important;
}
.wikitable > tr > td, .wikitable > * > tr > td,
.va-table > tr > td, .va-table > * > tr > td {
  border-color: rgba(125, 255, 156, 0.1) !important;
  color: #cce8d4 !important;
}
.wikitable tr:hover td { background-color: rgba(125, 255, 156, 0.06) !important; }
 
/* ============================================================
   7. PALETTES & NAVBOXES
   ============================================================ */
.palette { background-color: rgba(12, 24, 18, 0.85) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.palette-titre, .palette-banniere, .palette-section, .palette-groupe { background-color: #0f2015 !important; color: #7dff9c !important; }
.palette-pair { background-color: transparent !important; }
.va-infobox-title, .va-navbox-title { background: #0f2015 !important; color: #7dff9c !important; }
 
/* ============================================================
   8. BOÎTES GÉNÉRIQUES
   ============================================================ */
.avt-warn-banner, .avt-note-banner, .avt-section-banner,
.avt-dropdown-box, .avt-genericbox, .homepage-box,
.spinoff-box, .avt-content-game-box {
  background-color: rgba(12, 24, 18, 0.85) !important;
  border-color: rgba(125, 255, 156, 0.15) !important;
  color: #cce8d4 !important;
}
.avt-dropdown-box-title { background-color: #0f2015 !important; color: #7dff9c !important; }
 
/* ============================================================
   9. LIENS
   ============================================================ */
.mw-parser-output a { color: #4ab06a; }
.mw-parser-output a:visited { color: #357a4d; }
.mw-parser-output a:hover { color: #7dff9c; }
.new, a.new { color: #ff5e5e !important; }
 
/* ============================================================
   10. TOC VECTOR 2022
   ============================================================ */
.sidebar-toc, .vector-toc { background-color: rgba(12, 24, 18, 0.85) !important; border-color: rgba(125, 255, 156, 0.15) !important; }
.vector-toc .vector-toc-link, .sidebar-toc .sidebar-toc-link { color: #4ab06a !important; }
.vector-toc .vector-toc-link:hover, .sidebar-toc .sidebar-toc-link:hover { color: #7dff9c !important; }
 
/* ============================================================
   11. PORTAILS & ACCUEIL
   ============================================================ */
.homepage-welcome-title, .homepage-box-title, .portal-box-title,
.spinoff-box-title, .canceled-box-title, .fangame-box-title,
.homepage-presentation-title, .homepage-participation-title, .homepage-articleday-title {
  color: #7dff9c !important;
  text-shadow: 0 0 8px rgba(125, 255, 156, 0.4) !important;
  border-color: rgba(125, 255, 156, 0.15) !important;
}
 
/* ============================================================
   12. SITENOTICE
   ============================================================ */
.avt-sitenotice { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; }
 
/* ============================================================
   13. RECHERCHE — dropdown miniatures
   ============================================================ */
.vt-search { position: relative !important; }
.vt-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  width: 420px;
  max-width: calc(100vw - 40px);
  background: rgba(8, 18, 12, 0.98);
  border: 1px solid rgba(125, 255, 156, 0.2);
  border-top: none;
  z-index: 500;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}
.vt-search-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  color: #cce8d4; text-decoration: none !important;
  border-bottom: 1px solid rgba(125, 255, 156, 0.07);
  font-family: 'Crimson Pro', Georgia, serif; font-size: 15px; transition: background 0.1s;
}
.vt-search-item:hover { background: rgba(125, 255, 156, 0.07); color: #7dff9c !important; text-decoration: none !important; }
.vt-search-thumb {
  width: 40px; height: 40px; flex-shrink: 0;
  background: rgba(125, 255, 156, 0.05); border: 1px solid rgba(125, 255, 156, 0.12);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.vt-search-thumb img { width: 40px; height: 40px; object-fit: cover; display: block; }
.vt-search-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-search-title mark { background: none; color: #7dff9c; font-weight: 700; }
.vt-search-footer {
  display: block; padding: 10px 14px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.1em;
  color: rgba(125, 255, 156, 0.4); text-decoration: none !important; text-transform: uppercase;
  border-top: 1px dashed rgba(125, 255, 156, 0.1); background: rgba(125, 255, 156, 0.02);
}
.vt-search-footer:hover { color: #7dff9c !important; background: rgba(125, 255, 156, 0.06); text-decoration: none !important; }
 
/* ============================================================
   14. BOUTON RECHERCHE — loupe
   ============================================================ */
.vt-search input.searchButton, .vt-search #searchButton {
  text-indent: -9999px !important; overflow: hidden !important;
  width: 42px !important; min-width: 42px !important; padding: 0 !important; flex-shrink: 0 !important;
  background-color: rgba(125, 255, 156, 0.10) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237dff9c' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 18px !important;
  border: 1px solid rgba(125, 255, 156, 0.35) !important; cursor: pointer !important;
}
.vt-search input.searchButton:hover, .vt-search #searchButton:hover { background-color: rgba(125, 255, 156, 0.2) !important; }
 
/* ============================================================
   15. SIDEBAR — TOC déplacé
   ============================================================ */
.vt-sidebar-toc { padding: 0; }
.vt-sidebar-toc .toc, .vt-sidebar-toc #toc {
  float: none !important; position: sticky !important; top: 10px !important;
  max-height: calc(100vh - 160px) !important; overflow-y: auto !important;
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
  border: none !important; padding: 0 !important; background: transparent !important;
}
.vt-sidebar-toc .toctitle { display: none; }
 
/* ============================================================
   16. DARK MODE — icône parasite
   ============================================================ */
.ext-darkmode-link::before, .ext-darkmode-link:before { display: none !important; content: none !important; }
 
/* ============================================================
   17. CATÉGORIES
   ============================================================ */
#catlinks {
  background-color: rgba(12, 24, 18, 0.85) !important;
  border-top: 1px solid rgba(125, 255, 156, 0.15) !important;
  border-bottom: none !important; padding: 10px 36px !important;
  font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important;
  letter-spacing: 0.1em !important; color: #7aaa88 !important;
}
#catlinks a { color: #4ab06a !important; text-decoration: none !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; font-size: 10px !important; }
#catlinks a:hover { color: #7dff9c !important; }
#mw-normal-catlinks > a { color: rgba(125, 255, 156, 0.5) !important; font-weight: 600 !important; }
#catlinks ul { display: inline !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
#catlinks ul li { display: inline !important; }
#catlinks ul li::before { content: '·' !important; margin: 0 6px !important; color: rgba(125, 255, 156, 0.25) !important; }
 
/* ============================================================
   18. MODIFICATIONS RÉCENTES — filtres OOUI + légende
   ============================================================ */
.mw-rcfilters-ui-filterWrapperWidget,
.mw-rcfilters-ui-filterTagMultiselectWidget { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top { background-color: #0f2015 !important; border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; }
.mw-rcfilters-ui-tagItemWidget { background-color: rgba(125, 255, 156, 0.1) !important; border: 1px solid rgba(125, 255, 156, 0.3) !important; color: #7dff9c !important; }
.mw-rcfilters-ui-tagItemWidget .oo-ui-labelElement-label { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-buttonElement-button,
.mw-rcfilters-ui-filterWrapperWidget .oo-ui-buttonElement-button { color: #4ab06a !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-buttonElement-button:hover,
.mw-rcfilters-ui-filterWrapperWidget .oo-ui-buttonElement-button:hover { color: #7dff9c !important; }
.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed .oo-ui-buttonElement-button { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.3) !important; color: #4ab06a !important; }
.mw-rcfilters-ui-filterWrapperWidget-bottom .oo-ui-buttonElement-framed .oo-ui-buttonElement-button:hover { background-color: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-textInputWidget .oo-ui-inputWidget-input { background-color: rgba(12, 24, 18, 0.95) !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget .oo-ui-textInputWidget .oo-ui-inputWidget-input::placeholder { color: rgba(125, 255, 156, 0.3) !important; }
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select .oo-ui-buttonElement-button { color: #4ab06a !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-rcfilters-ui-filterWrapperWidget-bottom { background-color: #0f2015 !important; border-top: 1px solid rgba(125, 255, 156, 0.15) !important; }
.mw-rcfilters-ui-filterWrapperWidget .oo-ui-labelElement-label { color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-changeslist-legend { background-color: rgba(12, 24, 18, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; padding: 10px 16px !important; margin: 8px 0 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.mw-changeslist-legend summary { color: #7dff9c !important; cursor: pointer !important; font-size: 11px !important; letter-spacing: 0.1em !important; }
.mw-changeslist-legend dl { margin: 8px 0 0 !important; }
.mw-changeslist-legend dt { color: #7dff9c !important; font-weight: 600 !important; }
.mw-changeslist-legend dd { color: #7aaa88 !important; }
dt.newpage, dt.minoredit, dt.botedit, dt.unpatrolled { color: #7dff9c !important; background: rgba(125, 255, 156, 0.08) !important; padding: 1px 6px !important; border: 1px solid rgba(125, 255, 156, 0.2) !important; display: inline-block !important; }
.mw-changeslist-date { color: #7dff9c !important; }
h4.mw-rcfilters-ui-changesListWrapperWidget-date { color: #7dff9c !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 10px !important; letter-spacing: 0.2em !important; border-bottom: 1px dashed rgba(125, 255, 156, 0.2) !important; }
 
/* ============================================================
   19. OOUI — fonds blancs résiduels
   ============================================================ */
.oo-ui-tagMultiselectWidget, .oo-ui-tagMultiselectWidget-handle,
.oo-ui-tagMultiselectWidget-group, .mw-rcfilters-ui-table,
.mw-rcfilters-ui-row, .mw-rcfilters-ui-cell { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.oo-ui-textInputWidget, .oo-ui-textInputWidget input, .oo-ui-inputWidget-input { background-color: #0a1a0f !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; }
.oo-ui-tagItemWidget, .mw-rcfilters-ui-tagItemWidget { background-color: rgba(125, 255, 156, 0.08) !important; border: 1px solid rgba(125, 255, 156, 0.25) !important; color: #7dff9c !important; }
.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #4ab06a !important; }
 
/* ============================================================
   20. FILTRES ENREGISTRÉS — savedLinks
   ============================================================ */
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks,
.mw-rcfilters-ui-savedLinksListWidget,
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonMenuSelectWidget { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button,
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.25) !important; color: #4ab06a !important; }
.mw-rcfilters-ui-savedLinksListWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button:hover,
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-buttonElement-button:hover { background-color: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important; }
.mw-rcfilters-ui-rcTopSectionWidget-savedLinks .oo-ui-indicatorElement-indicator { opacity: 0.6 !important; }
.oo-ui-menuSelectWidget, .oo-ui-dropdownWidget-menu { background-color: rgba(8, 18, 12, 0.98) !important; border-color: rgba(125, 255, 156, 0.2) !important; }
.oo-ui-optionWidget { color: #cce8d4 !important; }
.oo-ui-optionWidget:hover, .oo-ui-optionWidget-highlighted { background-color: rgba(125, 255, 156, 0.08) !important; color: #7dff9c !important; }
 
/* ============================================================
   21. ÉDITEUR — CodeMirror + formulaire
   ============================================================ */
#editform, .editOptions, .wikiEditor-ui, .wikiEditor-ui-toolbar, .wikiEditor-ui-text { background-color: rgba(12, 24, 18, 0.9) !important; border-color: rgba(125, 255, 156, 0.15) !important; color: #cce8d4 !important; }
#wpTextbox1, .wikiEditor-ui-text textarea { background-color: #060f0b !important; color: #cce8d4 !important; border-color: rgba(125, 255, 156, 0.2) !important; font-family: 'IBM Plex Mono', monospace !important; }
.CodeMirror, .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter { background-color: #060f0b !important; color: #cce8d4 !important; border-color: rgba(125, 255, 156, 0.15) !important; }
.CodeMirror-linenumber { color: rgba(125, 255, 156, 0.25) !important; }
.CodeMirror-cursor { border-left-color: #7dff9c !important; }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected { background: rgba(125, 255, 156, 0.12) !important; }
.cm-keyword  { color: #7dff9c !important; }
.cm-atom, .cm-number { color: #f5c84a !important; }
.cm-string   { color: #a8e6b8 !important; }
.cm-comment  { color: rgba(125, 255, 156, 0.35) !important; font-style: italic !important; }
.cm-tag, .cm-property { color: #7dff9c !important; }
.cm-attribute { color: #4ab06a !important; }
.cm-variable  { color: #cce8d4 !important; }
.cm-def       { color: #a8e6b8 !important; }
.cm-error     { color: #ff5e5e !important; }
.wikiEditor-ui-toolbar { background: #0f2015 !important; border-bottom: 1px solid rgba(125, 255, 156, 0.15) !important; }
.wikiEditor-ui-toolbar .group { border-right-color: rgba(125, 255, 156, 0.1) !important; }
.wikiEditor-ui-toolbar .tool:hover { background: rgba(125, 255, 156, 0.08) !important; }
#wpSave, #wpPreview, #wpDiff, .editButtons input[type="submit"] { background-color: rgba(12, 24, 18, 0.9) !important; border: 1px solid rgba(125, 255, 156, 0.3) !important; color: #4ab06a !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; letter-spacing: 0.1em !important; cursor: pointer !important; }
#wpSave:hover, #wpPreview:hover, #wpDiff:hover, .editButtons input[type="submit"]:hover { background-color: rgba(125, 255, 156, 0.1) !important; color: #7dff9c !important; border-color: rgba(125, 255, 156, 0.5) !important; }
#wpSave { background-color: rgba(125, 255, 156, 0.12) !important; color: #7dff9c !important; }
.editButtons .mw-editbutton-cancel { color: rgba(125, 255, 156, 0.4) !important; }
#wpSummary, #wpSummaryWidget input { background-color: #060f0b !important; border-color: rgba(125, 255, 156, 0.2) !important; color: #cce8d4 !important; font-family: 'IBM Plex Mono', monospace !important; }
.editCheckboxes label, .editOptions label { color: #7aaa88 !important; font-family: 'IBM Plex Mono', monospace !important; font-size: 11px !important; }
.editpage-head-copywarn, #editpage-copywarn { color: #4a6e55 !important; font-size: 11px !important; }
 
/* ============================================================
   22. MOBILE — onglets défilants
   ============================================================ */
@media screen and (max-width: 720px) {
  .vt-page-tabs { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; scrollbar-color: rgba(125, 255, 156, 0.2) transparent !important; flex-wrap: nowrap !important; height: auto !important; min-height: 44px !important; padding: 0 8px !important; }
  .vt-page-tabs::-webkit-scrollbar { height: 3px !important; }
  .vt-page-tabs::-webkit-scrollbar-thumb { background: rgba(125, 255, 156, 0.2) !important; }
  .vt-tabs-ns ul, .vt-tabs-views ul, .vt-tabs-more ul { flex-wrap: nowrap !important; white-space: nowrap !important; }
  .vt-page-tabs li a { white-space: nowrap !important; padding: 0 10px !important; font-size: 10px !important; }
  .vt-tabs-sep { display: none !important; }
}