Jump to content

Module:Gallery/styles.css and Module:Gallery/sandbox/styles.css: Difference between pages

(Difference between pages)
Page 1
Page 2
Content deleted Content added
Uses a flex container to allow align multi-row galleries
 
m Brings some space/tab diffs from the main to the sandbox
 
Line 1: Line 1:
/* {{pp-template}} */
/* */
@media all and (max-width: 720px) {
@media all and (max-width: 720px) {
.mod-gallery {
.mod-gallery-sb {
width: 100% !important;
width: 100% !important;
}
}
}
}


.mod-gallery {
.mod-gallery-sb {
display: table;
display: table;
}
}


.mod-gallery-default {
.mod-gallery-sb-default {
background: transparent;
background: transparent;
margin-top: 4px;
margin-top: 4px;
}
}


.mod-gallery-center {
.mod-gallery-sb-center {
margin-left: auto;
margin-left: auto;
margin-right: auto;
margin-right: auto;
Line 24: Line 24:
*/
*/


.mod-gallery-left {
.mod-gallery-sb-left {
float: left;
float: left;
}
}


.mod-gallery-right {
.mod-gallery-sb-right {
float: right;
float: right;
}
}


.mod-gallery-none {
.mod-gallery-sb-none {
float: none;
float: none;
}
}
Line 39: Line 39:
*/
*/


.mod-gallery-center .gallery {
.mod-gallery-sb-center .gallery {
justify-content: center;
justify-content: center;
}
}


.mod-gallery-left .gallery {
.mod-gallery-sb-left .gallery {
justify-content: left;
justify-content: left;
}
}


.mod-gallery-right .gallery {
.mod-gallery-sb-right .gallery {
justify-content: right;
justify-content: right;
}
}


.mod-gallery-collapsible {
.mod-gallery-sb-collapsible {
width: 100%;
width: 100%;
}
}


.mod-gallery .title,
.mod-gallery-sb .title,
.mod-gallery .main,
.mod-gallery-sb .main,
.mod-gallery .footer {
.mod-gallery-sb .footer {
display: table-row;
display: table-row;
}
}


.mod-gallery .title > div {
.mod-gallery-sb .title > div {
display: table-cell;
display: table-cell;
padding: 0 4px 4px;
padding: 0 4px 4px;
Line 68: Line 68:
}
}


.mod-gallery .main > div {
.mod-gallery-sb .main > div {
display: table-cell;
display: table-cell;
}
}


.mod-gallery .gallery.gallery.gallery {
.mod-gallery-sb .gallery.gallery.gallery {
line-height: 1.35em;
line-height: 1.35em;
display: flex;
display: flex;
Line 79: Line 79:
}
}


.mod-gallery .footer > div {
.mod-gallery-sb .footer > div {
display: table-cell;
display: table-cell;
padding: 4px;
padding: 4px;
text-align: right;
text-align: right;
font-size: 85%;
font-size: 80%;
line-height: 1em;
line-height: 1em;
}
}


.mod-gallery .title > div *,
.mod-gallery-sb .title > div *,
.mod-gallery .footer > div * {
.mod-gallery-sb .footer > div * {
overflow: visible;
overflow: visible;
}
}


.mod-gallery .gallerybox img {
.mod-gallery-sb .gallerybox img {
background: none !important;
background: none !important;
}
}


.mod-gallery .bordered-images .thumb img {
.mod-gallery-sb .bordered-images .thumb img {
outline: solid var(--background-color-neutral,#eaecf0) 1px;
outline: solid var(--background-color-neutral,#eaecf0) 1px;
}
}


.mod-gallery .whitebg .thumb {
.mod-gallery-sb .whitebg .thumb {
background: var( --background-color-base, #fff ) !important;
background: var( --background-color-base, #fff ) !important;
}
}
Line 111: Line 111:
/* As skin-invert-image also invert the border color
/* As skin-invert-image also invert the border color
we have to use a light color to get a darker border */
we have to use a light color to get a darker border */
html.skin-theme-clientpref-night .mod-gallery .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-night .mod-gallery-sb .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-night .skin-invert-image .mod-gallery .whitebg .thumb.thumb.thumb img /* when wrapped around .skin-invert-image */
html.skin-theme-clientpref-night .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img /* when wrapped around .skin-invert-image */
{
{
outline: solid #d7d7d7 1px;
outline: solid #d7d7d7 1px;
Line 118: Line 118:


/* when wrapped around .skin-invert-image */
/* when wrapped around .skin-invert-image */
html.skin-theme-clientpref-night .skin-invert-image .mod-gallery .whitebg .thumb.thumb.thumb img {
html.skin-theme-clientpref-night .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img {
background: none !important;
background: none !important;
}
}


/* white background fallback for darkmode */
/* white background fallback for darkmode */
html.skin-theme-clientpref-night .mod-gallery .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
html.skin-theme-clientpref-night .mod-gallery-sb .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
background: white !important;
background: white !important;
}
}


html.skin-theme-clientpref-night .mod-gallery img[alt*="\200b\200b\200b"] {
html.skin-theme-clientpref-night .mod-gallery-sb img[alt*="\200b\200b\200b"] {
filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
}
Line 136: Line 136:
/* As skin-invert-image also invert the border color
/* As skin-invert-image also invert the border color
we have to use a light color to get a darker border */
we have to use a light color to get a darker border */
html.skin-theme-clientpref-os .mod-gallery .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-os .mod-gallery-sb .bordered-images .thumb img[alt*='\200b\200b\200b'],
html.skin-theme-clientpref-os .skin-invert-image .mod-gallery .whitebg .thumb.thumb.thumb img /* when wrapped around .skin-invert-image */
html.skin-theme-clientpref-os .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img /* when wrapped around .skin-invert-image */
{
{
outline: solid #d7d7d7 1px;
outline: solid #d7d7d7 1px;
Line 143: Line 143:


/* when wrapped around .skin-invert-image */
/* when wrapped around .skin-invert-image */
html.skin-theme-clientpref-os .skin-invert-image .mod-gallery .whitebg .thumb.thumb.thumb img {
html.skin-theme-clientpref-os .skin-invert-image .mod-gallery-sb .whitebg .thumb.thumb.thumb img {
background: none !important;
background: none !important;
}
}


/* white background fallback for darkmode */
/* white background fallback for darkmode */
html.skin-theme-clientpref-os .mod-gallery .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
html.skin-theme-clientpref-os .mod-gallery-sb .whitebg .thumb img:not([alt*='\200b\200b\200b']):not([alt*='\200b\200b\200c']) {
background: white !important;
background: white !important;
}
}


html.skin-theme-clientpref-os .mod-gallery img[alt*="\200b\200b\200b"] {
html.skin-theme-clientpref-os .mod-gallery-sb img[alt*="\200b\200b\200b"] {
filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
}