Difference between revisions of "MediaWiki:Common.css"

From Shangpa Resource Center
 
(119 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 */
 +
 +
@font-face {
 +
font-family: "Tibetan_Machine_Uni";
 +
src: url("https://www.shanpafoundation-resourcecenter.net/resources/assets/Tibetan_Machine_Uni.woff2") format("woff");
 +
}
  
 
@import url('https://fonts.googleapis.com/css?family=Lato');
 
@import url('https://fonts.googleapis.com/css?family=Lato');
Line 5: Line 10:
 
body {
 
body {
 
     font-family: 'Lato', sans-serif;
 
     font-family: 'Lato', sans-serif;
 +
 +
}
 +
 +
p {
 +
    margin: 0.85em 0;
 +
}
 +
 +
/* Si on cache le tire original de la page on remet le style sur la balise h1 */
 +
h1 {
 +
color: #7d0711;
 +
font-size: 32px;
 +
    border-bottom: 1px solid #eeeeee;
 +
    padding-bottom: .2em;
 +
    margin-bottom: .2em;
 
}
 
}
  
 
@media (min-width: 1200px)
 
@media (min-width: 1200px)
 
.container {
 
.container {
     width: 1300px;
+
     width: 90%;
 +
}
 +
 
 +
/* Logo principal en haut */
 +
@media (min-width: 1200px)
 +
#p-logo > a > img {
 +
width: 20%;
 +
padding-left: 40px;
 
}
 
}
  
 +
@media (min-width: 1200px)
 +
#mw-navigation-collapse {
 +
    margin-left: 200px;
 +
}
 +
 +
#p-search {
 +
    padding-left: 5px;
 +
padding-right: 5px;
 +
}
 +
 +
/* Titre H1 des pages */
 
.firstHeading {
 
.firstHeading {
 
color: #7d0711;
 
color: #7d0711;
 +
font-size: 32px;
 
}
 
}
 
#footer-icons, #footer-info { display: none; }
 
  
 
.navbar-nav > li {
 
.navbar-nav > li {
Line 24: Line 60:
 
#mw-navigation {
 
#mw-navigation {
 
     background-color: #7d0711;
 
     background-color: #7d0711;
     border-color: white;
+
    border: none;
 +
     border-radius: 0px;
 
font-variant-caps: small-caps;
 
font-variant-caps: small-caps;
 
}
 
}
Line 30: Line 67:
 
#mw-navigation-collapse > ul > li > a, #mw-navigation-collapse > div > ul > li > a {
 
#mw-navigation-collapse > ul > li > a, #mw-navigation-collapse > div > ul > li > a {
 
color: white;
 
color: white;
-webkit-transition: background-color 200ms linear;
+
-webkit-transition: background-color 400ms linear;
     -ms-transition: background-color 200ms linear;
+
     -ms-transition: background-color 400ms linear;
     transition: background-color 200ms linear;
+
     transition: background-color 400ms linear;
 
}
 
}
 
#mw-navigation-collapse > ul > li > a:hover, #mw-navigation-collapse > div > ul > li > a:hover {
 
#mw-navigation-collapse > ul > li > a:hover, #mw-navigation-collapse > div > ul > li > a:hover {
Line 38: Line 75:
 
background-color: #eb800e;
 
background-color: #eb800e;
 
}
 
}
/* Navigation du bas */
+
 
#p-tb {
+
.home_image {
     border-color: #7d0711;
+
width:100%;
border-top-style: solid;
+
height: 200px;
     border-top-width: 10px;
+
}
background: #ffffff url(/mediawiki-1.30.1/resources/assets/motif-shangpa-foundation-300x298.png) top center repeat scroll;
+
 
 +
// Dans la page "Edit with form", on agrandit le champs qui affiche les liens BDRC
 +
#input_9 {
 +
    width: 100%;
 +
}
 +
 
 +
/* ------------------- */
 +
/* HOME PAGE */
 +
/* ------------------- */
 +
#main_container {
 +
display: flex;
 +
}
 +
 
 +
#main_welcome, #main_contributions{
 +
flex: 35%;
 +
text-align: justify;
 +
    padding: 20px;
 +
padding-bottom:0px;
 +
    margin-right: 30px;
 +
}
 +
 
 +
#main_contents {
 +
padding:20px;
 +
padding-top:0px;
 +
}
 +
 
 +
.main_h2 {
 +
 
 +
}
 +
 
 +
.special-heading-border {
 +
     position: relative;
 +
    overflow: hidden;
 +
}
 +
 
 +
.special-heading-inner-border {
 +
    display: block;
 +
    width: 100%;
 +
    margin-left: 15px;
 +
    border-top-style: solid;
 +
     border-top-width: 1px;
 +
    position: relative;
 +
    top: 50%;
 +
    opacity: 0.15;
 +
    filter: alpha(opacity=15);
 +
}
 +
 
 +
.navbar-brand {
 +
    visibility: hidden;
 +
}
 +
 
 +
/* ------------------- */
 +
/* Templates Topics */
 +
/* ------------------- */
 +
 
 +
.topics_list
 +
{
 +
display: flex;
 +
flex-wrap: wrap;
 +
width: 80%;
 +
}
 +
.topics_list_item
 +
{
 +
flex: 30%;
 +
display:flex;
 +
margin-top: 10px;
 +
margin-bottom: 10px;
 +
}
 +
 
 +
.topics_list_item_image
 +
{
 +
flex: 5%;
 +
text-align: left;
 +
}
 +
 
 +
.topics_list_item_title
 +
{
 +
margin-top: 0;
 +
font-size: 1.5em;
 
}
 
}
  
#p-tb > ul > li > a {
+
.topics_list_item_description
color: #aaaaaa;
+
{
 +
flex: 50%;
 +
margin-left: 10px;
 
}
 
}
  
.home_image {
+
.topic_list_item_tibetan {
  width:100%;
+
  margin-left: 15px;
height: auto;
 
 
}
 
}
  
/* Template Text */
+
/* ------------------- */
 +
/* Templates Text, Person, Place */
 +
/* ------------------- */
 +
/* Template Text : le texte */
 
.main_text {
 
.main_text {
  font-size: 120%;
+
  font-size: 17px;
 
  line-height: 250%;
 
  line-height: 250%;
 
}
 
}
  
 +
/* Tableau affichant les propriétés sur les pages Text, Person, Place */
 
table.text_properties {
 
table.text_properties {
 
     background-color: #fff;
 
     background-color: #fff;
 
     color:  #7D0711;
 
     color:  #7D0711;
    margin: 1em 0;
+
     border: 1px solid #EB807B;
     border: none;
 
 
     border-collapse: collapse;
 
     border-collapse: collapse;
    float: left;
+
float: right;
   
 
    margin-right: 20px;
 
 
}
 
}
  
Line 75: Line 192:
 
background-color: #fff;
 
background-color: #fff;
 
     color: #7D0711;
 
     color: #7D0711;
     text-align: center;
+
     text-align: right;
 
}
 
}
 
table.text_properties > tr > th, table.text_properties > tr > td, table.text_properties > * > tr > th, table.text_properties > * > tr > td {
 
table.text_properties > tr > th, table.text_properties > tr > td, table.text_properties > * > tr > th, table.text_properties > * > tr > td {
Line 82: Line 199:
 
     display: block;
 
     display: block;
 
     text-align: right;
 
     text-align: right;
 +
  padding-right: 20px;
 +
    padding-left: 20px;
 +
padding-top: 5px;
 
}
 
}
  
 +
/* ? */
 
div.smwpre {
 
div.smwpre {
 
font-family: auto;
 
font-family: auto;
Line 96: Line 217:
 
}
 
}
  
.text_left_column {   
+
/* Page de type Text, Person, Place: ce div contient le tableau de propriété à gauche */
float: left;
+
div.text_left_column {   
width: 30%;
+
flex: 20%;
border: 2px solid #EB807B;
 
 
margin-right: 10px;
 
margin-right: 10px;
 
}
 
}
  
div.text_left_column ~ p {
+
/* Colonne de droite, balise p automatiquement rajoutée par MediaWiki pour encadrer le free-text dans les pages Text */
 +
div.text_left_column + p,  div.text_right_column {
 
border: none;
 
border: none;
padding: 10px;
+
margin-left: 10px;
margin: 0px;
+
flex: 80%;
flex: 70%;
+
}
 +
 
 +
h2.h2_person {
 +
margin-top: 5px;
 +
font-size: 20px;
 +
}
 +
 
 +
h3.h3_person {
 +
margin-top: 5px;
 +
margin-bottom: 5px;
 +
font-size: 16px;
 +
text-decoration: underline;
 
}
 
}
 +
/* ------------------- */
 +
/* Persons page */
 +
/* ------------------- */
 +
 +
.person_list_table tr {
 +
border-bottom: 1px solid #ddd;
 +
}
 +
 +
.person_list_table th, .person_list_table td {
 +
padding:5px;
 +
}
 +
 +
div.div_person_list_table {
 +
float: left;
 +
    margin-right: 50px;
 +
}
 +
 +
/* ------------------- */
 +
/* TinyMCE */
 +
/* ------------------- */
 +
/* Mise en forme texte Tibétain. Ajouté également dans le fichier extensiosn/TinyMCE/MW_tinymce.css pour que cette mise en forme soit prise en compte dans l''éditeur aussi. */
 +
.tibetan_small {
 +
font-size: 66%;
 +
vertical-align: super;
 +
}
 +
 +
.mceContentBody span.tibetan_small {
 +
font-size: 66%;
 +
vertical-align: super;
 +
}
 +
/* ------------------- */
 +
/* FOOTER */
 +
/* ------------------- */
 +
/* On cache les footer par défaut, Powered by MediaWiki, etc */
 +
#footer-icons, #footer-info { display: none; }
 +
 +
/* Footer Mediawiki qu'on affiche pas : Special Pages, Upload File, Page History, etc */
 +
#p-tb {
 +
display:none;
 +
    border-color: #7d0711;
 +
border-top-style: solid;
 +
    border-top-width: 10px;
 +
background-color: #ffffff;
 +
}
 +
 +
#p-tb > ul > li > a {
 +
color: #aaaaaa;
 +
}
 +
 +
#footer {
 +
    border-top-style: solid;
 +
    border-top-width: 10px;
 +
    padding: 15px 0 30px 0;
 +
}
 +
 +
.footer_color {
 +
    color: #aaaaaa;
 +
    border-color: #7d0711;
 +
    background: #ffffff url(/resources/assets/motif-shangpa-foundation-300x298.png) top center repeat scroll;
 +
}
 +
 +
@media (min-width: 767px)
 +
.av_one_fourth {
 +
    width: 100%;
 +
}
 +
 +
.av_one_fourth {
 +
    margin-left: 2%;
 +
    width: 23%;
 +
    z-index: 1;
 +
    float: left;
 +
    position: relative;
 +
    min-height: 1px;
 +
}
 +
 +
#footer .widget {
 +
    margin: 0px 0 10px 0;
 +
}
 +
 +
.widgettitle {
 +
    margin-top: 0.85em;
 +
color: #7d0711;
 +
font-weight: 500;
 +
    font-size: 1.4em;
 +
    text-transform: none;
 +
    letter-spacing: normal;
 +
}
 +
 +
.avia-button.avia-size-small {
 +
    padding: 9px 10px 7px;
 +
    font-size: 13px;
 +
    min-width: 80px;
 +
    border-radius: 3px;
 +
    font-size: 12px;
 +
    text-decoration: none;
 +
    border-bottom-style: solid;
 +
    border-bottom-width: 1px;
 +
    margin: 3px 0;
 +
    line-height: 1.2em;
 +
    position: relative;
 +
    font-weight: normal;
 +
    text-align: center;
 +
    max-width: 100%;
 +
}
 +
 +
#footer_image_licence{ float: left; }

Latest revision as of 18:01, 9 June 2019

/* CSS placed here will be applied to all skins */

@font-face {
font-family: "Tibetan_Machine_Uni";
src: url("https://www.shanpafoundation-resourcecenter.net/resources/assets/Tibetan_Machine_Uni.woff2") format("woff");
}

@import url('https://fonts.googleapis.com/css?family=Lato');

body {
    font-family: 'Lato', sans-serif;

}

p {
    margin: 0.85em 0;
}

/* Si on cache le tire original de la page on remet le style sur la balise h1 */
h1 { 
color: #7d0711;
font-size: 32px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: .2em;
    margin-bottom: .2em;
}

@media (min-width: 1200px)
.container {
    width: 90%;
}

/* Logo principal en haut */
@media (min-width: 1200px)
#p-logo > a > img {
width: 20%;
padding-left: 40px;
}

@media (min-width: 1200px)
#mw-navigation-collapse {
    margin-left: 200px;
}

#p-search {
    padding-left: 5px;
padding-right: 5px;
}

/* Titre H1 des pages */
.firstHeading {
color: #7d0711;
font-size: 32px;
}

.navbar-nav > li {
 border-left: solid 1px white;
}

#mw-navigation {
    background-color: #7d0711;
    border: none;
    border-radius: 0px;
font-variant-caps: small-caps;
}

#mw-navigation-collapse > ul > li > a, #mw-navigation-collapse > div > ul > li > a {
color: white;
-webkit-transition: background-color 400ms linear;
    -ms-transition: background-color 400ms linear;
    transition: background-color 400ms linear;
}
#mw-navigation-collapse > ul > li > a:hover, #mw-navigation-collapse > div > ul > li > a:hover {
color: white;
background-color: #eb800e;
}

.home_image {
 width:100%;
height: 200px;
}

// Dans la page "Edit with form", on agrandit le champs qui affiche les liens BDRC
#input_9 {
    width: 100%;
}

/* ------------------- */
/* HOME PAGE */
/* ------------------- */
#main_container {
display: flex;
}

#main_welcome, #main_contributions{
flex: 35%;
text-align: justify;
    padding: 20px;
padding-bottom:0px;
    margin-right: 30px;
}

#main_contents {
padding:20px;
padding-top:0px;
}

.main_h2 {

}

.special-heading-border {
    position: relative;
    overflow: hidden;
}

.special-heading-inner-border {
    display: block;
    width: 100%;
    margin-left: 15px;
    border-top-style: solid;
    border-top-width: 1px;
    position: relative;
    top: 50%;
    opacity: 0.15;
    filter: alpha(opacity=15);
}

.navbar-brand {
    visibility: hidden;
}

/* ------------------- */
/* Templates Topics */
/* ------------------- */

.topics_list
{
display: flex;
flex-wrap: wrap;
width: 80%;
}
.topics_list_item
{
flex: 30%;
display:flex;
margin-top: 10px;
margin-bottom: 10px;
}

.topics_list_item_image
{
flex: 5%;
text-align: left;
}

.topics_list_item_title
{
margin-top: 0;
font-size: 1.5em;
}

.topics_list_item_description
{
flex: 50%;
margin-left: 10px;
}

.topic_list_item_tibetan {
 margin-left: 15px;
}

/* ------------------- */
/* Templates Text, Person, Place */
/* ------------------- */
/* Template Text : le texte */
.main_text {
 font-size: 17px;
 line-height: 250%;
}

/* Tableau affichant les propriétés sur les pages Text, Person, Place */
table.text_properties {
    background-color: #fff;
    color:  #7D0711;
     border: 1px solid #EB807B;
    border-collapse: collapse;
float: right;
}

table.text_properties > * > tr > th {
background-color: #fff;
    color: #7D0711;
    text-align: right;
}
table.text_properties > tr > th, table.text_properties > tr > td, table.text_properties > * > tr > th, table.text_properties > * > tr > td {
    border: none;
    padding: 0.2em 0.4em;
    display: block;
    text-align: right;
   padding-right: 20px;
    padding-left: 20px;
padding-top: 5px;
}

/* ? */
div.smwpre {
font-family: auto;
    padding: 0;
    border: none;
    color: #7D0711;
    background-color: white;
    line-height: 1em;
    word-wrap: break-word;
    word-break: break-word;
    margin-right: auto;
}

/* Page de type Text, Person, Place: ce div contient le tableau de propriété à gauche */
div.text_left_column {  
flex: 20%;
margin-right: 10px;
}

/* Colonne de droite, balise p automatiquement rajoutée par MediaWiki pour encadrer le free-text dans les pages Text */
div.text_left_column + p,  div.text_right_column {
border: none;
margin-left: 10px;
flex: 80%;
}

h2.h2_person {
margin-top: 5px;
font-size: 20px;
}

h3.h3_person {
margin-top: 5px;
margin-bottom: 5px;
font-size: 16px;
text-decoration: underline;
}
/* ------------------- */
/* Persons page */
/* ------------------- */

.person_list_table tr {
border-bottom: 1px solid #ddd;
}

.person_list_table th, .person_list_table td {
padding:5px;
}

div.div_person_list_table {
float: left;
    margin-right: 50px;
}

/* ------------------- */
/* TinyMCE */
/* ------------------- */
/* Mise en forme texte Tibétain. Ajouté également dans le fichier extensiosn/TinyMCE/MW_tinymce.css pour que cette mise en forme soit prise en compte dans l''éditeur aussi. */
.tibetan_small {
font-size: 66%;
vertical-align: super;
}

.mceContentBody span.tibetan_small {
font-size: 66%;
vertical-align: super;
}
/* ------------------- */
/* FOOTER */
/* ------------------- */
/* On cache les footer par défaut, Powered by MediaWiki, etc */
#footer-icons, #footer-info { display: none; }

/* Footer Mediawiki qu'on affiche pas : Special Pages, Upload File, Page History, etc */
#p-tb {
display:none;
    border-color: #7d0711;
border-top-style: solid;
    border-top-width: 10px;
background-color: #ffffff;
}

#p-tb > ul > li > a {
color: #aaaaaa;
}

#footer {
    border-top-style: solid;
    border-top-width: 10px;
    padding: 15px 0 30px 0;
}

.footer_color {
    color: #aaaaaa;
    border-color: #7d0711;
    background: #ffffff url(/resources/assets/motif-shangpa-foundation-300x298.png) top center repeat scroll;
}

@media (min-width: 767px) 
.av_one_fourth {
    width: 100%;
}

.av_one_fourth {
    margin-left: 2%;
    width: 23%;
    z-index: 1;
    float: left;
    position: relative;
    min-height: 1px;
}

#footer .widget {
    margin: 0px 0 10px 0;
}

.widgettitle {
    margin-top: 0.85em;
color: #7d0711;
font-weight: 500;
    font-size: 1.4em;
    text-transform: none;
    letter-spacing: normal;
}

.avia-button.avia-size-small {
    padding: 9px 10px 7px;
    font-size: 13px;
    min-width: 80px;
    border-radius: 3px;
    font-size: 12px;
    text-decoration: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
}

#footer_image_licence{ float: left; }