Template:Gallery/styles.css: Difference between revisions
From TwogPedia
No edit summary |
No edit summary |
||
(16 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.mod-gallery { | .mod-gallery { | ||
width: 100% !important; | |||
display: table; | |||
} | } | ||
.mod-gallery-default { | .mod-gallery-default { | ||
background: transparent; | |||
margin-top: 4px; | |||
} | } | ||
.mod-gallery-center { | .mod-gallery-center { | ||
margin-left: auto; | |||
margin-right: auto; | |||
} | } | ||
.mod-gallery-left { | .mod-gallery-left { | ||
float: left; | |||
} | } | ||
.mod-gallery-right { | .mod-gallery-right { | ||
float: right; | |||
} | } | ||
.mod-gallery-none { | .mod-gallery-none { | ||
float: none; | |||
} | } | ||
.mod-gallery-collapsible { | .mod-gallery-collapsible { | ||
width: 100%; | |||
} | } | ||
.mod-gallery .title, | .mod-gallery .title, | ||
.mod-gallery .main, | .mod-gallery .main, | ||
.mod-gallery .footer { | .mod-gallery .footer { | ||
display: table-row; | |||
} | } | ||
.mod-gallery .title > div { | .mod-gallery .title > div { | ||
display: table-cell; | |||
padding-bottom: 2px; | |||
text-align: center; | |||
font-weight: bold; | |||
} | } | ||
.mod-gallery .main > div { | .mod-gallery .main > div { | ||
display: table-cell; | |||
} | } | ||
.mod-gallery .gallerytext>:not(p) { | .mod-gallery .gallerytext>:not(p) { | ||
margin: .5em 0; | |||
} | } | ||
.mod-gallery .gallerytext>:not(p)+:not(p) { | .mod-gallery .gallerytext>:not(p)+:not(p) { | ||
margin-top: -.5em; | |||
} | } | ||
.mod-gallery .gallerytext { | .mod-gallery .gallerytext { | ||
line-height: 1.375em; | |||
} | } | ||
.mod-gallery .footer > div { | .mod-gallery .footer > div { | ||
display: table-cell; | |||
padding-bottom: 0.5em; | |||
text-align: right; | |||
font-size: 80%; | |||
line-height: 1em; | |||
} | } | ||
.mod-gallery .title > div *, | .mod-gallery .title > div *, | ||
.mod-gallery .footer > div * { | .mod-gallery .footer > div * { | ||
overflow: visible; | |||
} | } | ||
.mod-gallery .gallerybox img { | .mod-gallery .gallerybox img { | ||
background: none !important; | |||
} | } | ||
.mod-gallery .bordered-images .thumb img { | .mod-gallery .bordered-images .thumb img { | ||
outline: solid #eaecf0 1px; | |||
} | } | ||
.mod-gallery .whitebg .thumb { | .mod-gallery .whitebg .thumb { | ||
background: #fff !important; | |||
} | |||
.mw-gallery-slideshow-buttons { | |||
position: absolute; | |||
top: 50%; | |||
left: 0; | |||
right: 0; | |||
transform: translateY(-50%); | |||
display: flex; | |||
justify-content: space-between; | |||
padding-left: 8px; | |||
padding-right: 8px; | |||
width: 100%; | |||
z-index: 10; | |||
} | |||
.mw-gallery-slideshow-buttons > div { | |||
display: flex; | |||
justify-content: space-between; | |||
width: 100%; | |||
} | |||
.mw-gallery-slideshow-buttons .oo-ui-widget { | |||
z-index: 11; | |||
background: transparent; | |||
padding: 12px; | |||
} | |||
.oo-ui-icon-previous, | |||
.oo-ui-icon-next { | |||
background: none !important; | |||
font-size: 0 !important; | |||
padding: 0; | |||
width: 32px; | |||
height: 32px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
.oo-ui-icon-previous::before, | |||
.oo-ui-icon-next::before { | |||
content: ''; | |||
display: block; | |||
width: 24px; | |||
height: 28px; | |||
background-color: #77737A; | |||
border-radius: 2.13px; | |||
clip-path: polygon(100% 0%, 0% 50%, 100% 100%); | |||
} | |||
.oo-ui-icon-next::before { | |||
transform: rotate(180deg); | |||
} | |||
.mw-gallery-slideshow-img-container { | |||
width: 100%; | |||
position: relative; | |||
} | |||
.mw-gallery-slideshow-img-container a.image { | |||
display: block; | |||
width: 100%; | |||
} | } | ||
.mw-gallery-slideshow-img-container img { | .mw-gallery-slideshow-img-container img { | ||
width: 100%; | |||
height: auto; | height: auto; | ||
display: block; | display: block; | ||
border-radius: 12px; | |||
} | |||
div.oo-ui-panelLayout-scrollable { | |||
overflow: hidden !important; | |||
} | |||
ul.gallery.mw-gallery-slideshow { | |||
margin: 1em 0 0 0 !important; | |||
} | |||
/*@media all and (max-width: 720px) {*/ | |||
/* .mod-gallery {*/ | |||
/* width: 100% !important;*/ | |||
/* }*/ | |||
/*}*/ | |||
/*.mod-gallery {*/ | |||
/* display: table;*/ | |||
/*}*/ | |||
/*.mod-gallery-default {*/ | |||
/* background: transparent;*/ | |||
/* margin-top: 4px;*/ | |||
/*}*/ | |||
/*.mod-gallery-center {*/ | |||
/* margin-left: auto;*/ | |||
/* margin-right: auto;*/ | |||
/*}*/ | |||
/*.mod-gallery-left {*/ | |||
/* float: left;*/ | |||
/*}*/ | |||
/*.mod-gallery-right {*/ | |||
/* float: right;*/ | |||
/*}*/ | |||
/*.mod-gallery-none {*/ | |||
/* float: none;*/ | |||
/*}*/ | |||
/*.mod-gallery-collapsible {*/ | |||
/* width: 100%;*/ | |||
/*}*/ | |||
/*.mod-gallery .title,*/ | |||
/*.mod-gallery .main,*/ | |||
/*.mod-gallery .footer {*/ | |||
/* display: table-row;*/ | |||
/*}*/ | |||
/*.mod-gallery .title > div {*/ | |||
/* display: table-cell;*/ | |||
/* padding-bottom: 2px;*/ | |||
/* text-align: center;*/ | |||
/* font-weight: bold;*/ | |||
/*}*/ | |||
/*.mod-gallery .main > div {*/ | |||
/* display: table-cell;*/ | |||
/*}*/ | |||
/*.mod-gallery .gallerytext>:not(p) {*/ | |||
/* margin:.5em 0;*/ | |||
/*}*/ | |||
/*.mod-gallery .gallerytext>:not(p)+:not(p) {*/ | |||
/* margin-top:-.5em;*/ | |||
/*}*/ | |||
/*.mod-gallery .gallerytext {*/ | |||
/* line-height: 1.375em;*/ | |||
/*}*/ | |||
/*.mod-gallery .footer > div {*/ | |||
/* display: table-cell;*/ | |||
/* padding-bottom: 0.5em;*/ | |||
/* text-align: right;*/ | |||
/* font-size: 80%;*/ | |||
/* line-height: 1em;*/ | |||
/*}*/ | |||
/*.mod-gallery .title > div *,*/ | |||
/*.mod-gallery .footer > div * {*/ | |||
/* overflow: visible;*/ | |||
/*}*/ | |||
/*.mod-gallery .gallerybox img {*/ | |||
/* background: none !important;*/ | |||
/*}*/ | |||
/*.mod-gallery .bordered-images .thumb img {*/ | |||
/* outline: solid #eaecf0 1px;*/ | |||
/*}*/ | |||
/*.mod-gallery .whitebg .thumb {*/ | |||
/* background: #fff !important;*/ | |||
/*}*/ | |||
/*.mw-gallery-slideshow-img-container img {*/ | |||
/* max-width: 100%;*/ | |||
/* height: auto;*/ | |||
/* display: block;*/ | |||
/*}*/ | |||
#gallery-localtions-section img { | |||
padding: 6px !important; | |||
} | } | ||
#gallery-localtions-section { | #gallery-localtions-section { | ||
margin-top: 30px; | |||
} | } |
Latest revision as of 00:09, 23 May 2025
.mod-gallery {
width: 100% !important;
display: table;
}
.mod-gallery-default {
background: transparent;
margin-top: 4px;
}
.mod-gallery-center {
margin-left: auto;
margin-right: auto;
}
.mod-gallery-left {
float: left;
}
.mod-gallery-right {
float: right;
}
.mod-gallery-none {
float: none;
}
.mod-gallery-collapsible {
width: 100%;
}
.mod-gallery .title,
.mod-gallery .main,
.mod-gallery .footer {
display: table-row;
}
.mod-gallery .title > div {
display: table-cell;
padding-bottom: 2px;
text-align: center;
font-weight: bold;
}
.mod-gallery .main > div {
display: table-cell;
}
.mod-gallery .gallerytext>:not(p) {
margin: .5em 0;
}
.mod-gallery .gallerytext>:not(p)+:not(p) {
margin-top: -.5em;
}
.mod-gallery .gallerytext {
line-height: 1.375em;
}
.mod-gallery .footer > div {
display: table-cell;
padding-bottom: 0.5em;
text-align: right;
font-size: 80%;
line-height: 1em;
}
.mod-gallery .title > div *,
.mod-gallery .footer > div * {
overflow: visible;
}
.mod-gallery .gallerybox img {
background: none !important;
}
.mod-gallery .bordered-images .thumb img {
outline: solid #eaecf0 1px;
}
.mod-gallery .whitebg .thumb {
background: #fff !important;
}
.mw-gallery-slideshow-buttons {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
padding-left: 8px;
padding-right: 8px;
width: 100%;
z-index: 10;
}
.mw-gallery-slideshow-buttons > div {
display: flex;
justify-content: space-between;
width: 100%;
}
.mw-gallery-slideshow-buttons .oo-ui-widget {
z-index: 11;
background: transparent;
padding: 12px;
}
.oo-ui-icon-previous,
.oo-ui-icon-next {
background: none !important;
font-size: 0 !important;
padding: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.oo-ui-icon-previous::before,
.oo-ui-icon-next::before {
content: '';
display: block;
width: 24px;
height: 28px;
background-color: #77737A;
border-radius: 2.13px;
clip-path: polygon(100% 0%, 0% 50%, 100% 100%);
}
.oo-ui-icon-next::before {
transform: rotate(180deg);
}
.mw-gallery-slideshow-img-container {
width: 100%;
position: relative;
}
.mw-gallery-slideshow-img-container a.image {
display: block;
width: 100%;
}
.mw-gallery-slideshow-img-container img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
div.oo-ui-panelLayout-scrollable {
overflow: hidden !important;
}
ul.gallery.mw-gallery-slideshow {
margin: 1em 0 0 0 !important;
}
/*@media all and (max-width: 720px) {*/
/* .mod-gallery {*/
/* width: 100% !important;*/
/* }*/
/*}*/
/*.mod-gallery {*/
/* display: table;*/
/*}*/
/*.mod-gallery-default {*/
/* background: transparent;*/
/* margin-top: 4px;*/
/*}*/
/*.mod-gallery-center {*/
/* margin-left: auto;*/
/* margin-right: auto;*/
/*}*/
/*.mod-gallery-left {*/
/* float: left;*/
/*}*/
/*.mod-gallery-right {*/
/* float: right;*/
/*}*/
/*.mod-gallery-none {*/
/* float: none;*/
/*}*/
/*.mod-gallery-collapsible {*/
/* width: 100%;*/
/*}*/
/*.mod-gallery .title,*/
/*.mod-gallery .main,*/
/*.mod-gallery .footer {*/
/* display: table-row;*/
/*}*/
/*.mod-gallery .title > div {*/
/* display: table-cell;*/
/* padding-bottom: 2px;*/
/* text-align: center;*/
/* font-weight: bold;*/
/*}*/
/*.mod-gallery .main > div {*/
/* display: table-cell;*/
/*}*/
/*.mod-gallery .gallerytext>:not(p) {*/
/* margin:.5em 0;*/
/*}*/
/*.mod-gallery .gallerytext>:not(p)+:not(p) {*/
/* margin-top:-.5em;*/
/*}*/
/*.mod-gallery .gallerytext {*/
/* line-height: 1.375em;*/
/*}*/
/*.mod-gallery .footer > div {*/
/* display: table-cell;*/
/* padding-bottom: 0.5em;*/
/* text-align: right;*/
/* font-size: 80%;*/
/* line-height: 1em;*/
/*}*/
/*.mod-gallery .title > div *,*/
/*.mod-gallery .footer > div * {*/
/* overflow: visible;*/
/*}*/
/*.mod-gallery .gallerybox img {*/
/* background: none !important;*/
/*}*/
/*.mod-gallery .bordered-images .thumb img {*/
/* outline: solid #eaecf0 1px;*/
/*}*/
/*.mod-gallery .whitebg .thumb {*/
/* background: #fff !important;*/
/*}*/
/*.mw-gallery-slideshow-img-container img {*/
/* max-width: 100%;*/
/* height: auto;*/
/* display: block;*/
/*}*/
#gallery-localtions-section img {
padding: 6px !important;
}
#gallery-localtions-section {
margin-top: 30px;
}
No categories