MediaWiki:Common.css: Unterschied zwischen den Versionen
Aus MediaWiki
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung Markierung: Zurückgesetzt |
||
Zeile 2: | Zeile 2: | ||
.page-Hauptseite #firstHeading { display: none; } | .page-Hauptseite #firstHeading { display: none; } | ||
/* Fancy "read more" links on article teasers */ | |||
a.article-more-link { | |||
color: #f00; | |||
padding: 13px 20px 0 20px; | |||
font-size:22px; | |||
position: relative; | |||
z-index: 0; | |||
width: 200px; | |||
height: 50px; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
&::before { | |||
content: ''; | |||
position: absolute; | |||
z-index: -2; | |||
left: -50%; | |||
top: -160%; | |||
width: 200%; | |||
height: 400%; | |||
opacity: 0.3; | |||
background-color: #f00; | |||
background-repeat: no-repeat; | |||
background-size: 50% 50%, 50% 50%; | |||
} | |||
&::after { | |||
content: ''; | |||
position: absolute; | |||
z-index: -1; | |||
left: 6px; | |||
top: 6px; | |||
width: calc(100% - 12px); | |||
height: calc(100% - 12px); | |||
background: white; | |||
border-radius: 5px; | |||
} | |||
} | |||
a.article-more-link:hover { | |||
&::before { | |||
opacity: 1; | |||
background-position: 0 0, 100% 0, 100% 100%, 0 100%; | |||
background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); | |||
animation: rotate 4s linear infinite; | |||
} | |||
&::after { | |||
animation: opacityChange 3s infinite alternate; | |||
} | |||
} | |||
@keyframes rotate { | |||
100% { | |||
transform: rotate(1turn); | |||
} | |||
} | |||
@keyframes opacityChange { | |||
50% { | |||
opacity: .4; | |||
} | |||
100% { | |||
opacity: .8; | |||
} | |||
} |
Version vom 22. November 2024, 13:42 Uhr
/* Das folgende CSS wird für alle Benutzeroberflächen geladen. */ .page-Hauptseite #firstHeading { display: none; } /* Fancy "read more" links on article teasers */ a.article-more-link { color: #f00; padding: 13px 20px 0 20px; font-size:22px; position: relative; z-index: 0; width: 200px; height: 50px; border-radius: 10px; overflow: hidden; &::before { content: ''; position: absolute; z-index: -2; left: -50%; top: -160%; width: 200%; height: 400%; opacity: 0.3; background-color: #f00; background-repeat: no-repeat; background-size: 50% 50%, 50% 50%; } &::after { content: ''; position: absolute; z-index: -1; left: 6px; top: 6px; width: calc(100% - 12px); height: calc(100% - 12px); background: white; border-radius: 5px; } } a.article-more-link:hover { &::before { opacity: 1; background-position: 0 0, 100% 0, 100% 100%, 0 100%; background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5); animation: rotate 4s linear infinite; } &::after { animation: opacityChange 3s infinite alternate; } } @keyframes rotate { 100% { transform: rotate(1turn); } } @keyframes opacityChange { 50% { opacity: .4; } 100% { opacity: .8; } }