Skip to content

Commit

Permalink
Start fixing styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonathanKingston
jonathanKingston committed Jun 5, 2017
1 parent 06d35e6 commit 15477dc
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 60 deletions.
197 changes: 150 additions & 47 deletions webextension/css/popup.css
View file
@@ -1,16 +1,55 @@
/* General Rules and Resets */
body {
inline-size: 300px;
max-inline-size: 300px;
* {
font-size: inherit;
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
padding-block-end: 0;
padding-block-start: 0;
padding-inline-end: 0;
padding-inline-start: 0;
}

html {
box-sizing: border-box;
font-size: 12px;
}

body {
font-family: Roboto, Noto, "San Francisco", Ubuntu, "Segoe UI", "Fira Sans", message-box, Arial, sans-serif;
inline-size: 300px;
max-inline-size: 300px;
}

:root {
--font-size-heading: 16px;
--primary-action-color: #248aeb;
--title-text-color: #000;
--text-normal-color: #4a4a4a;
--text-heading-color: #000;

/* calculated from 12px */
--font-size-heading: 1.33rem; /* 16px */
--block-line-space-size: 0.5rem; /* 6px */
--inline-item-space-size: 0.5rem; /* 6px */
--block-line-separation-size: 0.33rem; /* 10px */
--inline-icon-space-size: 0.833rem; /* 10px */

/* Use for url and icon size */
--block-url-label-size: 2rem; /* 24px */
--inline-start-size: 1.66rem; /* 20px */
--inline-button-size: 5.833rem; /* 70px */
--icon-size: 1.166rem; /* 14px */

--small-text-size: 0.833rem; /* 10px */
--small-radius: 3px;
--icon-button-size: calc(calc(var(--block-line-separation-size) * 2) + 1.66rem); /* 20px */
}

@media (min-resolution: 1dppx) {
html {
font-size: 14px;
}
}

*,
Expand All @@ -35,6 +74,7 @@ table {
}

.scrollable {
border-block-start: 1px solid #f1f1f1;
inline-size: 100%;
max-block-size: 400px;
overflow: auto;
Expand Down Expand Up @@ -146,6 +186,10 @@ table {
}

/* Buttons */
.button {
color: black;
}

.button.primary {
background-color: #0996f8;
color: white;
Expand Down Expand Up @@ -216,7 +260,7 @@ table {
.column-panel-content .button,
.panel-footer .button {
align-items: center;
block-size: 54px;
block-size: 100%;
display: flex;
flex: 1;
justify-content: center;
Expand Down Expand Up @@ -265,7 +309,7 @@ table {
}

.onboarding p {
color: #4a4a4a;
color: var(--text-normal-color);
font-size: 14px;
margin-block-end: 16px;
max-inline-size: 84%;
Expand Down Expand Up @@ -294,9 +338,10 @@ table {
manage things like container crud */
.pop-button {
align-items: center;
block-size: 48px;
block-size: var(--icon-button-size);
cursor: pointer;
display: flex;
flex: 0 0 48px;
flex: 0 0 var(--icon-button-size);
justify-content: center;
}

Expand All @@ -321,6 +366,10 @@ manage things like container crud */
.pop-button-image {
block-size: 20px;
flex: 0 0 20px;
margin-block-end: auto;
margin-block-start: auto;
margin-inline-end: auto;
margin-inline-start: auto;
}

.pop-button-image-small {
Expand All @@ -332,18 +381,21 @@ manage things like container crud */
.panel-header {
align-items: center;
block-size: 48px;
border-block-end: 1px solid #ebebeb;
display: flex;
justify-content: space-between;
}

.panel-header .usercontext-icon {
inline-size: var(--icon-button-size);
}

.column-panel-content .panel-header {
flex: 0 0 48px;
inline-size: 100%;
}

.panel-header-text {
color: #4a4a4a;
color: var(--text-normal-color);
flex: 1;
font-size: var(--font-size-heading);
font-weight: normal;
Expand Down Expand Up @@ -371,8 +423,31 @@ manage things like container crud */
text-transform: uppercase;
}

.container-panel-controls {
display: flex;
justify-content: flex-end;
margin-block-end: var(--block-line-space-size);
margin-block-start: var(--block-line-space-size);
margin-inline-end: var(--inline-item-space-size);
margin-inline-start: var(--inline-item-space-size);
}

#container-panel #sort-containers-link {
margin-inline-end: 16px;
align-items: center;
block-size: var(--block-url-label-size);
border: 1px solid #d8d8d8;
border-radius: var(--small-radius);
color: var(--title-text-color);
display: flex;
font-size: var(--small-text-size);
inline-size: var(--inline-button-size);
justify-content: center;
text-decoration: none;
}

#container-panel #sort-containers-link:hover,
#container-panel #sort-containers-link:focus {
background: #f2f2f2;
}

span ~ .panel-header-text {
Expand All @@ -383,41 +458,75 @@ span ~ .panel-header-text {
}

#current-tab {
align-items: center;
color: var(--text-normal-color);
display: grid;
font-size: var(--small-text-size);
grid-column-gap: var(--inline-item-space-size);
grid-row-gap: var(--block-line-space-size);
grid-template-columns: var(--icon-size) var(--icon-size) 1fr;
margin-block-end: var(--block-line-space-size);
margin-block-start: var(--block-line-separation-size);
margin-inline-end: var(--inline-start-size);
margin-inline-start: var(--inline-start-size);
max-inline-size: 100%;
min-block-size: 91px;
padding-block-end: 13px;
padding-block-start: 13px;
padding-inline-end: 16px;
padding-inline-start: 16px;
}

#current-tab img {
max-block-size: var(--icon-size);
}

#current-tab > h3 {
color: #4a4a4a;
font-size: var(--font-size-heading);
color: var(--text-heading-color);
font-weight: normal;
margin-block-end: 3px;
grid-column: span 3;
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
}

#current-page > img {
block-size: 16px;
inline-size: 16px;
#current-page {
display: contents;
}

#current-tab .page-title {
font-size: var(--font-size-heading);
grid-column: 2 / 4;
}

#current-tab > label {
align-items: center;
display: flex;
margin-inline-start: 17px;
white-space: nowrap;
display: contents;
font-size: var(--small-text-size);
}

#current-tab > label > input {
display: inline;
-moz-appearance: none;
block-size: var(--icon-size);
border: 1px solid #d8d8d8;
border-radius: var(--small-radius);
display: block;
grid-column-start: 2;
inline-size: var(--icon-size);
margin-block-end: 0;
margin-block-start: 0;
margin-inline-end: 0;
margin-inline-start: 0;
}

#current-tab > label > input[disabled] {
background-color: #efefef;
}

#current-tab > label > input:checked {
background-image: url("chrome://global/skin/in-content/check.svg#check-native");
background-position: -1px -1px;
background-size: var(--icon-size);
}

#current-container {
color: var(--identity-tab-color);
flex: 1;
text-transform: lowercase;
}

#current-tab > label > .usercontext-icon {
Expand All @@ -434,7 +543,6 @@ span ~ .panel-header-text {
.container-panel-row {
align-items: center;
background-color: #fefefe !important;
block-size: 48px;
border-block-end: 1px solid #f1f1f1;
box-sizing: border-box;
display: flex;
Expand Down Expand Up @@ -465,8 +573,9 @@ span ~ .panel-header-text {
}

.userContext-icon-wrapper {
block-size: 48px;
flex: 0 0 48px;
block-size: var(--icon-button-size);
flex: 0 0 var(--icon-button-size);
margin-inline-start: var(--inline-icon-space-size);
}

/* .userContext-icon is used natively, Bug 1333811 was raised to fix */
Expand All @@ -475,24 +584,28 @@ span ~ .panel-header-text {
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
block-size: 48px;
block-size: 100%;
fill: var(--identity-icon-color);
filter: url('/img/filters.svg#fill');
flex: 0 0 48px;
}

.container-panel-row:hover .clickable .usercontext-icon,
.container-panel-row:focus .clickable .usercontext-icon {
background-image: url('/img/container-newtab.svg');
fill: 'gray';
fill: #979797;
filter: url('/img/filters.svg#fill');
}

.container-panel-row .clickable:hover .usercontext-icon,
.container-panel-row .clickable:focus .usercontext-icon {
fill: #0094fb;
}

/* Panel Footer */
.panel-footer {
align-items: center;
background: #efefef;
block-size: 54px;
block-size: var(--icon-button-size);
border-block-end: 1px solid #d8d8d8;
color: #000;
display: flex;
Expand All @@ -501,14 +614,9 @@ span ~ .panel-header-text {
justify-content: space-between;
}

.panel-footer .pop-button {
block-size: 54px;
flex: 0 0 54px;
}

.edit-containers-text {
align-items: center;
block-size: 54px;
block-size: 100%;
border-inline-end: solid 1px #d8d8d8;
display: flex;
flex: 1;
Expand All @@ -517,18 +625,14 @@ span ~ .panel-header-text {

.edit-containers-text a {
align-items: center;
block-size: 54px;
block-size: 100%;
color: #0a0a0a;
display: flex;
flex: 1;
justify-content: center;
}

/* Container info list */
#container-info-name {
margin-inline-end: 0.5rem;
}

.container-info-tab-title {
flex: 1;
}
Expand Down Expand Up @@ -578,7 +682,6 @@ span ~ .panel-header-text {
}

.container-info-list {
border-block-start: 1px solid #ebebeb;
display: flex;
flex-direction: column;
margin-block-start: 4px;
Expand Down
8 changes: 3 additions & 5 deletions webextension/js/popup.js
View file
Expand Up @@ -445,16 +445,14 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
const siteSettings = await Logic.getAssignment(currentTab);
this.setupAssignmentCheckbox(siteSettings);
const currentPage = document.getElementById("current-page");
currentPage.innerHTML = escaped`${currentTab.title}`;
currentPage.innerHTML = escaped`<span class="page-title truncate-text">${currentTab.title}</span>`;
const favIconElement = Utils.createFavIconElement(currentTab.favIconUrl || "");
currentPage.prepend(favIconElement);

const currentContainer = document.getElementById("current-container");
currentContainer.innerText = identity.name;

const currentContainerIcon = document.getElementById("current-container-icon");
currentContainerIcon.setAttribute("data-identity-icon", identity.icon);
currentContainerIcon.setAttribute("data-identity-color", identity.color);
currentContainer.setAttribute("data-identity-color", identity.color);
}
},

Expand Down Expand Up @@ -516,7 +514,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
});
});

const list = document.querySelector(".identities-list");
const list = document.querySelector(".identities-list tbody");

list.innerHTML = "";
list.appendChild(fragment);
Expand Down

0 comments on commit 15477dc

Please sign in to comment.