Merge "Changes by design team on master-design (Bug #1451263)"

htdocs/theme/raw/static/style/style.css

@@ -14,6 +14,7 @@ html {
     margin: 0;
     padding: 0;
 }
+
 .clearfix:after {
     content: ".";
     display: block;
@@ -21,10 +22,12 @@ html {
     clear: both;
     visibility: hidden;
 }
+
 .ui-widget,
 .ui-widget button {
     font-family: inherit;
 }
+
 body,
 caption,
 th,
@@ -40,12 +43,17 @@ button,
 .select2-search input {
     font-family: Arial, "Nimbus Sans L", Helvetica, sans-serif;
 }
+
 #container,
 .sitemessage,
-#switchwrap {  /* Use a 12px base font size with a 16px line height */
-    font-size: 0.75em; /* 16px x .75 = 12px */
-    line-height: 1.333em; /* 12px x 1.333 = 16px */
+#switchwrap {
+    /* Use a 12px base font size with a 16px line height */
+    font-size: 0.75em;
+    /* 16px x .75 = 12px */
+    line-height: 1.333em;
+    /* 12px x 1.333 = 16px */
 }
+
 pre,
 code,
 tt {
@@ -53,52 +61,66 @@ tt {
     font-family: "Courier New", "DejaVu Sans Mono", monospace;
     white-space: pre-wrap;
 }
+
 blockquote {
     margin: 10px 30px;
     border-left: 2px solid #999999;
     padding-left: 1em;
 }
+
 acronym {
     border-bottom: 1px dotted #D1D1D1;
 }
+
 img {
     border: 0;
 }
+
 ul,
 ol {
     margin: 5px 0 10px 0;
     padding: 0;
 }
+
 ul li {
     margin: 0 0 3px 20px;
 }
+
 ol li {
     margin: 0 0 3px 30px;
 }
+
 p {
     margin: 10px 0;
 }
+
 p span {
     line-height: 1.333em;
 }
+
 .backtrace {
     font: normal 110%/1.5em monospace;
 }
+
 /* links styling for accessibility */
 :focus {
     outline: 2px solid #FFFF00;
 }
+
 div:focus {
     outline: 0;
 }
+
 html:focus {
     outline: 0;
 }
+
 a,
 a:hover,
 a:active {
     outline: none;
 }
+
 /******************** Body ********************/
 body {
     color: #333333;
@@ -107,10 +129,13 @@ body {
     margin: 0;
     padding: 0;
 }
+
 body#micro {
     background-color: #EEEEEE;
 }
+
 /******************** General headings ********************/
+
 h1,
 h2,
 h3,
@@ -122,24 +147,37 @@ h6 {
     white-space: normal;
     word-wrap: break-word;
 }
+
 h1 {
-    font-size: 2em; /* 24px */
+    font-size: 2em;
+    /* 24px */
 }
+
 h2 {
-    font-size: 1.667em; /* 20px */
+    font-size: 1.667em;
+    /* 20px */
 }
+
 h3 {
-    font-size: 1.5em; /* 18px */
+    font-size: 1.5em;
+    /* 18px */
 }
+
 h4 {
-    font-size: 1.333em; /* 16px */
+    font-size: 1.333em;
+    /* 16px */
 }
+
 h5 {
-    font-size: 1.167em; /* 14px */
+    font-size: 1.167em;
+    /* 14px */
 }
+
 h6 {
-    font-size: 1em; /* 12px */
+    font-size: 1em;
+    /* 12px */
 }
+
 h1:first-child,
 h2:first-child,
 h3:first-child,
@@ -148,48 +186,62 @@ h5:first-child,
 h6:first-child {
     margin-top: 0;
 }
+
 /******************** Placement ********************/
 .left {
     text-align: left;
 }
+
 .center {
     text-align: center;
 }
+
 .right {
     text-align: right;
 }
+
 .fl {
     float: left;
 }
+
 .fr {
     float: right;
 }
+
 .cl {
     clear: left;
 }
+
 .cr {
     clear: right;
 }
+
 .cb {
     clear: both;
 }
+
 .fullwidth {
     width: 100%;
 }
+
 .halfwidth {
     width: 50%;
 }
+
 .onethirdwidth {
     width: 33%;
 }
+
 form.oneline.inline div,
 .inline {
     display: inline;
 }
+
 .hidefocus:focus,
 .hidefocus:active {
     outline: 0;
 }
+
 /* Hides the element but leaves it accessible to screen readers */
 .accessible-hidden {
     display: inline;
@@ -197,10 +249,12 @@ form.oneline.inline div,
     clip: rect(1px, 1px, 1px, 1px);
     overflow: hidden;
 }
+
 .hidden,
 .dontshow {
     display: none;
 }
+
 /* Hides without being "destructive" - element + children still have full
    width/height */
 .safe-hidden {
@@ -208,22 +262,27 @@ form.oneline.inline div,
     visibility: hidden;
     top: 0;
 }
+
 .nojs-hidden-inline,
 .nojs-hidden-block,
 .nojs-hidden-table,
 .nojs-hidden-table-cell {
     display: none;
 }
+
 .bar-before {
     border-left: 1px solid #D1D1D1;
 }
+
 #footer-nav .bar-before {
     border-left: 1px solid #5B5C5C;
 }
+
 .dont-collapse:after {
     content: ".";
     visibility: hidden;
 }
+
 /******************** Loading ********************/
 #loading-box {
     background-color: #DDDDDD;
@@ -236,6 +295,7 @@ form.oneline.inline div,
     -webkit-box-shadow: 0px 0px 5px 0px #333333;
     box-shadow: 0px 0px 5px 0px #333333;
 }
+
 /******************** Overlay ********************/
 #overlay {
     position: fixed;
@@ -245,18 +305,21 @@ form.oneline.inline div,
     height: 100%;
     opacity: 0.7;
     background-color: #000000;
-    filter: alpha(opacity=70);
+    filter: alpha(opacity = 70);
     z-index: 11;
 }
+
 img.close:focus {
     border: 1px solid #FFFF00;
 }
+
 /******************** UI dialog ********************/
 .ui-widget-overlay {
     opacity: 0.7;
     background: #000000;
-    filter: alpha(opacity=70);
+    filter: alpha(opacity = 70);
 }
+
 .ui-dialog {
     background: #FFFFFF;
     border: 5px solid #DDDDDD;
@@ -266,17 +329,20 @@ img.close:focus {
     padding: 10px;
     font-size: 0.75em;
 }
+
 .ui-dialog .ui-dialog-titlebar {
     border-bottom: 2px solid #D1D1D1;
     background: none;
     padding: 3px 0;
 }
+
 .ui-dialog .ui-dialog-title {
     margin: 3px 0;
     color: #333333;
     font-size: 1.333em;
     font-weight: bold;
 }
+
 .ui-dialog .ui-dialog-titlebar-close {
     background: transparent url(../images/btn_close.png) no-repeat 0 0;
     border: 0 !important;
@@ -287,26 +353,32 @@ img.close:focus {
     vertical-align: top;
     cursor: pointer !important;
 }
+
 .ui-dialog .ui-dialog-titlebar-close .ui-icon {
     background: none;
 }
+
 .ui-dialog .ui-dialog-content {
     padding: 0;
     margin: 10px 0;
 }
+
 .ui-dialog .ui-dialog-buttonpane {
     border-top: 0;
     padding: 0;
 }
+
 .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
     float: none;
 }
+
 /******************** MCE Modal ********************/
 #mce-modal-block {
     opacity: 0.7 !important;
     background: #000000 !important;
-    filter: alpha(opacity=70) !important;
+    filter: alpha(opacity = 70) !important;
 }
+
 .mce-window {
     background: #FFFFFF !important;
     border: 5px solid #DDDDDD !important;
@@ -317,10 +389,12 @@ img.close:focus {
     font-size: 0.75em !important;
     font-family: Arial, "Nimbus Sans L", Helvetica, sans-serif !important;
 }
+
 .mce-window-head {
     padding: 3px 0 3px 0 !important;
     border-bottom: 2px solid #D1D1D1 !important;
 }
+
 button.mce-close {
     background: transparent url(../images/btn_close.png) no-repeat 0 0 !important;
     width: 24px !important;
@@ -331,10 +405,12 @@ button.mce-close {
     right: 0 !important;
     top: 0 !important;
 }
+
 .mce-foot {
     background: none !important;
     border: 0 !important;
 }
+
 /******************** Ajax login ********************/
 #ajax-login-form {
     border: 5px solid #DDDDDD;
@@ -349,16 +425,20 @@ button.mce-close {
     -moz-border-radius: 10px;
     border-radius: 10px;
 }
+
 /******************** Help ********************/
 .help {
     vertical-align: top;
 }
+
 .help a {
     display: inline-block;
 }
+
 .help a:hover {
     cursor: help;
 }
+
 .contextualHelp {
     padding: 10px;
     margin: 0;
@@ -374,12 +454,14 @@ button.mce-close {
     -moz-border-radius: 10px;
     border-radius: 10px;
 }
+
 .help-dismiss {
     vertical-align: top;
 }
+
 /**************** Messages ****************/
 div.ok {
-    background: #E6F6E0 url(../images/success.png) no-repeat 4px 4px;
+    background: #e6f6e0 url(../images/success.png) no-repeat 4px 4px;
     padding: 5px 5px 5px 26px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -389,9 +471,10 @@ div.ok {
     font-size: 1em;
     color: #333333;
 }
+
 div.error,
 span.error {
-    background: #FEE7E7 url(../images/failure.png) no-repeat 4px 4px;
+    background: #fee7e7 url(../images/failure.png) no-repeat 4px 4px;
     padding: 5px 5px 5px 27px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -401,8 +484,9 @@ span.error {
     font-size: 1em;
     color: #333333;
 }
+
 div.info {
-    background: #E5ECF4 url(../images/info.png) no-repeat 4px 4px;
+    background: #e5ecf4 url(../images/info.png) no-repeat 4px 4px;
     padding: 5px 5px 5px 27px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -412,9 +496,10 @@ div.info {
     font-size: 1em;
     color: #333333;
 }
+
 div.warning,
 .errmsg {
-    background: #FFF3E0 url(../images/warning.png) no-repeat 4px 3px;
+    background: #fff3e0 url(../images/warning.png) no-repeat 4px 3px;
     padding: 5px 5px 5px 26px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -424,11 +509,13 @@ div.warning,
     font-size: 1em;
     color: #333333;
 }
+
 /* system messages between nav and main content */
 #messages {
     padding: 0;
     margin: 10px 0;
 }
+
 /* system messages */
 .message {
     margin: 5px 0;
@@ -437,12 +524,15 @@ div.warning,
     color: #333333;
     text-align: center;
 }
+
 .message p:first-child {
     margin-top: 0;
 }
+
 .message p:last-child {
     margin-bottom: 0;
 }
+
 /* warning messages without icon */
 .attentionmessage {
     background: #FFF3E0;
@@ -453,9 +543,11 @@ div.warning,
     padding: 5px;
     text-align: center;
 }
+
 .attentionform {
     margin: 10px auto 5px auto;
 }
+
 /* delete messages without icon */
 .deletemessage {
     background: #FEE7E7;
@@ -466,13 +558,16 @@ div.warning,
     padding: 5px;
     text-align: center;
 }
+
 .deletemessage .deletebuttonwrap {
     padding: 5px;
 }
+
 /******************** General text ********************/
 .s {
     font-size: 0.917em;
 }
+
 .description,
 .unvalidated,
 .postdetails {
@@ -480,66 +575,84 @@ div.warning,
     color: #707070;
     font-weight: normal;
 }
+
 .nowrap {
     white-space: nowrap;
 }
+
 .dull {
     color: #707070;
 }
+
 .tags {
     margin: 20px 0 10px 0;
 }
+
 /* some common listing text styles */
+
 .title,
 .title:first-child {
     font-size: 1.167em;
     margin: 3px 0;
 }
+
 .detail {
     margin: 3px 0;
 }
+
 .detail br {
     line-height: 1px;
     height: 1px;
     content: " ";
 }
+
 .postedon {
     font-size: 0.917em;
     line-height: 1.167em;
 }
+
 ul.listing {
     list-style: none;
 }
+
 .listing .listrow {
     padding: 3px 5px;
     margin: 0;
 }
+
 .listing .listrow h3.title {
     display: inline-block;
 }
+
 .listing .tags {
     margin: 3px 0;
 }
+
 /******************** Tables ********************/
 table {
     border-spacing: 0;
     border-collapse: collapse;
 }
+
 table.fixwidth {
     table-layout: fixed;
 }
+
 th {
     padding: 3px 5px;
     text-align: left;
     line-height: 1.25em;
     vertical-align: top;
 }
+
 thead th {
     white-space: nowrap;
     border-bottom: 1px solid #CCCCCC;
     font-size: 1.167em;
 }
+
 /* those that need to align with td */
+
 .file th,
 .html th,
 .text th,
@@ -561,88 +674,110 @@ thead th {
 .autocomplete th {
     padding-top: 8px;
 }
+
 .switchbox th {
     padding-top: 10px;
 }
+
 td {
     padding: 3px 5px;
     vertical-align: top;
 }
+
 .valign {
     padding: 6px 5px 3px 5px;
 }
+
 tfoot td {
     padding: 5px 0;
 }
+
 /* small td for tickboxes and icons */
 td.narrow {
     padding: 3px;
     width: 25px;
 }
+
 /* to align tag in edit tables */
 tr.tags td div div {
     line-height: 2em;
 }
+
 /* Alternative row background */
+
 .r0,
 .r0 td,
 .d0 {
     background-color: #F9F9F9;
 }
+
 .r1,
 .r1 td,
 .d1 {
     background-color: #F3F3F3;
 }
+
 /* Highlight row background  */
+
 tr.highlight td,
 tr.highlight-file td {
     background-color: #FFFCD8;
 }
+
 /* icon container (icons are 24px wide) */
 td.icon-container {