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

fix(browser-extension): how options and popup look on mobile

Browse Source
This commit is contained in:
wanhose 2024-10-10 15:54:57 +02:00
parent 21b174a53d
commit 12204f06df
4 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/browser-extension/src/options.html
View File

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cookie Dialog Monster > Exclusion List</title>
<link rel="stylesheet" href="/styles/reset.css" />
<link rel="stylesheet" href="/styles/options.css" />

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

@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/styles/reset.css" />
<link rel="stylesheet" href="/styles/popup.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter" />

15
packages/browser-extension/src/styles/options.css
View File

@ -40,6 +40,12 @@ button[data-variant='large'] {
padding: 8px;
}
@media (max-width: 768px) {
button[data-variant='large'] {
justify-content: flex-end;
}
}
button:focus,
button:hover {
background-color: var(--color-secondary);
@ -104,11 +110,18 @@ main {
.button-group {
display: flex;
justify-content: flex-end;
gap: 4px;
justify-content: flex-end;
margin-bottom: 4px;
}
@media (max-width: 768px) {
.button-group {
display: grid;
grid-template-columns: repeat(2, minmax(0px, 1fr));
}
}
#exclusion-list {
font-size: 14px;
list-style: none;

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

@ -15,6 +15,12 @@ body {
width: 320px;
}
@media (max-width: 768px) {
body {
width: auto;
}
}
body * {
box-sizing: border-box;
}
@ -74,6 +80,14 @@ header {
}
}
@media (max-width: 768px) {
main {
margin: 0 auto;
max-width: 320px;
width: 100%;
}
}
main > .banner {
background-color: #f39c12;
color: #c0392b;