diff --git a/res/css/uw-common.css b/res/css/common.css
similarity index 53%
rename from res/css/uw-common.css
rename to res/css/common.css
index bee5588..4c6235b 100644
--- a/res/css/uw-common.css
+++ b/res/css/common.css
@@ -1,17 +1,32 @@
-a {
- color: #af7f37;
-}
-a:hover {
- color: #c0924e;
-}
-
-.hidden {
- display: none !important;
+html, body {
+ color: #f8f8f8;
+ background-color: #1f1f1f;
+ font-family: "overpass";
+ font-size: 1em;
}
-/** layout stuff **/
+/* STANDARD WIDTHS AND HEIGHTS */
+
+.w100 {
+ width: 100%;
+}
+
+.w24 {
+ width: 100px;
+}
+
+.m-t-0-33em {
+ margin-top: 0.33em;
+}
+
+.x-pad-1em {
+ padding-left: 1em;
+ padding-right: 1em;
+}
+
+/* ELEMENT POSITIONING */
.row {
display: block;
@@ -25,13 +40,109 @@ a:hover {
margin-bottom: 10px;
}
-.w24 {
- width: 100px;
+.float-left {
+ float: left;
+}
+.float-right {
+ float: right;
+}
+
+.inline-block {
+ display: inline-block;
+}
+
+.block {
+ display: block;
+}
+
+.hidden {
+ display: none !important;
+}
+
+.hide {
+ display: none !important;
}
-/** input **/
+/* TEXT FORMATTING (no colors) */
+
+small {
+ font-size: 0.75em;
+ font-weight: 200;
+}
+
+.small {
+ font-size: 0.75em;
+ font-weight: 200;
+}
+
+.medium-small {
+ font-size: 0.85em;
+ font-weight: 200;
+}
+
+.smallcaps{
+ font-variant: small-caps;
+}
+
+.center{
+ text-align: center;
+ width: 100%;
+}
+
+
+
+
+/* COLORS */
+
+a {
+ color: #af7f37;
+}
+a:hover {
+ color: #c0924e;
+}
+
+.color_warn {
+ color: #d6ba4a;
+}
+
+strike {
+ opacity: 0.5;
+}
+
+.darker {
+ color: #666;
+}
+
+.label{
+ font-size: 1.1em;
+ font-weight: 600;
+ color: #ffe;
+}
+
+.selected{
+ color: #ffddaa;
+ background-color: #433221;
+}
+
+.disabled {
+ color: #666;
+}
+
+.disabled-button {
+ color: #666 !important;
+ cursor: not-allowed !important;
+}
+
+.disabled-button:hover {
+ color: #777 !important;
+ background-color: #222 !important;
+}
+
+
+
+/* BUTTONS AND INPUTS */
input {
border: 1px solid #322;
@@ -45,11 +156,6 @@ input {
background-color: #410 !important;
}
-
-
-
-/** buttons and stuff ***/
-
.button {
display: inline-block;
padding-top: 8px;
@@ -70,32 +176,8 @@ input {
-
-/** formatting **/
-
-small{
- font-size: 0.75em;
- font-weight: 200;
-}
-
-.smallcaps{
- font-variant: small-caps;
-}
-
-.center{
- text-align: center;
- width: 100%;
-}
-
-
-
-
/** misc **/
-.color_warn {
- color: #d6ba4a;
-}
-
.warning {
color: #d6ba4a;
padding-left: 35px;
@@ -114,4 +196,3 @@ small{
}
-
diff --git a/res/popup/css/popup.css b/res/popup/css/popup.css
new file mode 100644
index 0000000..938b688
--- /dev/null
+++ b/res/popup/css/popup.css
@@ -0,0 +1,59 @@
+html, body {
+ width: 780px !important;
+ max-width: 800px !important;
+ padding: 0px;
+ margin: 0px;
+}
+
+.header {
+ background-color: #7f1416;
+ color: #fff;
+ margin: 0px;
+ margin-top: 0px;
+ padding-top: 8px;
+ padding-left: 15px;
+ padding-bottom: 1px;
+ font-size: 2.7em;
+}
+
+.menu-item-inline-desc{
+ font-size: 0.60em;
+ font-weight: 300;
+ font-variant: normal;
+}
+
+.left-side {
+ display: inline-block;
+ width: 39%;
+ float: left;
+ font-size: 1.6em;
+}
+
+.right-side {
+ display: inline-block;
+ width: 60%;
+ float: right;
+}
+
+.menu-item {
+ padding-left: 15px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ font-variant: small-caps;
+}
+
+.suboption {
+ display: block;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-top: 5px;
+ padding-bottom: 20px;
+ min-height: 250px;
+}
+
+
+#no-videos-display {
+ height: 100%;
+ padding-top: 50px;
+/* text-align: center; */
+}
\ No newline at end of file
diff --git a/res/popup/js/popup.js b/res/popup/js/popup.js
index 91fd0c8..3b84ed0 100644
--- a/res/popup/js/popup.js
+++ b/res/popup/js/popup.js
@@ -5,21 +5,16 @@ document.getElementById("uw-version").textContent = browser.runtime.getManifest(
var Menu = {};
// Menu.noVideo = document.getElementById("no-videos-display");
-Menu.thisSite = document.getElementById("settings-for-current-site");
-Menu.arSettings = document.getElementById("aspect-ratio-settings");
-Menu.autoAr = document.getElementById("autoar-basic-settings");
-Menu.cssHacks = document.getElementById("css-hacks-settings");
-Menu.about = document.getElementById("panel-about");
-Menu.stretchSettings = document.getElementById("stretch-settings")
+Menu.extensionSettings = document.getElementById('_menu_settings_ext');
+Menu.siteSettings = document.getElementById('_menu_settings_site');
+Menu.videoSettings = document.getElementById('_menu_settings_video');
+Menu.about = document.getElementById('_menu_about')
var MenuTab = {};
-MenuTab.general = document.getElementById("_menu_general");
-MenuTab.thisSite = document.getElementById("_menu_this_site");
-MenuTab.arSettings = document.getElementById("_menu_aspectratio");
-MenuTab.cssHacks = document.getElementById("_menu_hacks");
-MenuTab.about = document.getElementById("_menu_about");
-MenuTab.autoAr = document.getElementById("_menu_autoar");
-MenuTab.stretchSettings = document.getElementById("_menu_stretch");
+MenuTab.extensionSettings = document.getElementById('_menu_tab_settings_ext');
+MenuTab.siteSettings = document.getElementById('_menu_tab_settings_site');
+MenuTab.videoSettings = document.getElementById('_menu_tab_settings_video');
+MenuTab.about = document.getElementById('_menu_tab_about')
var ExtPanel = {};
ExtPanel.globalOptions = {};
diff --git a/res/popup/popup.html b/res/popup/popup.html
index 8d7a8ea..430d814 100644
--- a/res/popup/popup.html
+++ b/res/popup/popup.html
@@ -5,137 +5,44 @@
-