Molosse

World Styling Editor

SELECT THEME

CUSTOM CSS

/* --- 0. UNIVERSEL --- */
/* Suppression des indicateurs de relations */
.user-css .character-relationship-indicator, 
.user-css .character-relationship-name {
    display: none;
}

/* Supprime le fond du bloc, de la zone d'image et des éventuels voiles sombres */
.map-box, 
.map-box .map-thumbnail, 
.map-box .map-thumbnail a,
.map-box .map-thumbnail:after {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Si World Anvil utilise un effet de survol qui assombrit, on l'annule aussi */
.map-box:hover .map-thumbnail:after,
.map-box:hover .map-thumbnail a:after {
    display: none !important;
    background: transparent !important;
}

/* --- 0.1 ESPACEMENT (COLONNE DE GAUCHE UNIQUEMENT) --- */
/* On ne cible que les listes dans le corps du texte (gauche) et les tooltips */
/* Cela ignore physiquement tout ce qui est dans ta sidebar de droite et en haut */
.article-content-left li:not(:last-child),
.tooltipster-content li:not(:last-child) {
    margin-bottom: 10px !important;
}

/* --- 0.2 RESET ABSOLU (VERTICAL UNIQUEMENT) --- */
/* On verrouille à 0 uniquement la verticale pour garder l'alinéa horizontal */
.article-content-right li,
.articletoc li, 
.articletoc .article-toc-link,
[class^="article-toc-indent"],
.typeahead li, 
.dropdown-menu li,
.list-unstyled li {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;    /* Reset haut */
    padding-bottom: 0 !important; /* Reset bas */
    /* Note : On ne touche pas au padding-left pour garder l'alinéa */
}

/* Confort visuel barre de recherche */
.dropdown-menu li a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* --- 1. COULEURS, LIENS ET SMALL --- */
.user-css a, .tooltipster-content a, #sidebar a, .article-explorer-link {
    color: #008080 !important;
    font-weight: bold !important;
}
.user-css a:hover, .tooltipster-content a:hover, #sidebar a:hover { 
    color: #1D4851 !important; 
}

.user-css small, .user-css .small, .tooltipster-content small, .tooltipster-content .small, #sidebar small {
    color: #806D5A !important;
    font-style: normal !important;
}

/* --- 2. TITRES BLEU FONCÉ (#1D4851) --- */
.user-css h1, 
.content-title, .article-title,
#sidebar h1, #sidebar .content-title,
.tooltipster-content h1, .tooltipster-content h2,
.tooltipster-content .article-title {
    color: #1D4851 !important;
    -webkit-text-fill-color: #1D4851 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* --- 3. TITRES, ÉTIQUETTES ET CITATIONS MARRON (#4E3D28) --- */
.user-css h2, .user-css h3, .user-css h4, .user-css h5, 
.dropcap, #sidebar h2, #sidebar h3,
.tooltipster-content h3, .tooltipster-content h4,
.user-css blockquote, 
.user-css blockquote p,
.user-css .phrase-key {
    color: #4E3D28 !important;
    -webkit-text-fill-color: #4E3D28 !important;
}

.leaflet-container .leaflet-tooltip-pane .leaflet-tooltip,
.leaflet-container .leaflet-tooltip,
.leaflet-tooltip {
    color: #4E3D28 !important;
    font-weight: bold !important;
    -webkit-text-fill-color: #4E3D28 !important;
    text-shadow: none !important;
}

/* --- 3.1 DATE TIMELINES --- */
.tl-heading-date strong,
div.tl-heading-date strong,
.tl-heading-date * {
    font-size: 1.15em !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    color: #4E3D28 !important;
    -webkit-text-fill-color: #4E3D28 !important;
    
    /* --- L'EFFET CURSIF SYSTÈME --- */
    font-style: italic !important;
    font-variant-numeric: proportional-nums !important;
    font-size-adjust: 0.5 !important;
    font-variant-caps: small-caps !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    transform: scaleY(0.92) !important;
    
    /* --- AMÉLIORATION DU RENDU CURSIF --- */
    font-variant-alternates: historical-forms !important;
    font-kerning: normal !important;
    
    /* --- NETTETÉ --- */
    text-shadow: 1px 1px 9px rgba(0, 0, 0, 0.2) !important;
}

/* --- 4. PRIORITÉ DES LIENS DANS LE TEXTE --- */
.user-css h1 a, .user-css h2 a, .user-css h3 a, .user-css h4 a, .user-css h5 a,
.article-title a, .content-title a, .heading a, .user-css blockquote a {
    color: #008080 !important;
    -webkit-text-fill-color: #008080 !important;
}

/* --- 5. TEXTE BLANC SUR LES FICHES D'ARTICLES ET CARROUSEL --- */
/* On force le blanc uniquement dans le corps de l'article et la sidebar */
.user-css .article-panel .heading, 
.user-css .article-panel .subheading, 
.user-css .article-panel .subheading *,
#sidebar .article-panel .heading, 
#sidebar .article-panel .subheading, 
#sidebar .article-panel .subheading * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Le carrousel reste en blanc */
.carousel-caption h3 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* --- 6. HARMONISATION DU TEXTE DE LA SIDEBAR --- */
.section-heading, 
.section-title, 
.character-relationships dt {
    color: #4E3D28 !important;
    -webkit-text-fill-color: #4E3D28 !important;
    font-weight: bold !important;
}

.section-payload, 
.character-relationships dd {
    color: #4E3D28 !important;
    -webkit-text-fill-color: #4E3D28 !important;
    font-weight: normal !important;
}

.section-payload small, 
.section-payload .small, 
.section-payload i {
    color: #806D5A !important;
    -webkit-text-fill-color: #806D5A !important;
}

.section-payload a, 
.section-payload a span {
    color: #008080 !important;
    -webkit-text-fill-color: #008080 !important;
    font-weight: bold !important;
}

/* --- 7. BOUTONS ET ÉLÉMENTS BLANCS --- */
.btn-primary, .btn-sticker, .btn-danger, .btn-info, .btn-success,
.fa-flag, .fa-heart, .backtoworld, .backtoworld a, .backtoworld a:hover,
.leaflet-control-layers, .leaflet-control-layers span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* --- 8. RÉGLAGES DES ENCARTS, SIDEBAR ET SECRETS (HARMONISÉS) --- */
/* Les encarts classiques et les blocs ALOUD gardent leur fond teinté */
.user-css .panel.card,
.user-css .aloud,
.user-css-map-sidebar .aloud { /* Ligne ajoutée pour la map */
    background-color: rgba(209, 242, 235, 0.3) !important;
    border: 1px solid #4E3D28 !important;
    padding: 15px !important;
    box-shadow: none !important;
    border-radius: 0 !important; 
}

/* UNIQUEMENT LES SECRETS : FOND COMPLÈTEMENT TRANSPARENT */
.user-css .secret-container, 
.user-css .user-css-secret, 
.secret-panel,
.tooltipster-content .secret-container,
.tooltipster-content .user-css-secret,
.user-css-map-sidebar .secret-container, 
.user-css-map-sidebar .user-css-secret {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #4E3D28 !important;
    padding: 15px !important;
    box-shadow: none !important;
    border-radius: 0 !important; 
}

.secret-panel .panel-heading, .secret-panel .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(78, 61, 40, 0.2) !important;
    margin-bottom: 10px !important;
    border-radius: 0 !important;
}

/* Texte noir pour les secrets, aloud et tooltips */
.user-css .secret-container, .user-css .secret-container p, .user-css .secret-container li,
.user-css .user-css-secret, .user-css .user-css-secret p, .user-css .user-css-secret li,
.user-css .aloud, .user-css .aloud p,
.secret-panel .card-body, .secret-panel p, .secret-panel li, .secret-panel ul,
.tooltipster-content p, .tooltipster-content span, .tooltipster-content li,
.user-css-map-sidebar .secret-container,
.user-css-map-sidebar .secret-container p,
.user-css-map-sidebar .aloud,   /* Ligne ajoutée */
.user-css-map-sidebar .aloud p { /* Ligne ajoutée */
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Verrou Teal pour les liens */
.secret-container a, .user-css-secret a, .aloud a, 
.secret-panel a, .secret-panel a *,
.tooltipster-content a, .tooltipster-content a *,
.user-css-map-sidebar .secret-container a,
.user-css-map-sidebar .aloud a { /* Ligne ajoutée */
    color: #008080 !important;
    -webkit-text-fill-color: #008080 !important;
    font-weight: bold !important;
}

/* Small taupe */
.secret-container small, .user-css-secret small, .aloud small, 
.secret-panel small, .secret-panel .text-muted,
.tooltipster-content small,
.user-css-map-sidebar .secret-container small,
.user-css-map-sidebar .aloud small { /* Ligne ajoutée */
    color: #806D5A !important;
    -webkit-text-fill-color: #806D5A !important;
}

/* FORCE LE BLEU SUR TOUS LES TITRES DANS LES SECRETS DE LA SIDEBAR MAP */
#sidebar .secret-container h1,
#sidebar .secret-container h2,
#sidebar .secret-container h3,
#sidebar .secret-container h4,
#sidebar .secret-container h5,
#sidebar .user-css-secret h1,
#sidebar .user-css-secret h2,
#sidebar .user-css-secret h3,
#sidebar .user-css-secret h4,
#sidebar .user-css-secret h5 {
    color: #1D4851 !important;
    -webkit-text-fill-color: #1D4851 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
    font-weight: bold !important;
}

/* --- 9. ORGANIGRAMME --- */
.orgtree a.article-link, 
.orgtree a.article-explorer-link {
    background-color: #008080 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #1D4851 !important;
    padding: 5px 12px !important;
    border-radius: 4px;
    display: inline-block !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.orgtree a:hover {
    background-color: #1D4851 !important;
    color: #ffffff !important;
}

.orgtree li::before, 
.orgtree li::after, 
.orgtree ul ul::before {
    border-color: #008080 !important;
}

/* --- 10. FINITIONS --- */
.fa-pencil, .world-editor-link i, .btn-default i { color: inherit !important; }

/* Style italique pour tous les blocs aloud (Articles, Tooltips, Sidebar Map) */
.user-css .aloud, 
.tooltipster-content .aloud, 
.user-css-map-sidebar .aloud { 
    font-style: italic !important; 
}

/* Taille augmentée UNIQUEMENT pour les aloud classiques des articles */
.user-css .aloud {
    font-size: 0.9em !important;
}

/* --- 11. SIDEBAR DE MAP --- */
nav.user-css-map-sidebar {
    background-color: rgba(209, 242, 235, 0.3) !important;
    border: 1px solid #4E3D28 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.user-css-map-sidebar #sidebar-contents, 
.user-css-map-sidebar .content-wrapper,
.user-css-map-sidebar .tab-content {
    background-color: transparent !important;
    border: none !important;
}

.user-css-map-sidebar p, 
.user-css-map-sidebar ul, 
.user-css-map-sidebar ol, 
.user-css-map-sidebar li,
.user-css-map-sidebar b,
.user-css-map-sidebar strong,
.user-css-map-sidebar .content-body {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.user-css-map-sidebar a, 
.user-css-map-sidebar a * {
    color: #008080 !important;
    -webkit-text-fill-color: #008080 !important;
    font-weight: bold !important;
}

.user-css-map-sidebar .btn,
.user-css-map-sidebar .btn * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.user-css-map-sidebar .fa-pencil,
.user-css-map-sidebar .world-editor-link i {
    color: #4E3D28 !important;
    -webkit-text-fill-color: #4E3D28 !important;
}

a.follow-world-trigger.btn, 
a.follow-world-trigger.btn * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* --- 12. BARRE DE NAVIGATION LATÉRALE --- */
#world-navigation-sidebar .world-toc-header,
#world-navigation-sidebar .maps-list-header,
#world-navigation-sidebar .timelines-list-header,
#world-navigation-sidebar .heading,
#world-navigation-sidebar .list-box h5,
#world-navigation-sidebar .list-box i,
#world-navigation-sidebar small:not(.open-category-page) {
    color: rgba(209, 242, 235, 0.9) !important;
    -webkit-text-fill-color: rgba(209, 242, 235, 0.9) !important;
}

#world-navigation-sidebar a,
#world-navigation-sidebar .world-category-link,
#world-navigation-sidebar .world-menu a {
    color: #008080 !important;
    -webkit-text-fill-color: #008080 !important;
    font-weight: bold !important;
}

/* --- 13. ÉPINGLES "LABEL" FIXES --- */
.leaflet-container .leaflet-tooltip-pane .marker-label,
.leaflet-container .leaflet-tooltip.marker-label,
.marker-label.label-kadwa1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: 
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
        0px 0px 8px rgba(0, 0, 0, 1),
        2px 2px 10px rgba(0, 0, 0, 1) !important;
}

/* --- 14. TABLE DES MATIÈRES (ARTICLETOC) --- */
.articletoc {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.articletoc .article-toc-link {
    color: #008080 !important;
    -webkit-text-fill-color: #008080 !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* On a retiré le padding: 0 !important global pour laisser respirer l'alinéa */
}

.articletoc .article-toc-link:hover {
    color: #1D4851 !important;
    -webkit-text-fill-color: #1D4851 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

Need help? Check out the CSS Styling Guide

Molosse

World: Le Duché d'Opale
Owner: Les Maîtres du Monde
Views: 53

Commentaires

Please Login in order to comment!

World Styling Editor

Molosse

Commentaires

Find your way!

Resources

WHO WE ARE

LEGAL

Get the news

Our Shop

Development

EVENTS

REACHING OUT

A BIG THANK YOU