Balanceo y mejora de colores

public/animes.json

@@ -37,7 +37,7 @@
     "anio": 2018,
     "fuente": "Novela Ligera",
     "generos": "Accion, Aventura, Fantasia",
-    "color": "#a3be6f",
+    "color": "#829d4f",
     "OP": {
       "1": "Rightfully - Mili"
     },
@@ -60,7 +60,7 @@
     "anio": 2018,
     "fuente": "Novela Ligera",
     "generos": "Accion, Fantasia, Magia, Sobrenatural",
-    "color": "red",
+    "color": "#b40000",
     "OP": {
       "1": "VORACITY - MYTH & ROID"
     },
@@ -83,7 +83,7 @@
     "anio": 2018,
     "fuente": "Matgo",
     "generos": "Accion, Aventura, Drama",
-    "color": "#ffc107",
+    "color": "#d09e07",
     "OP": {
       "1": "found & lost - Survive Said The Prophet",
       "2": "FREEDOM - BLUE ENCOUNT"
@@ -134,7 +134,7 @@
     "anio": 2018,
     "fuente": "Manga",
     "generos": "Drama, Horror, Psicologico, Supernatural",
-    "color": "black",
+    "color": "#282828",
     "OP": {
       "1": "Changing Point - i Ris"
     },
@@ -180,7 +180,7 @@
     "anio": 2018,
     "fuente": "Manga",
     "generos": "Ecchi, Escolar, Shonen",
-    "color": "#413EC9",
+    "color": "#423fd8",
     "OP": {
       "1": "Symbol - Luck Life"
     },
@@ -342,7 +342,7 @@
     "anio": 2017,
     "fuente": "Original",
     "generos": "Accion, Ciencia ficcion, Fantasia",
-    "color": "#8C00FD",
+    "color": "#7200d4",
     "OP": {
       "1": "gravityWall - SawanoHiroyuki[nZk]:Tielle & Gemie",
       "2": "sh0ut - SawanoHiroyuki[nZk]:Tielle & Gemie"
@@ -369,7 +369,7 @@
     "anio": 2016,
     "fuente": "Original",
     "generos": "Ciencia ficcion, Aventura, Comedia, Magia",
-    "color": "#E62F68",
+    "color": "#cc2f66",
     "OP": {
       "1": "Serendipity - ZAQ"
     },

src/components/AnimeView/BarraLateral.vue

@@ -3,11 +3,11 @@
         <div class="caja colorTexto background2">
             Esta es la barra lateral.
         </div>
-        <div class="caja colorTexto background2">
+        <div class="caja colorTexto background2 estadisticas">
-            Estadisticas:<br>
+            <span style="font-size: x-large; font-weight: bold">PseudoSubs en numeros:</span><br>
             <br>
-            Hemos subido <b>{{ estadisticas.episodios }}</b> episodios,<br>
+            Con <b style="text-decoration: underline">{{ estadisticas.episodios }}</b> episodios,
-            haciendo un total de <b>{{ estadisticas.gigas }} GB.</b>
+            PseudoSubs aloja <b style="text-decoration: underline">{{ estadisticas.gigas }} GB.</b> en anime, ¡y creciendo!
         </div>
     </div>
 </template>
@@ -43,6 +43,7 @@
     }
 </script>
 
-<style scoped>
+<style scoped lang="sass">
-
+.estadisticas
+    cursor: default
 </style>

src/components/AnimeView/panelDeDescarga.vue

@@ -23,14 +23,14 @@
 
                     <div :id="`tarjeta${indice}`" :style="indice !== '1'? 'display: none' : ''">
 
-                        <div class="panel__descripcion__titulo" :style="'color: ' + color">
+                        <div class="panel__descripcion__titulo" :style="'color: ' + balancearColor">
                             Links<br>
                         </div>
                         Todos los links se abren en una pestaña nueva.<br>
                         <span v-for="(ep, num) in opcion.eps" class="panel__descripcion__link">
                     <br>
                     Episodio {{ num }} ->
-                    <a :href="ep.link" target="_blank" :style="'color: ' + color"
+                    <a :href="ep.link" target="_blank" :style="'color: ' + balancearColor"
                        @mousedown.stop="incrementarContador(ep.ep_ID, $event)">
                         {{ ep.peso }}
                     </a>
@@ -62,6 +62,8 @@
 
 <script>
 
+    import { esModoOscuro } from "../../global";
+
     export default {
         name: "panelDeDescarga",
         data: function () {
@@ -91,6 +93,23 @@
                 type: Boolean
             }
         },
+        computed: {
+            balancearColor () {
+                const color = this.color;
+
+                const R = parseInt(color.substring(1,3), 16);
+                const G = parseInt(color.substring(3,5), 16);
+                const B = parseInt(color.substring(5,7), 16);
+
+                const limiteOscuridad = 60;
+                if (esModoOscuro && R<limiteOscuridad && G<limiteOscuridad && B<limiteOscuridad ) {
+                    return `#${(255-R).toString(16)}${(255-G).toString(16)}${(255-B).toString(16)}`;
+                } else {
+                    return color;
+                }
+
+            }
+        },
         methods: {
             cambiarDescripcionDescarga(idDestino) {
                 const quitarClase = (nombre, nombreClase) => {

srv/index.ts

@@ -45,4 +45,6 @@ const conexionMySQL = (() => {
     return con;
 })();
 
+const color = '#cc2f66';
+
 module.exports.conexionMySQL = conexionMySQL;