Merge branch 'dev'

Added responsive design for resolutions smaller than 720px and wrapped up tweaks from past updates.
vednoc · May 10, 2018 · 99bb964 · 99bb964
2 parents 30c5404 + 357df5a
commit 99bb964
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 19 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Mewkey
+Copyright (c) 2018 vednoc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/WhatsApp.user.css b/WhatsApp.user.css
@@ -4,7 +4,7 @@
 @namespace github.com/vednoc/onyx
 @homepageURL https://github.com/vednoc/onyx
 @updateURL https://rawgit.com/vednoc/onyx/master/WhatsApp.user.css
-@version 1.0.6
+@version 1.0.7
 @author vednoc
 @license MIT
 @preprocessor uso
@@ -109,6 +109,7 @@
     --mgreen: /*[[mgreen]]*/;
     --mblue: /*[[mblue]]*/;
     --image: url(/*[[image]]*/);
+    --emoji-opacity: /*[[emoji_opacity]]*/;
   }
 
   /* Body reset. */
@@ -184,8 +185,8 @@
       background: var(--dark); } /**/
     /* Image. */
     .app ._1Iexl ._3qlW9 ._3BqNZ ._2Uo0Z {
-      max-width: 250px;
-      max-height: 250px;
+      max-width: 200px;
+      max-height: 200px;
       border-radius: 50%;
       opacity: 0.66 !important; }
     /* Text color. */
@@ -325,7 +326,7 @@
       ._2fq0t ._1AKfk {
         background-color: var(--dark) !important; }
         /* On event. */
-        ._2EXPL:hover {
+        .k1feT ._2fq0t ._2EXPL:hover {
           background-color: var(--dark) !important; }
       /* Search element */
       ._66JgU ._3_3Rs {
@@ -362,7 +363,6 @@
 
     /* Footer. */
     ._1Iexl #main footer {
-      box-shadow: 0 0 8px -1px var(--shadow);
       background-color: var(--darker); }
       /* Input wrapper. */
       ._1Iexl #main footer ._3oju3 {
@@ -427,7 +427,7 @@
         transition: 200ms ease-in-out;
         background-color: transparent; }
         /* On event. */
-        .app ._2yeJ5 ._1CRb5 ._2EXPL:hover,
+        .app ._2yeJ5 ._1CRb5 ._2EXPL._3xj48:hover,
         .app ._2yeJ5 ._1CRb5 ._1CkkN:hover {
           background-color: var(--dark); }
         /* Text color. */
@@ -461,7 +461,7 @@
     ._2yeJ5 .matched-text {
       color: var(--accent) !important; }
     /* On event. */
-    ._2yeJ5 ._2EXPL:hover {
+    .YAPQk ._3j7s9:hover {
       background-color: var(--dark) !important; }
 
 
@@ -627,23 +627,22 @@
         /* Reply content. */
         ._1fkhx ._2EYZY ._3PmkG,
         ._1rWJz._8k43T {
-          border-radius: 5px !important;
           background-color: var(--dark) !important; }
         /* Text color. */
         ._1fkhx ._2EYZY .Y9G3K {
           color: var(--light) !important; }
+        /* Empty container. */
+        ._1fkhx ._1qYlt._1vWM8 {
+          background-color: var(--dark) !important; }
         /* Close button. */
-        ._1fkhx ._2EYZY ._1j_Ub,
-        ._1fkhx ._2EYZY ._28ZV1 {
-          justify-content: center;
-          padding: 0;
+        ._1fkhx ._2t-jH {
+          padding: 0 !important;
           margin-left: 5px;
           border-radius: 5px;
           transition: 150ms ease-in-out;
           background-color: var(--dark) !important; }
           /* On event. */
-          #main ._2EYZY ._1j_Ub:hover,
-          #main ._2EYZY ._28ZV1:hover {
+          #main ._2EYZY ._2t-jH:hover {
             background-color: var(--darker) !important; }
 
 
@@ -749,14 +748,14 @@
 
   /* Emoji-wanna-be-round. */
   .emojik {
-    opacity: /*[[emoji_opacity]]*/;
-    /* transition: 200ms ease-in-out; */
-    clip-path: circle(48%) !important; }
+    opacity: var(--emoji-opacity);
+    transition: transform 200ms cubic-bezier(0.59, 0.57, 0.39, 1.04);
+    clip-path: circle(47%) !important; }
     /* Selected emoji. */
     .emojik:focus, .emojik:hover, .emojik.selected {
       box-shadow: none !important;
       opacity: 1;
-      transform: rotateZ(10deg); }
+      transform: scale(1.15); }
 
     /* Emoji quick selection. */
     ._1k6Uw {
@@ -782,6 +781,10 @@
     ._3gUiM ._2dA13 ._1CnF3,
     ._2dA13 ._18wuJ, ._2dA13 .IuYNx {
       background-color: var(--darker) !important; }
+      /* Selected contact. */
+      ._3gUiM ._2EXPL._1f1zm,
+      ._3gUiM ._2EXPL:hover {
+        background-color: var(--dark) !important; }
       /* Text color. */
       ._3gUiM ._1CnF3 * {
         color: var(--light); }
@@ -908,6 +911,11 @@
   span[data-icon="default-group"] svg > path:first-child {
     fill: var(--dark) !important; }
 
+  span[data-icon="default-user"] svg > g > path:last-child,
+  span[data-icon="default-group"] svg > path:last-child {
+    opacity: 0.7;
+    fill: var(--icon) !important; }
+
   /*  Sent message. */
   span[data-icon="msg-dblcheck"] svg path,
   span[data-icon="status-dblcheck"] svg path,
@@ -996,5 +1004,61 @@
   /* "Privacy mode." */
   /*[[blurcontacts]]*/
 
+  @media screen and (max-height: 500px) {
+    ._3dqpi {
+      min-height: auto; }
+  }
 
+  @media screen and (max-width: 720px) {
+    /* .app > div { box-shadow: inset 0 0 0 4px var(--accent); } */
+
+    /* Width overflow fix. */
+    ._3dqpi {
+      min-width: 100%; }
+
+    /* Header fix. */
+    ._3auIg {
+      min-width: 220px; }
+
+    /* Contacts flexbox. */
+    .app.two > .k1feT,
+    .three .k1feT {
+      transition: 250ms ease-in-out;
+      flex: 0 0 075px !important; }
+
+    /* On hover or active sub-menus. */
+    .app.two > .k1feT:hover,
+    .MZIyP .k1feT {
+      transition-delay: 1s !important;
+      flex: 0 0 50% !important; }
+
+    /* Info flexbox. */
+    .three ._2yeJ5 {
+      width: calc(100% - 75px) !important;
+      left: 75px !important; }
+
+    /* Chat flexbox. */
+    .two > ._1Iexl {
+      box-shadow: 0 0 16px -4px var(--shadow) !important;
+      margin: 0 !important;
+      flex: 0 0 calc(100% - 75px) !important; }
+
+    /* Search contacts. */
+    .two .k1feT:not(:hover) ._2MSJr { 
+      background-color: crimson !important;
+      padding: 0;
+      margin-left: 14px; }
+
+    /* Attach icons to avatars. */
+    .two .k1feT ._3j7s9:not(:hover) ._1AwDx ._3Bxar {
+      z-index: 99 !important;
+      position: absolute !important;
+      top: 45px !important;
+      right: 5px !important; }
+
+    /* Hide all icons except new messages. */
+    .two .k1feT ._15G96 span:not(.OUeyt),
+    .two .k1feT .ZR5SB {
+      display: none !important; }
+  }
 }