Difference between revisions of "MediaWiki:Mobile.css"
(44 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* CSS placed here will affect users of the mobile site */ | /* CSS placed here will affect users of the mobile site */ | ||
/*==============================================================================*/ | /*==============================================================================*/ | ||
− | |||
− | . | + | /* from common.css, not commented but existing |
− | + | --------------------------------------------------------------------------------*/ | |
− | |||
− | + | /* | |
− | + | <pre> | |
+ | */ | ||
− | .mw-parser-output a.external:link { color: # | + | .first { background-color:#00FFFF; } |
− | .mw-parser-output a.external:visited { color: # | + | .second { background-color:#CCFF66; } |
+ | .third { background-color:#FF6FCF; } | ||
+ | .fourth { background-color:#FFFF66; } | ||
+ | .cmd { font-family:monospace; } | ||
+ | .annot { font-family:sans-serif; margin-top:1cm; } | ||
+ | .large { font-size: 24pt; } | ||
+ | |||
+ | span.minor { | ||
+ | font-style:italic; | ||
+ | font-weight:normal; | ||
+ | } | ||
+ | |||
+ | #googleSearch { | ||
+ | width: 10.9em; | ||
+ | margin: 0; | ||
+ | font-size: 95%; | ||
+ | } | ||
+ | |||
+ | #search_string { | ||
+ | width: 10.9em; | ||
+ | margin: 0; | ||
+ | font-size: 95%; | ||
+ | } | ||
+ | |||
+ | #bodyContent a[href ^="javascript:"] { | ||
+ | background: none; | ||
+ | padding: 0px; | ||
+ | text-decoration: none ; | ||
+ | } | ||
+ | |||
+ | /* pg: new markup <texcode>..</texcode> */ | ||
+ | /* th: colors adjusted to be closer to standard hans' usage */ | ||
+ | |||
+ | pre.tex { color:#000000; } | ||
+ | pre span.cs { color:#007F00; } | ||
+ | pre span.def { color:#00007F; } | ||
+ | pre span.comment { color:#7F7F00; } | ||
+ | pre span.br { color:#7F0000; } | ||
+ | |||
+ | pre.xml { color:#000000; } | ||
+ | pre span.name { color:#3366BB; } | ||
+ | |||
+ | /* | ||
+ | </pre> | ||
+ | */ | ||
+ | |||
+ | |||
+ | |||
+ | /* TWEAKS OF THE DEFAULTS | ||
+ | --------------------------------------------------------------------------------*/ | ||
+ | |||
+ | |||
+ | .mw-body-content h1 { margin-top: 0.7em; padding-top: 0.2rem; padding-left: 0.5rem; margin-bottom: 0.5em; border-left: solid 4px #872222; border-bottom: solid 1px #872222; } | ||
+ | |||
+ | .mw-content-text h2 { margin-top: 0.75em; padding-top: 0px; margin-bottom: 0.5em;} | ||
+ | .mw-content-text h3 { margin-top: 0.75em; padding-top: 0px; margin-bottom: 0.5em;} | ||
+ | |||
+ | .mw-content-text ul { margin-top: 0.75em; padding-top: 0.5em; margin-bottom: 0.5em; padding-bottom: 0.5em;} | ||
+ | .mw-content-text dl { margin-top: 0.75em; padding-top: 0.5em; margin-bottom: 0.5em; padding-bottom: 0.5em;} | ||
+ | .mw-content-text li ul { margin-top: 0px; padding-top: 0px; margin-bottom: 0.px; padding-bottom: 0.px;} | ||
+ | .mw-content-text dt dl { margin-top: 0px; padding-top: 0px; margin-bottom: 0.px; padding-bottom: 0.px;} | ||
+ | |||
+ | .mw-parser-output a.external:link { color: #872222; text-decoration: none;} | ||
+ | .mw-parser-output a.external:visited { color: #872222; text-decoration: none;} | ||
.mw-parser-output a.external:hover { color: #36b; text-decoration: none;} | .mw-parser-output a.external:hover { color: #36b; text-decoration: none;} | ||
− | .mw-parser-output a.external:active { color: # | + | .mw-parser-output a.external:active { color: #872222; text-decoration: none;} |
− | .mw-panel a:link { color: # | + | .mw-parser-output a.extiw:link { color: #872222; text-decoration: none;} |
− | .mw-panel a:visited { color: # | + | .mw-parser-output a.extiw:visited { color: #872222; text-decoration: none;} |
+ | .mw-parser-output a.extiw:hover { color: #36b; text-decoration: none;} | ||
+ | .mw-parser-output a.extiw:active { color: #872222; text-decoration: none;} | ||
+ | |||
+ | .mw-panel a:link { color: #872222; text-decoration: none;} | ||
+ | .mw-panel a:visited { color: #872222; text-decoration: none;} | ||
.mw-panel a:hover { color: #36b; text-decoration: none;} | .mw-panel a:hover { color: #36b; text-decoration: none;} | ||
− | .mw-panel a:active { color: # | + | .mw-panel a:active { color: #872222; text-decoration: none;} |
− | a:link { color: # | + | a:link { color: #872222; text-decoration: none;} |
− | a:visited { color: # | + | a:visited { color: #872222; text-decoration: none;} |
− | a:hover { color: #36b; text-decoration: none;} | + | a:hover { color: #36b; text-decoration: none;} |
− | a:active { color: # | + | a:active { color: #872222; text-decoration: none;} |
+ | a.external:link { color: #872222; text-decoration: none;} | ||
+ | a.external:visited { color: #872222; text-decoration: none;} | ||
+ | a.external:hover { color: #36b; text-decoration: none;} | ||
+ | a.external:active { color: #872222; text-decoration: none;} | ||
− | + | ||
− | /* | + | a.new:link { color: red; text-decoration: none;} |
+ | a.new:visited { color: red; text-decoration: none;} | ||
+ | a.new:hover { color: red; text-decoration: none;} | ||
+ | a.new:active { color: red; text-decoration: none;} | ||
+ | |||
+ | /* For update of WelcomePage2020.05.25 | ||
+ | --------------------------------------------------------------------------------*/ | ||
body.page-Main_Page h1.firstHeading { border-style: none; color:rgba(0,0,0,0); } | body.page-Main_Page h1.firstHeading { border-style: none; color:rgba(0,0,0,0); } | ||
Line 36: | Line 113: | ||
grid-template-columns: repeat(auto-fit, 100px); | grid-template-columns: repeat(auto-fit, 100px); | ||
grid-gap: 0.8rem; | grid-gap: 0.8rem; | ||
− | justify-content: space- | + | justify-content: space-evenly; |
list-style: none; | list-style: none; | ||
padding: 0rem; | padding: 0rem; | ||
Line 47: | Line 124: | ||
#WelcRework > li { | #WelcRework > li { | ||
text-align:center; | text-align:center; | ||
− | background-color: # | + | background-color: #eeeee4 ; |
box-shadow: 0px 8px 8px gray; | box-shadow: 0px 8px 8px gray; | ||
− | border- | + | border-bottom: solid 4px #872222; |
height: stretch; | height: stretch; | ||
height: 150px; | height: 150px; | ||
} | } | ||
− | + | ||
− | /* DOWNLOAD PAGE | + | /* DOWNLOAD PAGE |
+ | --------------------------------------------------------------------------------*/ | ||
#DownloadRework { | #DownloadRework { | ||
Line 61: | Line 139: | ||
grid-template-columns: repeat(auto-fill, 140px); | grid-template-columns: repeat(auto-fill, 140px); | ||
grid-gap: 1.5rem; | grid-gap: 1.5rem; | ||
− | justify-content: | + | justify-content: center; |
list-style: none; | list-style: none; | ||
padding: 0rem; | padding: 0rem; | ||
Line 71: | Line 149: | ||
#DownloadRework > li { | #DownloadRework > li { | ||
text-align:left; | text-align:left; | ||
− | background-color: # | + | background-color: #eeeee4 ; |
box-shadow: 0px 8px 8px gray; | box-shadow: 0px 8px 8px gray; | ||
− | + | border-bottom: solid 4px #872222; | |
− | border- | ||
padding: 0.25rem; | padding: 0.25rem; | ||
} | } | ||
Line 91: | Line 168: | ||
} | } | ||
+ | /* MANUALS PAGE (with javascript filter) | ||
+ | --------------------------------------------------------------------------------*/ | ||
− | |||
− | |||
− | |||
− | |||
− | |||
ul.filter-links { | ul.filter-links { | ||
list-style: none; | list-style: none; | ||
display: grid; | display: grid; | ||
− | grid-template-columns: | + | grid-template-columns: 110px 110px 110px ; |
− | grid-gap: 0. | + | grid-gap: 0.4rem 0.4rem; |
justify-content: center; | justify-content: center; | ||
overflow: hidden; | overflow: hidden; | ||
Line 113: | Line 187: | ||
background-color: #f6f6f6; | background-color: #f6f6f6; | ||
text-align:center; | text-align:center; | ||
− | font-size: | + | font-size: 65%; |
padding: 0.1rem 0.1rem; | padding: 0.1rem 0.1rem; | ||
margin: 0; | margin: 0; | ||
border-radius: 8px; | border-radius: 8px; | ||
− | border: solid 2px # | + | border: solid 2px #872222; |
} | } | ||
Line 123: | Line 197: | ||
list-style: none; | list-style: none; | ||
display: grid; | display: grid; | ||
− | grid-template-columns: repeat(auto-fit, | + | grid-template-columns: repeat(auto-fit, 100px); |
− | grid-gap: | + | grid-gap: 0.8rem; |
justify-content: space-evenly; | justify-content: space-evenly; | ||
+ | font-size: 80%; | ||
overflow: hidden; | overflow: hidden; | ||
− | padding: | + | padding: 0rem; |
margin: 0; | margin: 0; | ||
} | } | ||
Line 135: | Line 210: | ||
display: none; | display: none; | ||
text-align:center; | text-align:center; | ||
− | background-color: # | + | background-color: #eeeee4 ; |
box-shadow: 0px 8px 8px gray; | box-shadow: 0px 8px 8px gray; | ||
height: stretch; | height: stretch; | ||
− | border- | + | border-bottom: solid 4px #872222; |
} | } | ||
− | |||
− | |||
− | |||
.view { | .view { | ||
Line 153: | Line 225: | ||
border-radius:100%; | border-radius:100%; | ||
} | } | ||
+ | } | ||
+ | |||
+ | /*==============================================================================*/ | ||
+ | /* TWO and THREE COMLUMNS LISTS */ | ||
+ | |||
+ | div.mw-body-content { max-width: 60em; margin: 0 auto;} | ||
+ | |||
+ | ul.ColumnsUnderLevel1 { | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(auto-fit, minmax(15em, 29em)); | ||
+ | grid-gap: 1.9em; | ||
+ | justify-content: space-between; | ||
+ | list-style: none; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | ul.TwoColumnsHighlight { | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(auto-fit, minmax(15em, 29em)); | ||
+ | grid-gap: 1.9em; | ||
+ | justify-content: space-between; | ||
+ | list-style: none; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | ul.ThreeColumnsHighlight { | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(auto-fit, minmax(15em, 19em)); | ||
+ | grid-gap: 1.4em; | ||
+ | justify-content: space-between; | ||
+ | list-style: none; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | li.ColumnsHighlight { | ||
+ | height:stretch; | ||
+ | padding: 10px; | ||
+ | background-color: #eeeee4; | ||
+ | box-shadow: 0px 5px 8px rgba(0,0,0,.25); | ||
+ | border-bottom: solid 4px #872222; | ||
+ | } | ||
+ | |||
+ | /*==============================================================================*/ | ||
+ | /* COLOR NABOX */ | ||
+ | |||
+ | ul.Navbox { | ||
+ | display: grid; | ||
+ | grid-template-columns: repeat(2, 9.5em); | ||
+ | grid-gap:0.5em; | ||
+ | justify-content: space-evenly; | ||
+ | list-style: none; | ||
+ | padding: 0rem; | ||
+ | margin: 0; | ||
+ | margin-top: 1em; | ||
+ | } | ||
+ | |||
+ | ul.Navbox > li { | ||
+ | padding: 0rem; | ||
+ | margin: 0rem; | ||
+ | background-color: #f6f6f6; | ||
+ | font-size:80%; | ||
+ | } | ||
+ | |||
+ | ul.Navbox > li > ul { | ||
+ | padding: 0rem; | ||
+ | margin: 0rem; | ||
+ | padding-left: 0.5em; | ||
+ | margin: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | ul.Navbox > li > ul > li { | ||
+ | padding: 0rem; | ||
+ | margin: 0rem; | ||
} | } |
Latest revision as of 11:26, 8 January 2021
/* CSS placed here will affect users of the mobile site */ /*==============================================================================*/ /* from common.css, not commented but existing --------------------------------------------------------------------------------*/ /* <pre> */ .first { background-color:#00FFFF; } .second { background-color:#CCFF66; } .third { background-color:#FF6FCF; } .fourth { background-color:#FFFF66; } .cmd { font-family:monospace; } .annot { font-family:sans-serif; margin-top:1cm; } .large { font-size: 24pt; } span.minor { font-style:italic; font-weight:normal; } #googleSearch { width: 10.9em; margin: 0; font-size: 95%; } #search_string { width: 10.9em; margin: 0; font-size: 95%; } #bodyContent a[href ^="javascript:"] { background: none; padding: 0px; text-decoration: none ; } /* pg: new markup <texcode>..</texcode> */ /* th: colors adjusted to be closer to standard hans' usage */ pre.tex { color:#000000; } pre span.cs { color:#007F00; } pre span.def { color:#00007F; } pre span.comment { color:#7F7F00; } pre span.br { color:#7F0000; } pre.xml { color:#000000; } pre span.name { color:#3366BB; } /* </pre> */ /* TWEAKS OF THE DEFAULTS --------------------------------------------------------------------------------*/ .mw-body-content h1 { margin-top: 0.7em; padding-top: 0.2rem; padding-left: 0.5rem; margin-bottom: 0.5em; border-left: solid 4px #872222; border-bottom: solid 1px #872222; } .mw-content-text h2 { margin-top: 0.75em; padding-top: 0px; margin-bottom: 0.5em;} .mw-content-text h3 { margin-top: 0.75em; padding-top: 0px; margin-bottom: 0.5em;} .mw-content-text ul { margin-top: 0.75em; padding-top: 0.5em; margin-bottom: 0.5em; padding-bottom: 0.5em;} .mw-content-text dl { margin-top: 0.75em; padding-top: 0.5em; margin-bottom: 0.5em; padding-bottom: 0.5em;} .mw-content-text li ul { margin-top: 0px; padding-top: 0px; margin-bottom: 0.px; padding-bottom: 0.px;} .mw-content-text dt dl { margin-top: 0px; padding-top: 0px; margin-bottom: 0.px; padding-bottom: 0.px;} .mw-parser-output a.external:link { color: #872222; text-decoration: none;} .mw-parser-output a.external:visited { color: #872222; text-decoration: none;} .mw-parser-output a.external:hover { color: #36b; text-decoration: none;} .mw-parser-output a.external:active { color: #872222; text-decoration: none;} .mw-parser-output a.extiw:link { color: #872222; text-decoration: none;} .mw-parser-output a.extiw:visited { color: #872222; text-decoration: none;} .mw-parser-output a.extiw:hover { color: #36b; text-decoration: none;} .mw-parser-output a.extiw:active { color: #872222; text-decoration: none;} .mw-panel a:link { color: #872222; text-decoration: none;} .mw-panel a:visited { color: #872222; text-decoration: none;} .mw-panel a:hover { color: #36b; text-decoration: none;} .mw-panel a:active { color: #872222; text-decoration: none;} a:link { color: #872222; text-decoration: none;} a:visited { color: #872222; text-decoration: none;} a:hover { color: #36b; text-decoration: none;} a:active { color: #872222; text-decoration: none;} a.external:link { color: #872222; text-decoration: none;} a.external:visited { color: #872222; text-decoration: none;} a.external:hover { color: #36b; text-decoration: none;} a.external:active { color: #872222; text-decoration: none;} a.new:link { color: red; text-decoration: none;} a.new:visited { color: red; text-decoration: none;} a.new:hover { color: red; text-decoration: none;} a.new:active { color: red; text-decoration: none;} /* For update of WelcomePage2020.05.25 --------------------------------------------------------------------------------*/ body.page-Main_Page h1.firstHeading { border-style: none; color:rgba(0,0,0,0); } h1.firstHeading { border-style: none;} #WelcRework { display: grid; grid-template-columns: repeat(auto-fit, 100px); grid-gap: 0.8rem; justify-content: space-evenly; list-style: none; padding: 0rem; padding-top: 1rem; margin: 0; text-align:center; height: stretch; } #WelcRework > li { text-align:center; background-color: #eeeee4 ; box-shadow: 0px 8px 8px gray; border-bottom: solid 4px #872222; height: stretch; height: 150px; } /* DOWNLOAD PAGE --------------------------------------------------------------------------------*/ #DownloadRework { display: grid; grid-template-columns: repeat(auto-fill, 140px); grid-gap: 1.5rem; justify-content: center; list-style: none; padding: 0rem; margin: 0; list-style-type: none; height: stretch; } #DownloadRework > li { text-align:left; background-color: #eeeee4 ; box-shadow: 0px 8px 8px gray; border-bottom: solid 4px #872222; padding: 0.25rem; } #DownloadRework > li> h3 { padding: 0px 0.25rem; margin:0px; } #DownloadRework > li> ul { padding: 0px 0.5rem; } #DownloadRework > li> ul > li { padding: 0px; margin: 0px; } /* MANUALS PAGE (with javascript filter) --------------------------------------------------------------------------------*/ ul.filter-links { list-style: none; display: grid; grid-template-columns: 110px 110px 110px ; grid-gap: 0.4rem 0.4rem; justify-content: center; overflow: hidden; padding: 1rem 0px; margin: 0; width: 100%; } .filter-links li { height: stretch; background-color: #f6f6f6; text-align:center; font-size: 65%; padding: 0.1rem 0.1rem; margin: 0; border-radius: 8px; border: solid 2px #872222; } ul.filter-sections { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, 100px); grid-gap: 0.8rem; justify-content: space-evenly; font-size: 80%; overflow: hidden; padding: 0rem; margin: 0; } ul.filter-sections li { opacity: 0; display: none; text-align:center; background-color: #eeeee4 ; box-shadow: 0px 8px 8px gray; height: stretch; border-bottom: solid 4px #872222; } .view { display: block !important; opacity: 1 !important; } @keyframes selected { 0% { border-radius:100%; } } /*==============================================================================*/ /* TWO and THREE COMLUMNS LISTS */ div.mw-body-content { max-width: 60em; margin: 0 auto;} ul.ColumnsUnderLevel1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 29em)); grid-gap: 1.9em; justify-content: space-between; list-style: none; padding: 0px; margin: 0px; } ul.TwoColumnsHighlight { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 29em)); grid-gap: 1.9em; justify-content: space-between; list-style: none; padding: 0px; margin: 0px; } ul.ThreeColumnsHighlight { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 19em)); grid-gap: 1.4em; justify-content: space-between; list-style: none; padding: 0px; margin: 0px; } li.ColumnsHighlight { height:stretch; padding: 10px; background-color: #eeeee4; box-shadow: 0px 5px 8px rgba(0,0,0,.25); border-bottom: solid 4px #872222; } /*==============================================================================*/ /* COLOR NABOX */ ul.Navbox { display: grid; grid-template-columns: repeat(2, 9.5em); grid-gap:0.5em; justify-content: space-evenly; list-style: none; padding: 0rem; margin: 0; margin-top: 1em; } ul.Navbox > li { padding: 0rem; margin: 0rem; background-color: #f6f6f6; font-size:80%; } ul.Navbox > li > ul { padding: 0rem; margin: 0rem; padding-left: 0.5em; margin: 0; list-style: none; } ul.Navbox > li > ul > li { padding: 0rem; margin: 0rem; }