Index: chrome/browser/resources/new_tab.css |
diff --git a/chrome/browser/resources/new_tab.css b/chrome/browser/resources/new_tab.css |
deleted file mode 100644 |
index e1d5990f7d5d476ca8e2d49665acba70cf609fc4..0000000000000000000000000000000000000000 |
--- a/chrome/browser/resources/new_tab.css |
+++ /dev/null |
@@ -1,604 +0,0 @@ |
-html { |
- /* This is needed because of chrome://theme/css/new_tab.css */ |
- height: 100%; |
-} |
- |
-body { |
- margin: 0; |
- height: 100%; |
- overflow: auto; |
- -webkit-user-select: none; |
- cursor: default; |
-} |
- |
-html[mode=app-launcher] { |
- height: auto; |
-} |
- |
-#main { |
- box-sizing: border-box; |
- -webkit-transition: width .15s; |
- margin: 0 auto; |
- min-height: 100%; |
-} |
- |
-body.loading #main { |
- /* We start out hidden to prevent glitchiness as the app and most visited |
- data flows in. */ |
- visibility: hidden; |
-} |
- |
-#main, |
-.section, |
-.maxiview, |
-#login-container, |
-#notification-container, |
-#closed-sections-bar { |
- width: 920px; |
-} |
- |
-html[dir=rtl] #main { |
- background-position-x: 100%; |
-} |
- |
-html[mode=app-launcher] #main { |
- min-height: 50px; |
-} |
- |
-html[anim=false] *, |
-.no-anim, .no-anim *, |
-.loading * { |
- -webkit-transition: none !important; |
- -webkit-animation: none !important; |
-} |
- |
-:link, |
-:visited, |
-.link { |
- cursor: pointer; |
- text-decoration: underline; |
- color: hsla(213, 90%, 24%, 0.33333); |
- -webkit-appearance: none; |
- border: 0; |
- background: none; |
-} |
- |
-.link-color { |
- color: hsl(213, 90%, 24%); |
- text-decoration: none; |
-} |
- |
-.hide { |
- opacity: 0 !important; |
- visibility: hidden !important; |
- pointer-events: none; |
-} |
- |
-/* Notification */ |
- |
-#notification-container { |
- position: fixed; |
-} |
- |
-#notification { |
- -webkit-transition: opacity .15s; |
- position: relative; |
- background-color: hsl(52, 100%, 80%); |
- border: 1px solid rgb(211, 211, 211); |
- border-radius: 6px; |
- color: black; |
- display: -webkit-box; |
- font-weight: bold; |
- margin: 2px auto; |
- opacity: 0; |
- padding: 7px 15px; |
- pointer-events: none; |
- white-space: nowrap; |
- width: intrinsic; |
- z-index: 2; |
-} |
- |
-#notification.first-run { |
- padding: 5px 13px; /* subtract the border width */ |
- border: 2px solid hsl(213, 55%, 75%); |
- background-color: hsl(213, 63%, 93%); |
- -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); |
- font-weight: normal; |
-} |
- |
-#notification.promo { |
- padding: 5px 13px; /* subtract the border width */ |
- border: 1px solid hsl(0, 0%, 80%); |
- background-color: hsl(120, 93%, 93%); |
- -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); |
- font-weight: normal; |
-} |
- |
-#notification.promo a { |
- color: rgb(0, 102, 204); |
-} |
- |
-#notification-close { |
- display: inline-block; |
- border: 0; |
- -webkit-margin-start: 10px; |
- -webkit-margin-end: auto; |
- vertical-align: middle; |
- width: 16px; |
- height: 16px; |
- background: no-repeat; |
- background-color: transparent; |
- background-image: url('chrome://theme/IDR_CLOSE_BAR'); |
- padding: 0; |
-} |
- |
-#notification-close:hover, |
-#notification-close:focus { |
- background-image: url('chrome://theme/IDR_CLOSE_BAR_H'); |
-} |
- |
-#notification-close:active { |
- background-image: url('chrome://theme/IDR_CLOSE_BAR_P'); |
-} |
- |
-#notification > * { |
- max-width: 500px; |
- overflow: hidden; |
- text-overflow: ellipsis; |
-} |
- |
-#notification.first-run > * { |
- white-space: normal; |
-} |
- |
-#notification.show { |
- opacity: 1; |
- pointer-events: all; |
- -webkit-transition: opacity 1s; |
-} |
- |
-#notification .link { |
- color: rgba(0, 102, 204, 0.3); |
- -webkit-padding-start: 20px; |
-} |
- |
-#notification .link > * { |
- outline: none; |
-} |
- |
-#notification .link-color { |
- color: rgb(0, 102, 204); |
-} |
- |
-#notification > * > .blacklist-title { |
- display: inline-block; |
- max-width: 30ex; |
- overflow: hidden; |
- text-overflow: ellipsis; |
- white-space: nowrap; |
-} |
- |
-.item { |
- background: no-repeat 0% 50%; |
- padding: 2px; |
- padding-left: 18px; |
- background-size: 16px 16px; |
- background-color: hsla(213, 63%, 93%, 0); |
- display: block; |
- line-height: 20px; |
- max-width: 600px; |
- box-sizing: border-box; |
- white-space: nowrap; |
- overflow: hidden; |
- text-overflow: ellipsis; |
- font-size: 100%; |
-} |
- |
-.item:visited, |
-.item:link { |
- color: hsl(213, 90%, 24%); |
-} |
- |
-html[dir=rtl] .item { |
- background-position-x: 100%; |
- padding-right: 18px; |
- padding-left: 2px; |
- text-align: right; |
-} |
- |
-.window { |
- overflow: visible; /* We use visible so that the menu can be a child and shown |
- on :hover. To get this to work we have to set visibility |
- to visible which unfortunately breaks the ellipsis for t |
- he window items */ |
- background-image: url('ntp/closed_window.png'); |
-} |
- |
-.window-menu { |
- position: absolute; |
- display: none; |
- border: 1px solid #999; |
- -webkit-box-shadow: 2px 2px 3px hsla(0, 0%, 0%, .3); |
- color: black; |
- background-color: white; |
- left: 0; |
- white-space: nowrap; |
- z-index: 2; |
- padding: 2px; |
- cursor: default; |
- border-radius: 4px; |
-} |
- |
-/* Made to look like a tooltip using vista/win7 look and feel. |
- TODO(arv): Replace with -webkit-appearance once issue 17371 is fixed |
- */ |
-#window-tooltip { |
- color: #555; |
- pointer-events: none; |
- border: 1px solid rgb(118, 118, 118); |
- border-radius: 3px; |
- padding: 0 3px; |
- background: -webkit-linear-gradient(white, rgb(228, 229, 240)); |
- width: auto; |
- max-width: 300px; |
-} |
- |
-.foreign-session-client { |
- float: left; |
- max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ |
- font-weight: normal; |
- margin: 0; |
- position: relative; |
-} |
- |
-html[dir=rtl] .foreign-session-client { |
- float: right; |
-} |
- |
-.foreign-session-client > p { |
- display: block; |
- white-space: nowrap; |
- overflow: hidden; |
- text-overflow: ellipsis; |
- font-size: 100%; |
- margin: 0 10px; |
-} |
- |
-#foreign-sessions .nav { |
- max-width: none !important; |
-} |
- |
-.nav > a { |
- /* no icon */ |
- padding: 0; |
-} |
- |
-.nav > a:after { |
- content: '\u00bb'; /* raque gets flipped automatically in rtl */ |
- font-size: 115%; |
- -webkit-padding-start: 2px; |
-} |
- |
-#sync-status > div { |
- border-radius: 6px; |
- padding: 5px 0; |
- margin: 10px 0 20px; |
- white-space: nowrap; |
- overflow-x: hidden; |
-} |
- |
-#sync-status > div > * { |
- display: inline-block; |
- max-width: none; |
- white-space: nowrap; |
- overflow: hidden; |
- text-overflow: ellipsis; |
- font-size: 106%; |
- margin: 0; |
-} |
- |
-.notification.hidden { |
- opacity: 0; |
- pointer-events: none; |
-} |
- |
-/** |
- * Unfortunately, there seems to be a bug in WebKit where this div doesn't |
- * immediately get layout. It still doesn't have it in 'load', but gains it |
- * sometime after. |
- * |
- * We detect this in the JS by looking for offsetWidth > 0, and when it occurs, |
- * remove the 'nolayout' class. |
- */ |
-#attribution.nolayout { |
- position: static; |
- visibility: hidden; |
-} |
- |
-#attribution { |
- bottom: 5px; |
- left: 8px; |
- position: fixed; |
- text-align: end; |
-} |
- |
-html[dir=rtl] #attribution { |
- left: auto; |
- right: 8px; |
-} |
- |
-#attribution.obscured { |
- visibility: hidden; |
-} |
- |
-html[hasattribution=false] #attribution > div { |
- display: none; |
-} |
- |
-.sync-button { |
- font-size: inherit; |
- padding: 0; |
- margin: 0; |
- -webkit-appearance: none; |
- border: 0; |
- background: none; |
- cursor: pointer; |
- text-decoration: underline; |
- font-family: inherit; |
-} |
- |
-.section { |
- position: fixed; |
- font-size: 92%; |
-} |
- |
-body.noscroll { |
- overflow: hidden; |
-} |
- |
-html[anim=true][enable-section-animations=true] .section { |
- -webkit-transition: top .15s; |
-} |
- |
-#login-container { |
- display: none; |
- margin-top: 5px; |
- position: fixed; |
- text-align: end; |
-} |
- |
-/* A section in menu mode doesn't display its contents at all. Instead it is |
-rendered as a menu along the bottom of the screen. We have a separate class for |
-this so that when a hidden section is unhidden it can go back to its previous |
-collapsed state. */ |
-.section.menu { |
- display: none !important; |
-} |
- |
-/* A disabled section is not rendered in the UI in any way. Examples of this |
-state include the 'recently closed' section when we have no data for it, or this |
-'sync status' section, when there is no status to display. We have a separate |
-class for this so that when a section is enabled, it can go back to its previous |
-menu and collapsed state. */ |
-.section.disabled { |
- display: none !important; |
-} |
- |
-.section > h2 { |
- font-family: Helvetica, Arial, sans-serif; |
- font-size: 133%; |
- font-weight: normal; |
- margin: 0; |
- position: relative; |
-} |
- |
-.section:not([noexpand]) > h2 { |
- cursor: pointer; |
-} |
- |
-.section > h2 > .disclosure { |
- position: absolute; |
- left: -15px; |
- margin-top: 50%; |
- top: -5px; |
-} |
- |
-html[dir=rtl] .section > h2 > .disclosure { |
- left: auto; |
- right: -15px; |
- -webkit-transform: rotate(180deg); |
-} |
- |
-html[anim=true] .section > h2 > .disclosure { |
- -webkit-transition: -webkit-transform .15s; |
-} |
- |
-.section:not(.collapsed) > h2 > .disclosure { |
- -webkit-transform: rotate(90deg); |
-} |
- |
-.section > h2 .back { |
- position: absolute; |
- left: 0; |
- top: 0.56em; |
- width: 100%; |
- height: 1.5em; |
- z-index: 1; |
-} |
- |
-.section > h2 span { |
- -webkit-padding-end: 0.30em; |
- position: relative; |
- z-index: 2; |
-} |
- |
-.section-close-button { |
- -webkit-appearance: none; |
- -webkit-transition: opacity .15s; |
- background-color: transparent; |
- background-image: url(chrome://theme/IDR_CLOSE_BAR); |
- background-position: center center; |
- background-repeat no-repeat; |
- border: 0; |
- height: 21px; |
- margin-top: -10px; |
- position: absolute; |
- right: -21px; |
- top: 50%; |
- width: 21px; |
- opacity: 0; |
- z-index: 3; |
-} |
- |
-html[dir=rtl] .section-close-button { |
- left: -21px; |
- right: auto; |
-} |
- |
-.section > h2:hover .section-close-button, |
-.section-close-button:hover { |
- opacity: 1; |
-} |
- |
-.section-close-button:hover { |
- background-image: url(chrome://theme/IDR_CLOSE_BAR_H); |
-} |
- |
-#closed-sections-bar { |
- position: fixed; |
- text-align: end; |
-} |
- |
-/* closed-sections-bar is bottom aligned for non-ChromeOS build. On ChromeOS, |
-it goes right under the sections. */ |
-#closed-sections-bar:not([chromeos]) { |
- bottom: 14px; |
-} |
- |
-#closed-sections-bar > button { |
- /* We hide all these buttons by default and turn them on when needed. */ |
- display: none; |
- |
- -webkit-appearance: none; |
- background: none; |
- border: 0; |
- cursor: pointer; |
- font: inherit; |
- margin: 0; |
- -webkit-margin-start: 1.5em; |
- padding: 2px 0 0 0; |
- |
- /* Note: The font here should end up the same as .section > h2. A different |
- percentage is needed because the parent element here has a different size. */ |
- font-family: Helvetica, Arial, sans-serif; |
- font-size: 122%; |
- font-weight: normal; |
-} |
- |
-#closed-sections-bar > button > img { |
- -webkit-transform: rotate(90deg); |
- position: relative; |
- top: -2px; |
- margin-left: 1px; |
-} |
- |
-.maxiview { |
- padding: 5px 0 30px; |
- position: absolute; |
- -webkit-mask-attachment: fixed; |
- opacity: 0; |
-} |
- |
-.maxiview.opaque { |
- opacity: 1; |
-} |
- |
-.maxiview.collapsing { |
- opacity: 0; |
-} |
- |
-.maxiview.collapsed { |
- display: none; |
- opacity: 0; |
-} |
- |
-html[anim=true][enable-section-animations=true] .maxiview { |
- -webkit-transition: opacity .10s, top .15s; |
-} |
- |
-html[anim=true][enable-section-animations=true] .miniview { |
- -webkit-transition: opacity .15s; |
-} |
- |
-.section > .miniview { |
- display: none; |
- margin: 10px 0 30px; |
- white-space: nowrap; |
- overflow-x: hidden; |
-} |
- |
-.section.collapsed > * { |
- display: none; |
-} |
- |
-.section.collapsed > h2 { |
- display: block; |
-} |
- |
-.section.collapsed > .miniview { |
- display: block; |
- opacity: 0; |
-} |
- |
-.section.collapsed > .miniview.opaque { |
- opacity: 1; |
-} |
- |
-.section.collapsed > h2 { |
- margin-right: 0; |
-} |
- |
-.miniview > span { |
- display: inline-block; |
- max-width: 114px; /* Selected so that we can fit 5 items in EN-US */ |
- white-space: nowrap; |
- overflow: hidden; |
- text-overflow: ellipsis; |
- font-size: 100%; |
- margin: 0 10px; |
-} |
- |
-.miniview > span:first-child { |
- margin-left: 0; |
-} |
- |
-.miniview > span:last-child { |
- margin-right: 0; |
-} |
- |
-/* small */ |
- |
-.small-layout #main, |
-.small-layout .section, |
-.small-layout .maxiview, |
-.small-layout #login-container, |
-.small-layout #notification-container, |
-.small-layout #closed-sections-bar { |
- width: 692px; |
-} |
- |
-.small-layout #notification > * { |
- max-width: 300px; |
-} |
- |
-.small-layout #notification > span > .blacklist-title { |
- max-width: 15ex; |
-} |
- |
-/* Ensure we have at least 10px horizontal marging. */ |
-@media (max-width: 712px) { |
- #main { |
- margin-left: 10px; |
- margin-right: 10px; |
- } |
-} |