Adaris

Adaris:Main Page/styles.css: Difference between revisions

← Older edit
No edit summary
No edit summary
Tag: Manual revert
 
(74 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* {{pp|small=yes}} */
/* Ensure both the left and right boxes have equal heights */
#mp-left, #mp-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures the content and buttons are properly spaced */
}


/* General styling for boxes and headings */
.mp-box {
.mp-box {
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
    border: 1px solid #D4C5A0; /* A soft, warm border */
padding: 0 0.5em 0.5em;
    padding: 0 0.5em 0.5em;
margin-top: 4px;
    margin-top: 2px;
    background-color: #F7EFE3; /* Light parchment-like background for a magical, old-world feel */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures the button stays at the bottom */
    flex-grow: 1; /* Ensures boxes grow equally to fill available space */
}
}


.mp-h2,
.mp-h2,
body.skin-timeless .mp-h2 { /* Timeless needs a higher specificity */
.skin-timeless .mp-h2 {
border: 1px solid #aaa; /* all colors overriden on specific elements in @media screen */
    border: 1px solid #D4C5A0; /* Softer, lighter border */
margin: 0.5em 0;
    margin: 0.5em 0;
padding: 0.2em 0.4em;
    padding: 0.4em 0.6em;
font-size: 120%;
    font-size: 120%;
font-weight: bold;
    font-weight: bold;
font-family: inherit;
    color: #4F3C28; /* Dark brown for contrast */
    background-color: #E9DAC1; /* Softer, luminous gold */
}
}


/* Less prominent text */
.mp-later {
.mp-later {
font-size: 85%;
    font-size: 85%;
font-weight: normal;
    font-weight: normal;
    color: #705D4E; /* Softer, warm brown for minor text */
}
}


/* Welcome text at the top */
#mp-welcomecount {
#mp-welcomecount {
text-align: center;
    text-align: center;
margin: 0.4em;
    margin: 0.4em;
}
}


#mp-welcome {
#mp-welcome {
font-size: 162%;
text-align: center;
padding: 0.1em;
    font-size: 162%;
    padding: 0.1em;
    color: #4F3C28; /* Dark brown for welcome text */
}
}


#mp-welcome h1,
#mp-welcome h1,
#mp-welcome .mw-heading1 {
#mp-welcome .mw-heading1 {
font-size: inherit;
    font-size: inherit;
font-family: inherit;
    font-family: inherit;
display: inline;
    display: inline;
border: none;
    border: none;
}
}


#mp-free {
#mp-free {
font-size: 95%;
    font-size: 95%;
    color: #4F3C28; /* Darker, neutral brown */
}
}


#articlecount {
#articlecount {
font-size: 85%;
    font-size: 85%;
    color: #705D4E; /* Softer warm brown */
}
}


/* clear fix */
/* Clear floats */
.mp-contains-float::after {
.mp-contains-float::after {
content: "";
    content: "";
display: block;
    display: block;
clear: both;
    clear: both;
}
 
/* Flexbox for layout on larger screens */
@media (min-width: 875px) {
    #mp-upper {
        display: flex;
        justify-content: space-between;
        align-items: stretch; /* Makes sure the boxes stretch to the same height */
    }
 
    #mp-left {
        flex: 1 1 55%;
        margin-right: 2px;
    }
   
    #mp-right {
        flex: 1 1 45%;
        margin-left: 2px;
    }
}
 
/* Color scheme for specific sections */
@media screen {
    #mp-topbanner {
        background-color: #f9f6f0; /* Light parchment background */
        border-color: #D4C5A0; /* Soft, warm border */
    }
   
    #mp-banner {
        background-color: #E9DAC1; /* Luminous gold background */
        border-color: #B0915A; /* Regal gold border */
    }
   
    #mp-left {
        background-color: #F4ECE3; /* Light cream for left column */
        border-color: #D4C5A0; /* Soft neutral border */
    }
   
    #mp-left .mp-h2 {
        background-color: #E9DAC1; /* Soft gold background */
        border-color: #D4C5A0; /* Warm neutral border */
        padding-left: 10px;
        border: 2px solid #D4C5A0;
        margin: 0.5em 0;
        font-size: 120%;
        font-weight: bold;
        color: #4F3C28; /* Dark brown text */
    }
   
    #mp-right {
        background-color: #F4E1E8; /* Soft pink for an enchanted look */
        border-color: #D4C5A0; /* Softer border */
    }
   
    #mp-right .mp-h2 {
        background-color: #D6B6E6; /* Muted lavender for a soft, magical feel */
        border-color: #804093; /* Darker purple for contrast */
        padding-left: 10px;
        border: 2px solid #D4C5A0;
        margin: 0.5em 0;
        font-size: 120%;
        font-weight: bold;
        color: #4F3C28; /* Dark brown */
    }
   
    #mp-middle {
        background-color: #F7EFE3;
        border-color: #B0915A;
    }
   
    #mp-middle .mp-h2 {
        background-color: #E9DAC1; /* Light parchment with contrast */
        border-color: #B0915A;
    }
   
    #mp-lower {
        background-color: #F3E6F7; /* Pale lavender for lower section */
        border-color: #B591D3; /* Subtle lavender */
    }
   
    #mp-lower .mp-h2 {
        background-color: #D6B6E6; /* Richer lavender for headings */
        border-color: #7F3B93; /* Darker purple */
        padding-left: 10px;
        border: 2px solid #D4C5A0;
        margin: 0.5em 0;
        font-size: 120%;
        font-weight: bold;
        color: #4F3C28; /* Dark brown for readability */
    }
   
    #mp-bottom {
        border-color: #D4C5A0; /* Neutral border for the bottom */
    }
   
    #mp-bottom .mp-h2 {
        background-color: #F0E6D8;
        border-color: #B09D84;
    }
}
 
/* Dark mode color scheme */
html.skin-theme-clientpref-night #mp-topbanner {
    background-color: #23282A;
    border-color: #5F5348;
}
 
html.skin-theme-clientpref-night #mp-banner {
    background-color: #5F3B63;
    border-color: #87638F;
}
 
html.skin-theme-clientpref-night #mp-left {
    background-color: #23342F;
    border-color: #2E573B;
}
 
html.skin-theme-clientpref-night #mp-left .mp-h2 {
    background-color: #2E573B;
    border-color: #416B51;
}
 
html.skin-theme-clientpref-night #mp-right {
    background-color: #362337;
    border-color: #7A497F;
}
}


@media (max-width: 875px) {
html.skin-theme-clientpref-night #mp-right .mp-h2 {
/* We need to improve Template:POTD as used on the main page so that these
    background-color: #7A497F;
* hacks aren't necessary */
    border-color: #9F65A4;
#mp-tfp table,
}
#mp-tfp tr,
#mp-tfp td,
#mp-tfp tbody {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}


#mp-tfp tr:first-child td:first-child a.mw-file-description {
html.skin-theme-clientpref-night #mp-middle {
text-align: center;
    background-color: #4F3B31;
display: table;
    border-color: #75413D;
margin: 0 auto;
}
}
}


@media (min-width: 875px) {
html.skin-theme-clientpref-night #mp-lower {
#mp-upper {
    background-color: #362744;
display: flex;
    border-color: #6A578D;
}
#mp-left {
flex: 1 1 55%;
margin-right: 2px;
}
#mp-right {
flex: 1 1 45%;
margin-left: 2px;
}
}
}


@media screen {
html.skin-theme-clientpref-night #mp-bottom {
#mp-topbanner {
    border-color: #5F5348;
background-color: #f9f9f9;
}
border-color: #ddd;
}
#mp-banner {
background-color: #fffaf5;
border-color: #f2e0ce;
}
#mp-left {
background-color: #f5fffa;
border-color: #cef2e0;
}
#mp-left .mp-h2 {
background-color: #cef2e0;
border-color: #a3bfb1;
}
#mp-right {
background-color: #f5faff;
border-color: #cedff2;
}
#mp-right .mp-h2 {
background-color: #cedff2;
border-color: #a3b0bf;
}
#mp-middle {
background-color: #fff5fa;
border-color: #f2cedd;
}
#mp-middle .mp-h2 {
background-color: #f2cedd;
border-color: #bfa3af;
}
#mp-lower {
background-color: #faf5ff;
border-color: #ddcef2;
}
#mp-lower .mp-h2 {
background-color: #ddcef2;
border-color: #afa3bf;
}
#mp-bottom {
/* no background */
border-color: #e2e2e2;
}
#mp-bottom .mp-h2 {
background-color: #eee;
border-color: #ddd;
}


/* night mode */
html.skin-theme-clientpref-night #mp-bottom .mp-h2 {
html.skin-theme-clientpref-night #mp-topbanner {
    background-color: #4B423D;
background-color: #171a1d;
    border-color: #7F5F53;
border-color: #676767;
}
html.skin-theme-clientpref-night #mp-banner {
background-color: #431107;
border-color: #663428;
}
html.skin-theme-clientpref-night #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
html.skin-theme-clientpref-night #mp-left .mp-h2 {
background-color: #104437;
border-color: #2f4d41;
}
html.skin-theme-clientpref-night #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
html.skin-theme-clientpref-night #mp-right .mp-h2 {
background-color: #082849;
border-color: #a3b0bf;
}
html.skin-theme-clientpref-night #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
html.skin-theme-clientpref-night #mp-middle .mp-h2 {
background-color: #882c43;
border-color: #926c80;
}
html.skin-theme-clientpref-night #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
html.skin-theme-clientpref-night #mp-lower .mp-h2 {
background-color: #7545ab;
border-color: #afa3bf;
}
html.skin-theme-clientpref-night #mp-bottom {
/* no background */
border-color: #676767;
}
html.skin-theme-clientpref-night #mp-bottom .mp-h2 {
background-color: #3d3d3d;
border-color: #676767;
}
}
}


/* OS night mode */
/* Styling for Explore more button */
@media screen and ( prefers-color-scheme: dark ) {
.explore-more {
html.skin-theme-clientpref-os #mp-topbanner {
    margin-top: auto; /* Pushes the button to the bottom */
background-color: #171a1d;
    display: flex;
border-color: #676767;
    justify-content: center;
}
html.skin-theme-clientpref-os #mp-banner {
background-color: #431107;
border-color: #663428;
}
html.skin-theme-clientpref-os #mp-left {
background-color: #0b1e1c;
border-color: #104437;
}
html.skin-theme-clientpref-os #mp-left .mp-h2 {
background-color: #104437;
border-color: #2f4d41;
}
html.skin-theme-clientpref-os #mp-right {
background-color: #0d1a27;
border-color: #082849;
}
html.skin-theme-clientpref-os #mp-right .mp-h2 {
background-color: #082849;
border-color: #a3b0bf;
}
html.skin-theme-clientpref-os #mp-middle {
background-color: #270e1a;
border-color: #882c43;
}
html.skin-theme-clientpref-os #mp-middle .mp-h2 {
background-color: #882c43;
border-color: #926c80;
}
html.skin-theme-clientpref-os #mp-lower {
background-color: #130e20;
border-color: #7545ab;
}
html.skin-theme-clientpref-os #mp-lower .mp-h2 {
background-color: #7545ab;
border-color: #afa3bf;
}
html.skin-theme-clientpref-os #mp-bottom {
/* no background */
border-color: #676767;
}
html.skin-theme-clientpref-os #mp-bottom .mp-h2 {
background-color: #3d3d3d;
border-color: #676767;
}
}
}


/* Style for "Read the full article" link */
.explore-more p a {
.read-more a {
     font-size: 1.2em;
     font-size: 1.2em; /* Larger text */
     font-weight: bold;
     font-weight: bold; /* Bold text */
     color: #5a3b91; /* Rich purple */
     color: #0645ad; /* Wikipedia link blue */
     text-decoration: none;
     text-decoration: none; /* Remove underline */
     padding: 10px 15px;
     padding: 10px 15px; /* Add padding */
     background-color: #dab4e3; /* Soft magical lavender background */
     background-color: #f0f8ff; /* Light blue background */
     border: 2px solid #804093; /* Darker purple border */
     border: 2px solid #0645ad; /* Blue border */
     border-radius: 10px; /* Pronounced rounded corners */
     border-radius: 5px; /* Rounded corners */
     display: inline-block;
     display: inline-block; /* Display as block */
     text-align: center;
     text-align: center; /* Center the text */
     transition: background-color 0.3s, color 0.3s;
     transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover */
}
}


.read-more a:hover {
.explore-more p a:hover {
     background-color: #0645ad; /* Darker blue on hover */
     background-color: #804093; /* Darker magical purple on hover */
     color: #ffffff; /* White text on hover */
     color: #ffffff; /* White text on hover */
}
}


/* Style for "Explore More" link */
/* Featured picture container styling */
.explore-more p {
#mp-tfp {
     font-size: 1.2em; /* Larger text */
     border: 1px solid #8F7A66;
    font-weight: bold; /* Bold text */
     padding: 10px;
    color: #0645ad; /* Wikipedia link blue */
     border-radius: 5px;
    text-decoration: none; /* Remove underline */
     background-color: #F3E6F7;
     padding: 10px 15px; /* Add padding */
     text-align: center;
    background-color: #f0f8ff; /* Light blue background */
    border: 2px solid #0645ad; /* Blue border */
     border-radius: 5px; /* Rounded corners */
     display: inline-block; /* Display as block */
     text-align: center; /* Center the text */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover */
}
}


.explore-more p:hover {
/* Featured caption styling */
     background-color: #0645ad; /* Darker blue on hover */
.featured-caption {
     color: #ffffff; /* White text on hover */
    margin-top: 10px;
     font-size: 0.9em;
    color: #4F3C28;
    text-align: center;
    font-style: italic;
}
 
/* Ensure layout stays in two columns */
@media (min-width: 875px) {
    #mp-upper {
        display: flex;
        justify-content: space-between;
    }
}
 
/* Specific styling for Read More button */
.read-more {
    margin-top: auto; /* Pushes the button to the bottom */
    display: flex;
    justify-content: center;
}
 
.read-more a {
    font-size: 1.2em;
    font-weight: bold;
     color: #4F3C28;
    text-decoration: none;
    padding: 10px 15px;
    background-color: #E9DAC1;
    border: 2px solid  #D4C5A0;
    border-radius: 10px;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}
 
.read-more a:hover {
    background-color: #a89c88;
    color: #FFFFFF;
}
}
Retrieved from "http://casaorestes.com/Adaris:Main_Page/styles.css"