Issue 5779 - Missing checkbox in language dialog and persistent validation

skin/new-options.css

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-present eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 331 matching lines @@
 {
   right: 0.3rem;
   left: auto;
 }
 
 [data-validation] .floating-input input:focus:invalid
 {
   border-color: #C11D27;
 }
 
 [data-validation] .floating-input input:focus:invalid ~ .attention::before,

[saroyanm, 2017/09/26 18:40:52]

Making invalid errors being persistent with current implementation is not
trivial.
The only way with current implementation I could have done it is by checking if
:placeholder-shown persist, which is true whenever the input is empty.

Anyway Jeen initial concern was about valid inputs being persistent.
I'll double check with her regarding the invalid inputs, but for the scope of
this issue having only valid inputs persistent I think should be fine.

[ire, 2017/09/28 07:33:44]

Acknowledged.

-[data-validation] .floating-input input:focus:valid ~ .attention::before
+[data-validation] .floating-input input:valid ~ .attention::before
 {
   content: "";
   position: absolute;
   display: block;
   margin: 0.5rem;
   height: 1.5rem;
   width: 1.5rem;
   border: 0rem;
   top: 0.5rem;
   right: 0rem;
 }
 
 html[dir="rtl"] [data-validation] .floating-input input:focus:invalid ~ .attention::before,
-html[dir="rtl"] [data-validation] .floating-input input:focus:valid ~ .attention::before
+html[dir="rtl"] [data-validation] .floating-input input:valid ~ .attention::before
 {
   left: 0rem;
   right: auto;
 }
 
 [data-validation] .floating-input input:focus:invalid ~ .attention::before
 {
   background-color: #C11D27;
   -webkit-mask: url(icons/attention.svg);
   mask: url(icons/attention.svg);
 }
 
-[data-validation] .floating-input input:focus:valid ~ .attention::before
+[data-validation] .floating-input input:valid ~ .attention::before
 {
   top: 0.8rem;
   background-color: green;
   -webkit-mask: url(icons/checkmark.svg);
   mask: url(icons/checkmark.svg);
 }
 
 [data-validation] .floating-input input ~ .error-msg
 {
   margin-top: 0.5rem;
@@ skipping 739 matching lines @@
 }
 
 .context-menu li[role="menuitem"] > *
 {
   width: 100%;
   display: flex;
   border: 0rem;
   padding: 1rem 0rem;
   color: #099CD0;
   font-size: 1.1rem;
+  font-weight: 700;

[saroyanm, 2017/09/26 18:40:52]

Font-weight context menu items were different and Update and Delete button were
looking emphasized, so I made that consistent as well within this issue.

[ire, 2017/09/28 07:33:44]

Acknowledged.

   text-transform: none;
 }
 
 .context-menu li[role="menuitem"] > *:hover,
 .context-menu li[role="menuitem"] > *:focus
 {
   background-color: #E1F2FA;
   cursor: pointer;
 }
 
@@ skipping 286 matching lines @@
 
 #hide-notification::after
 {
   background-color: #099DD1;
 }
 
 #hide-notification:hover::after
 {
   background-color: #5CBCE1;
 }