diff options
Diffstat (limited to 'skins/standard')
| -rw-r--r-- | skins/standard/IE-fixes.css | 19 | ||||
| -rw-r--r-- | skins/standard/global.css | 217 | ||||
| -rw-r--r-- | skins/standard/mobile.css | 6 |
3 files changed, 100 insertions, 142 deletions
diff --git a/skins/standard/IE-fixes.css b/skins/standard/IE-fixes.css index 0e326286d..fd96e4afe 100644 --- a/skins/standard/IE-fixes.css +++ b/skins/standard/IE-fixes.css @@ -26,25 +26,6 @@ form#Create #comp_desc { margin: .5em 1em; } -#footer #useful-links li { - padding-bottom: 0.8ex; -} - -#footer .label { - display: block; - float: left; - width: 8.2em; - padding-bottom: 0.1ex; -} - -#footer #links-actions .label { - padding-top: 0.35em; -} - -#footer .links { - display: inline; -} - #bug_id_container, .search_field_grid, .search_email_fields, ul.bug_changes li { zoom: 1; diff --git a/skins/standard/global.css b/skins/standard/global.css index 12dab11f5..9b9ae6550 100644 --- a/skins/standard/global.css +++ b/skins/standard/global.css @@ -91,6 +91,10 @@ pointer-events: none; /* Make sure button is clickable on Chrome & Safari */ } + #header img { + vertical-align: top; + } + #header .inner { display: flex; align-items: center; @@ -154,7 +158,7 @@ #header .searchbox-outer { position: relative; - width: 240px; + width: 280px; height: 32px; } @@ -239,34 +243,8 @@ box-shadow: none; } - #header-tools-menu-button { - width: 32px; - height: 32px; - border-radius: 4px; - } - - #header-tools-menu-button .icon { - text-indent: -.7em; - letter-spacing: -.7em; - } - - #header-tools-menu-button .icon::before { - content: '\E5CC\E5CC'; - } - - #header-account-menu-button img { - display: block; - border-radius: 50%; - } - - #header-account-menu-button .icon::before { - font-size: 32px; - content: '\E853'; - } - #header .dropdown-content { top: calc(100% + 4px); - right: -4px; border-color: #BBB #999 #777; border-radius: 4px; padding: 4px 0; @@ -276,6 +254,14 @@ box-shadow: 0 2px 8px rgba(0,0,0,.3); } + #header .dropdown-content.right { + left: -4px; + } + + #header .dropdown-content.left { + right: -4px; + } + #header .dropdown-content::before, #header .dropdown-content::after { content: ''; @@ -283,12 +269,21 @@ width: 0; height: 0; position: absolute; - right: 10px; border-width: 8px; border-color: transparent; border-style: solid; } + #header .dropdown-content.right::before, + #header .dropdown-content.right::after { + left: 10px; + } + + #header .dropdown-content.left::before, + #header .dropdown-content.left::after { + right: 10px; + } + #header .dropdown-content::before { top: -17px; border-bottom-color: #BBB; @@ -304,9 +299,80 @@ padding: 2px 16px; line-height: 1.5; white-space: normal; + color: inherit !important; background-color: transparent; } + #header-search h2 { + position: absolute; + left: -99999px; + } + + #header-search-dropdown { + right: auto; + min-width: calc(100% + 8px) !important; + max-width: calc(200% + 8px) !important; + } + + #header-search-dropdown-wrapper { + overflow-x: hidden; + overflow-y: scroll; + max-height: 400px; + } + + #header-search-dropdown h3 { + position: sticky; + top: -4px; + left: 0; + margin: -4px 8px 0; + padding: 8px 0 4px; + color: #999; + background: #FFF; + font-size: 12px; + font-weight: normal; + } + + #header-search-dropdown ul { + margin: 0; + padding: 0; + list-style: none; + } + + #header-search-dropdown a { + overflow: hidden; + white-space: nowrap !important; + text-overflow: ellipsis; + } + + #header-tools-menu-button { + width: 32px; + height: 32px; + border-radius: 4px; + } + + #header-tools-menu-button .icon { + text-indent: -.7em; + letter-spacing: -.7em; + } + + #header-tools-menu-button .icon::before { + content: '\E5CC\E5CC'; + } + + #header-account-menu-button img { + display: block; + border-radius: 50%; + } + + #header-account-menu-button .icon::before { + font-size: 32px; + content: '\E853'; + } + + #header-external-links.first { + order: -1; + } + #header .account-label * { overflow: hidden; white-space: nowrap; @@ -360,92 +426,6 @@ } /* header (end) */ -/* footer (begin) - * See also the "header" section for styles that apply - * to both the header and footer. - */ - #footer { - display: flex; - clear: both; - margin: 15px 0 0; - border-top: 1px solid rgba(0, 0, 0, 0.1); - padding: 8px; - color: #bbb; - background-color: #fff; - line-height: 1.5; - } - - #footer .intro { - flex: none; - display: flex; - align-items: center; - border-right: 1px solid #DDD; - padding: 16px 24px 16px 16px; - } - - #footer .org-links { - display: flex; - align-items: center; - } - - #footer .org-links h1 { - margin: 0; - font-size: 1em; - } - - #footer .org-links h1 a { - display: block; - width: 100px; - height: 30px; - background-image: url(../../images/moz-logo-bw-rgb.svg); - background-repeat: no-repeat; - background-size: contain; - text-indent: -9999px; - } - - #footer .org-links ul { - display: flex; - margin: 0 0 0 16px; - padding: 0; - } - - #footer .org-links li { - flex: none; - } - - #footer .org-links li:not(:last-child) { - margin-right: 16px; - } - - #footer #useful-links { - flex: auto; - display: flex; - flex-direction: column; - justify-content: center; - margin: 0 0 0 24px; - padding: 0; - } - - #footer ul { - list-style-type: none; - } - #links-saved ul { - display: inline; - } - #links-saved th { - vertical-align: top; - } - - #footer .label { - white-space: nowrap; - vertical-align: top; - } - - #footer .links { - vertical-align: top; - } -/* footer (end) */ - /* link lists (begin) */ ul.links { margin: 0; @@ -783,7 +763,7 @@ div.user_match { /* Rules specific for printing */ @media print { - #header, #footer { + #header { display: none; } @@ -1075,6 +1055,7 @@ input.required, select.required, span.required_explanation { } body { + min-height: 400px; background: #f6f4ec; background-image: url(../../images/noise.png); background-image: url(../../images/noise.png), -moz-linear-gradient(#d7d3c8, #f6f4ec 400px); @@ -1088,11 +1069,11 @@ body, td, th, input, select, option, optgroup, button, .text_input { font-family: "Fira Sans", "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; } -a, #footer a, #footer a:visited { +a { color: #0095dd; } -a:hover, #footer a:hover { +a:hover { color: #00539f; } @@ -1148,7 +1129,7 @@ hr { background: none; border: none; color: #404040; - margin: 15px auto; + margin: 15px auto 0; } #bugzilla-body th { diff --git a/skins/standard/mobile.css b/skins/standard/mobile.css index 244726f21..f112c2a3b 100644 --- a/skins/standard/mobile.css +++ b/skins/standard/mobile.css @@ -8,7 +8,7 @@ @media only screen and (max-device-width : 720px) { - #header, #footer { + #header { display: none; } .cookie-notify { @@ -52,10 +52,6 @@ only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { - #footer .org-links { - font-size: small; - } - body { font-size: medium; } |