mirror of
https://github.com/Alvin-Zilverstand/return-youtube-dislike.git
synced 2026-09-12 09:58:20 +02:00
Update Popup UI to Material 3 (#986)
* basic retheme on homepage * basic material 3 theme * fix slider head
This commit is contained in:
Kenny
@@ -0,0 +1,7 @@
|
||||
<svg width="48" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
|
||||
fill="red"
|
||||
/>
|
||||
<path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 420 B |
@@ -1,20 +1,49 @@
|
||||
/* Variables */
|
||||
:root {
|
||||
--primary: #cc2929;
|
||||
--accent: #581111;
|
||||
--primary: #f39090;
|
||||
--secondary: #502e2e;
|
||||
--tertiary: #221818;
|
||||
--background: #352929;
|
||||
|
||||
--background: #111;
|
||||
--secondary: #272727;
|
||||
--tertiary: #424242;
|
||||
--accent: #581111;
|
||||
--lightGrey: #999;
|
||||
--white: #fff;
|
||||
}
|
||||
|
||||
/*** MATERIAL 3 ***/
|
||||
.m3-primary {
|
||||
background: var(--primary) !important;
|
||||
color: var(--background) !important;
|
||||
}
|
||||
.m3-btn {
|
||||
background: var(--tertiary);
|
||||
color: var(--primary);
|
||||
transition: 0.4s;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
border-radius: 100em;
|
||||
box-shadow: 0 5px 5px rgba(0,0,0,0.1);
|
||||
margin: 0.25em;
|
||||
}
|
||||
.m3-btn:hover {
|
||||
background: var(--secondary) !important;
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 1em;
|
||||
background-color: var(--secondary);
|
||||
color: var(--primary);
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 3px 2px;
|
||||
}
|
||||
/*** END MATERIAL 3 ***/
|
||||
|
||||
/* Window Styling */
|
||||
html,
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--white);
|
||||
color: var(--primary);
|
||||
min-width: 310px;
|
||||
min-height: 350px;
|
||||
padding: 0.5em;
|
||||
@@ -26,30 +55,19 @@ h1 {
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
button {
|
||||
color: var(--white);
|
||||
background: var(--secondary);
|
||||
cursor: pointer;
|
||||
padding: 5px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
/* box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
|
||||
0 1px 10px 0 rgb(0 0 0 / 12%); */
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
#ext-version {
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 5px 16px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#ext-update {
|
||||
cursor: pointer;
|
||||
color: var(--white);
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
background: var(--primary);
|
||||
border-radius: 0.25rem;
|
||||
@@ -115,17 +133,17 @@ button:hover {
|
||||
position: fixed;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
color: var(--lightGrey);
|
||||
color: var(--primary);
|
||||
top: 26px;
|
||||
right: 26px;
|
||||
padding: 2px;
|
||||
z-index: 69;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
transition-duration: .25s;
|
||||
}
|
||||
|
||||
#advancedToggle:hover {
|
||||
color: var(--white);
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
@@ -145,11 +163,10 @@ button:hover {
|
||||
right: 14px;
|
||||
width: calc(100% - 65px);
|
||||
height: calc(100% - 58px);
|
||||
border: 2px solid var(--secondary);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
border: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@@ -161,7 +178,7 @@ button:hover {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #333; /* color of the scroll thumb */
|
||||
background-color: var(--primary); /* color of the scroll thumb */
|
||||
border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
|
||||
border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
|
||||
border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
|
||||
@@ -177,7 +194,7 @@ button:hover {
|
||||
}
|
||||
|
||||
#advancedLegend {
|
||||
color: var(--tertiary) !important;
|
||||
color: var(--secondary) !important;
|
||||
/* margin: auto; */ /* Center the label */
|
||||
/* padding: .25rem .5rem; */
|
||||
/* border-radius: .25rem; */
|
||||
@@ -228,7 +245,7 @@ button:hover {
|
||||
width: 13px;
|
||||
left: 2px;
|
||||
bottom: 2px;
|
||||
background: var(--lightGrey);
|
||||
background: var(--primary);
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<!--- HEADER -->
|
||||
<head>
|
||||
<meta content="text/html; charset=utf-8" />
|
||||
<title title="__MSG_extensionName__">__MSG_extensionName__</title>
|
||||
@@ -11,15 +13,10 @@
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<!-- END HEADER -->
|
||||
<body>
|
||||
<center>
|
||||
<svg width="48" viewBox="0 0 24 24">
|
||||
<path
|
||||
d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
|
||||
fill="red"
|
||||
/>
|
||||
<path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
|
||||
</svg>
|
||||
<img src="icons/logo.svg" />
|
||||
<h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
|
||||
__MSG_extensionName__
|
||||
</h1>
|
||||
@@ -27,27 +24,29 @@
|
||||
__MSG_textDeveloper__
|
||||
</p>
|
||||
|
||||
<button id="link_website" title="__MSG_linkWebsite__">
|
||||
<button class="m3-btn" id="link_website" title="__MSG_linkWebsite__">
|
||||
__MSG_linkWebsite__
|
||||
</button>
|
||||
<button
|
||||
style="margin-top: 0.3em; background: #ff0000"
|
||||
class="m3-btn m3-primary"
|
||||
style="margin-top: 0.3em;"
|
||||
id="link_donate"
|
||||
title="__MSG_linkDonate__"
|
||||
>
|
||||
__MSG_linkDonate__
|
||||
</button>
|
||||
<button id="link_discord">Discord</button>
|
||||
<button class="m3-btn" id="link_discord">Discord</button>
|
||||
<br />
|
||||
<button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
|
||||
<button class="m3-btn" style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
|
||||
__MSG_linkFAQ__
|
||||
</button>
|
||||
<button id="link_github">GitHub</button>
|
||||
<button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
|
||||
<button class="m3-btn" id="link_github">GitHub</button>
|
||||
<button class="m3-btn" style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
|
||||
__MSG_linkHelp__
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
class="m3-btn"
|
||||
style="margin-top: 0.3em"
|
||||
id="link_changelog"
|
||||
title="__MSG_linkChangelog__"
|
||||
@@ -98,10 +97,6 @@
|
||||
|
||||
<!-- dialog box -->
|
||||
<fieldset id="advancedSettings">
|
||||
<legend id="advancedLegend" title="__MSG_legendSettings__">
|
||||
__MSG_legendSettings__
|
||||
</legend>
|
||||
|
||||
<label class="switch" data-hover="Stop counting your likes and dislikes">
|
||||
<input type="checkbox" id="disable_vote_submission" />
|
||||
<span class="slider"></span>
|
||||
|
||||
Reference in New Issue
Block a user