-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - -
- -- - - -
- -
-
-
-
-
-
-
-
-
-
- - - -
-
-
-
-
-
diff --git a/manage/manage.css b/manage/manage.css
index 305aac8d..7366c1e9 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -49,22 +49,12 @@ select {
font-size: 12px;
}
-.nowrap {
- white-space: nowrap;
-}
-
-.nowrap > * {
- white-space: nowrap;
- overflow-x: hidden;
- text-overflow: ellipsis;
-}
-
#header {
width: var(--header-width);
height: 100vh;
position: fixed;
top: 0;
- padding: 15px;
+ padding: 1rem;
border-right: 1px dashed #AAA;
-webkit-box-shadow: 0 0 50px -18px black;
box-shadow: 0 0 50px -18px black;
@@ -73,8 +63,13 @@ select {
z-index: 9;
}
+#update-check,
+#update-all {
+ margin-bottom: .5rem;
+}
+
#check-all-updates {
- max-width: 220px;
+ max-width: calc(100% - 30px);
}
#header h1 {
@@ -90,14 +85,12 @@ select {
#add-style-wrapper {
display: flex;
align-items: center;
- padding-bottom: 1.25em;
- white-space: nowrap;
flex-wrap: wrap;
}
#add-style-wrapper > * {
/* in case the children are wrapped */
- margin-bottom: .25em;
+ margin-bottom: .5rem;
}
#add-style-as-usercss-wrapper {
@@ -233,6 +226,11 @@ select {
display: none;
}
+.newUI .style-name::after,
+.newUI .style-name-link::after {
+ vertical-align: text-top;
+}
+
.disabled h2::after, .entry.usercss .style-name-link::after {
font-weight: normal;
font-size: 11px;
@@ -272,17 +270,25 @@ select {
}
/* collapsibles */
-#header details:not(#filters) {
- padding-bottom: .7em;
-}
-
-#add-style-wrapper,
-#backup :last-child {
+#add-style-wrapper {
margin-bottom: 0;
}
-#options p:last-of-type {
- margin-top: 0;
+#backup-buttons {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: .5rem;
+}
+
+#options-buttons {
+ display: flex;
+ flex-wrap: wrap;
+ padding-top: .1rem;
+}
+
+#options-buttons button,
+#backup-buttons button {
+ margin: 0 .2rem .5rem 0;
}
#header details:not([open]),
@@ -291,17 +297,27 @@ select {
}
#header details[open] summary {
- padding-bottom: .5em;
+ padding-bottom: .5rem;
}
#header summary {
+ margin-top: .25rem;
align-items: center;
margin-left: -13px;
cursor: pointer;
}
+#header #filters summary {
+ margin: 0 0 -2px -13px;
+}
+
+#header #filters summary h2 {
+ margin-left: -4px;
+}
+
#header summary h2 {
- display: inline-block;
+ display: inline-flex;
+ flex-wrap: wrap;
border-bottom: 1px dotted transparent;
margin-top: .1em;
margin-bottom: .1em;
@@ -362,6 +378,7 @@ select {
#header label {
padding-left: 16px;
position: relative;
+ white-space: nowrap;
}
#header .filter-selection label {
@@ -369,7 +386,6 @@ select {
box-sizing: border-box;
align-items: center;
height: 18px;
- width: 100%;
padding: 0 0 0 8px;
}
@@ -430,6 +446,7 @@ select {
#manage-text {
display: flex;
align-items: baseline;
+ padding-top: .35rem;
}
#manage-text > :not(:last-child):after {
@@ -456,7 +473,7 @@ select {
cursor: pointer;
}
-.newUI .entry .style-name:hover::before {
+.newUI .entry .style-name::before {
content: "";
position: absolute;
top: 0;
@@ -465,6 +482,13 @@ select {
bottom: 0;
background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
pointer-events: none;
+ opacity: 0;
+ transition: opacity .1s;
+ will-change: opacity;
+}
+
+.newUI .entry .style-name:hover::before {
+ opacity: 1;
}
.newUI .entry.enabled .style-name:hover .style-name-link {
@@ -726,9 +750,9 @@ input[id^="manage.newUI"] {
}
#faviconsHelp div {
- display: flex;
- align-items: center;
- margin-top: 1ex;
+ display: flex;
+ align-items: center;
+ margin-top: 1ex;
}
/* Default, no update buttons */
@@ -834,10 +858,6 @@ input[id^="manage.newUI"] {
border: 1px solid transparent;
}
-#filters summary h2 {
- margin-left: -4px;
-}
-
.active #filters-stats {
background-color: darkcyan;
border-color: darkcyan;
@@ -846,13 +866,21 @@ input[id^="manage.newUI"] {
font-weight: normal;
padding: 2px 5px;
position: relative;
- top: -2px;
+ white-space: nowrap;
}
-#reset-filters {
- position: absolute;
- margin-top: 2px;
- display: inline-block;
+.filter-stats-wrapper {
+ display: flex;
+ align-items: center;
+ margin-left: .2rem;
+}
+
+#header #filters summary {
+ white-space: nowrap;
+}
+
+#header #filters summary ::-webkit-details-marker {
+ margin-top: 4px
}
#reset-filters svg {
@@ -876,21 +904,30 @@ input[id^="manage.newUI"] {
display: flex;
align-items: center;
flex-wrap: wrap;
+ margin-bottom: .5rem;
}
-#sort-wrapper {
- margin-top: .25em;
+#search-wrapper {
+ margin-top: .35rem;
}
#sort-wrapper .sorter-selection {
+ display: inline-flex;
+ flex-grow: 1;
position: relative;
- width: calc(100% - 15px);
+ max-width: calc(100% - 30px);
+}
+
+#manage\.newUI\.sort {
+ max-width: 100%;
+}
+
+#search {
+ max-width: calc(100% - 30px);
}
#search, #manage\.newUI\.sort {
- max-width: 100%;
flex-grow: 1;
- margin: 0.25rem 0 0;
background: #fff;
height: 20px;
box-sizing: border-box;
@@ -910,11 +947,11 @@ input[id^="manage.newUI"] {
}
#search-help, #sorter-help {
- margin: 4px -5px 0 2px;
+ margin: 0 -5px 0 2px;
}
#sort-wrapper .select-arrow {
- top: 7px;
+ top: 3px;
right: 4px;
}
@@ -989,11 +1026,11 @@ input[id^="manage.newUI"] {
}
#message-box details:not(:last-child) {
- margin-bottom: 1em;
+ margin-bottom: 1em;
}
#message-box details small div {
- margin-left: 1.5em;
+ margin-left: 1.5em;
}
.update-history-log {
@@ -1045,38 +1082,9 @@ input[id^="manage.newUI"] {
}
}
-@media (max-width: 675px) {
- #installed {
- position: static;
- padding-left: 0;
- overflow: visible;
- }
-
- #header p,
- #backup {
- display: inline-block;
- }
-
- #find-editor-styles {
- display: inline-block;
- }
-
- #backup {
- margin-right: 1em;
- }
-
- #backup p {
- margin: 0;
- }
-
- .entry {
- margin: 0;
- }
-}
-
-@media (max-width: 800px) {
+@media (max-width: 850px) {
body {
- flex-direction: column;
+ display: table;
}
body.all-styles-hidden-by-filters:before {
@@ -1090,16 +1098,58 @@ input[id^="manage.newUI"] {
left: 3.75rem;
}
+ html:not(.newUI) .applies-to {
+ word-break: break-all;
+ }
+
+ #installed {
+ table-layout: fixed;
+ }
+
+ .newUI .entry .actions {
+ padding-right: 30px
+ }
+
+ #search-wrapper,
+ #sort-wrapper,
+ #header summary {
+ max-width: 247px;
+ }
+
+ #message-box > div {
+ left: 0;
+ right: 0!important;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .filter-selection {
+ max-width: 226px;
+ }
+
#header {
+ display: table-header-group;
height: auto;
+ padding: 0;
+ width: 100%;
position: static;
- width: auto;
border-right: none;
border-bottom: 1px dashed #AAA;
- overflow: visible;
- -webkit-column-count: 2;
- -moz-column-count: 2;
- column-count: 2;
+ }
+
+ #manage-settings {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ padding: .5rem 0 1rem;
+ }
+
+ #manage-settings > .settings-column {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 0 1rem;
+ box-sizing: border-box;
}
#installed {
@@ -1114,38 +1164,50 @@ input[id^="manage.newUI"] {
display: none;
}
+ #backup-buttons {
+ margin-top: 0;
+ }
+
+ #header summary {
+ margin-top: 0;
+ padding-bottom: .25rem;
+ }
+
.newUI .entry {
- margin: 0;
+ padding: 0;
}
- .newUI .style-name {
- width: 50%;
+ .newUI .entry .checkmate {
+ position: absolute;
+ left: 14px;
+ top: 0;
+ bottom: 0;
+ margin: auto;
}
- .newUI .target {
- max-width: calc(50vw - var(--actions-width));
- }
-}
-
-@media (max-width: 500px) {
- #header {
- -webkit-column-count: 1;
- -moz-column-count: 1;
- column-count: 1;
+ .newUI .entry .style-name {
+ padding: .5rem 0 .5rem 34px;
+ text-indent: unset;
}
- .newUI #header > *:not(h1),
- .newUI #newUIoptions,
- #newUIoptions > * {
- display: inline;
+ .newUI .entry .actions {
+ width: 104px;
+ padding: .5rem 0 .5rem 6px;
}
- #header label {
- white-space: nowrap;
+ .newUI .entry .applies-to {
+ padding: .25rem .5rem .25rem 0;
}
- .newUI .style-name {
- word-break: break-all;
+ .newUI .entry .target {
+ max-width: 100%;
+ padding-right: 0;
+ }
+
+ .newUI .style-name::after,
+ .newUI .style-name-link::after {
+ text-indent: 0;
+ display: inline-block;
}
}
diff --git a/popup/popup.css b/popup/popup.css
index b0cc1663..15e11918 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -27,8 +27,8 @@ body {
}
.firefox body {
- background-color: #fff;
color: #000;
+ background-color: #fff;
}
body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
@@ -208,6 +208,24 @@ html[style] .entry {
position: relative;
}
+.entry .style-name::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+ pointer-events: none;
+ opacity: 0;
+ transition: opacity .1s;
+ will-change: opacity;
+}
+
+.entry .style-name:hover::before {
+ opacity: 1;
+}
+
.entry .main-controls {
height: 100%;
display: inline-flex;