Difference between revisions of "MediaWiki:Common.css"
From Shangpa Resource Center
(109 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: | + | 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; | ||
} | } | ||
− | |||
− | |||
.navbar-nav > li { | .navbar-nav > li { | ||
Line 24: | Line 60: | ||
#mw-navigation { | #mw-navigation { | ||
background-color: #7d0711; | background-color: #7d0711; | ||
− | border- | + | 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 | + | -webkit-transition: background-color 400ms linear; |
− | -ms-transition: background-color | + | -ms-transition: background-color 400ms linear; |
− | transition: background-color | + | 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; | ||
} | } | ||
− | /* | + | |
− | # | + | .home_image { |
− | border- | + | width:100%; |
− | border-top-style: solid; | + | height: 200px; |
− | border-top-width: | + | } |
− | + | ||
+ | // 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; | |
− | |||
} | } | ||
− | /* Template Text */ | + | /* ------------------- */ |
+ | /* Templates Text, Person, Place */ | ||
+ | /* ------------------- */ | ||
+ | /* Template Text : le texte */ | ||
.main_text { | .main_text { | ||
− | font-size: | + | 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; | ||
− | + | border: 1px solid #EB807B; | |
− | border: | ||
border-collapse: collapse; | border-collapse: collapse; | ||
− | + | float: right; | |
} | } | ||
Line 80: | 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 94: | Line 217: | ||
} | } | ||
− | .text_left_column { | + | /* Page de type Text, Person, Place: ce div contient le tableau de propriété à gauche */ |
− | flex: | + | div.text_left_column { |
− | + | flex: 20%; | |
margin-right: 10px; | margin-right: 10px; | ||
} | } | ||
− | div.text_left_column | + | /* 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; | ||
margin-left: 10px; | margin-left: 10px; | ||
− | flex: | + | 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; } |
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; }