v1.7.5/version bump
- fix popup styling - add changelog toggle
This commit is contained in:
+169
-86
@@ -13,9 +13,74 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="preload" as="font" href="/fonts/glacialindifference-bold-webfont.woff" crossorigin />
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
href="/fonts/glacialindifference-bold-webfont.woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
href="/fonts/glacialindifference-italic-webfont.woff"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
href="/fonts/glacialindifference-italic-webfont.woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
href="/fonts/glacialindifference-regular-webfont.woff"
|
||||
crossorigin
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
as="font"
|
||||
href="/fonts/glacialindifference-regular-webfont.woff2"
|
||||
crossorigin
|
||||
/>
|
||||
<style>
|
||||
* {
|
||||
font-family: Roboto, sans-serif;
|
||||
@font-face {
|
||||
font-family: 'GlacialBold';
|
||||
src: url('/fonts/glacialindifference-bold-webfont.woff2') format('woff2'),
|
||||
url('/fonts/glacialindifference-bold-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'GlacialItalic';
|
||||
src: url('/fonts/glacialindifference-italic-webfont.woff2') format('woff2'),
|
||||
url('/fonts/glacialindifference-italic-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Glacial';
|
||||
src: url('/fonts/glacialindifference-regular-webfont.woff2') format('woff2'),
|
||||
url('/fonts/glacialindifference-regular-webfont.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
[data-font='sans'] {
|
||||
font-family: 'Glacial', sans-serif;
|
||||
font-display: swap;
|
||||
}
|
||||
[data-font='sans-bold'] {
|
||||
font-family: 'GlacialBold', sans-serif;
|
||||
font-display: swap;
|
||||
}
|
||||
[data-font='sans-italic'] {
|
||||
font-family: 'GlacialItalic', sans-serif;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
:root {
|
||||
--mdc-theme-primary: #beff94 !important;
|
||||
@@ -36,72 +101,99 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
--mdc-theme-text-disabled-on-dark: #8bc000 !important;
|
||||
--mdc-theme-text-icon-on-dark: #beff94 !important;
|
||||
}
|
||||
.mdc-button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 2.5px 0px;
|
||||
* {
|
||||
font-family: 'Glacial';
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background: var(--mdc-theme-text-secondary-on-light);
|
||||
padding: 15px;
|
||||
html {
|
||||
font-size: 10px;
|
||||
background-color: #424242;
|
||||
height: max-content;
|
||||
width: max-content;
|
||||
height: -moz-fit-content;
|
||||
width: -moz-fit-content;
|
||||
}
|
||||
#clear-button {
|
||||
font-size: 10px;
|
||||
body {
|
||||
padding: 2.5rem;
|
||||
background-color: #424242;
|
||||
height: max-content;
|
||||
width: max-content;
|
||||
height: -moz-fit-content;
|
||||
width: -moz-fit-content;
|
||||
max-width: 300px;
|
||||
}
|
||||
h5 {
|
||||
color: var(--mdc-theme-primary);
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.5rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
p {
|
||||
color: white;
|
||||
font-size: 1.4rem;
|
||||
max-width: 300px;
|
||||
margin: 1.5rem 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.mdc-switch {
|
||||
--mdc-theme-secondary: #beff94 !important;
|
||||
--mdc-theme-surface: #ffffff !important;
|
||||
margin: 10px 5px;
|
||||
.mdc-button {
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
.label-container > * {
|
||||
#clear-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
}
|
||||
label {
|
||||
color: var(--mdc-theme-text-primary-on-dark);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.switch-container {
|
||||
margin: 20px 0;
|
||||
min-width: max-content;
|
||||
min-width: -moz-max-content;
|
||||
}
|
||||
.switch-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
.switch-wrapper .label-container {
|
||||
margin-left: 5px;
|
||||
flex: 1;
|
||||
}
|
||||
.switch-wrapper .label-container span {
|
||||
color: var(--mdc-theme-text-hint-on-dark);
|
||||
}
|
||||
|
||||
a.mdc-button {
|
||||
font-size: 10px;
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
}
|
||||
#divider {
|
||||
height: 1px;
|
||||
background: #555555;
|
||||
position: relative;
|
||||
margin: 15px 0;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
#divider::before {
|
||||
content: attr(data-title);
|
||||
color: white;
|
||||
top: -8px;
|
||||
position: absolute;
|
||||
background-color: #2c2c2c;
|
||||
padding-right: 10px;
|
||||
background: #424242;
|
||||
padding-right: 2rem;
|
||||
top: -0.5rem;
|
||||
letter-spacing: 4px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.switch-container {
|
||||
width: 100%;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.switch-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.mdc-switch__track {
|
||||
background-color: var(--mdc-theme-primary) !important;
|
||||
border-color: var(--mdc-theme-primary) !important;
|
||||
}
|
||||
.mdc-switch__thumb {
|
||||
background-color: var(--mdc-theme-primary) !important;
|
||||
border-color: var(--mdc-theme-primary) !important;
|
||||
}
|
||||
.label-container {
|
||||
margin-left: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.label-container label {
|
||||
font-size: 1.5rem;
|
||||
color: var(--mdc-theme-primary);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.label-container span {
|
||||
font-size: 1.2rem;
|
||||
margin: 0.25rem 0;
|
||||
color: var(--mdc-theme-text-hint-on-dark);
|
||||
}
|
||||
.label-container div {
|
||||
font-size: 1.2rem;
|
||||
margin: 0.25rem 0;
|
||||
color: var(--mdc-theme-text-hint-on-dark);
|
||||
}
|
||||
</style>
|
||||
<link href="mdc.css" rel="stylesheet" />
|
||||
@@ -111,28 +203,8 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
<body>
|
||||
<script src="popup.js"></script>
|
||||
|
||||
<h5
|
||||
style="
|
||||
margin: 0;
|
||||
color: var(--mdc-theme-text-primary-on-dark);
|
||||
letter-spacing: 3px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 10px;
|
||||
"
|
||||
>
|
||||
WATCH PARTY
|
||||
</h5>
|
||||
<p
|
||||
style="
|
||||
margin-top: 0;
|
||||
margin-bottom: 25px !important;
|
||||
display: block;
|
||||
color: var(--mdc-theme-on-error);
|
||||
"
|
||||
>
|
||||
To use Watch Party, head on over to any supported website.
|
||||
</p>
|
||||
<h5 data-font="sans-bold">WATCH PARTY</h5>
|
||||
<p>To use Watch Party, head on over to any supported website.</p>
|
||||
<div data-title="LINKS" id="divider"></div>
|
||||
<a class="mdc-button" target="_blank" href="https://www.chromewatchparty.com/welcome">
|
||||
<div class="mdc-button__ripple"></div>
|
||||
@@ -165,33 +237,44 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
|
||||
|
||||
<div class="switch-container">
|
||||
<div class="switch-wrapper">
|
||||
<div class="mdc-switch">
|
||||
<div class="mdc-switch" id="show-toggle">
|
||||
<div class="mdc-switch__track"></div>
|
||||
<div class="mdc-switch__thumb-underlay">
|
||||
<div class="mdc-switch__thumb"></div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="another-basic-switch"
|
||||
id="show-switch"
|
||||
class="mdc-switch__native-control"
|
||||
role="switch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label-container">
|
||||
<label for="another-basic-switch">Show / hide Watch Party button</label>
|
||||
<label for="show-switch">Show / hide Watch Party button</label>
|
||||
<span>Currently showing Watch Party button</span>
|
||||
<div>Refresh page after changing show/hide status.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: var(--mdc-theme-text-hint-on-dark);
|
||||
font-size: 12.5px;
|
||||
text-align: center;
|
||||
"
|
||||
>
|
||||
Refresh page after changing show/hide status.
|
||||
</div>
|
||||
|
||||
<div class="switch-container">
|
||||
<div class="switch-wrapper">
|
||||
<div class="mdc-switch" id="changelog-toggle">
|
||||
<div class="mdc-switch__track"></div>
|
||||
<div class="mdc-switch__thumb-underlay">
|
||||
<div class="mdc-switch__thumb"></div>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="changelog-switch"
|
||||
class="mdc-switch__native-control"
|
||||
role="switch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="label-container">
|
||||
<label for="changelog-switch">Open changelog on update</label>
|
||||
<span>Will open changelog on Watch Party update</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user