moving media to gcloud, fix for alternateLineColors, rebrand to WompChat

This commit is contained in:
wompmacho
2020-11-11 16:16:45 -05:00
parent 9963fa96a2
commit f470c61558
45 changed files with 83 additions and 442 deletions

4
.gitignore vendored
View File

@@ -1,3 +1,7 @@
dev-build dev-build
node_modules node_modules
build build
*.psd
*.ai
cdn/
artwork/

Binary file not shown.

Before

Width:  |  Height:  |  Size: 281 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 607 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 608 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 533 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 533 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 573 KiB

27
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{ {
"name": "Womp", "name": "WompChat",
"version": "1.0.3", "version": "1.0.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
@@ -674,14 +674,6 @@
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
"dev": true "dev": true
}, },
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -1398,15 +1390,11 @@
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
"integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=" "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
}, },
"date-fns": {
"version": "1.30.1",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
"integrity": "sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw=="
},
"debug": { "debug": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"dev": true,
"requires": { "requires": {
"ms": "2.0.0" "ms": "2.0.0"
} }
@@ -1883,14 +1871,6 @@
"readable-stream": "^2.3.6" "readable-stream": "^2.3.6"
} }
}, },
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"for-in": { "for-in": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -2681,7 +2661,8 @@
"ms": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
}, },
"nanomatch": { "nanomatch": {
"version": "1.2.13", "version": "1.2.13",

View File

@@ -1,5 +1,5 @@
{ {
"name": "Womp", "name": "WompChat",
"version": "1.0.3", "version": "1.0.3",
"description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.", "description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
"scripts": { "scripts": {
@@ -14,8 +14,6 @@
"url": "git://github.com/wompmacho/live-chat.git" "url": "git://github.com/wompmacho/live-chat.git"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.0",
"date-fns": "^1.29.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"preact": "^8.2.7", "preact": "^8.2.7",
"uglifyjs-webpack-plugin": "^1.3.0" "uglifyjs-webpack-plugin": "^1.3.0"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 67 KiB

View File

@@ -29,7 +29,7 @@ const ensure = () => {
return true; return true;
}; };
chrome.tabs.create({ url: './html/welcome.html' }); chrome.tabs.create({ url: 'html/welcome.html' });
chrome.runtime.onMessage.addListener(onSetupComplete); chrome.runtime.onMessage.addListener(onSetupComplete);
console.log('Setup Complete'); console.log('Setup Complete');
}); });

View File

@@ -1,7 +1,5 @@
import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage'; import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
import Setup from './Setup'; import Setup from './Setup';
import CONFIG from 'src/config'; import CONFIG from 'src/config';
class Main { class Main {

View File

@@ -1,4 +1,3 @@
const CONFIG = { const CONFIG = {
defaultOptions: { defaultOptions: {
@@ -6,9 +5,9 @@ const CONFIG = {
enableBTTVEmotes: true, enableBTTVEmotes: true,
enableFrankerEmotes: true, enableFrankerEmotes: true,
enableTwitchEmotes: true, enableTwitchEmotes: true,
kappaFix: true,
// Chat Options // Chat Options
kappaFix: true,
theaterModeFix: false, theaterModeFix: false,
setAuthorColor: false, setAuthorColor: false,
showTimeStamp: false, showTimeStamp: false,
@@ -16,9 +15,11 @@ const CONFIG = {
hideAuthorIcons: false, hideAuthorIcons: false,
hideWelcomBanner: false, hideWelcomBanner: false,
setTwitchColors: false, setTwitchColors: false,
textSizeSlider: 'inherit',
setLiveChat: true, setLiveChat: true,
allowTextSlider: false, allowTextSlider: false,
// Var
textSizeSlider: 'inherit',
} }
}; };

View File

@@ -1,8 +1,6 @@
import Emotes from './Emotes'; import Emotes from './Emotes';
import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage'; import PersistentSyncStorage from 'src/helpers/PersistentSyncStorage';
var colorNumberIndex = 0;
class Message { class Message {
constructor(messageNode) { constructor(messageNode) {
this.node = messageNode; this.node = messageNode;
@@ -178,11 +176,6 @@ class Message {
/////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
// Set Alternate message Colors
if (PersistentSyncStorage.data.options.alternateLineColor) {
this.alternateLineColor();
}
}// end setDefaultSelections }// end setDefaultSelections
setAuthorColor() { setAuthorColor() {
@@ -212,20 +205,6 @@ class Message {
/////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
// changes color every line
alternateLineColor(){
if(colorNumberIndex % 2 == 0){
this.node.classList.add("set-background-color-one");
}
if(colorNumberIndex % 2 !== 0){
this.node.classList.add("set-background-color-two");
}
colorNumberIndex++;
}
///////////////////////////////////////////////////////////////////
// removes color attr // removes color attr
removelternateLineColor(){ removelternateLineColor(){
this.node.classList.remove("set-background-color-one"); this.node.classList.remove("set-background-color-one");

View File

@@ -17,7 +17,6 @@ document.body.appendChild(theater_wrapper);
var alreadyTheater = false; var alreadyTheater = false;
// --- // ---
class Main { class Main {
constructor() { constructor() {
this.chatWatcher = null; this.chatWatcher = null;
@@ -26,14 +25,6 @@ class Main {
this.onRouteChange = this.onRouteChange.bind(this); this.onRouteChange = this.onRouteChange.bind(this);
this.load(); this.load();
// button class - ytp-size-button ytp-button
// right player controls - ytp-right-controls
// player div id - ytd-player
// chatframe id - chatframe
// movieframe id - movie_player_fix
// dono ticker id - ticker
// player-theater-container
} }
load() { load() {
@@ -58,6 +49,11 @@ class Main {
setDefaults() { setDefaults() {
// Set Hide Welcome Banner
if (PersistentSyncStorage.data.options.alternateLineColor) {
document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer').classList.add('alternateLineColor');
}
/////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////
// Welcome Banner // Welcome Banner

View File

@@ -1,5 +1,4 @@
/* Open new tab if tab is not already open, otherwise focus that tab */ /* Open new tab if tab is not already open, otherwise focus that tab */
export default url => { export default url => {
const matchUrl = url.replace(/^(https|http)/i, '*'); const matchUrl = url.replace(/^(https|http)/i, '*');
@@ -11,10 +10,4 @@ export default url => {
chrome.tabs.create({ url }); chrome.tabs.create({ url });
} }
}); });
// for(let i = 0, tab; tab = tabs[i]; i++) {
// if(tab.url && tab.url === url) {
// return;
// }
// }
}; };

View File

@@ -1,31 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<style>
body {
font-family: sans-serif;
padding: 10px;
width: 400px;
}
.hideDiv {
display: none;
}
</style>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Options</title> <title>WompChat Options</title>
</head> </head>
<body> <body>
<span style="display:inline-block;vertical-align: middle; margin-right: 2%;"> <div class="container">
<img src="../assets/icons/icon128.png" alt="🔴" style="height: 2.5em;"> <img src="../assets/icons/logo128.png" alt="🔴">
</span> <h1>WompChat Options</h1>
<span style="display:inline-block;vertical-align: middle;">
<h1>Womp Options</h1>
</span>
<span class="">
<button class="info_button" id="infoButton" >Info</button> <button class="info_button" id="infoButton" >Info</button>
</span> </div>
<br> <br>
<br> <br>
@@ -56,7 +42,7 @@
</div> </div>
</div> </div>
<div class="hr"></div> <hr>
<div class="options-table"> <div class="options-table">
<div class="option-row"> <div class="option-row">
@@ -67,8 +53,7 @@
</div> </div>
<hr>
<div class="hr"></div>
<div class="section"> <div class="section">
<h2 class="options-heading">Chat Options</h2> <h2 class="options-heading">Chat Options</h2>
@@ -132,11 +117,9 @@
</div> </div>
<div class="hr"></div> <hr>
<h2 class="options-heading">Font Size</h2>
<span>
</span> <h2 class="options-heading">Font Size</h2>
<span> <span>
<div class="options-table"> <div class="options-table">
@@ -154,9 +137,6 @@
</div> </div>
</span> </span>
<div id="save-status">&nbsp;</div> <div id="save-status">&nbsp;</div>
<div class="omega"></div>
</div> </div>
<script src="../options.js"></script> <script src="../options.js"></script>

View File

@@ -5,106 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Welcome Page</title> <title>Welcome Page</title>
<meta http-equiv="refresh" content="0; URL='https://wompmacho.com/wompchat'" />
</head> </head>
<body> <body>
<div class="success-overlay">
<div class="icon-container">
<i class="material-icons">done</i>
</div>
</div>
<div class="container">
<div class="logo">
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/icons/icon512.png" alt="womp Logo">
</div>
<h1><span class="fw-light">Welcome to the </span><span class="fw-bold">Chat</span></h1>
<p class="heading-note">Were changing our name!</p>
<p class="heading-note">Aparently LIVE CHAT was a bad idea. Now We Are WOMP
</p>
<div class="shields">
<a href="https://discord.gg/pVNnTDA">
<img src="https://img.shields.io/discord/238458588169895937?label=Discord&style=plastic" alt="discord shield.io">
</a>
<a href="https://cdn.jsdelivr.net/gh/wompmacho/womp/src/assets/img/btc.JPG">
<img src="https://img.shields.io/static/v1?label=BTC&style=plastic&message=3QkKHVyT1nZLEeH8f77bUhXorXKPQs5gzN&color=red" alt="BTC shield.io">
</a>
<a href="https://github.com/wompmacho/womp">
<img alt="GitHub Release Date" src="https://img.shields.io/github/release-date/wompmacho/womp?label=Latest&style=plastic">
</a>
</div>
<hr>
<div class="links_div">
<a class="links_bottom" href="https://discord.gg/pVNnTDA" title="Join our Discord Community">Join our Discord Community</a>
<a class="links_bottom" href="https://streamelements.com/wompmacho-5882/tip" title="Donations">Donations</a>
<a class="links_bottom" href="https://www.youtube.com/wompmacho" title="Youtube">Youtube</a>
<a class="links_bottom" href="mailto:wompmacho@gmail.com">Contact Me</a>
</div>
<hr>
<h2>
Soon to come:
</h2>
<ul>
<li>Specific channel Emotes</li>
<li>Search for Emote Panel</li>
<li>Autocomplete for emote Selection</li>
<li><s>Theater Mode Fix for that quality Stream and Chat time</s></li>
<li>Moderation Options</li>
<li>User Profile Info</li>
<li>Other Styling Options</li>
</ul>
<hr>
<h2>How To:</h2>
<p>
There is still a lot of stuff I am working on. This is very Beta at the moment so
</p>
<h2>Use At Your Own Risk</h2>
<p>
This is a Chrome Extension for Youtube Live Streams, adding some Quality of Life improvements for the Chat.
Adds Top, Trending and Global (500ish) Emotes from popular sites. These Update with what is Trending.
</p>
<p>
Don't forget to pin this extension for easy access.
</p>
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/pinYourExtension.gif" alt="pinYourExtension.gif">
<p>
Youtube Live is slow to load its pages currently.
Give the extension a moment while the page's iframes are loading.
Once you see the Emote Panel Icon you can open the Emote Selection Panel.
</p>
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/emotesMenu.gif" alt="emotesMenu.gif">
<p>
Enhanced Theater Mode Is Now Available. Just click the check in the option panel and refresh your page.
</p>
<img style="height: 540px; width: 960px;" src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/theaterMode.gif" alt="theaterMode.gif">
<p>
Over around 500 Top and Trending Emotes are loaded from popular sites.
You can Enable/Disable them in the Options Menu.
</p>
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/optionsMenu.gif" alt="optionsMenu.gif">
<p>
Can Also Click on UserNames To Autofill an @ Notification
</p>
<img src="https://cdn.jsdelivr.net/gh/wompmacho/womp/assets/gif/clickUserNamesToAtThem.gif" alt="clickUserNamesToAtThem.gif">
<h2>Use At Your Own Risk</h2>
<h1>Enjoy!</h1>
</div>
<script src="../welcomePage.js"></script> <script src="../welcomePage.js"></script>
</body> </body>
</html> </html>

View File

@@ -1,13 +1,11 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "Womp", "name": "WompChat",
"version": "1.0.3", "version": "1.0.3",
"description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.", "description": "Enhances the YouTube Live Streaming experience with Emotes, Custom Styling and quality of life improvements.",
"icons": { "icons": {
"48": "assets/icons/icon48.png", "128": "assets/icons/logo128.png"
"128": "assets/icons/icon128.png",
"512": "assets/icons/icon512.png"
}, },
"permissions": [ "permissions": [

View File

@@ -1,6 +1,5 @@
import './stylus/options.styl'; import './stylus/options.styl';
import dateFormat from 'date-fns/format';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import PersistentSyncStorage from './helpers/PersistentSyncStorage'; import PersistentSyncStorage from './helpers/PersistentSyncStorage';
@@ -123,7 +122,6 @@ PersistentSyncStorage.on('ready', () => {
case 'allowTextSlider': case 'allowTextSlider':
input.removeAttribute('disabled'); input.removeAttribute('disabled');
if(PersistentSyncStorage.data.options.allowTextSlider == true){ if(PersistentSyncStorage.data.options.allowTextSlider == true){
textSizeSlider.disabled = false; textSizeSlider.disabled = false;
}else{ }else{
@@ -149,7 +147,5 @@ PersistentSyncStorage.on('ready', () => {
var infoButton = document.getElementById('infoButton'); var infoButton = document.getElementById('infoButton');
infoButton.addEventListener('click', function(){ infoButton.addEventListener('click', function(){
chrome.tabs.create({ url: './html/welcome.html' }); chrome.tabs.create({ url: 'https://wompmacho.com/wompchat' });
}); });

View File

@@ -70,4 +70,3 @@ colors = {
for id, col in colors for id, col in colors
.chat-color-{id} #content #author-name .chat-color-{id} #content #author-name
color: col !important color: col !important

View File

@@ -12,8 +12,6 @@
//display: initial; //display: initial;
//border-radius: inherit; //border-radius: inherit;
// Owner chat messages // Owner chat messages
.yt-live-chat-item-list-renderer[author-type="owner"] .yt-live-chat-item-list-renderer[author-type="owner"]
//background: rgba(#fff, 0.1); //background: rgba(#fff, 0.1);
@@ -26,14 +24,12 @@
//width: 28px !important //width: 28px !important
//height: 28px !important //height: 28px !important
// Chat user name // Chat user name
#author-name.yt-live-chat-text-message-renderer #author-name.yt-live-chat-text-message-renderer
&:after &:after
//content: ' :' //content: ' :'
//color: #fff //color: #fff
.AuthorFix .AuthorFix
#author-photo.yt-live-chat-text-message-renderer #author-photo.yt-live-chat-text-message-renderer
img.yt-img-shadow img.yt-img-shadow
@@ -55,7 +51,6 @@
#timestamp.yt-live-chat-text-message-renderer #timestamp.yt-live-chat-text-message-renderer
display: inline-block display: inline-block
.Emote .Emote
img img
height: 1.75em height: 1.75em
@@ -66,16 +61,14 @@
emote_div:hover emote_div:hover
background-size: 100% //100% background-size: 100% //100%
background-color: rgba(255, 255, 255, .6) background-color: var(--divider-color)
.hideElement .hideElement
display: none !important display: none !important
.set-background-color-one .alternateLineColor
background-color: #303030 !important yt-live-chat-text-message-renderer:nth-child(odd)
background-color: rgba(255, 255, 255, 0.1) !important;
.set-background-color-two
background-color: transparent !important
.setTwitchColors .setTwitchColors
text-shadow: 0 0 1px #000, 0 0 2px #000 !important text-shadow: 0 0 1px #000, 0 0 2px #000 !important
@@ -93,20 +86,20 @@ emote_div:hover
background-color: transparent background-color: transparent
.emoteDivider .emoteDivider
width: 60vw width: 20vw
border: 2px solid #d3d3d3; border: 1px solid red;
border-radius: 5px; border-radius: 5px;
margin-top: 2%; margin-top: 1em;
margin-bottom: 2%; margin-bottom: 1em;
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
.emotePopUpText .emotePopUpText
margin-bottom: 2%; margin-bottom: 2%;
.popup .popup
background-color: #202020 background-color: var(--yt-app-background)
color: var(--yt-live-chat-primary-text-color)
position: absolute; position: absolute;
top: 15% top: 15%
left: 0 left: 0
@@ -114,7 +107,7 @@ emote_div:hover
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
height 70% height 70%
width: 75% width: 100%
z-index: 999 z-index: 999
text-align: center text-align: center
border-radius: 5px border-radius: 5px
@@ -139,7 +132,7 @@ emote_div:hover
cursor: pointer cursor: pointer
.emoteButton:hover .emoteButton:hover
background-color:rgba(255, 255, 255, .8) background-color: #4e4e4e;
.emoteButton:focus .emoteButton:focus
outline:0 outline:0
@@ -220,4 +213,3 @@ emote_div:hover
right: 0px !important right: 0px !important
top: 0px !important top: 0px !important
border: 1px solid #4e4e4e border: 1px solid #4e4e4e

View File

@@ -1,6 +1,33 @@
body body
background-color: #1e1e1e background-color: #1e1e1e
color: #ffffff color: #ffffff
font-family: sans-serif;
padding: 10px;
width: 400px;
h1{
padding-left: 1em;
}
.hideDiv {
display: none;
}
.container{
display: flex;
vertical-align: middle;
height: 3.5em;
}
img{
max-height: 100%;
}
hr
border-color: #f00;
margin: auto;
margin-top: 1em;
margin-bottom: 1em;
.section .section
&:nth-child(1) &:nth-child(1)
@@ -26,11 +53,6 @@ table
width: 20% width: 20%
text-align: right text-align: right
.hr
background-color: #d1d1d1
height: 1px
margin: 10px 0
#save-status #save-status
text-align: center text-align: center
opacity: 0 opacity: 0
@@ -59,18 +81,9 @@ input[type=checkbox][disabled]
opacity: .9 opacity: .9
.info_button .info_button
display:inline-block
padding:0.3em 1.2em
margin:0 0.3em 0.3em 0
border-radius:2em border-radius:2em
box-sizing: border-box margin-left: 135px;
text-decoration:none
font-weight:300
color:#1e1e1e
text-align:center
margin-left: 150px
transition: all 0.2s transition: all 0.2s
.info_button:hover .info_button:hover
color: red color: red

View File

@@ -1,147 +0,0 @@
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700|Material+Icons")
body
font-family: 'Roboto', Arial, sans-serif
font-size: 16px
background: #222
color: #fff
margin: 25px
font-weights = {
light: 300,
regular: 400,
bold: 700
}
for fw, w in font-weights
.fw-{fw}
font-weight: w
.success-overlay
visibility: hidden
opacity: 0
position: fixed
top: 0
left: 0
z-index: 10
background: rgba(#191919, 0.95)
display: flex
flex-direction: column
align-items: center
justify-content: center
height: 100%
width: 100%
transition: visibility 0s, opacity 200ms ease
&.show
visibility: visible
opacity: 1
.material-icons
font-size: 20em
opacity: 0
&.show
opacity: 1
animation: jackInTheBox 700ms 1
.success-message
font-size: 3em
.close-message
font-size: 0.7em
opacity: 0.7
.container
display: flex
flex-direction: column
align-items: center
h1
margin: 0
font-size: 3em
letter-spacing: 3px
.heading-note
font-size: 18px
color: #bbb
.option
text-align: center
.option-note
font-size: 12px
font-style: italic
color: #999
.complete-setup-button
background: #333
display: flex
justify-content: center
align-items: center
padding: 10px
cursor: pointer
text-transform: uppercase
border-radius: 3px
box-shadow: 0 2px 5px 0 rgba(#000, 0.7)
transition: background 50ms ease
&:hover
background: #404040
.material-icons
margin-right: 7px
.shields
float: left;
.links_bottom
display: inline-block;
margin: 1%
padding-top: 1em;
padding-bottom: 1em;
text-decoration: none;
text-transform: uppercase;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #4e4e4e
background-color: #252526;
color: white;
text-align: center
a
display: inline-block;
a:hover
background-color: #d3d3d3;
color: black
a:active
box-shadow: none;
top: 5px;
.links_div
width: 20vw
p
margin: 2%
max-width: 30vw
h2
margin: 2%
hr {
margin: 2%
width: 60vw
border: 3px solid #d3d3d3;
border-radius: 5px;
}
// jackInTheBox from animate.css https://github.com/daneden/animate.css
@keyframes jackInTheBox
from
opacity: 0
transform: scale(0.1) rotate(60deg)
transform-origin: center center
50%
transform: rotate(-20deg)
70%
opacity: 1
transform: rotate(6deg)
to
transform: scale(1)

View File

@@ -1,48 +1,10 @@
import './stylus/setupPage.styl';
import PersistentSyncStorage from './helpers/PersistentSyncStorage'; import PersistentSyncStorage from './helpers/PersistentSyncStorage';
// THIS IS A JS PAGE FOR SETUP.HTML
// --- Definitions ---
const completeButton = document.querySelector('.complete-setup-button');
const successOverlay = document.querySelector('.success-overlay');
const successIcon = successOverlay.querySelector('.material-icons');
const successCloseMessageCountdown = successOverlay.querySelector('.countdown');
const setupComplete = () => { const setupComplete = () => {
// successOverlay.classList.add('show');
// setTimeout(() => {
// successIcon.classList.add('show');
// }, 100);
//////////////////////////////////// Neat if I ever want to close a window
// let closeCountdown = 5; // seconds
// const closeTimeout = () => {
// successCloseMessageCountdown.innerHTML = closeCountdown;
// setTimeout(() => {
// if(closeCountdown > 1) {
// closeCountdown -= 1;
// closeTimeout();
// } else {
// chrome.tabs.getCurrent((tab) => {
// chrome.tabs.remove(tab.id);
// });
// }
// }, 1000);
// }
// successCloseMessageCountdown.innerHTML = closeCountdown;
// closeTimeout();
}; };
// --- Main --- // --- Main ---
const main = () => { const main = () => {
PersistentSyncStorage.on('ready', () => { PersistentSyncStorage.on('ready', () => {
@@ -58,14 +20,8 @@ const main = () => {
}, setupComplete); }, setupComplete);
console.log('Competed setup, sent message'); console.log('Competed setup, sent message');
}); });
}; };
// --- Executed --- // --- Executed ---
main(); main();