Template:Gallery/styles.css

/* Cargo temp fix */
table.dataTable {
    display: inline-block;
    overflow: auto;
}

table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td {
    width: var(--width-layout);
}

/* Cargo Table css */

table.dataTable {
    border-radius: var(--border-radius--medium);
    border: none;
}

table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled {
    background: transparent;
    padding: 6px 10px;
}

/* 
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top-color: var(--border-color-base);
}

table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: transparent;
}

table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: transparent;
}

table.dataTable tbody tr {
    background-color: transparent;
}

tr.even:hover, tr.odd:hover {
    background-color:var(--background-color-quiet--hover) !important;
}

table.dataTable, table.dataTable th, table.dataTable td {
    text-align: left;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: var(--color-base--subtle);
    font-weight: 500;
}

 table.dataTable tbody th, table.dataTable tbody td {
    padding: 6px 10px;
}
*/

/* table border top and bottom
table.dataTable tfoot th, table.dataTable tfoot td {
    display: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--color-base--subtle);
}

table.dataTable thead th, table.dataTable thead td {
    padding: 5px 10px;
}
*/

/* input box margin fix
.dataTables_wrapper .dataTables_filter input {
    margin-bottom: 8px;
}*/

/* button page
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #ededed9e;
    border-radius: 4px;
    border: none;
}

input, select, textarea {
    padding: 5px;
    border-radius: var(--border-radius--medium);
}*/

/* DS */
.ds li.gallerybox {
    max-width: 240px !important;
}

.ds li.gallerybox div.thumb {
    min-height: 360px;
    display: flex;
    align-items: center;
    background: var(--color-surface-3);
}

.dshalf li.gallerybox {
    max-width: 240px !important;
}

.dshalf li.gallerybox div.thumb {
    min-height: 180px;
    display: flex;
    background: var(--color-surface-3);
}

.base li.gallerybox div.thumb {
    align-items: baseline;
}

.end li.gallerybox div.thumb {
    align-items: end;
}

/* 3DS */
.tds li.gallerybox {
    max-width: 240px !important;
}

/* table  */
ul.gallery.gallery.gallery {
    text-align: center;
    padding-left: 10px;
}

li.gallerybox{
    position: relative;
    border-radius: 8px;
    margin: 0px 5px 40px 5px;
    background: var(--color-surface-2);
    max-width: 260px;
    padding: 0px 0px 10px 0px;
    box-shadow: 0 2.8px 2.2px #2e32380d,0 6.7px 5.3px #2e32380d,0 12.5px 10px #2e32380d,0 20.3px 15.9px #2e32380d;
}
/*    box-shadow: 0 2.8px 2.2px #2e32380d, 0 6.7px 5.3px #2e32380d, 0 12.5px 10px #2e32380d, 0px 18px 17.9px #2e32380d, 0px 25px 33.4px #2e32380d;*/
li.gallerybox div.thumb {
   margin: 0px;
   border-radius: 8px 8px 0px 0px;
   background: var(--color-surface-3);
}

li.gallerybox div.thumb img {
    opacity: 0.95;
    background: var(--color-surface-3);
    border-radius: inherit;
}

div.gallerytext {
    font-size: small;
}

div.gallerytext > pre {
    margin-top: -24px !important;
    margin-bottom: -15px !important;
    font-family: inherit;
    color: #808080cf;
    border: none;
    overflow: hidden;
    font-size: inherit;
    background: none;
    text-overflow: ellipsis;
}

div.gallerytext p {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   padding: 4px 8px 8px 4px;
}

/* fix the boxes arr */
.pc2 li.gallerybox div.thumb img {
    max-width: 258px;
    object-fit: scale-down;
    height: 195px;
}

/* box center */
.pc2 ul.mw-gallery-nolines li.gallerybox div.thumb {
    display: flex;
    align-items: center;
    background: var(--color-surface-3);
    border: 1px solid var(--color-surface-3);
}


@media screen and (min-width: 1160px) {
    .gallery {
        text-align: left !important;
    }
}