diff --git a/LICENSE b/LICENSE index 45086e8f..dfdc8a45 100644 --- 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 index 209dad7b..d149dbaf 100644 --- 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; } + } }