Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
| (22 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* CSS placed here will be applied to all skins */ | /* CSS placed here will be applied to all skins */ | ||
<style> | <style> | ||
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap'); | ||
body { | body { | ||
font-family: 'Montserrat', sans-serif; | font-family: 'Montserrat', sans-serif; | ||
width: | } | ||
#content body { | |||
max-width: 70ch; | |||
} | |||
#content a { | |||
font-weight: bold; | |||
} | } | ||
| Line 14: | Line 21: | ||
font-family: 'Montserrat', sans-serif; | font-family: 'Montserrat', sans-serif; | ||
} | } | ||
h1, | |||
h2 { | |||
font-weight: bold; | |||
} | |||
/* Tooltip container */ | |||
.tooltip { | |||
position: relative; | |||
display: inline-block; | |||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ | |||
} | |||
/* Tooltip text */ | |||
.tooltip .tooltiptext { | |||
visibility: hidden; | |||
width: 120px; | |||
background-color: #555; | |||
color: #fff; | |||
text-align: center; | |||
padding: 5px 0; | |||
border-radius: 6px; | |||
/* Position the tooltip text */ | |||
position: absolute; | |||
z-index: 1; | |||
bottom: 125%; | |||
left: 50%; | |||
margin-left: -60px; | |||
/* Fade in tooltip */ | |||
opacity: 0; | |||
transition: opacity 0.3s; | |||
} | |||
/* Tooltip arrow */ | |||
.tooltip .tooltiptext::after { | |||
content: ""; | |||
position: absolute; | |||
top: 100%; | |||
left: 50%; | |||
margin-left: -5px; | |||
border-width: 5px; | |||
border-style: solid; | |||
border-color: #555 transparent transparent transparent; | |||
} | |||
/* Show the tooltip text when you mouse over the tooltip container */ | |||
.tooltip:hover .tooltiptext { | |||
visibility: visible; | |||
opacity: 1; | |||
} | |||
</style> | </style> | ||
Latest revision as of 05:10, 9 February 2021
/* CSS placed here will be applied to all skins */
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
}
#content body {
max-width: 70ch;
}
#content a {
font-weight: bold;
}
#content h1,
#content h2,
#content h3,
#content h4 {
font-family: 'Montserrat', sans-serif;
}
h1,
h2 {
font-weight: bold;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>