Full flex popup

popup/popup.css

@@ -1,44 +1,90 @@
+html, body {
+  height: min-content;
+}
+
 body {
-  width: 252px;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 9px 9px;
   font-size: 12px;
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   margin: 0;
 }
+
 .firefox body {
   background-color: #fff;
 }
 
-body > div:not(#installed) {
-  margin-left: 0.75em;
-  margin-right: 0.75em;
-}
-
 .firefox .chromium-only {
   display: none;
 }
 
-input[type=checkbox] {
+.svg-icon.checked {
-  outline: none;
+  position: absolute;
+  height: 8px;
+  width: 8px;
+  display: none;
+  fill: #000;
+  margin: 2px 0 0 2px;
 }
 
-#disable-all-wrapper {
+input[type="checkbox"]:checked:hover + .svg-icon.checked,
-  padding: 0.3em 0 0.6em;
+.style-name:hover input[type="checkbox"]:checked + .svg-icon.checked {
+  fill: #666;
+}
+
+input[type="checkbox"]:checked + .svg-icon.checked {
+  display: inline-flex;
+}
+
+input[type="checkbox"],
+.entry.disabled:not(.not-applied) .style-name:hover input[type="checkbox"] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  border: 1px solid hsl(0, 0%, 20%);
+  height: 12px;
+  width: 12px;
+  display: inline-flex;
+  border-radius: 2px;
+  background-color: hsl(0, 0%, 94%);
+  outline: none;
+  margin: 0;
+  transition: background-color .5s, border-color .5s;
+}
+
+input[type="checkbox"]:hover, .style-name:hover input[type="checkbox"] {
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 0%, 50%);
+}
+
+.entry.disabled:not(.not-applied) input[type="checkbox"],
+.entry.not-applied input[type="checkbox"],
+.entry.disabled:not(.not-applied) input[type="checkbox"] + .svg-icon.checked,
+.entry.not-applied input[type="checkbox"] + .svg-icon.checked,
+.entry.disabled:not(.not-applied) .style-name,
+.entry.not-applied .style-name {
+  transition: none;
+}
+
+.entry.disabled:not(.not-applied) .style-name:hover .style-name-span {
+  color: #000;
+}
+
+a:hover, input[type="checkbox"]:hover + .svg-icon + label {
+  color: #666;
+}
+
+label {
+  color: #000;
+  transition: color .5s;
 }
 
 #no-styles {
   font-style: italic;
 }
 
-.checker {
-  display: inline;
-}
-
-.style-name {
-  cursor: default;
-  font-weight: bold;
-  display: block;
-}
-
 a {
   color: #000;
   transition: color .5s;
@@ -50,19 +96,11 @@ a:hover {
 }
 
 .left-gutter {
-  display: table-cell;
+  display: inline-flex;
-  width: 16px;
-  vertical-align: top;
 }
 
-.left-gutter input {
+.style-name .left-gutter {
-  margin-bottom: 1px;
+  pointer-events: none;
-  margin-top: 0;
-  margin-left: 0;
-}
-
-.main-controls {
-  display: table-cell;
 }
 
 body > DIV:last-of-type,
@@ -71,19 +109,19 @@ body.blocked > DIV {
 }
 
 #installed {
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid #000;
   padding-bottom: 2px;
   padding-top: 2px;
+  margin: 0 -9px;
+  flex-grow: 1;
+  width: 100%;
   max-height: 445px;
   overflow-y: auto;
 }
 
-#installed.disabled .style-name {
-  text-decoration: line-through;
-}
-
 #installed .actions {
   cursor: default;
+  display: inline-flex;
 }
 
 #installed .actions a {
@@ -96,7 +134,8 @@ body.blocked > DIV {
 .entry {
   display: flex;
   align-items: center;
-  padding: 5px 0.75em;
+  padding: 0 9px;
+  height: 26px;
 }
 
 .entry:nth-child(even) {
@@ -109,39 +148,85 @@ body.blocked > DIV {
 
 .entry .style-edit-link,
 .entry .delete {
-  display: inline-block;
+  display: inline-flex;
-  padding: 0 1px 0;
+  height: 24px;
+  width: 18px;
+  align-items: center;
+  justify-content: center;
 }
 
 .entry .main-controls {
+  display: inline-flex;
+  align-items: center;
+  flex-grow: 1;
+  overflow: hidden;
+  padding-right: 5px;
+
+}
+
+.entry .main-controls .style-name {
   display: flex;
-  width: calc(100% - 20px);
+  flex-grow: 1;
+  overflow: hidden;
+  height: 100%;
   align-items: center;
 }
 
-.entry .main-controls label {
+.entry .main-controls .style-name-span{
-  flex: 1;
+  cursor: default;
+  font-weight: bold;
   overflow: hidden;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  padding-right: 5px;
+  text-overflow: ellipsis;
+  margin: 1px 0 0 4px;
+  pointer-events: none;
+}
+ 
+.entry.disabled:not(.not-applied) .style-name,
+.entry.disabled:not(.not-applied) .actions,
+.entry.not-applied .style-name,
+.entry.not-applied .actions {
+  opacity: .4;
+  transition: opacity .5s ease-in-out .25s;
 }
 
-.not-applied .checker,
+#installed.disabled {
-.not-applied .style-name,
-.not-applied .actions > * {
   opacity: .2;
-  transition: opacity .5s ease-in-out .25s, color .5s ease-in-out .25s;
+  transition: opacity .5s ease-in-out .25s;
 }
 
-.not-applied:hover .checker,
+#installed.disabled:hover,
-.not-applied:hover .style-name,
+#installed.disabled:not(:hover) .entry.disabled:not(.not-applied) .style-name,
-.not-applied:hover .actions > * {
+#installed.disabled:not(:hover) .entry.disabled:not(.not-applied) .actions,
+#installed.disabled:not(:hover) .entry.not-applied .style-name,
+#installed.disabled:not(:hover) .entry.not-applied .actions,
+.entry.not-applied:hover .style-name,
+.entry.not-applied:hover .actions,
+.entry.disabled:not(.not-applied):hover .style-name,
+.entry.disabled:not(.not-applied):hover .actions {
   opacity: 1;
 }
 
-.not-applied:hover .style-name {
+.not-applied .style-name, .not-applied .style-name-span {
-  color: darkred;
+  color: hsl(0, 100%, 30%);
+}
+
+.entry.not-applied .svg-icon, .not-applied input[type="checkbox"]:checked + .svg-icon.checked,
+.entry.not-applied .style-name:hover input[type="checkbox"]:checked + .svg-icon.checked {
+  fill: hsl(0, 100%, 30%);
+}
+
+.entry.not-applied a:hover .svg-icon.remove {
+  fill: hsl(0, 100%, 50%);
+}
+
+.entry.not-applied a:hover .svg-icon.edit {
+  fill: hsl(170, 70%, 38%);
+}
+
+.entry.not-applied input[type="checkbox"], .entry.not-applied .style-name:hover input[type="checkbox"] {
+  background-color: hsl(0, 0%, 100%);
+  border-color: hsl(0, 100%, 30%);
 }
 
 .regexp-problem-indicator {
@@ -180,6 +265,14 @@ body.blocked > DIV {
   z-index: 999999;
 }
 
+#regexp-explanation button {
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: auto;
+}
+
 #regexp-explanation > div {
   display: none;
   list-style-type: none;
@@ -208,20 +301,6 @@ a:hover .svg-icon {
   fill: #000;
 }
 
-body > .actions {
-  margin-top: 0.5em;
-}
-
-.actions > div:not(:last-child):not(#disable-all-wrapper),
-.actions > .main-controls > div:not(:last-child) {
-  margin-bottom: 0.75em;
-}
-
-.actions input,
-.actions label {
-  vertical-align: middle;
-}
-
 body.blocked #installed > *,
 body.blocked .actions > .main-controls,
 body.blocked .actions > .left-gutter {
@@ -257,9 +336,8 @@ body.blocked .actions > .left-gutter {
 
 #match {
   overflow-wrap: break-word;
-  display: block;
+  flex-grow: 1;
-  flex-grow: 9;
+  min-width: 100%;
-  min-width: 200px;
 }
 
 /* "breadcrumbs" 'new style' links */
@@ -310,26 +388,39 @@ body.blocked .actions > .left-gutter {
   text-decoration-skip: ink;
 }
 
-/* action buttons */
+/* actions/buttons and wrappers */
 
-#popup-options {
+#popup-manage-button, #popup-shortcuts-button, #popup-options-button  {
-  display: flex;
+  width: 100%;
-  flex-direction: row;
-  justify-content: space-between;
-  padding: 1.2em 1px;
-}
-
-#popup-options button {
-  width: 32%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.firefox #popup-options button {
+#popup-manage-wrapper, #popup-shortcuts-wrapper, #popup-options-wrapper {
-  width: 49%;
+  width: 32%;
 }
 
+.firefox #popup-options button {
+  width: 48%;
+}
+
+#disable-all-wrapper, #write-style-wrapper, #find-styles-wrapper {
+  width: 100%;
+}
+#disable-all-wrapper {
+  padding: 12px 0;
+}
+
+#write-style-wrapper, #find-styles-wrapper {
+  padding: 0 0 12px;
+}
+
+#disableAll-label {
+  padding-left: 4px;
+}
+
+
 /* confirm */
 
 #confirm {
@@ -379,7 +470,8 @@ body.blocked .actions > .left-gutter {
 }
 
 #confirm > div > div {
-  text-align: center;
+  display: flex;
+  justify-content: center;
 }
 
 .non-windows #confirm > div > div {
@@ -387,10 +479,19 @@ body.blocked .actions > .left-gutter {
   text-align: right;
 }
 
-#confirm > button {
+#confirm button {
-  /* add a gap between buttons both for horizontal
+  max-width: calc(50% - 9px);
-  or vertical (when the label is wide) layout */
+  white-space: nowrap;
-  margin: 0 .25em .25em 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+#confirm button:first-of-type {
+  margin-right: 3px;
+}
+
+#confirm button:nth-of-type(2) {
+  margin-left: 3px;
 }
 
 .unreachable .entry {

popup/popup.js

@@ -62,12 +62,6 @@ function initPopup(url) {
 
   setPopupWidth();
 
-  // force Chrome to resize the popup
-  if (!FIREFOX) {
-    document.body.style.height = '10px';
-    document.documentElement.style.height = '10px';
-  }
-
   // action buttons
   $('#disableAll').onchange = function () {
     installed.classList.toggle('disabled', this.checked);
@@ -255,7 +249,10 @@ function createStyleElement({
     onclick: handleEvent.name,
   });
   styleName.checkbox = checkbox;
-  styleName.appendChild(document.createTextNode(style.name));
+    var styleNameSpan = document.createElement("span");
+    styleName.appendChild(styleNameSpan);
+    styleNameSpan.setAttribute("class","style-name-span");
+    styleNameSpan.appendChild(document.createTextNode(style.name));
 
   $('.enable', entry).onclick = handleEvent.toggle;
   $('.disable', entry).onclick = handleEvent.toggle;