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;
}
}