X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/exercices/modifier.php?a=blobdiff_plain;f=skins%2Fvector%2Fscreen.css;h=e035caa850b5607f3c3708e0a52c4ab1f1462714;hb=a51296817dbeff4aa24d73f6c0465d6219d3beaf;hp=d3ae305213b455decd1e82f9f9e40b70fcc2ceba;hpb=cf82a750884bdfb2ef21ea3cfec1528e9e808efa;p=lhc%2Fweb%2Fwiklou.git diff --git a/skins/vector/screen.css b/skins/vector/screen.css index d3ae305213..e035caa850 100644 --- a/skins/vector/screen.css +++ b/skins/vector/screen.css @@ -1,8 +1,16 @@ /* - * Any rules which should not be flipped automatically in right-to-left situations should be prepended with @noflip in - * a comment block. Images that should be embedded as base64 data-URLs should be prepended with @embed in a comment - * block. + * Any rules which should not be flipped automatically in right-to-left situations should be + * prepended with @noflip in a comment block. Images that should be embedded as base64 data-URLs + * should be prepended with @embed in a comment block. + * + * This style-sheet employs a few CSS trick to accomplish compatibility with a wide range of web + * browsers. The most common trick is to use some styles in IE6 only. This is accomplished by using + * a rule that makes things work in IE6, and then following it with a rule that begins with + * "html > body" or use a child selector ">", which is ignored by IE6 because it does not support + * the child selector. You can spot this by looking for the "OVERRIDDEN BY COMPLIANT BROWSERS" and + * "IGNORED BY IE6" comments. */ + /* Framework */ html, body { @@ -15,14 +23,14 @@ body { body { background-color: #f3f3f3; /* @embed */ - background-image: url(images/page-base.png?1); + background-image: url(images/page-base.png); } /* Content */ div#content { margin-left: 10em; padding: 1em; /* @embed */ - background-image: url(images/border.png?1); + background-image: url(images/border.png); background-position: top left; background-repeat: repeat-y; background-color: white; @@ -34,7 +42,7 @@ div#content { height: 5em; background-color: white; /* @embed */ - background-image: url(images/page-fade.png?1); + background-image: url(images/page-fade.png); background-position: bottom left; background-repeat: repeat-x; } @@ -43,7 +51,7 @@ div#content { margin-left: 10em; height: 5em; /* @embed */ - background-image: url(images/border.png?1); + background-image: url(images/border.png); background-position: bottom left; background-repeat: repeat-x; } @@ -65,7 +73,6 @@ div#mw-head h5 { #p-personal { position: absolute; top: 0; - padding-left: 10em; right: 0.75em; } #p-personal h5 { @@ -74,7 +81,7 @@ div#mw-head h5 { #p-personal ul { list-style: none; margin: 0; - padding: 0; + padding-left: 10em; /* Keep from overlapping logo */ } /* @noflip */ #p-personal li { @@ -111,7 +118,7 @@ div#mw-head h5 { } div.vectorTabs { /* @embed */ - background-image: url(images/tab-break.png?1); + background-image: url(images/tab-break.png); background-position: bottom left; background-repeat: no-repeat; padding-left: 1px; @@ -139,7 +146,7 @@ div#mw-head h5 { padding: 0; background-color: #f3f3f3; /* @embed */ - background-image: url(images/tab-normal-fade.png?1); + background-image: url(images/tab-normal-fade.png); background-position: bottom left; background-repeat: repeat-x; white-space:nowrap; @@ -150,7 +157,7 @@ div#mw-head h5 { } div.vectorTabs li.selected { /* @embed */ - background-image: url(images/tab-current-fade.png?1); + background-image: url(images/tab-current-fade.png); } /* OVERRIDDEN BY COMPLIANT BROWSERS */ div.vectorTabs li a { @@ -158,22 +165,18 @@ div#mw-head h5 { height: 1.9em; padding-left: 0.5em; padding-right: 0.5em; - /* @embed */ - background-image: url(images/tab-break.png?1); - background-position: bottom right; - background-repeat: no-repeat; - } - div.vectorTabs li a{ color: #0645ad; cursor: pointer; - } - div.vectorTabs li a { font-size: 0.8em; } /* IGNORED BY IE6 */ div.vectorTabs li > a { display: block; } + div.vectorTabs li.icon a { + background-position: bottom right; + background-repeat: no-repeat; + } /* OVERRIDDEN BY COMPLIANT BROWSERS */ div.vectorTabs span a { display: inline-block; @@ -185,6 +188,13 @@ div#mw-head h5 { float: left; display: block; } + div.vectorTabs span { + display: inline-block; + /* @embed */ + background-image: url(images/tab-break.png); + background-position: bottom right; + background-repeat: no-repeat; + } div.vectorTabs li.selected a, div.vectorTabs li.selected a:visited{ color: #333333; @@ -200,11 +210,14 @@ div#mw-head h5 { direction: ltr; float: left; /* @embed */ - background-image: url(images/arrow-down-icon.png?1); - background-position: 100% 60%; + background-image: url(images/arrow-down-icon.png); + background-position: 0px 60%; background-repeat: no-repeat; cursor: pointer; } + div.vectorMenuFocus { + background-position: -22px 60%; + } /* @noflip */ body.rtl div.vectorMenu { direction: rtl; @@ -214,17 +227,18 @@ div#mw-head h5 { div#mw-head div.vectorMenu h5 { float: left; /* @embed */ - background-image: url(images/tab-break.png?1); + background-image: url(images/tab-break.png); background-repeat: no-repeat; } - /* IGNORED BY IE6 */ - div#mw-head div.vectorMenu > h5 { - background-image: none; - } + /* This will be flipped - unlike the one above it */ div#mw-head div.vectorMenu h5 { background-position: bottom left; margin-left: -1px; } + /* IGNORED BY IE6 */ + div#mw-head div.vectorMenu > h5 { + background-image: none; + } div#mw-head div.vectorMenu h4 { display: inline-block; float: left; @@ -242,10 +256,11 @@ div#mw-head h5 { height: 2.5em; text-decoration: none; /* @embed */ - background-image: url(images/tab-break.png?1); + background-image: url(images/tab-break.png); background-repeat: no-repeat; } - div.vectorMenu h5 a{ + /* This will be flipped - unlike the one above it */ + div.vectorMenu h5 a { background-position: bottom right; } /* IGNORED BY IE6 */ @@ -268,13 +283,15 @@ div#mw-head h5 { body.rtl div.vectorMenu > div.menu { margin-left: auto; } - /* Fixes old versions of FireFox */ + /* IGNORED BY IE6 */ + /* Also fixes old versions of FireFox */ /* @noflip */ body.rtl div.vectorMenu > div.menu, x:-moz-any-link { margin-left: 23px; } - div.vectorMenu:hover div.menu { + /* Enable forcing showing of the menu for accessibility */ + div.vectorMenu:hover div.menu, div.vectorMenu div.menuForceShow { display: block; } div.vectorMenu ul { @@ -312,16 +329,14 @@ div#mw-head h5 { display: inline-block; padding: 0.5em; white-space: nowrap; + color: #0645ad; + cursor: pointer; + font-size: 0.8em; } /* IGNORED BY IE6 */ div.vectorMenu li > a { display: block; } - div.vectorMenu li a { - color: #0645ad; - cursor: pointer; - font-size: 0.8em; - } div.vectorMenu li.selected a, div.vectorMenu li.selected a:visited { color: #333333; @@ -345,13 +360,17 @@ div#mw-head h5 { margin-top: 0.4em; } div#simpleSearch { + display: block; + width: 14em; + height: 1.4em; margin-top: 0.65em; position: relative; min-height: 1px; /* Gotta trigger hasLayout for IE7 */ border: solid 1px #AAAAAA; + color: black; background-color: white; /* @embed */ - background-image: url(images/search-fade.png?1); + background-image: url(images/search-fade.png); background-position: top left; background-repeat: repeat-x; } @@ -362,41 +381,66 @@ div#mw-head h5 { */ font-size: 13px; top: 0.25em; + direction: ltr; + } + div#simpleSearch input { + color: black; + direction: ltr; + } + div#simpleSearch input:focus { + outline: none; } - div#simpleSearch .placeholder { + div#simpleSearch input.placeholder { color: #999999; } div#simpleSearch input::-webkit-input-placeholder { color: #999999; } div#simpleSearch input#searchInput { + position: absolute; + top: 0; + left: 0; + width: 90%; margin: 0; - border-width: 0; - padding: 3px; - vertical-align: top; + padding: 0; + padding-left: 0.2em; + padding-top: 0.2em; + padding-bottom: 0.2em; + outline: none; + border: none; /* * DON'T PANIC! Browsers that won't scale this properly are the same browsers that have JS issues that prevent * this from ever being shown anyways. */ font-size: 13px; - width: 14em; background-color: transparent; - color: black; + direction: ltr; } - /* OVERRIDDEN BY COMPLIANT BROWSERS */ div#simpleSearch button#searchButton { + position: absolute; + width: 10%; + right: 0; + top: 0; padding: 0; - margin: 0 5px; + padding-top: 0.3em; + padding-bottom: 0.2em; + padding-right: 0.4em; + margin: 0; border: none; cursor: pointer; background-color: transparent; - font-size: x-small; + background-image: none; } + /* OVERRIDDEN BY COMPLIANT BROWSERS */ div#simpleSearch button#searchButton img { border: none; margin: 0; + margin-top: -3px; padding: 0; - vertical-align: middle; + } + /* IGNORED BY IE6 */ + div#simpleSearch button#searchButton > img { + margin: 0; } /* Panel */ div#mw-panel { @@ -425,7 +469,7 @@ div#mw-panel { padding-top: 0.5em; margin-left: 1.25em; /* @embed */ - background-image: url(images/portal-break.png?1); + background-image: url(images/portal-break.png); background-repeat: no-repeat; background-position: top left; } @@ -456,7 +500,7 @@ div#footer { margin-top: 0; padding: 0.75em; /* @embed */ - background-image: url(images/border.png?1); + background-image: url(images/border.png); background-position: top left; background-repeat: repeat-x; direction: ltr; @@ -490,6 +534,7 @@ div#footer #footer-icons li { float: left; margin-left: 0.5em; line-height: 2em; + text-align: right; } div#footer #footer-places li { float: left; @@ -529,7 +574,7 @@ div#footer #footer-places li { margin: 0 !important; padding: 0 !important; /* @embed */ - background-image: url(images/preferences-break.png?1); + background-image: url(images/preferences-break.png); background-position: bottom left; background-repeat: no-repeat; } @@ -544,11 +589,11 @@ div#footer #footer-places li { list-style-type: none; list-style-image: none; /* @embed */ - background-image: url(images/preferences-break.png?1); + background-image: url(images/preferences-break.png); background-position: bottom right; background-repeat: no-repeat; } - /* IGNORED BY IE6 */ + /* Sadly, IE6 won't understand this */ #preftoc li:first-child { margin-left: 1px; } @@ -568,7 +613,7 @@ div#footer #footer-places li { } #preftoc li.selected a { /* @embed */ - background-image: url(images/preferences-fade.png?1); + background-image: url(images/preferences-fade.png); background-position: bottom; background-repeat: repeat-x; color: #333333; @@ -583,17 +628,17 @@ div#footer #footer-places li { border: solid 1px #cccccc; background-color: #f9f9f9; /* @embed */ - background-image: url(images/preferences-base.png?1); + background-image: url(images/preferences-base.png); +} +#preferences fieldset { + border: none; + border-top: solid 1px #cccccc; } #preferences fieldset.prefsection { border: none; padding: 0; margin: 1em; } -#preferences fieldset.prefsection fieldset { - border: none; - border-top: solid 1px #cccccc; -} #preferences legend { color: #666666; } @@ -643,316 +688,18 @@ div#content { #bodyContent { font-size: 0.8em; } -/* Links */ -a { - text-decoration: none; - color: #0645ad; - background: none; -} -a:visited { - color: #0b0080; -} -a:active { - color: #faa700; -} -a:hover, a:focus { - text-decoration: underline; -} -a.stub { - color: #772233; -} -a.new, #p-personal a.new { - color: #ba0000; -} -a.new:visited, #p-personal a.new:visited { - color: #a55858; -} -/* Inline Elements */ -img { - border: none; - vertical-align: middle; -} -hr { - height: 1px; - color: #aaa; - background-color: #aaa; - border: 0; - margin: .2em 0 .2em 0; -} - -/* Structural Elements */ -h1, -h2, -h3, -h4, -h5, -h6 { - color: black; - background: none; - font-weight: normal; - margin: 0; - padding-top: .5em; - padding-bottom: .17em; - border-bottom: 1px solid #aaa; - width: auto; -} -h1 { font-size: 188%; } -h1 .editsection { font-size: 53%; } -h2 { font-size: 150%; } -h2 .editsection { font-size: 67%; } -h3, -h4, -h5, -h6 { - border-bottom: none; - font-weight: bold; -} -h3 { font-size: 132%; } -h3 .editsection { font-size: 76%; font-weight: normal; } -h4 { font-size: 116%; } -h4 .editsection { font-size: 86%; font-weight: normal; } -h5 { font-size: 100%; } -h5 .editsection { font-weight: normal; } -h6 { font-size: 80%; } -h6 .editsection { font-size: 125%; font-weight: normal; } .editsection { float: right; } -p { - margin: .4em 0 .5em 0; - line-height: 1.5em; -} - p img { - margin: 0; - } -abbr, -acronym, -.explain { - border-bottom: 1px dotted black; - color: black; - background: none; - cursor: help; -} -q { - font-family: Times, "Times New Roman", serif; - font-style: italic; -} -/* Disabled for now -blockquote { - font-family: Times, "Times New Roman", serif; - font-style: italic; -}*/ -pre, code, tt { - /* - * It's important for this rule to first reference an actual font name, some browsers will render the monospace text - * too small otherwise, namely Firefox, Chrome and Safari - */ - font-family: monospace, "Courier New"; -} -code { - background-color: #f9f9f9; -} -pre { - padding: 1em; - border: 1px dashed #2f6fab; - color: black; - background-color: #f9f9f9; - line-height: 1.1em; -} + ul { - line-height: 1.5em; - list-style-type: square; - margin: .3em 0 0 1.5em; - padding: 0; /* @embed */ - list-style-image: url(images/bullet-icon.png?1); -} -ol { - line-height: 1.5em; - margin: .3em 0 0 3.2em; - padding: 0; - list-style-image: none; -} -li { - margin-bottom: .1em; -} -dt { - font-weight: bold; - margin-bottom: .1em; -} -dl { - margin-top: .2em; - margin-bottom: .5em; -} -dd { - line-height: 1.5em; - margin-left: 2em; - margin-bottom: .1em; -} -/* Tables */ -table { - font-size: 100%; - color: black; - /* we don't want the bottom borders of