MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Limit max image width to its container size.
 * a.k.a. 'responsive images'
 */
.res-img img {
	max-width: 100%;
	height: auto;
}
.full-img img {
  width: 100%;
  height: auto;
}

/* Hide Extension:Translate automatic generated language selector
 * menu from tranlated pages. This function is supersede by
 * _manual_ creation of interwiki links on translated pages.
 * (DGG, 20231130)
 */
.mw-pt-translate-header {
   display: none;
}
.mw-pt-languages {
   display: none;
}

/* Forces Extension:ApprovedRevs info messages displayed on pages
 * to appear on a new line.
 * (DGG, 20231130)
 */
span.approvedAndLatestMsg {
   display: block;
}

/* Get bullet list in a single line
 * (DGG, 20230214)
 */
div.listsingleline li {
  display: inline-block;
}
div.listsingleline li:first-child:before{
  content: "";
}
div.listsingleline li:before {
  content: " | ";
}

/* Default styles for wider screens */
.glossalab-news-container {
    display: flex;
    gap: 2%;          /* Keep the gap */
    width: 100%;
}

.glossalab-news-column {
    flex: 1;          /* Equal width columns */
}

/* glossaLAB infobox */
.gl-infobox {
    /* Floating properties */
    float: right; /* Makes the box float to the right */
    clear: right; /* Ensures nothing floats next to it on the right */
    margin: 0.5em 0 0.5em 1em; /* Top, Right, Bottom, Left margin (adjusting left margin for text spacing) */

    /* Responsive sizing for desktop */
    width: 22em; /* Fixed width for desktop when floating */
    max-width: 90%; /* Allows it to shrink if the screen is smaller than 280px */
    
    /* Standard infobox appearance */
    border: 1px solid #aaa;
    background-color: #f9f9f9;
    color: black;
    font-size: 0.9em;
    line-height: 1.4;
    text-align: left;
    box-sizing: border-box; /* Ensures padding and border are included in the width */
}

.gl-infobox-header {
    background-color: #eee;
    font-weight: bold;
    text-align: center;
    padding: 8px 5px;
    border-bottom: 1px solid #aaa;
}

.gl-infobox-row, .gl-infobox-firstrow {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #eee;
    padding: 0.2em 0;
}

.glossariumBITri .gl-infobox-firstrow .gl-infobox-value {
  background-image: url('/w/images/2/20/GB-icon.svg');
  background-size: contain; /* Adjusts the image size to cover the entire element */
  background-position: right 0.3em center; /* Centers the image within the element */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  min-height: 3em;
}

.gl-infobox-row:last-of-type {
    border-bottom: none;
}

.gl-infobox-label {
    flex-basis: 40%;
    flex-shrink: 0;
    padding: 0.2em 0.4em;
    font-weight: bold;
    text-align: right;
    background-color: #f2f2f2;
    box-sizing: border-box;
}

.gl-infobox-value {
    flex-grow: 1;
    padding: 0.2em 0.4em;
    box-sizing: border-box;
}

/* Media query for narrower screens */
@media (max-width: 768px) {  /* Adjust 768px as needed */
    .glossalab-news-container {
        flex-direction: column;  /* Stack columns vertically */
        gap: 1em; /* Optional: Adjust gap for single-column view */
    }
	.glossalab-news-column {
        width: auto;
    }
    
    .gl-infobox {
        float: none; /* Remove float on small screens */
        clear: both; /* Clear any previous floats to ensure it takes full width */
        width: 95%; /* Wider on small screens */
        max-width: none; /* Remove max-width constraint */
        margin: 0.5em auto; /* Center the infobox horizontally */
    }

    .gl-infobox-row {
        flex-direction: column; /* Stack label and value vertically */
        padding: 0;
    }

    .gl-infobox-label {
        flex-basis: auto;
        text-align: left;
        border-bottom: 1px solid #eee;
        background-color: transparent;
        padding-bottom: 0.1em;
    }

    .gl-infobox-value {
        padding-top: 0.1em;
    }
    
	.glossariumBITri .gl-infobox-firstrow .gl-infobox-value {
    	background-image: none;
    	min-height: initial;
	}
}