|
|
| വരി 241: |
വരി 241: |
| end | | end |
| | | |
| -- Add responsive CSS
| | return tostring(container) |
| local css = mw.html.create('style')
| |
| :wikitext([[
| |
| .responsive-gallery-container {
| |
| margin: 1em 0;
| |
| clear: both;
| |
| }
| |
| | |
| .responsive-gallery-box {
| |
| box-sizing: border-box;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .gallery-images {
| |
| width: 100%;
| |
| }
| |
| | |
| .gallery-item {
| |
| margin: 2px;
| |
| transition: transform 0.2s ease;
| |
| }
| |
| | |
| .gallery-item:hover {
| |
| transform: scale(1.02);
| |
| }
| |
| | |
| .gallery-image-wrapper {
| |
| line-height: 0;
| |
| }
| |
| | |
| .gallery-image-wrapper img {
| |
| max-width: 100%;
| |
| height: auto;
| |
| }
| |
| | |
| .gallery-caption {
| |
| word-wrap: break-word;
| |
| overflow-wrap: break-word;
| |
| }
| |
| | |
| /* Mobile responsive adjustments */
| |
| @media (max-width: 768px) {
| |
| .responsive-gallery-container {
| |
| float: none !important;
| |
| margin: 1em 0 !important;
| |
| width: 100% !important;
| |
| }
| |
|
| |
| .gallery-horizontal {
| |
| flex-direction: column !important;
| |
| align-items: center;
| |
| }
| |
|
| |
| .gallery-item {
| |
| max-width: 100% !important;
| |
| }
| |
|
| |
| .gallery-image-wrapper img {
| |
| max-width: 100% !important;
| |
| height: auto !important;
| |
| }
| |
| }
| |
| | |
| @media (max-width: 480px) {
| |
| .responsive-gallery-box {
| |
| padding: 4px !important;
| |
| }
| |
|
| |
| .gallery-header,
| |
| .gallery-footer {
| |
| padding: 6px !important;
| |
| font-size: 90% !important;
| |
| }
| |
|
| |
| .gallery-caption {
| |
| font-size: 85% !important;
| |
| padding: 3px 1px !important;
| |
| }
| |
|
| |
| .gallery-item {
| |
| margin: 1px !important;
| |
| }
| |
| }
| |
| ]])
| |
|
| |
| return tostring(css) .. tostring(container) | |
| end | | end |
|
| |
|
| return p | | return p |
