MediaWiki

Difference between revisions of "Common.css"
(add a rule related to the 1M recordings sitenotice for responsiveness)
 
(72 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
/* CSS placed here will be applied to all skins */
+
.mwe-rw-core {
 +
    flex-direction: unset;
 +
}
 +
/*HOW TO INTEGRATE NEW CSS:
 +
1) Testing new css idea : use your inspector and test around ;
 +
2) Submit a pull request to github's LinguaLibre skin (or ask someone on the chatroom to do so): 
 +
https://github.com/lingua-libre/BlueLL/blob/master/assets/stylesheets/main.css
 +
 
 +
DO NOT PUT RANDOM CSS CODE INHERE
 +
*/
 +
 
 +
/********************************************** */
 +
/* QUERYVIZ  ******************************* */
 +
.queryviz-toggle { display: none; }
 +
.queryviz-loading { border: 1px solid grey; }
 +
/********************************************** */
 +
/* REDIRECTS ******************************* */
 +
#mwe-rw-steps, #mwe-rw-main{ padding: 0;}
 +
/********************************************** */
 +
/* CITATIONS ******************************* */
 +
code{
 +
background: #FFFFFF66;
 +
    font-size: 80%;
 +
    border: 1px solid #AAA;
 +
    border-radius: 3px;
 +
    padding: .15em;
 +
} /*test */
  
−
/* Hide Main Page titles */
+
pre {
−
body.page-Main_Page h2.title,
+
font-family: monospace;
−
body.page-Main_Page h3#tagline,
+
padding: .3em .3em .3em 1em;
−
body.page-Main_Page_de h2.title,
+
margin: 1em 0 1em 1em;
−
body.page-Main_Page_de h3#tagline,
+
border: 1px solid #CCC;
−
body.page-Main_Page_de-formal h2.title,
+
border-left: 3px solid #CCC ;
−
body.page-Main_Page_de-formal h3#tagline,
 
−
body.page-Main_Page_zh-hans h2.title,
 
−
body.page-Main_Page_zh-hans h3#tagline {
 
−
    display:none;
 
 
}
 
}
  
−
h3#tagline {
+
/* Wikimedia Commons image's template with better style */
−
     display: inline;
+
.commons-file-information-table {
−
     font-size: 0.85em;
+
     border: 1px solid #a2a9b1;
−
     font-weight: normal;
+
     background-color: #f8f9fa;
−
     font-style: normal;
+
     padding: 5px;
 +
     font-size: 95%;
 
}
 
}
  
−
/* Custom Foreground menubar colors to go with WikiApiary theme */
+
/********************************************** */
−
.top-bar,
+
/*SOUND LIBRARY *************************** */
−
.top-bar .title-area,
+
/* Interface for displaying contributions on [[LinguaLibre:Explore the sound library]] */
−
.top-bar.expanded .title-area,
+
#sndlib-totalContainer {
−
.top-bar .name h1 a,
+
display: flex;
−
.top-bar-section ul,
+
justify-content: space-between;
−
.top-bar-section ul li.active > a,
+
padding: 0 1em;
−
.top-bar-section li a:not(.button),
+
}
−
.top-bar-section .has-form,
+
#sndlib-savefiltersearch {
−
.top-bar-section .dropdown li.title h5 a {
+
color: gray;
−
  background: #FFE4B2;
 
−
  color: #000000;
 
 
}
 
}
−
 
+
#sndlib-savefiltersearch a {
−
.top-bar .toggle-topbar.menu-icon,
+
color: white;
−
.top-bar .toggle-topbar.menu-icon a {
 
−
    color: #000000;
 
 
}
 
}
−
 
+
#sndlib-filterContainer {
−
.top-bar-section > ul > .divider,
+
margin-top: 3em;
−
.top-bar-section > ul > [role="separator"] {
 
−
  border-color: #FFE4B2;
 
 
}
 
}
−
 
+
#sndlib-filterContainer > p:first-child {
−
/* Darker color for the hover over items */
+
display: flex;
−
.top-bar-section ul li.hover > a,
+
flex-direction: column;
−
.top-bar-section ul li ul.dropdown li.hover > a{
+
margin: 20px 5px;
−
    background: #FFAE00;
 
 
}
 
}
−
 
+
#sndlib-buttonsContainer p {
−
/* Slightly darker color for the dropdowns */
+
display: flex;
−
.top-bar-section ul li ul.dropdown li > a {
+
flex-direction: row;
−
    background: #FFD88C;
+
justify-content: space-evenly;
 
}
 
}
−
 
+
#sndlib-buttonsContainer + p {
−
/* Extension Babel */
+
text-align: center;
−
.mw-babel-wrapper {
 
−
    border: 1px solid #FFA500 !important;
 
 
}
 
}
−
 
+
#sndlib-audioresults {
−
.mw-babel-box table {
+
display: grid;
−
margin-bottom: 0px;
+
grid-template-columns: 1fr 1fr;
 
}
 
}
−
 
+
@media (max-width: 1100px) {
−
/* Extension Translate */
+
#sndlib-audioresults {
−
.mw-pt-languages-label {
+
display: grid;
−
    background: none repeat scroll 0 0 #FFF;
+
grid-template-columns: 1fr;
−
    border-right: 1px solid #DDD;
+
}
 
}
 
}
−
 
+
@media (max-width: 750px) {
−
.mw-pt-languages {
+
#sndlib-totalContainer {
−
    background: none repeat scroll 0 0 #FFF;
+
flex-direction: column;
−
    border: 1px solid #DDD;
+
align-items: center;
−
    color: #2795b6;
+
}
 
}
 
}
−
 
+
.audiobox {
−
.panel {
+
margin-right: 12px;
−
    background: none repeat scroll 0 0 #FFF;
 
 
}
 
}
−
 
+
#sndlib-totalContainer h2 {
−
.tux-message-editor textarea {
+
text-align: center;
−
width: 100%;
 
 
}
 
}
−
 
+
#sndlib-audioPages {
−
.ext-cc-language-selector__trigger,
+
display: flex;
−
.ext-cc-language-selector__trigger:after {
+
justify-content: flex-start;
−
    color: #ffa500;
 
 
}
 
}
−
 
+
#sndlib-audioPages a {
−
table tr.even,
+
margin-right: 0.5em;
−
table tr.alt,
 
−
table tr:nth-of-type(2n) {
 
−
    background: none;
 
 
}
 
}
 +
img[alt="1M recordings"] { width: 100% !important; height: auto !important; }

Latest revision as of 21:58, 6 October 2023

.mwe-rw-core {
    flex-direction: unset;
}
/*HOW TO INTEGRATE NEW CSS:
1) Testing new css idea : use your inspector and test around ;
2) Submit a pull request to github's LinguaLibre skin (or ask someone on the chatroom to do so):  
https://github.com/lingua-libre/BlueLL/blob/master/assets/stylesheets/main.css

DO NOT PUT RANDOM CSS CODE INHERE
*/

/********************************************** */
/* QUERYVIZ  ******************************* */
.queryviz-toggle { display: none; }
.queryviz-loading { border: 1px solid grey; } 
/********************************************** */
/* REDIRECTS ******************************* */
#mwe-rw-steps, #mwe-rw-main{ padding: 0;}
/********************************************** */
/* CITATIONS ******************************* */
code{ 
	background: #FFFFFF66;
    font-size: 80%;
    border: 1px solid #AAA;
    border-radius: 3px; 
    padding: .15em;
} /*test */

pre {
	font-family: monospace;
	padding: .3em .3em .3em 1em;
	margin: 1em 0 1em 1em;
	border: 1px solid #CCC;
	border-left: 3px solid #CCC ;
}

/* Wikimedia Commons image's template with better style */
 .commons-file-information-table {
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    padding: 5px;
    font-size: 95%;
}

/********************************************** */
/*SOUND LIBRARY *************************** */
/* Interface for displaying contributions on [[LinguaLibre:Explore the sound library]] */
#sndlib-totalContainer {
	display: flex;
	justify-content: space-between;
	padding: 0 1em;
}
#sndlib-savefiltersearch {
	color: gray;
}
#sndlib-savefiltersearch a {
	color: white;
}
#sndlib-filterContainer {
	margin-top: 3em;
}
#sndlib-filterContainer > p:first-child {
	display: flex;
	flex-direction: column;
	margin: 20px 5px;
}
#sndlib-buttonsContainer p {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}
#sndlib-buttonsContainer + p {
	text-align: center;
}
#sndlib-audioresults {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
@media (max-width: 1100px) {
	#sndlib-audioresults {
		display: grid;
		grid-template-columns: 1fr;
	}
}
@media (max-width: 750px) {
	#sndlib-totalContainer {
		flex-direction: column;
		align-items: center;
	}
}
.audiobox {
	margin-right: 12px;
}
#sndlib-totalContainer h2 {
	text-align: center;
}
#sndlib-audioPages {
	display: flex;
	justify-content: flex-start;
}
#sndlib-audioPages a {
	margin-right: 0.5em;
}
img[alt="1M recordings"] { width: 100% !important; height: auto !important; }
Retrieved from "https://lingualibre.org/index.php?title=MediaWiki:Common.css&oldid=1098591"