| 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;
|
| - }
|
| -}
|
|
|