first iteration on dark mode

lyrgard · Sep 20, 2019 · b5ffa1f · b5ffa1f
1 parent 86c7bc0
commit b5ffa1f
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 5 deletions.
diff --git a/static/builder.css b/static/builder.css
@@ -361,10 +361,6 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-width: 5px;
-    border-style: solid;
-    border-color: white;
-    border-radius: 10px;
     border-top: none;
 }
 
@@ -1055,6 +1051,12 @@ i.img.img-slot-hand.leftHand {
     margin-top: -5px;
 }
 
+.themeChanger {
+    width: 23px;
+    height: 30px;
+    position: absolute;
+}
+
 @media (max-width: 991px) {
 
     .panel.unit .panel-body {

diff --git a/static/builder.html b/static/builder.html
@@ -24,13 +24,16 @@
 		<link rel="stylesheet" type="text/css" href="common.css">
         <link rel="stylesheet" type="text/css" href="builder.css">
         <link rel="stylesheet" type="text/css" href="languages.css">
+        <!--<link rel="stylesheet" type="text/css" href="lib/dark-bootstrap.min.css">-->
+        <link rel="stylesheet" type="text/css" href="dark-mode.css">
     </head>
     <body>
         <div class="glassPanel"></div>
         <a href="#" id="scrollToTopButton" class="withButtonSideBar" style="display: none;" title="Scroll back to the top"><span></span></a>
 
         <div id="header" class="headerLid">
             <div class="headerContent">
+                <div class="themeChanger" onclick="toggleTheme()"></div>
                 <div class="headerTitle">
                     Builder
                 </div>

diff --git a/static/builder.js b/static/builder.js
@@ -1588,7 +1588,7 @@ var displayUnitRarity = function(unit) {
         rarityWrapper.empty();
 
         for (var i = 0; i < rarity; i++) {
-            rarityWrapper.append('<i class="rarity-star"></i>');
+            rarityWrapper.append('☆');
         }
         if (rarity == "7") {
             $('#forceTmrAbility').removeClass('hidden');

diff --git a/static/builderHelp.html b/static/builderHelp.html
@@ -8,6 +8,7 @@
         <link rel="stylesheet" type="text/css" href="espers.css">
         <link rel="stylesheet" type="text/css" href="languages.css">
         <link rel="icon" type="image/png" href="img/icons/equipments/heavyArmor.png">
+
         <title>FFBE Equip : Builder Help</title>
     </head>
     <body>

diff --git a/static/common.css b/static/common.css
@@ -488,6 +488,7 @@ mark {
 .unit-rarity {
     display: inline-flex;
     margin-left: 20px;
+    font-size: 2em;
 }
 
 .rarity-star {
@@ -802,6 +803,7 @@ nav {
 
 .item.enhanced {
     border: 2px solid brown !important;
+    border-radius: 15px;
 }
 
 .choice .btn {

diff --git a/static/common.js b/static/common.js
@@ -68,6 +68,10 @@ var localStorageAvailable = function(){
     return enabled;
 }();
 
+function toggleTheme() {
+    $('body').toggleClass('dark');
+}
+
 function getImageHtml(item, actionOnImage = undefined) {
     var html = '<div class="td type">';
 

diff --git a/static/dark-mode.css b/static/dark-mode.css
@@ -0,0 +1,139 @@
+body.dark {
+    background-color: #222222;
+    color: #dddddd;
+}
+
+body.dark .panel {
+    background-color: #303030;
+    border-radius: 4px;
+    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
+    border: 1px solid transparent;
+}
+
+body.dark .panel-default > .panel-heading {
+    background-color: #464545;
+    border-color: #464545;
+    color: #dddddd;
+}
+
+
+body.dark .panel-default {
+    border-color: #464545;
+}
+
+body.dark .nav-tabs > li.active > a, body.dark .nav-tabs > li.active > a:focus, body.dark .nav-tabs > li.active > a:hover {
+    background-color: #303030;
+    border: 1px solid #464545;
+    border-bottom-color: transparent;
+    color: #dddddd;
+}
+
+body.dark .nav-tabs > li > a:hover {
+    background-color: #303030;
+    border: 1px solid #464545;
+    border-bottom-color: transparent;
+    color: #aaaaaa;
+}
+
+body.dark .nav-tabs {
+    border-bottom: 1px solid #464545;
+}
+
+body.dark .navigationMenu .desktop a {
+    background-color: #464545;
+    border: 1px solid #464545;
+    color: #aaaaaa;
+}
+
+body.dark .navigationMenu .desktop a.active {
+    border-color: #999;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+    color: #dddddd;
+}
+
+body.dark input, body.dark select, body.dark .select2-selection, body.dark .select2-dropdown {
+    background-color: #eeeeee !important;
+    color: #111 !important;
+    border-color: #888 !important;
+}
+
+body.dark input[readonly], body.dark .input-group-addon {
+    background-color: #303030 !important;
+    color: #dddddd  !important;
+    border-color: #888 !important;
+}
+
+body.dark .inputWithIcon .leftIcon, body.dark .inputWithIcon .rightIcon {
+    color: #222222  !important;
+}
+
+body.dark .btn-default {
+    color: #ffffff;
+    background-color: #424242;
+    border-color: #888;
+}
+
+body.dark .btn-default:hover {
+    color: #ffffff;
+    background-color: #282828;
+    border-color: #232323;
+}
+
+body.dark .btn.disabled, body.dark .btn[disabled], body.dark fieldset[disabled] .btn {
+    cursor: not-allowed;
+    filter: alpha(opacity=65);
+    opacity: 0.65;
+    box-shadow: none;
+}
+
+body.dark .btn-default:focus, body.dark .btn-default.focus {
+    color: #ffffff;
+    background-color: #282828;
+    border-color: #020202;
+}
+
+body.dark a, body.dark .link {
+    color: #2a9fd6;
+}
+
+body.dark a:hover, body.dark .link:hover {
+    color: #2a9fd6;
+}
+
+body.dark .result-tab-pane {
+    border-bottom: 1px solid #464545;
+    border-left: 1px solid #464545;
+    border-right: 1px solid #464545;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+
+body.dark .items .tbody .tr .td, .results {
+    border-top: 1px solid #464545;
+}
+
+body.dark .buildLine .slot {
+    opacity: 0.6;
+}
+
+body.dark .progressBar.finished {
+    background-color: cornflowerblue;
+}
+
+body.dark .modal-content {
+    background-color: #303030;
+}
+
+body.dark .modal-header {
+    background-color: #464545;
+    border-bottom: 1px solid #464545;
+}
+
+body.dark .modal-content .close {
+    color: #ffffff;
+}
+
+body.dark .code {
+    background-color: #666;
+    color: white;
+}
diff --git a/static/lib/dark-bootstrap.min.css b/static/lib/dark-bootstrap.min.css