Updates logo. Updates popup style.

iAbadia · May 14, 2018 · fcf178b · fcf178b
1 parent afac191
commit fcf178b
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 51 deletions.
diff --git a/icon.png b/icon.png
diff --git a/media/icon-128.png b/media/icon-128.png
diff --git a/media/icon-192.png b/media/icon-192.png
diff --git a/media/plusdede-logo-128x128.png b/media/plusdede-logo-128x128.png
diff --git a/media/plusdede-logo.png b/media/plusdede-logo.png
diff --git a/popup.css b/popup.css
@@ -0,0 +1,57 @@
+body {
+    background-color: #F2F4F5;
+}
+
+.button {
+    border: 1px solid rgb(207, 210, 211);
+    border-radius: 4px;
+    padding: 8px 0;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    width: 4em;
+    font-size: 16px;
+    margin: 4px 2px;
+    -webkit-transition-duration: 0.4s;
+    /* Safari */
+    transition-duration: 0.4s;
+    cursor: pointer;
+    background-color: white;
+    color: black;
+}
+
+.button:hover {
+    background-color: #555555;
+    color: white;
+}
+
+.button-selected {
+    border: 1px solid #910101 !important;
+    padding: 8px 0;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    width: 4em;
+    font-size: 16px;
+    margin: 4px 2px;
+    -webkit-transition-duration: 0.4s;
+    /* Safari */
+    transition-duration: 0.4s;
+    cursor: pointer;
+    background-color: #af0806 !important;
+    color: white;
+}
+
+.opts {
+    display: block;
+    width: max-content;
+    padding: 10px;
+}
+
+.sect-title {
+    color: #3F3F3A;
+    font-size: 1em;
+    font-weight: 400;
+    display: block;
+    font-family: "Open Sans";
+}
diff --git a/popup.html b/popup.html
@@ -2,76 +2,29 @@
 <html>
 
 <head>
-
     <meta charset="UTF-8">
     <title>PLS</title>
-
-    <style>
-        .button {
-            border: none;
-            padding: 16px 32px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            -webkit-transition-duration: 0.4s;
-            /* Safari */
-            transition-duration: 0.4s;
-            cursor: pointer;
-            background-color: white;
-            color: black;
-            border: 2px solid #555555;
-        }
-
-        .button:hover {
-            background-color: #555555;
-            color: white;
-        }
-
-        .button-selected {
-            border: none;
-            padding: 16px 32px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            -webkit-transition-duration: 0.4s;
-            /* Safari */
-            transition-duration: 0.4s;
-            cursor: pointer;
-            background-color: rgb(255, 175, 175);
-            color: black;
-            border: 2px solid #555555;
-        }
-
-        .opts {
-            display: block;
-            width: max-content;
-        }
-    </style>
-
+    <link rel="stylesheet" href="popup.css">
     <script type="text/javascript" src="popup.js"></script>
 </head>
 
 <body>
     <div class="opts">
-        <h2>Quality</h2>
+        <span class="sect-title">Quality</span>
         <button class="button" id="qua-any-button">Any</button>
         <button class="button" id="qua-low-button">Low</button>
         <button class="button" id="qua-high-button">High</button>
         <button class="button" id="qua-hd-button">HD</button>
     </div>
     <div class="opts">
-        <h2>Lang</h2>
+        <span class="sect-title">Lang</span>
         <button class="button" id="lang-any-button">Any</button>
         <button class="button" id="lang-esp-button">Esp</button>
         <button class="button" id="lang-eng-button">Eng</button>
         <button class="button" id="lang-lat-button">Lat</button>
     </div>
     <div class="opts">
-        <h2>Subs</h2>
+        <span class="sect-title">Subs</span>
         <button class="button" id="subs-any-button">Any</button>
         <button class="button" id="subs-esp-button">Esp</button>
         <button class="button" id="subs-eng-button">Eng</button>