From dc91bd87db712bca320a925fd249cbc7ecccf60d Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Sat, 2 Dec 2017 02:01:39 -0500
Subject: [PATCH] Another popup mockup

---
 popup.css | 623 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 623 insertions(+)
 create mode 100644 popup.css

diff --git a/popup.css b/popup.css
new file mode 100644
index 00000000..51307bff
--- /dev/null
+++ b/popup.css
@@ -0,0 +1,623 @@
+html, body {
+  height: min-content;
+}
+
+body {
+  width: 252px;
+  font-size: 12px;
+  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
+  margin: 0;
+}
+
+.firefox body {
+  background-color: #fff;
+  color: #000;
+}
+
+body > div:not(#installed) {
+  margin-left: 9px;
+  margin-right: 9px;
+}
+
+.firefox .chromium-only {
+  display: none;
+}
+
+input[type=checkbox] {
+  margin: 0;
+  outline: none;
+}
+
+#disable-all-wrapper {
+  padding: 0.3em 0 0.6em;
+}
+
+#disable-all-wrapper .main-controls {
+  display: flex;
+}
+
+#disable-all-wrapper .main-controls label{
+  padding-left: 4px;
+}
+
+#no-styles {
+  font-style: italic;
+}
+
+.checker {
+  display: inline;
+}
+
+a {
+  color: #000;
+  transition: color .5s;
+  text-decoration-skip: ink;
+}
+
+a:hover {
+  color: #666;
+}
+
+.actions > .main-controls {
+  padding-left: 16px;
+}
+
+.main-controls {
+  display: table-cell;
+}
+
+body > DIV:last-of-type,
+body.blocked > DIV {
+  border-bottom: none;
+}
+
+#installed {
+  border-bottom: 1px solid black;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  max-height: 445px;
+  overflow-y: auto;
+  counter-reset: style-number;
+}
+
+#installed.disabled .style-name {
+  text-decoration: line-through;
+}
+
+#installed.disabled + .actions #disableAll-label {
+  font-weight: bold;
+  color: firebrick;
+}
+
+#installed .actions {
+  cursor: default;
+}
+
+#installed .actions a {
+  cursor: pointer;
+  text-decoration: none;
+}
+
+/* entry */
+
+.entry {
+  display: flex;
+  align-items: center;
+  height: 26px;
+  padding: 0 14px 0 0;
+  position: relative;
+}
+
+html[style] .entry {
+  padding: 0 16px 0 0;
+}
+
+html[style] .entry:nth-child(-n+10):before,
+html[style] .entry:nth-child(10):before {
+  right: 7px;
+}
+
+.entry .actions {
+  display: inline-flex;
+}
+
+.style-name .checker {
+  position: absolute;
+  top: 7px;
+  left: 9px;
+  pointer-events: none;
+}
+
+.style-name {
+  height: 100%;
+  width: 100%;
+  line-height: 28px;
+  cursor: default;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 26px;
+  position: relative;
+}
+
+.entry .main-controls {
+  height: 100%;
+  display: inline-flex;
+  flex-grow: 1;
+  overflow: hidden;
+  align-items: center;
+  padding-right: 5px;
+}
+
+.entry:nth-child(even) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.entry:nth-child(-n+10):before,
+.entry:nth-child(10):before {
+  counter-increment: style-number;
+  content: counter(style-number);
+  position: absolute;
+  top: .9ex;
+  right: 5px;
+  color: #aaa;
+}
+
+.entry:nth-child(10):before {
+  content: "0";
+}
+
+.entry .style-edit-link {
+  margin-right: 2px;
+}
+
+.entry .style-edit-link,
+.entry .delete {
+  display: inline-block;
+  padding: 0 1px 0;
+}
+
+.not-applied .checker,
+.not-applied .style-name,
+.not-applied .actions > * {
+  opacity: .2;
+  transition: opacity .5s ease-in-out .25s, color .5s ease-in-out .25s;
+}
+
+.not-applied:hover .checker,
+.not-applied:hover .style-name,
+.not-applied:hover .actions > * {
+  opacity: 1;
+}
+
+.not-applied:hover .style-name {
+  color: darkred;
+}
+
+.regexp-problem-indicator {
+  background-color: #d00;
+  width: 14px;
+  height: 14px;
+  line-height: 15px;
+  border-radius: 8px;
+  margin-right: 6px;
+  margin-left: 6px;
+  text-align: center;
+  color: white;
+  font-weight: bold;
+  box-sizing: border-box;
+  cursor: pointer;
+  font-size: 90%;
+}
+
+.regexp-partial .actions,
+.regexp-invalid .actions {
+    order: 2;
+}
+
+#regexp-explanation {
+  position: fixed;
+  background-color: white;
+  left: 0;
+  right: 0;
+  padding: .5rem;
+  font-size: 90%;
+  border-top: 2px solid black;
+  border-bottom: 2px solid black;
+  box-shadow: 0 0 100px black;
+  display: flex;
+  flex-direction: column;
+  z-index: 999999;
+}
+
+#regexp-explanation > div {
+  display: none;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.regexp-partial #regexp-partial,
+.regexp-invalid #regexp-invalid {
+  display: block;
+}
+
+#regexp-explanation > div:not(:last-child) {
+  margin-bottom: .5rem;
+}
+
+.svg-icon {
+  pointer-events: none;
+  transition: fill .5s;
+  width: 14px;
+  height: 16px;
+  fill: #666;
+}
+
+a:hover .svg-icon {
+  fill: #000;
+}
+
+body > .actions {
+  margin-top: 0.5em;
+  /* raise the actions above the hotkey-info */
+  position: relative;
+  z-index: 4;
+}
+
+.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 {
+  display: none;
+}
+
+/* Never shown, but can be enabled with a style */
+
+.enable,
+.disable {
+  display: none;
+}
+
+/* 'New style' links */
+
+#write-style {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+#write-style-for {
+  margin-right: .6ex
+}
+
+.write-style-link {
+  margin-left: .6ex
+}
+
+.write-style-link::before {
+  content: "\00ad"; /* "soft" hyphen */
+}
+
+#match {
+  overflow-wrap: break-word;
+  display: block;
+  flex-grow: 9;
+  min-width: 200px;
+}
+
+/* "breadcrumbs" 'new style' links */
+.breadcrumbs > .write-style-link {
+  margin-left: 0
+}
+
+.breadcrumbs:hover a {
+  color: #bbb;
+  text-decoration: none
+}
+
+/* "dot" after each subdomain name */
+.breadcrumbs > .write-style-link[subdomain]::after {
+  content: "."
+}
+
+/* no "dot" after top-level domain */
+.breadcrumbs > .write-style-link:nth-last-child(2)::after {
+  content: none
+}
+
+/* "forward slash" before path ("this URL") */
+.breadcrumbs > .write-style-link:last-child::before {
+  content: "\200b/"
+}
+
+.breadcrumbs > .write-style-link:last-child:first-child::before,
+.breadcrumbs > .write-style-link[subdomain=""] + .write-style-link::before {
+  content: none
+}
+
+/* suppress TLD-only link */
+.breadcrumbs > .write-style-link[subdomain=""] {
+  display: none
+}
+
+/* :hover style */
+.breadcrumbs.url\(\) > .write-style-link,
+
+/* :hover or :focus on "this URL" sets class="url()" */
+.breadcrumbs > .write-style-link:hover,
+.breadcrumbs > .write-style-link:focus,
+.breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain],
+.breadcrumbs > .write-style-link:focus ~ .write-style-link[subdomain] {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-skip: ink;
+}
+
+/* action buttons */
+
+#popup-options {
+  display: flex;
+  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 {
+  width: 49%;
+}
+
+/* confirm */
+
+#confirm {
+  align-items: center;
+  justify-content: center;
+  z-index: 2147483647;
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0 !important;
+  box-sizing: border-box;
+  background-color: rgba(0, 0, 0, 0.4);
+  animation: lights-off .5s cubic-bezier(.03, .67, .08, .94);
+  animation-fill-mode: both;
+}
+
+#confirm.lights-on {
+  animation: lights-on .25s ease-in-out;
+  animation-fill-mode: both;
+}
+
+#confirm.lights-on,
+#confirm.lights-on > div {
+  display: none;
+}
+
+#confirm[data-display=true] {
+  display: flex;
+}
+
+#confirm > div {
+  width: 80%;
+  max-height: 80%;
+  min-height: 6em;
+  padding: 1em;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border: solid 2px rgba(0, 0, 0, 0.5);
+}
+
+#confirm > div > *:not(:last-child) {
+  padding-bottom: .5em;
+}
+
+#confirm > div > div {
+  text-align: center;
+}
+
+.non-windows #confirm > div > div {
+  direction: rtl;
+  text-align: right;
+}
+
+#confirm > button {
+  /* add a gap between buttons both for horizontal
+  or vertical (when the label is wide) layout */
+  margin: 0 .25em .25em 0;
+}
+
+.unreachable .entry {
+  opacity: .25;
+}
+
+.unreachable .blocked-info {
+  border-bottom: 1px solid black;
+}
+
+.blocked-info {
+  hyphens: auto;
+}
+
+.blocked-info label {
+  padding: 5px 0;
+  display: block;
+  font-weight: bold;
+}
+
+.blocked-info p {
+  padding: 1px 0 9px;
+  display: block;
+  font-size: 90%;
+  margin: 0;
+}
+
+/******************************************/
+
+#hotkey-info {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 16px;
+  cursor: help;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+  hyphens: auto;
+}
+
+#hotkey-info:not([data-active]) > * {
+  display: none;
+}
+
+#hotkey-info[data-active] {
+  left: 6ex;
+  width: auto;
+  cursor: auto;
+  display: flex;
+  flex-direction: column;
+  border-left: 2px solid white;
+  box-shadow: 0 0 90px rgba(0, 0, 0, .5);
+  z-index: 5;
+}
+
+#hotkey-info div:first-child {
+  flex-grow: 1;
+  padding: 0 1em;
+  font-size: 11px;
+  overflow-y: auto;
+}
+
+#hotkey-info div {
+  padding: 1em;
+  border-top: 1px solid #ddd;
+  background-color: white;
+}
+
+#hotkey-info div:last-child {
+  box-shadow: 0 0 90px rgba(0, 0, 0, .25);
+  position: relative;
+}
+
+#hotkey-info p {
+  text-indent: -3px;
+}
+
+#hotkey-info p:last-child {
+  margin-bottom: 0;
+}
+
+#hotkey-info mark {
+  display: inline-block;
+  background: linear-gradient(#ccc, #fff);
+  padding: 1px 6px 0;
+  margin: 2px;
+  border: 1px solid white;
+  border-radius: 4px;
+  box-shadow: 1px 1px 4px rgba(0, 0, 0, .3);
+  font-weight: bold;
+  white-space: nowrap;
+}
+
+/******************************************/
+
+@keyframes lights-off {
+  from {
+    background-color: transparent;
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+@keyframes lights-on {
+  from {
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+  to {
+    background-color: transparent;
+  }
+}
+
+/* Popup adjustments for common zoom levels */
+
+@media (-webkit-min-device-pixel-ratio: 1.05) {
+  #installed {
+    max-height: 420px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.1) {
+  #installed {
+    max-height: 393px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.15) {
+  #installed {
+    max-height: 371px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.2) {
+  #installed {
+    max-height: 348px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.25) {
+  #installed {
+    max-height: 326px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.30) {
+  #installed {
+    max-height: 306px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.35) {
+  #installed {
+    max-height: 288px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.4) {
+  #installed {
+    max-height: 271px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.45) {
+  #installed {
+    max-height: 256px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+  #installed {
+    max-height: 244px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.55) {
+  #installed {
+    max-height: 199px;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.75) {
+  #installed {
+    max-height: 144px;
+  }
+}