|
|
| (6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| /* Container für Überschrift+Content-Box */ | | <templatestyles src="Vorlage:Bildrechte/style.css"/> |
| .content-box {
| | <div class="content-box copyright-notice"> |
| position: relative;
| | <div class="box-content"> |
| display: inline-block;
| | <div class="header-container"> |
| margin-bottom: 1.5rem;
| | <div class="symbol-container"> |
| z-index: 1;
| | <div class="symbol">©</div> |
| transition: all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
| | </div> |
| transform-origin: center;
| | <div class="divider"></div> |
| width: 100%;
| | <div class="logo"> |
| max-width: 500px;
| | [[Bild:Maximare Logo.jpg|alt=Logo des Maximare Hamm]] |
| }
| | </div> |
| | | </div> |
| .content-box:hover {
| | <div class="text"> |
| transform: scale(1.01);
| | <p>Dieses Bild ist <span class="highlight-marker">urheberrechtlich geschützt</span> (© [[Maximare]] Erlebnistherme Bad Hamm GmbH) und wurde vom [[Maximare]] ausdrücklich für das HammWiki freigegeben.</p> |
| border-color: rgba(0,0,0,0.12);
| | <p>Bei einer Verwendung dieser Abbildung außerhalb des HammWiki ist unbedingt die Genehmigung des Maximare einzuholen.</p> |
| z-index: 2;
| | </div> |
| }
| | <!-- Details--> |
| | | {{#if:{{{Motiv|}}}{{{Fotograf|}}}{{{Aufnahmedatum|}}}{{{Quelle|}}}{{{Urheber|}}}{{{Pressegrafik|}}}{{{Freigabe|}}}| |
| /* Header-Tab */
| | <div class="details-container"> |
| .box-header {
| | <dl class="details-grid"> |
| position: relative;
| | <!-- Motiv --> |
| width: max-content;
| | {{#if:{{{Motiv|}}}| |
| max-width: 85%;
| | <dt class="detail-label">Motiv</dt> |
| padding: 0.7rem 0.8rem;
| | <dd class="detail-value">{{{Motiv}}}</dd> |
| background: rgba(0,0,0,0.08);
| | |}} |
| border-radius: 6px 6px 0 0;
| | <!-- Fotograf --> |
| margin: 0;
| | {{#if:{{{Fotograf|}}}| |
| margin-bottom: -5px;
| | <dt class="detail-label">Fotograf</dt> |
| }
| | <dd class="detail-value">{{{Fotograf}}}</dd> |
| | | |}} |
| .box-header h2 { | | <!-- Aufnahmedatum --> |
| font-size: 0.9rem;
| | {{#if:{{{Aufnahmedatum|}}}| |
| margin: -2px 0 0 0;
| | <dt class="detail-label">Aufnahmedatum</dt> |
| padding: 0;
| | <dd class="detail-value">{{{Aufnahmedatum}}}</dd> |
| font-weight: bold;
| | |}} |
| border-bottom: 0;
| | <!-- Quelle --> |
| color: #222;
| | {{#if:{{{Quelle|}}}| |
| font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
| | <dt class="detail-label">Quelle</dt> |
| }
| | <dd class="detail-value">{{{Quelle}}}</dd> |
| | | |}} |
| /* Content-Bereich */
| | <!-- Urheber --> |
| .box-content {
| | {{#if:{{{Urheber|}}}| |
| position: relative;
| | <dt class="detail-label">Urheber</dt> |
| background: #fff;
| | <dd class="detail-value">{{{Urheber}}}</dd> |
| padding: 0.8rem 1.4rem 1rem;
| | |}} |
| border: 2px solid rgba(0,0,0,0.08);
| | <!-- Pressegrafik --> |
| border-radius: 6px;
| | {{#if:{{{Pressegrafik|}}}| |
| box-shadow: 0 0.3rem 0.8rem rgba(51,51,51,0.08);
| | <dt class="detail-label">Pressegrafik</dt> |
| } | | <dd class="detail-value">{{{Pressegrafik}}}</dd> |
| | | |}} |
| /* Header-Container mit Symbol und Logo */
| | <!-- Freigabe --> |
| .header-container {
| | {{#if:{{{Freigabe|}}}| |
| display: flex;
| | <dt class="detail-label">Freigabe</dt> |
| align-items: center;
| | <dd class="detail-value">{{{Freigabe}}}</dd> |
| justify-content: center;
| | |}} |
| margin-bottom: 1.5rem;
| | </dl> |
| padding-top: 0.5rem;
| | </div> |
| height: 70px;
| | |}} |
| border-bottom: 1px solid rgba(0,0,0,0.08);
| | <div class="footer"> |
| padding-bottom: 1rem;
| | [https://maximare.com maximare.com] |
| } | | </div> |
| | | </div> |
| /* Symbol-Container */
| | </div> |
| .symbol-container {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: flex-end;
| |
| height: 100%;
| |
| padding-right: 15px;
| |
| } | |
| | |
| /* Copyright-Symbol */
| |
| .symbol {
| |
| font-size: 60px;
| |
| font-weight: bold;
| |
| user-select: none;
| |
| color: rgba(0,0,0,0.3);
| |
| line-height: 1;
| |
| }
| |
| | |
| /* Vertikaler Trennstrich */
| |
| .divider {
| |
| width: 1px;
| |
| height: 60px;
| |
| background-color: rgba(0,0,0,0.15);
| |
| margin: 0;
| |
| } | |
| | |
| /* Logo-Container */
| |
| .logo {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: flex-start;
| |
| height: 100%;
| |
| padding-left: 15px;
| |
| }
| |
| | |
| .logo img {
| |
| max-height: 60px;
| |
| width: auto;
| |
| object-fit: contain;
| |
| border-radius: 6px;
| |
| }
| |
| | |
| /* Bilder */
| |
| .box-content img {
| |
| max-width: 100%;
| |
| } | |
| | |
| /* Hervorhebung */
| |
| .author, .highlight-marker {
| |
| margin: 0 0 0.5rem 0;
| |
| line-height: 1.7;
| |
| border-bottom: 2px solid #80dbfb;
| |
| font-weight: normal;
| |
| } | |
| | |
| /* Links & Highlights */
| |
| .more-link {
| |
| text-align: right;
| |
| width: 100%;
| |
| margin: 1rem 0 0;
| |
| } | |
| | |
| .more-link a {
| |
| width: max-content;
| |
| padding: 0.3rem 0.8rem;
| |
| height: max-content;
| |
| background-color: #f8f9fa;
| |
| border: 1px solid #f8f9fa;
| |
| color: #0b0080;
| |
| border-radius: 4px;
| |
| box-shadow: 0 0 3px #ccc;
| |
| text-align: center;
| |
| line-height: 22px;
| |
| font-size: 0.8rem;
| |
| cursor: pointer;
| |
| transition: all 0.3s;
| |
| display: inline-flex;
| |
| user-select: none;
| |
| touch-action: manipulation;
| |
| white-space: pre;
| |
| }
| |
| | |
| .more-link a:hover {
| |
| background-color: #f0f0f0;
| |
| border-color: #dadce0;
| |
| box-shadow: 0 1px 4px #ccc;
| |
| text-decoration: none;
| |
| } | |
| | |
| /* Spezifische Styles für Copyright-Hinweise */
| |
| .copyright-notice {
| |
| display: block;
| |
| } | |
| | |
| .text {
| |
| margin-bottom: 1rem;
| |
| font-size: 0.9rem;
| |
| line-height: 1.5;
| |
| }
| |
| | |
| .details {
| |
| margin: 1rem 0;
| |
| border-top: 1px solid rgba(0,0,0,0.08);
| |
| padding-top: 1rem;
| |
| } | |
| | |
| .detail-row {
| |
| display: flex;
| |
| justify-content: space-between;
| |
| margin-bottom: 0.5rem;
| |
| } | |
| | |
| .detail-label {
| |
| font-weight: bold;
| |
| }
| |
| | |
| .footer {
| |
| margin-top: 1rem;
| |
| border-top: 1px solid rgba(0,0,0,0.08);
| |
| padding-top: 1rem;
| |
| text-align: right;
| |
| }
| |
| | |
| /* Media Queries */
| |
| @media screen and (max-width: 900px) {
| |
| .box-content {
| |
| padding: 0.8rem 1.2rem;
| |
| }
| |
| } | |
| | |
| @media screen and (max-width: 768px) {
| |
| .box-content {
| |
| display: block;
| |
| width: auto;
| |
| }
| |
| | |
| /* Box-Header bleibt bei Textbreite */
| |
| .box-header {
| |
| max-width: 85%;
| |
| }
| |
| } | |
| | |
| @media screen and (max-width: 480px) {
| |
| .header-container {
| |
| flex-direction: column;
| |
| height: auto;
| |
| padding-top: 0.5rem;
| |
| padding-bottom: 0.5rem;
| |
| }
| |
| | |
| .symbol-container, .logo {
| |
| justify-content: center;
| |
| padding: 0;
| |
| margin: 0.25rem 0;
| |
| }
| |
| | |
| .divider {
| |
| width: 80%;
| |
| height: 1px;
| |
| margin: 0.5rem 0;
| |
| }
| |
| | |
| .detail-row {
| |
| flex-direction: column;
| |
| }
| |
| | |
| .detail-value {
| |
| margin-top: 0.5rem;
| |
| }
| |
| } | |
| | |
| /* Print Styles */ | |
| @media print {
| |
| .box-header,
| |
| .box-content {
| |
| box-shadow: none;
| |
| }
| |
| | |
| .box-content {
| |
| border: 1px solid #000;
| |
| page-break-inside: avoid;
| |
| }
| |
| | |
| a[href]:after {
| |
| content: " (" attr(href) ")";
| |
| color: #444;
| |
| }
| |
| }
| |
Das HammWiki wünscht allen Nutzern ein erfolgreiches und vor allem gesundes Jahr 2026