Module:Gallery/styles.css and Module:Gallery/sandbox/styles.css: Difference between pages
(Difference between pages)
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: | ||
/* |
/* */ |
||
@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: |
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); |
||
} |
} |
||