Difference between revisions of "MediaWiki:Common.css"
From Conceptual Reconstructionism Project
Thaumasnot (talk | contribs) |
Thaumasnot (talk | contribs) Tag: Manual revert |
||
(28 intermediate revisions by the same user not shown) | |||
Line 12: | Line 12: | ||
} | } | ||
#footer-poweredbyico { | #footer-poweredbyico, .mw-redirectedfrom { | ||
display: none; | display: none; | ||
} | } | ||
Line 31: | Line 31: | ||
.meta { | .meta { | ||
position: relative; | position: relative; | ||
display: inline-block; | |||
font-style:italic; | font-style:italic; | ||
color: #505050; | color: #505050; | ||
Line 56: | Line 57: | ||
.meta-progress { | .meta-progress { | ||
--gauge-fill: 0; | --gauge-fill: 0; | ||
display: block; | display: inline-block; | ||
position: absolute; | position: absolute; | ||
width: | width: 0; | ||
height: 100%; | height: 100%; | ||
background-color: cornflowerblue; | background-color: cornflowerblue; | ||
opacity: 0%; | opacity: 0%; | ||
border: thin | border: thin dashed darkblue; | ||
transition: opacity, 0.5s | transition: opacity 0.5s ease-out 0s, width 0.5s steps(1) 0s; | ||
} | } | ||
.meta-progress.active { | .meta-progress.active { | ||
width: var(--gauge-fill); | |||
opacity: 35%; | opacity: 35%; | ||
transition: width 0.05s linear 0s; | |||
} | |||
.meta-menu { | |||
display: none; | |||
position: absolute; | |||
background-color: #f1f1f1; | |||
min-width: 160px; | |||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | |||
z-index: 1; | |||
} | |||
.meta-menu > div { | |||
padding: 0.2em 1em; | |||
} | |||
.meta-menu div { | |||
color: black; | |||
font-style: normal; | |||
text-decoration: none; | |||
} | |||
.meta-menu > div:hover { | |||
background-color: #ddd; | |||
cursor: pointer; | |||
} | |||
.meta:hover .meta-menu, | |||
.context-menu-anchor:hover .meta-menu { | |||
display: block; | |||
} | |||
.meta-menu { | |||
font-size: 0.8em; | |||
} | |||
.context-menu-anchor { | |||
display: inline-block; | |||
} | |||
.context-menu-anchor:hover { | |||
cursor: pointer; | |||
} | |||
.broken-ref-link { | |||
background-color: red; | |||
color: white !important; | |||
font-weight: bold; | |||
} | |||
/********************** | |||
Music reconstruction | |||
**********************/ | |||
.audio-player { | |||
position: sticky; | |||
top: 0; | |||
background-color: rgba(255, 255, 255, 0.8); | |||
z-index: 2; | |||
} | |||
.audio-player figure { | |||
display: none; | |||
align-items: center; | |||
margin: 0.2em 0; | |||
} | |||
.audio-player figure.active { | |||
display: flex; | |||
} | |||
.audio-player figcaption { | |||
font-size: 0.65em; | |||
margin: 1em; | |||
} | |||
.audio-player .track-menu { | |||
text-align: center; | |||
} | |||
.audio-player .track-menu div { | |||
display: inline-block; | |||
font-size: 0.6em; | |||
height: 2em; | |||
width: 2em; | |||
border-radius: 50%; | |||
border: 2px solid black; | |||
margin: 0 0.2em; | |||
transition: background-color 0.7s ease-out 0s; | |||
cursor: pointer; | |||
} | |||
.audio-player .track-menu div.selected { | |||
font-size: 0.7em; | |||
font-weight: bold; | |||
color: white; | |||
background-color: black; | |||
} | } |
Latest revision as of 17:58, 16 January 2022
/* CSS placed here will be applied to all skins */ @media only screen and (min-width: 400px) { #bodyContent { margin: 0 auto; width: 70%; } } #p-logo { visibility: hidden; } #footer-poweredbyico, .mw-redirectedfrom { display: none; } .boxed-message { text-align: center; padding: 0 2em; border: 1px solid silver; margin: 1.5em 0; } :target { background-color: deepskyblue; transition: all 1s linear; scroll-margin-top: 150px; } .meta { position: relative; display: inline-block; font-style:italic; color: #505050; } .meta.ref:hover { color: salmon; cursor: pointer; text-decoration: underline; } .meta-def { position: relative; left: -0.1em; font-weight: bold; font-style: italic; font-size: 0.7em; vertical-align: sub; } .meta-def a { color: black; } .meta-progress { --gauge-fill: 0; display: inline-block; position: absolute; width: 0; height: 100%; background-color: cornflowerblue; opacity: 0%; border: thin dashed darkblue; transition: opacity 0.5s ease-out 0s, width 0.5s steps(1) 0s; } .meta-progress.active { width: var(--gauge-fill); opacity: 35%; transition: width 0.05s linear 0s; } .meta-menu { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .meta-menu > div { padding: 0.2em 1em; } .meta-menu div { color: black; font-style: normal; text-decoration: none; } .meta-menu > div:hover { background-color: #ddd; cursor: pointer; } .meta:hover .meta-menu, .context-menu-anchor:hover .meta-menu { display: block; } .meta-menu { font-size: 0.8em; } .context-menu-anchor { display: inline-block; } .context-menu-anchor:hover { cursor: pointer; } .broken-ref-link { background-color: red; color: white !important; font-weight: bold; } /********************** Music reconstruction **********************/ .audio-player { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.8); z-index: 2; } .audio-player figure { display: none; align-items: center; margin: 0.2em 0; } .audio-player figure.active { display: flex; } .audio-player figcaption { font-size: 0.65em; margin: 1em; } .audio-player .track-menu { text-align: center; } .audio-player .track-menu div { display: inline-block; font-size: 0.6em; height: 2em; width: 2em; border-radius: 50%; border: 2px solid black; margin: 0 0.2em; transition: background-color 0.7s ease-out 0s; cursor: pointer; } .audio-player .track-menu div.selected { font-size: 0.7em; font-weight: bold; color: white; background-color: black; }