wanhose/cookie-dialog-monster
wanhose/cookie-dialog-monster
2
5
Fork 0
Code Issues 304 Pull Requests Releases 18 Wiki Activity

feat(browser-extension): update styles

Browse Source
This commit is contained in:
wanhose 2022-05-24 23:31:59 +02:00
parent 225567d21b
commit a74ac4b312
7 changed files with 104 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/browser-extension/src/assets/fonts/Lato-BoldItalic.ttf
View File

Binary file not shown.

BIN
packages/browser-extension/src/assets/fonts/Lato-Italic.ttf
View File

Binary file not shown.

5
packages/browser-extension/src/popup.html
View File

@ -8,7 +8,7 @@
<script src="/scripts/popup.js"></script>
</head>
<body>
<header class="header">
<header>
<h1 class="header-title">Cookie Dialog Monster</h1>
<div class="header-actions">
<button aria-label="Reload page" id="reload">
@ -41,7 +41,6 @@
<span class="slider"></span>
</div>
</label>
<div class="separator"></div>
<div>
<div class="rating">
<span data-i18n="reviewText"></span>
@ -85,7 +84,6 @@
<p data-i18n="negativeText" hidden="true" id="negative"></p>
<p data-i18n="positiveText" hidden="true" id="positive"></p>
</div>
<div class="separator"></div>
<div class="help">
<span data-i18n="helpText"></span>
<a href="mailto:wanhose.development@gmail.com" target="_blank">
@ -107,6 +105,7 @@
</div>
</main>
<footer>
<hr />
<span data-i18n="footerText"></span>
<a href="https://github.com/wanhose" target="_blank">wanhose</a>
</footer>

6
packages/browser-extension/src/scripts/background.js
View File

@ -123,9 +123,11 @@ const getData = async (callback) => {
const getTab = (callback) => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
const tab = tabs[0];
callback({
id: tabs[0]?.id,
hostname: new URL(tabs[0].url).hostname.split('.').slice(-2).join('.'),
id: tab?.id,
hostname: tab ? new URL(tab.url).hostname.split('.').slice(-2).join('.') : undefined,
});
});
};

4
packages/browser-extension/src/scripts/popup.js
View File

@ -37,11 +37,7 @@ const isChromium = chrome.runtime.getURL('').startsWith('chrome-extension://');
const handlePowerChange = () => {
dispatch({ type: 'GET_TAB' }, null, ({ hostname, id }) => {
dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => {
const power = document.getElementById('power');
dispatch({ hostname, state: { enabled: !enabled }, type: 'UPDATE_STORE' });
if (!enabled === false) power.removeAttribute('checked');
if (!enabled === true) power.setAttribute('checked', 'checked');
chrome.tabs.reload(id, { bypassCache: true });
});
});

185
packages/browser-extension/src/styles/globals.css
View File

@ -1,18 +1,27 @@
:root {
--color-chocolate: #47321e;
--color-cookie: #f2e9df;
--color-error: #cc0000;
--color-primary: #3dd9eb;
--color-secondary: #34495e;
--color-success: #5cb85c;
--color-tertiary: #6b7280;
--color-white: #ffffff;
}
a {
color: var(--color-star);
color: inherit;
display: inline-block;
font-weight: bold;
outline: none;
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
}
body {
color: var(--color-chocolate);
color: var(--color-tertiary);
display: flex;
flex-direction: column;
font-family: 'Lato', Arial, Helvetica, sans-serif;
@ -21,15 +30,48 @@ body {
}
button {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
outline: none;
}
button:focus {
outline: none;
footer {
font-size: 0.75rem;
margin-top: auto;
padding: 1rem;
text-align: center;
}
header {
align-items: center;
background-color: var(--color-secondary);
color: var(--color-white);
display: flex;
font-size: 1rem;
height: 3rem;
justify-content: space-between;
padding: 0 1rem;
}
hr {
margin-bottom: 1rem;
}
input:checked + .slider {
background-color: var(--color-secondary);
}
input:focus + .slider {
box-shadow: 0 0 0.0625rem var(--color-secondary);
}
input:checked + .slider:before {
transform: translateX(1.25rem);
}
main {
display: flex;
flex-direction: column;
gap: 1.25rem;
padding: 1rem;
}
span {
@ -45,19 +87,6 @@ svg {
width: 1rem;
}
/* Header */
.header {
align-items: center;
background-color: var(--color-cookie);
display: flex;
font-size: 1rem;
font-weight: bold;
height: 3rem;
justify-content: space-between;
padding: 0 1rem;
}
.header-actions {
align-items: center;
display: flex;
@ -65,43 +94,21 @@ svg {
.header-actions > button {
border-radius: 0.125rem;
color: var(--color-chocolate);
color: var(--color-white);
padding: 0.25rem;
transition: 0.4s;
}
.header-actions > button:focus,
.header-actions > button:hover {
background-color: var(--color-chocolate);
color: var(--color-cookie);
background-color: var(--color-white);
color: var(--color-secondary);
}
.header-title {
font-size: 1rem;
font-weight: bold;
margin: 0;
}
/* Main */
main {
display: flex;
flex-direction: column;
padding: 1rem;
}
/* Footer */
footer {
border-top: 0.0625rem solid var(--color-cookie);
font-size: 0.75rem;
margin-top: auto;
padding: 1rem;
text-align: center;
}
/* Help */
.help {
align-items: center;
display: flex;
@ -109,16 +116,16 @@ footer {
}
.help > a {
color: var(--color-secondary);
padding: 0.25rem;
text-decoration: none;
transition: 0.4s;
}
.help > a:focus,
.help > a:hover {
background-color: var(--color-chocolate);
background-color: var(--color-secondary);
border-radius: 0.125rem;
color: var(--color-cookie);
color: var(--color-white);
outline: none;
}
@ -126,32 +133,6 @@ footer {
font-size: 0.875rem;
}
/* Rating */
#like,
#unlike {
color: var(--color-chocolate);
cursor: pointer;
padding: 0.25rem;
transition: 0.4s;
}
#like:focus,
#like:hover {
color: var(--color-success);
}
#negative,
#positive {
background-color: var(--color-cookie);
border-radius: 0.125rem;
font-size: 0.75rem;
line-height: 1rem;
margin-bottom: 0;
margin-top: 1rem;
padding: 1rem;
}
.rating {
align-items: center;
display: flex;
@ -171,22 +152,6 @@ footer {
margin-left: 1rem;
}
#unlike:focus,
#unlike:hover {
color: var(--color-error);
}
/* Separator */
.separator {
border-bottom: 0.0625rem solid var(--color-cookie);
height: 0;
margin-bottom: 1rem;
margin-top: 1rem;
}
/* Switch */
.switch {
display: inline-block;
flex-shrink: 0;
@ -214,7 +179,7 @@ footer {
}
.slider {
background-color: var(--color-cookie);
background-color: var(--color-tertiary);
bottom: 0;
cursor: pointer;
left: 0;
@ -235,14 +200,32 @@ footer {
width: 0.75rem;
}
input:checked + .slider {
background-color: var(--color-chocolate);
#like,
#unlike {
color: var(--color-secondary);
cursor: pointer;
padding: 0.25rem;
transition: 0.4s;
}
input:focus + .slider {
box-shadow: 0 0 0.0625rem var(--color-chocolate);
#like:focus,
#like:hover {
color: var(--color-success);
}
input:checked + .slider:before {
transform: translateX(1.25rem);
#negative,
#positive {
background-color: var(--color-secondary);
border-radius: 0.125rem;
color: var(--color-white);
font-size: 0.75rem;
line-height: 1rem;
margin-bottom: 0;
margin-top: 1rem;
padding: 1rem;
}
#unlike:focus,
#unlike:hover {
color: var(--color-error);
}

14
packages/browser-extension/src/styles/reset.css
View File

@ -30,8 +30,22 @@ th,
td,
caption {
font-weight: normal;
margin: 0;
}
img {
border: 0;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
margin: 0;
}
hr {
margin: 0;
padding: 0;
}