Responsive layout (#410)
This commit is contained in:
narcolepticinsomniac
tophf
parent
165f7b5684
commit
70b8a1172f
32
edit.html
32
edit.html
|
|
@ -100,15 +100,23 @@
|
|||
</select>
|
||||
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
|
||||
</div>
|
||||
<div class="applies-value-wrapper">
|
||||
<input name="applies-value" class="applies-value style-contributor" spellcheck="false">
|
||||
<button class="remove-applies-to" i18n-text="appliesRemove"></button>
|
||||
<button class="add-applies-to" i18n-text="appliesAdd"></button>
|
||||
<a class="remove-applies-to" href="#" i18n-text="appliesRemove" i18n-title="appliesRemove">
|
||||
<svg class="svg-icon remove"><use xlink:href="#svg-icon-minus"/></svg>
|
||||
</a>
|
||||
<a class="add-applies-to" href="#" i18n-text="appliesAdd" i18n-title="appliesAdd">
|
||||
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template data-id="appliesToEverything">
|
||||
<li class="applies-to-everything" i18n-text="appliesToEverything">
|
||||
<button class="add-applies-to" i18n-text="appliesSpecify"></button>
|
||||
<a class="add-applies-to" i18n-text="appliesAdd" i18n-title="appliesAdd" href="#">
|
||||
<svg class="svg-icon add"><use xlink:href="#svg-icon-plus"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
@ -124,11 +132,13 @@
|
|||
</label>
|
||||
<ul class="applies-to-list"></ul>
|
||||
</div>
|
||||
<div class="edit-actions">
|
||||
<button class="remove-section" i18n-text="sectionRemove"></button>
|
||||
<button class="add-section" i18n-text="sectionAdd"></button>
|
||||
<button class="beautify-section" i18n-text="styleBeautify"></button>
|
||||
<button class="test-regexp" i18n-text="styleRegexpTestButton"></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template data-id="searchReplaceDialog">
|
||||
|
|
@ -276,12 +286,16 @@
|
|||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</h2>
|
||||
<div id="mozilla-format-buttons">
|
||||
<button id="from-mozilla" i18n-text="importLabel"></button>
|
||||
<button id="to-mozilla" i18n-text="exportLabel"></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<details id="options" data-pref="editor.options.expanded">
|
||||
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
||||
<div id="options-wrapper">
|
||||
<div class="options-column">
|
||||
<div class="option">
|
||||
<label id="lineWrapping-label" i18n-text="cm_lineWrapping">
|
||||
<input id="editor.lineWrapping" type="checkbox">
|
||||
|
|
@ -334,6 +348,8 @@
|
|||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options-column">
|
||||
<div class="option aligned">
|
||||
<label id="tabSize-label" for="editor.tabSize" i18n-text="cm_tabSize"></label>
|
||||
<input id="editor.tabSize" type="number" min="0">
|
||||
|
|
@ -380,6 +396,8 @@
|
|||
<svg class="svg-icon settings"><use xlink:href="#svg-icon-settings"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
<details id="lint" class="hidden" data-pref="editor.lint.expanded">
|
||||
<summary>
|
||||
|
|
@ -439,6 +457,14 @@
|
|||
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="svg-icon-plus" viewBox="0 0 8 8">
|
||||
<path fill-rule="evenodd" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="svg-icon-minus" viewBox="0 0 8 8">
|
||||
<path fill-rule="evenodd" d="M0 3v2h8v-2h-8z"/>
|
||||
</symbol>
|
||||
|
||||
</svg>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -34,13 +34,14 @@ function createAppliesToLineWidget(cm) {
|
|||
$create('li.applies-to-everything', t('appliesToEverything')),
|
||||
};
|
||||
|
||||
$('button', TPL.listItem).insertAdjacentElement('beforebegin',
|
||||
$('.applies-value', TPL.listItem).insertAdjacentElement('afterend',
|
||||
$create('button.test-regexp', t('styleRegexpTestButton')));
|
||||
|
||||
CLICK_ROUTE = {
|
||||
'.test-regexp': showRegExpTester,
|
||||
|
||||
'.remove-applies-to': (item, apply) => {
|
||||
'.remove-applies-to': (item, apply, event) => {
|
||||
event.preventDefault();
|
||||
const applies = item.closest('.applies-to').__applies;
|
||||
const i = applies.indexOf(apply);
|
||||
let repl;
|
||||
|
|
@ -72,7 +73,8 @@ function createAppliesToLineWidget(cm) {
|
|||
applies.splice(i, 1);
|
||||
},
|
||||
|
||||
'.add-applies-to': (item, apply) => {
|
||||
'.add-applies-to': (item, apply, event) => {
|
||||
event.preventDefault();
|
||||
const applies = item.closest('.applies-to').__applies;
|
||||
const i = applies.indexOf(apply);
|
||||
const pos = apply.mark.find().to;
|
||||
|
|
@ -109,12 +111,13 @@ function createAppliesToLineWidget(cm) {
|
|||
changeItem(item, apply, 'value', target.value);
|
||||
}
|
||||
},
|
||||
onclick({target}) {
|
||||
onclick(event) {
|
||||
const {target} = event;
|
||||
for (const selector in CLICK_ROUTE) {
|
||||
const routed = target.closest(selector);
|
||||
if (routed) {
|
||||
const item = routed.closest('.applies-to-item');
|
||||
CLICK_ROUTE[selector].call(routed, item, item.__apply);
|
||||
CLICK_ROUTE[selector].call(routed, item, item.__apply, event);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
284
edit/edit.css
284
edit/edit.css
|
|
@ -28,17 +28,12 @@ body {
|
|||
}
|
||||
|
||||
/************ checkbox & select************/
|
||||
#options > div[class="option"] {
|
||||
.options-column > div[class="option"] {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
#options > div.option:nth-last-of-type(7) {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#options > div.option:nth-last-of-type(7) + .usercss-only {
|
||||
margin-top: -8px;
|
||||
margin-bottom: 12px;
|
||||
.options-column > .usercss-only {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
@ -53,7 +48,7 @@ label {
|
|||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
padding: 15px;
|
||||
padding: 1rem;
|
||||
border-right: 1px dashed #AAA;
|
||||
-webkit-box-shadow: 0 0 3rem -1.2rem black;
|
||||
box-shadow: 0 0 3rem -1.2rem black;
|
||||
|
|
@ -154,7 +149,7 @@ label {
|
|||
margin: -2px 0 0 .1rem;
|
||||
}
|
||||
.svg-inline-wrapper.applies-to-help {
|
||||
margin: -2px 0 0 .25rem;
|
||||
margin: 0 0 0 .25rem;
|
||||
}
|
||||
.aligned .svg-inline-wrapper {
|
||||
margin: -2px 0 0 .3rem;
|
||||
|
|
@ -191,8 +186,8 @@ input:invalid {
|
|||
align-items: center;
|
||||
margin-left: -13px;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
#header summary h2 {
|
||||
|
|
@ -210,8 +205,31 @@ input:invalid {
|
|||
margin-top: -3px;
|
||||
}
|
||||
|
||||
#actions {
|
||||
margin-bottom: .5rem;
|
||||
#actions > * {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#mozilla-format-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#mozilla-format-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#actions > div > a {
|
||||
height: min-content;
|
||||
}
|
||||
|
||||
#actions button,
|
||||
#actions > div > a {
|
||||
margin: 0 .2rem .5rem 0;
|
||||
}
|
||||
|
||||
#actions #cancel-button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#options:not([open]) + #lint h2 {
|
||||
|
|
@ -248,16 +266,23 @@ input:invalid {
|
|||
/************ content ***********/
|
||||
#sections > div {
|
||||
margin: 0.7rem;
|
||||
padding: 1rem;
|
||||
padding: 1rem 1rem .3rem;
|
||||
}
|
||||
#sections > div:first-of-type {
|
||||
padding: 0 1rem .3rem;
|
||||
}
|
||||
#sections > div:not(:first-of-type) {
|
||||
border-top: 2px solid black;
|
||||
border-top: 2px solid hsl(0, 0%, 80%);
|
||||
}
|
||||
#sections > div:only-of-type .remove-section {
|
||||
display: none;
|
||||
}
|
||||
#sections > div > button:not(:first-of-type) {
|
||||
margin-left: 0.2rem;
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.edit-actions button {
|
||||
margin: 0 .2rem .5rem 0;
|
||||
}
|
||||
.dirty > label::before {
|
||||
content: "*";
|
||||
|
|
@ -358,45 +383,76 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
|
|||
/* applies-to */
|
||||
.applies-to {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.applies-to label {
|
||||
flex: auto;
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
height: 22px;
|
||||
align-items: center;
|
||||
margin: 0 .2em 0 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.applies-to ul {
|
||||
flex: auto;
|
||||
flex-grow: 99;
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.applies-to li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
align-items: center;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
.applies-to li > *:not(button):not(.select-resizer) {
|
||||
flex: auto;
|
||||
.applies-to li.applies-to-everything {
|
||||
align-items: unset;
|
||||
line-height: 22px;
|
||||
}
|
||||
.applies-to li > input {
|
||||
min-height: 1.4rem;
|
||||
margin-left: 0.35rem;
|
||||
}
|
||||
html:not(.usercss) .applies-to li .add-applies-to {
|
||||
visibility: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
html:not(.usercss) .applies-to li:last-child .add-applies-to {
|
||||
visibility: visible
|
||||
.applies-to li:not(.applies-to-everything) > * {
|
||||
margin: 0 .2rem .5rem 0;
|
||||
}
|
||||
.applies-to li .add-applies-to:first-child {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.applies-to li .applies-value-wrapper {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
}
|
||||
.applies-to li .applies-value {
|
||||
flex-grow: 99;
|
||||
flex-grow: 1;
|
||||
padding-left: 0.2rem;
|
||||
}
|
||||
.applies-to img {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.add-applies-to,
|
||||
.remove-applies-to {
|
||||
font-size: 0;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-applies-to .svg-icon,
|
||||
.remove-applies-to .svg-icon {
|
||||
pointer-events: none;
|
||||
fill: hsl(0, 0%, 60%);
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
.add-applies-to:hover .svg-icon,
|
||||
.remove-applies-to:hover .svg-icon {
|
||||
pointer-events: none;
|
||||
fill: hsl(0, 0%, 0%);
|
||||
}
|
||||
.test-regexp {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -563,7 +619,7 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
|
|||
position: absolute;
|
||||
}
|
||||
#lint > div {
|
||||
margin-top: 4em;
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
#lint table {
|
||||
font-size: 100%;
|
||||
|
|
@ -657,12 +713,26 @@ html:not(.usercss) .usercss-only,
|
|||
display: none !important; /* hide during page init */
|
||||
}
|
||||
|
||||
#lint {
|
||||
padding: 1rem 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#options:not([open]) + #lint {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#options-wrapper .options-column:nth-child(2) {
|
||||
margin-top: .75rem;
|
||||
}
|
||||
|
||||
.usercss #name {
|
||||
background-color: #eee;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#sections .single-editor {
|
||||
#sections .single-editor,
|
||||
#sections > div.single-editor:first-of-type {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
@ -695,7 +765,7 @@ html:not(.usercss) .usercss-only,
|
|||
/************ line widget *************/
|
||||
.CodeMirror-linewidget .applies-to {
|
||||
margin: 1em 0;
|
||||
padding: 1em;
|
||||
padding: .75rem .75rem .25rem;
|
||||
padding-right: calc(1em + 20px);
|
||||
}
|
||||
|
||||
|
|
@ -717,19 +787,26 @@ html:not(.usercss) .usercss-only,
|
|||
|
||||
/************ reponsive layouts ************/
|
||||
@media(max-width: 850px) {
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#header {
|
||||
width: auto;
|
||||
height: auto;
|
||||
flex: 0 1 auto;
|
||||
height: unset;
|
||||
width: unset;
|
||||
position: inherit;
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed #AAA;
|
||||
min-height: var(--header-narrow-min-height);
|
||||
max-height: 50vh;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
}
|
||||
#header section:not(:last-child) {
|
||||
margin-bottom: .5rem;
|
||||
#actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
padding: 0 1rem;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#header input[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
|
|
@ -739,45 +816,41 @@ html:not(.usercss) .usercss-only,
|
|||
display: none;
|
||||
}
|
||||
#basic-info {
|
||||
padding: .5rem 1rem;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex: 1;
|
||||
margin-right: 2em;
|
||||
}
|
||||
#basic-info > * {
|
||||
flex: auto;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#basic-info > *:first-child {
|
||||
flex-grow: 99;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#basic-info > *:not(:last-child) {
|
||||
margin-right: 0.8rem;
|
||||
}
|
||||
#basic-info #name {
|
||||
width: auto;
|
||||
flex-grow: 99;
|
||||
flex-grow: 1;
|
||||
}
|
||||
#actions {
|
||||
#options-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 1rem .5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.options-column {
|
||||
flex-grow: 1;
|
||||
padding-right: .5rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#options-wrapper .options-column:nth-child(2) {
|
||||
margin-top: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#actions > * {
|
||||
display: inline-block;
|
||||
}
|
||||
#options {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
width: 100%;
|
||||
}
|
||||
#options:not([open]),
|
||||
#lint:not([open]) {
|
||||
column-count: 1;
|
||||
overflow: initial;
|
||||
}
|
||||
#options:not([open]) + #lint:not([open]) {
|
||||
margin-top: -1em;
|
||||
margin-top: 0;
|
||||
}
|
||||
#lint {
|
||||
overflow: initial;
|
||||
|
|
@ -786,14 +859,18 @@ html:not(.usercss) .usercss-only,
|
|||
position: static;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
#lint tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
#options summary {
|
||||
margin-top: -.25em;
|
||||
margin-left: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
#options h2 {
|
||||
margin: 0 0 .5em;
|
||||
}
|
||||
.option label {
|
||||
line-height: 1.25rem;
|
||||
margin: 0;
|
||||
}
|
||||
#options [type="number"] {
|
||||
|
|
@ -804,11 +881,18 @@ html:not(.usercss) .usercss-only,
|
|||
position: relative;
|
||||
top: 0.2rem;
|
||||
}
|
||||
#options:not([open]) ~ #lint {
|
||||
margin-top: -1em;
|
||||
}
|
||||
#lint > div {
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
#lint {
|
||||
padding: 0 1rem .5rem;
|
||||
}
|
||||
#lint > summary {
|
||||
margin-top: 0;
|
||||
}
|
||||
#lint caption {
|
||||
text-indent: 4px;
|
||||
}
|
||||
#lint table {
|
||||
width: 100%;
|
||||
|
|
@ -820,13 +904,20 @@ html:not(.usercss) .usercss-only,
|
|||
margin: .25em 0 -1em .25em;
|
||||
}
|
||||
#sections {
|
||||
height: unset !important;
|
||||
min-height: 0;
|
||||
padding-left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
#sections > div {
|
||||
padding: 0;
|
||||
margin: 0 .5rem .5rem;
|
||||
padding: .5rem 0 0;
|
||||
}
|
||||
#sections > *:not(h2) {
|
||||
padding-left: 0.4rem;
|
||||
#sections > div:first-of-type {
|
||||
margin: .5rem;
|
||||
padding: 0;
|
||||
}
|
||||
.usercss .CodeMirror-scroll {
|
||||
max-height: calc(100vh - var(--header-narrow-min-height));
|
||||
|
|
@ -835,27 +926,28 @@ html:not(.usercss) .usercss-only,
|
|||
.usercss #lint:not([open]) + #footer {
|
||||
margin-top: -.25em;
|
||||
}
|
||||
#help-popup.big {
|
||||
left: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
#options {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 450px) {
|
||||
#options {
|
||||
-webkit-column-count: 1;
|
||||
-moz-column-count: 1;
|
||||
column-count: 1;
|
||||
}
|
||||
#actions {
|
||||
flex-wrap: wrap;
|
||||
white-space: normal;
|
||||
#help-popup.big[style="display: block;"],
|
||||
#help-popup[style="display: block;"] {
|
||||
width: max-content;
|
||||
height: min-content;
|
||||
max-width: 90%;
|
||||
max-height: 90vh;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
}
|
||||
#help-popup[style*="left:"] {
|
||||
left: 1rem !important;
|
||||
margin-top: -2.35rem;
|
||||
}
|
||||
#help-popup:not([style*="display: block;"]),
|
||||
#help-popup .CodeMirror-lint-markers,
|
||||
#help-popup .CodeMirror-guttermarker-subtle {
|
||||
display: none !important;
|
||||
}
|
||||
#help-popup .CodeMirror-linenumber {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ function addSection(event, section) {
|
|||
div.classList.toggle('has-regexp', show);
|
||||
appliesTo.oninput = appliesTo.oninput || show && (event => {
|
||||
if (event.target.matches('.applies-value') &&
|
||||
$('.applies-type', event.target.parentElement).value === 'regexp') {
|
||||
$('.applies-type', event.target.closest('.applies-to-item')).value === 'regexp') {
|
||||
regExpTester.update(getRegExps());
|
||||
}
|
||||
});
|
||||
|
|
@ -150,31 +150,46 @@ function addSection(event, section) {
|
|||
return div;
|
||||
}
|
||||
|
||||
function addAppliesTo(list, name, value) {
|
||||
const showingEverything = $('.applies-to-everything', list) !== null;
|
||||
// may be invoked as a DOM listener
|
||||
function addAppliesTo(list, type, value) {
|
||||
let clickedItem;
|
||||
if (this instanceof Node) {
|
||||
clickedItem = this.closest('.applies-to-item');
|
||||
list = this.closest('.applies-to-list');
|
||||
// dummy <a> wrapper was clicked
|
||||
if (arguments[0] instanceof Event) arguments[0].preventDefault();
|
||||
}
|
||||
const showingEverything = $('.applies-to-everything', list);
|
||||
// blow away 'Everything' if it's there
|
||||
if (showingEverything) {
|
||||
list.removeChild(list.firstChild);
|
||||
}
|
||||
let e;
|
||||
if (name) {
|
||||
e = template.appliesTo.cloneNode(true);
|
||||
$('[name=applies-type]', e).value = name;
|
||||
$('[name=applies-value]', e).value = value;
|
||||
$('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
|
||||
} else if (showingEverything || list.hasChildNodes()) {
|
||||
e = template.appliesTo.cloneNode(true);
|
||||
if (list.hasChildNodes()) {
|
||||
$('[name=applies-type]', e).value = $('li:last-child [name="applies-type"]', list).value;
|
||||
let item, toFocus;
|
||||
|
||||
// a section is added with known applies-to
|
||||
if (type) {
|
||||
item = template.appliesTo.cloneNode(true);
|
||||
$('[name=applies-type]', item).value = type;
|
||||
$('[name=applies-value]', item).value = value;
|
||||
$('.remove-applies-to', item).addEventListener('click', removeAppliesTo);
|
||||
|
||||
// a "+" button was clicked
|
||||
} else if (showingEverything || clickedItem) {
|
||||
item = template.appliesTo.cloneNode(true);
|
||||
toFocus = $('[name=applies-type]', item);
|
||||
if (clickedItem) {
|
||||
$('[name=applies-type]', item).value = $('[name="applies-type"]', clickedItem).value;
|
||||
}
|
||||
$('.remove-applies-to', e).addEventListener('click', removeAppliesTo, false);
|
||||
$('.remove-applies-to', item).addEventListener('click', removeAppliesTo);
|
||||
|
||||
// a global section is added
|
||||
} else {
|
||||
e = template.appliesToEverything.cloneNode(true);
|
||||
item = template.appliesToEverything.cloneNode(true);
|
||||
}
|
||||
$('.add-applies-to', e).addEventListener('click', function () {
|
||||
addAppliesTo(this.parentNode.parentNode);
|
||||
}, false);
|
||||
list.appendChild(e);
|
||||
|
||||
$('.add-applies-to', item).addEventListener('click', addAppliesTo);
|
||||
list.insertBefore(item, clickedItem && clickedItem.nextElementSibling);
|
||||
if (toFocus) toFocus.focus();
|
||||
}
|
||||
|
||||
function setupCodeMirror(sectionDiv, code, index) {
|
||||
|
|
@ -403,8 +418,9 @@ function getSectionsHashes() {
|
|||
}
|
||||
|
||||
function removeAppliesTo(event) {
|
||||
const appliesTo = event.target.parentNode;
|
||||
const appliesToList = appliesTo.parentNode;
|
||||
event.preventDefault();
|
||||
const appliesTo = event.target.closest('.applies-to-item');
|
||||
const appliesToList = appliesTo.closest('.applies-to-list');
|
||||
removeAreaAndSetDirty(appliesTo);
|
||||
if (!appliesToList.hasChildNodes()) {
|
||||
addAppliesTo(appliesToList);
|
||||
|
|
@ -437,7 +453,7 @@ function removeAreaAndSetDirty(area) {
|
|||
}
|
||||
});
|
||||
updateTitle();
|
||||
area.parentNode.removeChild(area);
|
||||
area.remove();
|
||||
}
|
||||
|
||||
function makeSectionVisible(cm) {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@ button {
|
|||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 2px 7px;
|
||||
border: 1px solid hsl(0, 0%, 62%);
|
||||
font: 400 13.3333px Arial;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@
|
|||
</head>
|
||||
<body id="stylus-install-usercss">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div id="header">
|
||||
<div id="header-content-wrapper">
|
||||
<h1>
|
||||
<span class="meta-name"></span>
|
||||
<small class="meta-version"></small>
|
||||
|
|
@ -75,10 +76,13 @@
|
|||
<h3 i18n-text="license"></h3>
|
||||
<span class="meta-license"></span>
|
||||
</div>
|
||||
<div class="external-link"></div>
|
||||
<div id="applies-to-wrapper">
|
||||
<h3 i18n-text="appliesLabel"></h3>
|
||||
<ul class="applies-to">
|
||||
</ul>
|
||||
<div class="external-link"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="warnings"></div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
body {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
font: 12px arial, sans-serif;
|
||||
background: white;
|
||||
|
|
@ -37,20 +38,13 @@ input:disabled + span {
|
|||
.container {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.header,
|
||||
#header,
|
||||
.warnings {
|
||||
flex: 0 0 280px;
|
||||
box-sizing: border-box;
|
||||
padding: 15px;
|
||||
padding: 1rem;
|
||||
border-right: 1px dashed #aaa;
|
||||
box-shadow: 0 0 50px -18px black;
|
||||
overflow-wrap: break-word;
|
||||
|
|
@ -58,7 +52,7 @@ input:disabled + span {
|
|||
z-index: 100;
|
||||
}
|
||||
|
||||
.header.meta-init-error {
|
||||
#header.meta-init-error {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -72,7 +66,7 @@ input:disabled + span {
|
|||
}
|
||||
|
||||
.has-warnings .warnings {
|
||||
display: initial;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.warning {
|
||||
|
|
@ -280,19 +274,21 @@ li {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main,
|
||||
.main .CodeMirror {
|
||||
height: auto;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* spinner-related */
|
||||
|
||||
.header {
|
||||
#header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header:not(.meta-init) > *:not(.lds-spinner),
|
||||
.header.meta-init > .lds-spinner {
|
||||
#header:not(.meta-init) > *:not(.lds-spinner),
|
||||
#header.meta-init > .lds-spinner {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
|
@ -301,7 +297,7 @@ li {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
.header.meta-init > * {
|
||||
#header.meta-init > * {
|
||||
opacity: 1;
|
||||
transition: opacity .5s;
|
||||
-webkit-user-select: auto;
|
||||
|
|
@ -451,19 +447,82 @@ label {
|
|||
|
||||
/************ reponsive layouts ************/
|
||||
|
||||
@media (max-width:10in) {
|
||||
@media (max-width: 850px) {
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.header {
|
||||
flex-basis: auto;
|
||||
#header {
|
||||
flex: 0 1 auto;
|
||||
border-right: none;
|
||||
border-bottom: 1px dashed #AAA;
|
||||
max-height: 50%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.has-warnings .header {
|
||||
#header:not(.meta-init) {
|
||||
min-height: 300px;
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
}
|
||||
#header-content-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: .5rem 0 0 1rem;
|
||||
box-sizing: border-box;
|
||||
height: min-content;
|
||||
}
|
||||
#header-content-wrapper > * {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
padding: 0 1rem .5rem 0;
|
||||
min-width: 0;
|
||||
}
|
||||
#header-content-wrapper > .meta-description + .flex-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 0;
|
||||
}
|
||||
#header-content-wrapper > .meta-description + .flex-wrapper > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
white-space: nowrap;
|
||||
padding: 0 1rem .5rem 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.flex-wrapper ul {
|
||||
margin: 0;
|
||||
}
|
||||
#header-content-wrapper > .meta-description {
|
||||
flex-basis: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.set-update-url p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.actions label {
|
||||
min-width: 100px;
|
||||
flex: 1;
|
||||
}
|
||||
.actions label span {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.has-warnings #header {
|
||||
min-height: 4em;
|
||||
max-height: 20%;
|
||||
}
|
||||
|
|
@ -474,53 +533,32 @@ label {
|
|||
border-bottom: 1px dashed #b57c7c;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.header,
|
||||
.warning {
|
||||
-webkit-column-count: 3;
|
||||
-moz-column-count: 3;
|
||||
column-count: 3;
|
||||
ul.applies-to,
|
||||
.actions label {
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
-webkit-column-span: all;
|
||||
column-span: all;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.actions {
|
||||
#header-content-wrapper > h1 {
|
||||
font-size: 1.75em;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: baseline;
|
||||
}
|
||||
#header-content-wrapper > h1 > .meta-version {
|
||||
padding-left: 3px;
|
||||
}
|
||||
#header-content-wrapper > h1 > .meta-name {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#header-content-wrapper > * h3 {
|
||||
margin: 0 0 .5rem;
|
||||
}
|
||||
.install {
|
||||
flex-shrink: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:7in) {
|
||||
.header,
|
||||
.warning {
|
||||
-webkit-column-count: 2;
|
||||
-moz-column-count: 2;
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:4in) {
|
||||
.header {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
.header,
|
||||
.warning {
|
||||
-webkit-column-count: 1;
|
||||
-moz-column-count: 1;
|
||||
column-count: 1;
|
||||
}
|
||||
.warning {
|
||||
border: none;
|
||||
padding-bottom: unset;
|
||||
}
|
||||
}
|
||||
|
||||
/* Retina-specific stuff here */
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
||||
.install:after {
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
|
||||
setTimeout(() => {
|
||||
if (!installed) {
|
||||
$('.header').appendChild($create('.lds-spinner',
|
||||
$('#header').appendChild($create('.lds-spinner',
|
||||
new Array(12).fill($create('div')).map(e => e.cloneNode())));
|
||||
}
|
||||
}, 200);
|
||||
|
|
@ -133,8 +133,8 @@
|
|||
$('.external-link').appendChild(externalLink);
|
||||
}
|
||||
|
||||
$('.header').classList.add('meta-init');
|
||||
$('.header').classList.remove('meta-init-error');
|
||||
$('#header').classList.add('meta-init');
|
||||
$('#header').classList.remove('meta-init-error');
|
||||
setTimeout(() => $.remove('.lds-spinner'), 1000);
|
||||
|
||||
showError('');
|
||||
|
|
@ -222,7 +222,7 @@
|
|||
API.buildUsercss({sourceCode, checkDup: true})
|
||||
.then(init)
|
||||
.catch(err => {
|
||||
$('.header').classList.add('meta-init-error');
|
||||
$('#header').classList.add('meta-init-error');
|
||||
showError(err);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
36
manage.html
36
manage.html
|
|
@ -172,9 +172,13 @@
|
|||
<div id="header">
|
||||
<h1 id="manage-heading" i18n-text="manageHeading"></h1>
|
||||
|
||||
<div id="manage-settings">
|
||||
<div class="settings-column">
|
||||
<details id="filters" data-pref="manage.filters.expanded">
|
||||
<summary>
|
||||
<h2 i18n-text="manageFilters">: <span id="filters-stats"></span></h2>
|
||||
<h2 i18n-text="manageFilters">:
|
||||
<div class="filter-stats-wrapper">
|
||||
<span id="filters-stats"></span>
|
||||
<a id="reset-filters" href="#" tabindex="0">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20">
|
||||
<title i18n-text="genericResetLabel"></title>
|
||||
|
|
@ -182,6 +186,8 @@
|
|||
5.5,16.2 10,11.7 14.5,16.2 16.2,14.5 11.7,10 "/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</h2>
|
||||
</summary>
|
||||
|
||||
<div class="filter-selection">
|
||||
|
|
@ -267,24 +273,25 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<p class="nowrap">
|
||||
<div id="style-actions">
|
||||
<div id="update-check">
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
||||
<a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
|
||||
<svg class="svg-icon" viewBox="0 0 20 20" i18n-alt="helpAlt">
|
||||
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<div id="update-all">
|
||||
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
|
||||
<span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
|
||||
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="add-style-wrapper">
|
||||
<a href="edit.html">
|
||||
<button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1" class="nowrap"></button>
|
||||
<button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
|
||||
</a>
|
||||
<label id="add-style-as-usercss-wrapper">
|
||||
<input type="checkbox" id="newStyleAsUsercss">
|
||||
|
|
@ -300,7 +307,10 @@
|
|||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-column">
|
||||
<details id="options" data-pref="manage.options.expanded">
|
||||
|
||||
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
||||
|
|
@ -335,7 +345,7 @@
|
|||
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<div id="options-buttons">
|
||||
<button id="manage-options-button" i18n-text="openOptionsManage"></button>
|
||||
<button id="manage-shortcuts-button" class="chromium-only"
|
||||
i18n-text="shortcuts"
|
||||
|
|
@ -344,24 +354,26 @@
|
|||
href="https://userstyles.org/styles/browse/chrome-extension"
|
||||
i18n-title="editorStylesButton"
|
||||
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</details>
|
||||
|
||||
<details id="backup" data-pref="manage.backup.expanded">
|
||||
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
|
||||
<span id="backup-message" i18n-text="backupMessage"></span>
|
||||
<p>
|
||||
<div id="backup-buttons">
|
||||
<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
|
||||
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p id="manage-text">
|
||||
<div id="manage-text">
|
||||
<span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
|
||||
<span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>
|
||||
<span><a href="https://github.com/openstyles/stylus/wiki" target="_blank" i18n-text="linkStylusWiki"></a></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user