Skip to content

GitLab

T
tangled
Commit 03d083a8 authored by Marc Treib's avatar Marc Treib Committed by Commit Bot
Browse files
Options

Most Visited iframe: Set theme info via a css class and variable 

instead of manually constructing a css string.

Bug: none
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I5f861efe80a87bae39c4116c2b798b04b462d4eb
Reviewed-on: https://chromium-review.googlesource.com/796418
Commit-Queue: Marc Treib <treib@chromium.org>
Reviewed-by: default avatarChris Pickel <sfiera@chromium.org>
Cr-Commit-Position: refs/heads/master@{#520526}
parent 80aa28d7
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 37 deletions
chrome/browser/resources/local_ntp/most_visited_single.css
View file @ 03d083a8
...@@ -3,15 +3,19 @@ ...@@ -3,15 +3,19 @@
* found in the LICENSE file. */ * found in the LICENSE file. */
html { html {
/* Constants. */
--tile-height: 128px; --tile-height: 128px;
--tile-margin: 16px; --tile-margin: 16px;
--tile-width: 154px; --tile-width: 154px;
--title-height: 32px; --title-height: 32px;
/* May be overridden by themes (on the body element). */
--tile-title-color: #323232;
} }
body { body {
background: none transparent; background: none transparent;
color: #323232; color: var(--tile-title-color);
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
...@@ -136,6 +140,11 @@ a:visited { ...@@ -136,6 +140,11 @@ a:visited {
background: rgb(245,245,245); background: rgb(245,245,245);
} }
body.dark-theme .mv-tile,
body.dark-theme .mv-empty-tile {
background: rgb(51,51,51);
}
.mv-tile { .mv-tile {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
cursor: pointer; cursor: pointer;
...@@ -223,6 +232,10 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] { ...@@ -223,6 +232,10 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
background-color: rgb(245,245,245); background-color: rgb(245,245,245);
} }
body.dark-theme .mv-thumb.failed-img {
background-color: #555;
}
/* We use ::after without content to provide an aditional element on top of the /* We use ::after without content to provide an aditional element on top of the
* thumbnail. */ * thumbnail. */
.mv-thumb.failed-img::after { .mv-thumb.failed-img::after {
...@@ -235,6 +248,10 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] { ...@@ -235,6 +248,10 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
width: 0; width: 0;
} }
body.dark-theme .mv-thumb.failed-img::after {
border-color: #333;
}
.mv-x { .mv-x {
background: linear-gradient(to left, rgb(250,250,250) 60%, transparent); background: linear-gradient(to left, rgb(250,250,250) 60%, transparent);
border: none; border: none;
...@@ -248,6 +265,10 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] { ...@@ -248,6 +265,10 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
width: 40px; width: 40px;
} }
body.dark-theme .mv-x {
background: linear-gradient(to left, rgb(51,51,51) 60%, transparent);
}
/* We use ::after without content to provide the masked X element. The "bottom" /* We use ::after without content to provide the masked X element. The "bottom"
* div is actually just the gradient. */ * div is actually just the gradient. */
.mv-x::after { .mv-x::after {
...@@ -269,12 +290,20 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] { ...@@ -269,12 +290,20 @@ html[dir=rtl] .mv-title[style*='direction: rtl'] {
width: var(--title-height); width: var(--title-height);
} }
body.dark-theme .mv-x.mv-x::after {
background-color: rgba(255,255,255,0.7);
}
html[dir=rtl] .mv-x { html[dir=rtl] .mv-x {
background: linear-gradient(to right, rgb(250,250,250) 60%, transparent); background: linear-gradient(to right, rgb(250,250,250) 60%, transparent);
left: -1px; left: -1px;
right: auto; right: auto;
} }
body.dark-theme body.dark-theme .mv-x {
background: linear-gradient(to right, rgb(51,51,51) 60%, transparent);
}
html[dir=rtl] .mv-x::after { html[dir=rtl] .mv-x::after {
left: -1px; left: -1px;
right: auto; right: auto;
...@@ -284,10 +313,18 @@ html[dir=rtl] .mv-x::after { ...@@ -284,10 +313,18 @@ html[dir=rtl] .mv-x::after {
background-color: rgb(90,90,90); background-color: rgb(90,90,90);
} }
body.dark-theme .mv-x:hover::after {
background-color: #fff;
}
.mv-x:active::after { .mv-x:active::after {
background-color: rgb(66,133,244); background-color: rgb(66,133,244);
} }
body.dark-theme .mv-x:active::after {
background-color: rgba(255,255,255,0.5);
}
.mv-tile:hover .mv-x, .mv-tile:hover .mv-x,
.mv-tile:focus .mv-x { .mv-tile:focus .mv-x {
opacity: 1; opacity: 1;
......
chrome/browser/resources/local_ntp/most_visited_single.html
View file @ 03d083a8
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
<base target="_top"> <base target="_top">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="single.css"> <link rel="stylesheet" type="text/css" href="single.css">
<style type="text/css" id="custom-theme"></style>
<script src="single.js"></script> <script src="single.js"></script>
</head> </head>
<body> <body>
......
chrome/browser/resources/local_ntp/most_visited_single.js
View file @ 03d083a8
...@@ -223,41 +223,8 @@ var showTiles = function(info) { ...@@ -223,41 +223,8 @@ var showTiles = function(info) {
* @param {object} info Data received in the message. * @param {object} info Data received in the message.
*/ */
var updateTheme = function(info) { var updateTheme = function(info) {
var themeStyle = []; document.body.style.setProperty('--tile-title-color', info.tileTitleColor);
document.body.classList.toggle('dark-theme', info.isThemeDark);
if (info.isThemeDark) {
themeStyle.push(
'.mv-tile, .mv-empty-tile { ' +
'background: rgb(51,51,51); }');
themeStyle.push(
'.mv-thumb.failed-img { ' +
'background-color: #555; }');
themeStyle.push(
'.mv-thumb.failed-img::after { ' +
'border-color: #333; }');
themeStyle.push(
'.mv-x { ' +
'background: linear-gradient(to left, ' +
'rgb(51,51,51) 60%, transparent); }');
themeStyle.push(
'html[dir=rtl] .mv-x { ' +
'background: linear-gradient(to right, ' +
'rgb(51,51,51) 60%, transparent); }');
themeStyle.push(
'.mv-x::after { ' +
'background-color: rgba(255,255,255,0.7); }');
themeStyle.push(
'.mv-x:hover::after { ' +
'background-color: #fff; }');
themeStyle.push(
'.mv-x:active::after { ' +
'background-color: rgba(255,255,255,0.5); }');
}
if (info.tileTitleColor) {
themeStyle.push('body { color: ' + info.tileTitleColor + '; }');
}
document.querySelector('#custom-theme').textContent = themeStyle.join('\n');
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment