×
Create a new article
Write your page title here:
We currently have 2 articles on Supernatural Lore. Type your article name above or click on one of the titles below and start writing!



    Supernatural Lore

    MediaWiki:Cosmos.css: Difference between revisions

    Created page with "Lore buttons — match the landing page's homebtn style, adapted for Cosmos: .lore-btn, a.lore-btn, .formlink-button .lore-btn, button.lore-btn { display: inline-block; border: 3px solid #45360f; color: #45360f; background-color: transparent; border-radius: 0; padding: 15px 30px; font-size: 22px; text-transform: uppercase; font-weight: 700; text-decoration: none; text-align: center; cursor: pointer; transition: ba..."
     
    No edit summary
     
    Line 6: Line 6:
    button.lore-btn {
    button.lore-btn {
         display: inline-block;
         display: inline-block;
        box-sizing: border-box;
        width: 100%;
         border: 3px solid #45360f;
         border: 3px solid #45360f;
         color: #45360f;
         color: #45360f;
         background-color: transparent;
         background-color: transparent;
         border-radius: 0;
         border-radius: 0;
         padding: 15px 30px;
         padding: 15px 20px;
         font-size: 22px;
         font-size: 22px;
         text-transform: uppercase;
         text-transform: uppercase;
    Line 33: Line 35:
    .lore-btn-wrapper {
    .lore-btn-wrapper {
         display: inline-block;
         display: inline-block;
        width: 260px;
         margin: 15px;
         margin: 15px;
         text-align: center;
         text-align: center;
    Line 43: Line 46:
         color: #45360f;
         color: #45360f;
         margin-top: 8px;
         margin-top: 8px;
         max-width: 220px;
         width: 100%;
         text-transform: none;
         text-transform: none;
         font-weight: normal;
         font-weight: normal;
    Line 49: Line 52:


    .lore-buttons {
    .lore-buttons {
         text-align: center;
         display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
         margin: 30px 0;
         margin: 30px 0;
    }
    }

    Latest revision as of 11:40, 12 August 2026

    /* Lore buttons — match the landing page's homebtn style, adapted for Cosmos */
    
    .lore-btn,
    a.lore-btn,
    .formlink-button .lore-btn,
    button.lore-btn {
        display: inline-block;
        box-sizing: border-box;
        width: 100%;
        border: 3px solid #45360f;
        color: #45360f;
        background-color: transparent;
        border-radius: 0;
        padding: 15px 20px;
        font-size: 22px;
        text-transform: uppercase;
        font-weight: 700;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
    }
    
    .lore-btn:hover,
    a.lore-btn:hover,
    .formlink-button .lore-btn:hover,
    button.lore-btn:hover {
        border: 3px solid #45360f;
        background-color: #45360f;
        color: #e3dac3;
        text-decoration: none;
    }
    
    /* Button wrappers on the main page */
    .lore-btn-wrapper {
        display: inline-block;
        width: 260px;
        margin: 15px;
        text-align: center;
        vertical-align: top;
    }
    
    .lore-btn-count {
        display: block;
        font-size: 14px;
        color: #45360f;
        margin-top: 8px;
        width: 100%;
        text-transform: none;
        font-weight: normal;
    }
    
    .lore-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 10px;
        margin: 30px 0;
    }
    
    .lore-intro {
        text-align: left;
        margin-bottom: 20px;
    }
    
    .lore-welcome {
        margin: 10px 0;
    }
    
    /* Form button (PageForms formlink) styling */
    .formlink-button a,
    .formlink-button button {
        border: 3px solid #45360f;
        color: #45360f;
        background-color: transparent;
        border-radius: 0;
        padding: 12px 25px;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 700;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 0.2s, color 0.2s;
    }
    
    .formlink-button a:hover,
    .formlink-button button:hover {
        background-color: #45360f;
        color: #e3dac3;
        text-decoration: none;
    }