Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

misc(treemap): tweak styles for logo spacing and text colors #12342

Merged
merged 3 commits into from Apr 13, 2021
Merged

misc(treemap): tweak styles for logo spacing and text colors #12342

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86cb461
misc(treemap): tweak styles for logo spacing and text colors
connorjclark Apr 8, 2021
7b20710
edit
connorjclark Apr 9, 2021
549668f
Merge remote-tracking branch 'origin/master' into treemap-style-tweaks
connorjclark Apr 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
85 changes: 41 additions & 44 deletions lighthouse-treemap/app/index.html
View file
Open in desktop
Expand Up @@ -17,59 +17,56 @@
<link rel="stylesheet" href="styles/bundled.css">
</head>

<body>
<body class="vars">
<main class="lh-main">
<div class="lh-settings">
<header>
<style>
.lh-topbar__logo {
connorjclark marked this conversation as resolved.
Show resolved Hide resolved
width: 24px;
height: 24px;
user-select: none;
flex: none;
}
</style>
<div class="lh-header--section">
<style>
.lh-topbar__logo {
width: 24px;
height: 24px;
user-select: none;
flex: none;
}
</style>
<!-- Lighthouse logo. Stolen from templates.html -->
<svg class="lh-topbar__logo" viewBox="0 0 24 24">
<defs>
<linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d">
<stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
<stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
<path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
<path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
<path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
<path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
</g>
</svg>

<div>
<!-- Lighthouse logo. Stolen from templates.html -->
<svg class="lh-topbar__logo" viewBox="0 0 24 24">
<defs>
<linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="lh-topbar__logo--a">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="lh-topbar__logo--b">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="lh-topbar__logo--c">
<stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
<stop stop-color="#262626" stop-opacity="0" offset="100%"/>
</linearGradient>
<linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="lh-topbar__logo--d">
<stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
<stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
<path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
<path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#lh-topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
<path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
<path fill="url(#lh-topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
<path fill="url(#lh-topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
</g>
</svg>

<span class="lh-header--title lh-text-dim">Lighthouse Treemap</span>
</div>
<span class="lh-header--title lh-text-dim">Lighthouse Treemap</span>
</div>

<div class="lh-header--section">
<span class="lh-header--url-and-size">
<a href="" class="lh-header--url" target="_blank" rel="noopener"></a> • <span class="lh-header--size lh-text-dim"></span></span>
<a href="" class="lh-header--url" target="_blank" rel="noopener"></a> <span class="lh-text-dim">·</span> <span class="lh-header--size lh-text-dim"></span></span>
</span>
<div class="lh-mode-wrapper">
<div class="lh-modes">
Expand Down
6 changes: 3 additions & 3 deletions lighthouse-treemap/app/src/main.js
View file
Open in desktop
Expand Up @@ -282,9 +282,9 @@ function renderViewModeButtons(viewModes) {
viewModeEl.id = `view-mode--${viewMode.id}`;

const labelEl =
TreemapUtil.createChildOf(viewModeEl, 'label', 'view-mode__label');
TreemapUtil.createChildOf(labelEl, 'span').textContent = viewMode.label;
TreemapUtil.createChildOf(labelEl, 'span', 'lh-text-dim').textContent =
TreemapUtil.createChildOf(viewModeEl, 'label');
connorjclark marked this conversation as resolved.
Show resolved Hide resolved
TreemapUtil.createChildOf(labelEl, 'span', 'view-mode__label').textContent = viewMode.label;
TreemapUtil.createChildOf(labelEl, 'span', 'view-mode__sublabel lh-text-dim').textContent =
` (${viewMode.subLabel})`;

const inputEl = TreemapUtil.createChildOf(labelEl, 'input', 'view-mode__button', {
Expand Down
36 changes: 31 additions & 5 deletions lighthouse-treemap/app/styles/treemap.css
View file
Open in desktop
Expand Up @@ -4,8 +4,21 @@
* Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/

.vars {
/* Palette using Material Design Colors
* https://www.materialui.co/colors */
--color-gray-600: #757575;
--color-gray-900: #212121;

--text-color-secondary: var(--color-gray-600);
--text-color: var(--color-gray-900);
--view-mode-label-color-active: #2a67ce;
--view-mode-sublabel-color-active: #4484f3c7;
}

body {
font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande', sans-serif;
color: var(--text-color);
margin: 0;
overflow-y: hidden;
height: 100vh;
Expand All @@ -14,7 +27,7 @@ body {
}

.lh-text-dim {
color: grey;
color: var(--text-color-secondary);
}

.lh-main {
Expand All @@ -27,10 +40,12 @@ body {

.lh-header--section {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20px;
}
.lh-header--section:nth-of-type(2) {
justify-content: space-between;
}
.lh-header--url {
font-weight: bold;
text-decoration: none;
Expand All @@ -49,10 +64,14 @@ body {

.view-mode {
cursor: pointer;
border: solid 1px blue;
border: solid 1px #e1e2e5;
box-shadow: 0 0 0 1px #e1e2e5;
padding: 5px;
font-size: 16px;
}
.view-mode__sublabel {
/* color: #4484f3c7; */
connorjclark marked this conversation as resolved.
Show resolved Hide resolved
}
.view-mode:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
Expand All @@ -62,7 +81,14 @@ body {
border-bottom-right-radius: 2px;
}
.view-mode--active {
background-color: lightblue;
background-color: #e7f1fe;
border-color: #d2e3fc;
}
.view-mode--active .view-mode__label {
color: var(--view-mode-label-color-active);
}
.view-mode--active .view-mode__sublabel {
color: var(--view-mode-sublabel-color-active);
}

.view-mode__button {
Expand All @@ -71,7 +97,7 @@ body {
left: -9999px;
}

label.view-mode__label {
.view-mode label {
cursor: pointer;
}

Expand Down