Amberlynn Wiki

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(107 intermediate revisions by the same user not shown)
Line 3: Line 3:
}
}


.welcome-table {
.current-box {
     margin: 1em 0;             /* From wikitable */
     width: 100%;
     background-color: #f4f4f4; /* From wikitable */
    display: flex;
     border: 1px solid #808080; /* overrides wikitable’s #a2a9b1 */
    overflow: hidden;
     border-collapse: collapse; /* From wikitable */
    text-align: center;
     color: #000;               /* From wikitable */
    gap: 2%; /* Adds 2% margin between text and media */
     width: 100%;               /* addition */
    margin-top: 0;
     table-layout: fixed;       /* addition */
}
 
.current-text {
    border: 1px solid #a2a9b1;
    flex: 0 0 60%;
    text-align: center;
     background-color: #fdf4ff;
    box-sizing: border-box;
    margin-top: 0;
}
 
.current-text-header {
    font-weight: bold;
    font-size: 115%;
    background-color: #eecdf2;
    display: block;
    margin-top: 0;
    padding: 0.2em 0.4em;
    border-top: 1px solid #a2a9b1;
     border-bottom: 1px solid #a2a9b1;
}
 
.current-text-header:first-child {
    margin-top: 0;
    border-top: 0px solid #a2a9b1;
}
 
.current-media {
     border: 1px solid #a2a9b1;
    flex: 0 0 38%;
    text-align: center;
     background-color: #f5fffa;
    box-sizing: border-box;
    margin-top: 0;
}
 
.current-media-header {
    font-weight: bold;
     font-size: 115%;
     background-color: #cef2e0;
    display: block;
    margin-top: 0;
    padding: 0.2em 0.4em;
    border-top: 1px solid #a2a9b1;
    border-bottom: 1px solid #a2a9b1;
}
}


.welcome-table th {
.current-media-header:first-child {
    border: 1px solid #a2a9b1;  /* From wikitable */
     margin-top: 0;
    padding: 0.2em 0.4em;      /* From wikitable */
     border-top: 0px solid #a2a9b1;
    text-align: center;        /* Both wikitable and current */
     font-weight: bold;         /* From wikitable */
     width: 100%;                /* addition */
    display: table-cell;        /* addition */
    font-size: 115%;           /* addition */
}
}


.welcome-table td {
@media screen and (max-width: 768px) {
    border: 0px solid #a2a9b1; /* override wikitable */
    .current-box {
     padding: 0.2em 0.4em;             /* overrides wikitable’s 0.2em 0.4em */
        flex-direction: column;
    vertical-align: top;       /* Your table */
        gap: 0; /* Removes gap in mobile view */
    text-align: center;        /* overrides wikitable’s default */
     }
   
    .current-text {
        width: 100%;
        padding-left: 1%;
        padding-right: 1%;
        padding-bottom: 0;
    }
   
    .current-media {
        width: 100%;
        padding-top: 0;
        padding-left: 1%;
        padding-right: 1%;
        padding-bottom: 0;
    }
   
    .current-text-header,
    .current-media-header {
        margin-left: -1%; /* Adjusted for mobile padding */
        margin-right: -1%;
         padding: 0 1%;
    }
}
}
/* Note: I removed float properties as they're not needed with flexbox */


.eras-table {
.eras-table {
     margin: 1em 0;              /* From wikitable */
     margin: 1em 0;               
     background-color: #f8f9fa;  /* From wikitable */
     background-color: #f8f9fa;   
     border: 1px solid #808080;  /* Your eras-table, overrides wikitable’s #a2a9b1 */
     border: 1px solid #808080;   
     border-collapse: collapse;  /* From wikitable */
     border-collapse: collapse;   
     color: #000;                /* From wikitable */
     color: #000;                 
     width: 100%;                /* Your eras-table */
     width: 100%;                 
     table-layout: fixed;        /* Your eras-table */
     table-layout: fixed;         
}
}


.eras-table th {
.eras-table th {
     background-color: #eecdf2; /* Your eras-table, overrides wikitable’s #eaecf0 */
     background-color: #f2d7c0; /* Changed from #cef2e0 (green) to #f2d7c0 (orange) */
     border: 1px solid #a2a9b1;  /* From wikitable */
     border: 1px solid #a2a9b1;   
     padding: 0.2em 0.4em;      /* From wikitable */
     padding: 0.2em 0.4em;       
     text-align: center;        /* Both wikitable and eras-table */
     text-align: center;         
     font-weight: bold;          /* From wikitable */
     font-weight: bold;           
     width: 100%;                /* Your eras-table */
     width: 100%;                 
     display: table-cell;        /* Your eras-table */
     display: table-cell;         
     font-size: 115%;
     font-size: 115%;
}
}


.eras-table td {
.eras-table td {
     background-color: #fdf4ff; /* Your eras-table, overrides wikitable’s default */
     background-color: #fff3eb; /* Changed from #f5fffa (green) to #fff3eb (orange) */
     border: 1px solid #a2a9b1;  /* From wikitable */
     border: 1px solid #a2a9b1;   
     padding: 10px;              /* Your eras-table, overrides wikitable’s 0.2em 0.4em */
     padding: 10px;               
     vertical-align: top;        /* Your eras-table */
     vertical-align: top;         
     text-align: center;        /* Your eras-table, overrides wikitable’s default */
     text-align: center;         
}
}


Line 64: Line 127:
     width: 100%;
     width: 100%;
     height: auto;
     height: auto;
     display: block;            /* Ensure image behaves as a block for centering */
     display: block;             
     margin: 0 auto;            /* Center the image horizontally */
     margin: 0 auto;             
}
}


@media screen and (max-width: 800px) {
@media screen and (max-width: 768px) {
     .eras-table {
     .eras-table {
         display: block;        /* Switch to block for responsive layout */
         display: block;         
         margin: 1em 0;          /* From wikitable, consistent in media query */
         margin: 1em 0;           
         border-collapse: collapse; /* From wikitable, maintain table integrity */
         border-collapse: collapse;  
     }
     }
     .eras-table thead {
     .eras-table thead {
         display: block;        /* Ensure header stays separate */
         display: block;         
     }
     }
     .eras-table th {
     .eras-table th {
         display: block;        /* Full width block for header */
         display: block;         
         width: 100%;            /* Explicitly full width */
         width: 100%;             
         text-align: center;    /* Maintain centering */
         text-align: center;     
     }
     }
     .eras-table tbody {
     .eras-table tbody {
Line 87: Line 150:
     }
     }
     .eras-table tr {
     .eras-table tr {
         display: contents;      /* Let cells flow into flex */
         display: contents;       
     }
     }
     .eras-table td {
     .eras-table td {
         flex: 0 0 33.333%;    /* 3 columns */
         flex: 0 0 33.333%;     
         box-sizing: border-box;
         box-sizing: border-box;
         text-align: center;    /* Ensure text stays centered in flex layout */
         text-align: center;     
         padding: 10px;          /* Your eras-table padding */
         padding: 10px;           
     }
     }
}
.youtube-responsive {
    position: relative;
    width: 100%;             
    padding-bottom: 56.25%; 
    height: 0;               
    overflow: hidden;       
}
.youtube-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; 
    height: 100% !important;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
    padding-top: 2%;
    max-width: 100%;         
    box-sizing: border-box; 
}
.navbox {
    padding: 0 !important;
}
}
Retrieved from "https://amberlynn.wiki/MediaWiki:Common.css"