open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix a few style issues

Browse Source
This commit is contained in:
Rob Garrison 2019-01-27 21:32:35 -06:00
parent 71baf445e0
commit 0dfd6680f8
4 changed files with 91 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
manage.html
View File

@ -411,68 +411,66 @@
</div> </div>
<div id="bulk-actions" class="manage-row"> <div id="bulk-actions" class="manage-row">
<div> <label class="checkmate toggle-all" tabindex="0">
<label class="checkmate toggle-all" tabindex="0"> <input id="toggle-all-filters" type="checkbox">
<input id="toggle-all-filters" type="checkbox"> <svg class="svg-icon checkbox"viewBox="0 0 10 10">
<svg class="svg-icon checkbox"viewBox="0 0 10 10"> <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
<path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/> <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
<path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/> <path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
<path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/> <path class="indeterminate" d="M2.5 4.5h5v1h-5v-1z"/>
<path class="indeterminate" d="M2.5 4.5h5v1h-5v-1z"/>
</svg>
</label>
<span id="bulk-filter-count"></span>
<span i18n-text="bulkActions"></span>
<span class="select-resizer bulk-actions-select-wrapper">
<select id="bulk-actions-select">
<option i18n-text="bulkActionsSelect" value=""></option>
<option i18n-text="enableStyleLabel" value="enable"></option>
<option i18n-text="disableStyleLabel" value="disable"></option>
<option i18n-text="exportLabel" value="export"></option>
<option i18n-text="checkForUpdate" value="update"></option>
<!-- Plan: Reset UserCSS variables -->
<!-- <option i18n-text="genericResetLabel" value="reset"></option> -->
<option i18n-text="deleteStyleLabel" value="delete"></option>
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span>
<button id="bulk-actions-apply" i18n-text="bulkActionsApply" class="tt-e" disabled>
<span id="update-progress"></span>
</button>
<span id="bulk-info">
<!-- Bulk update -->
<span data-bulk="update">
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
<span id="update-all-no-updates" class="tt-e hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
</span>
<!-- Bulk export -->
<span data-bulk="export" class="dropdown export hidden">
Export to:
<span class="select-resizer">
<select id="manage.export.destination">
<option value="local" i18n-text="bckpInstStyles"></option>
<option value="dropbox" i18n-text="syncDropboxStyles"></option>
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span>
</span>
</span>
<svg class="svg-icon busy hidden" viewBox="0 0 24 24">
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1
18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46
1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87
3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
<!-- supported everwhere?
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0"
to="360 0 0" dur="1s" repeatCount="indefinite"/>
-->
</svg> </svg>
</div> </label>
<span id="bulk-filter-count"></span>
<span i18n-text="bulkActions"></span>
<span class="select-resizer bulk-actions-select-wrapper">
<select id="bulk-actions-select">
<option i18n-text="bulkActionsSelect" value=""></option>
<option i18n-text="enableStyleLabel" value="enable"></option>
<option i18n-text="disableStyleLabel" value="disable"></option>
<option i18n-text="exportLabel" value="export"></option>
<option i18n-text="checkForUpdate" value="update"></option>
<!-- Plan: Reset UserCSS variables -->
<!-- <option i18n-text="genericResetLabel" value="reset"></option> -->
<option i18n-text="deleteStyleLabel" value="delete"></option>
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span>
<button id="bulk-actions-apply" i18n-text="bulkActionsApply" class="tt-e" disabled>
<span id="update-progress"></span>
</button>
<span id="bulk-info">
<!-- Bulk update -->
<span data-bulk="update">
<button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
<span id="update-all-no-updates" class="tt-e hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
</span>
<!-- Bulk export -->
<span data-bulk="export" class="dropdown export hidden">
Export to:
<span class="select-resizer">
<select id="manage.export.destination">
<option value="local" i18n-text="bckpInstStyles"></option>
<option value="dropbox" i18n-text="syncDropboxStyles"></option>
</select>
<svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
</span>
</span>
</span>
<svg class="svg-icon busy hidden" viewBox="0 0 24 24">
<path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1
18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46
1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87
3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
<!-- supported everwhere?
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0"
to="360 0 0" dur="1s" repeatCount="indefinite"/>
-->
</svg>
</div> </div>
</div> </div>

36
manage/manage.css
View File

@ -49,7 +49,7 @@ body.dark {
a, a,
.disabled a:hover { .disabled a:hover {
color: #000; color: #3c3c3c;
transition: color .5s; transition: color .5s;
} }
@ -58,7 +58,7 @@ a {
} }
a:hover { a:hover {
color: #666; color: #000;
} }
.invisible { .invisible {
@ -110,6 +110,17 @@ a:hover {
margin-left: 2px; margin-left: 2px;
} }
#bulk-actions {
justify-content: flex-start;
}
#bulk-info > span,
#bulk-info button {
display: flex;
align-items: center;
margin-left: 4px;
}
#bulk-actions .svg-icon.busy:not(.hidden) { #bulk-actions .svg-icon.busy:not(.hidden) {
-webkit-animation:spin 1s linear infinite; -webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite; -moz-animation:spin 1s linear infinite;
@ -186,7 +197,6 @@ a:hover {
#installed .entry, #installed .entry,
#installed .entry-header { #installed .entry-header {
width: 100%; width: 100%;
line-height: var(--entry-height);
display: flex; display: flex;
flex: 0 0 var(--narrow-column); flex: 0 0 var(--narrow-column);
flex-flow: row nowrap; flex-flow: row nowrap;
@ -222,6 +232,7 @@ body.all-styles-hidden-by-filters #installed:after {
padding-left: 4px; padding-left: 4px;
flex: 1; flex: 1;
justify-content: space-evenly; justify-content: space-evenly;
line-height: var(--entry-height);
} }
.center-text, .center-text,
@ -237,7 +248,7 @@ body.all-styles-hidden-by-filters #installed:after {
.header-last-update, .header-last-update,
.entry-last-update { .entry-last-update {
/* inlcude update history link */ /* inlcude update history link */
max-width: calc(var(--narrow-column) + 20px); max-width: calc(var(--narrow-column) + 30px);
} }
/* keep all icons on the same row */ /* keep all icons on the same row */
@ -272,8 +283,9 @@ body.all-styles-hidden-by-filters #installed:after {
overflow-wrap: break-word; overflow-wrap: break-word;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
margin-right: 8px; margin: auto 8px auto 0;
padding: 8px 0; padding: 0;
align-self: normal;
} }
.entry-name-text { .entry-name-text {
@ -346,7 +358,9 @@ body.all-styles-hidden-by-filters #installed:after {
.applies-to-extra-expander { .applies-to-extra-expander {
text-decoration: none; text-decoration: none;
font-size: 1.5em; font-size: 1.3em;
font-weight: bold;
line-height: normal;
} }
.targets .target img, .targets .target img,
@ -400,7 +414,7 @@ body.all-styles-hidden-by-filters #installed:after {
padding: 2px 4px; padding: 2px 4px;
margin-left: 2px; margin-left: 2px;
border-radius: 4px; border-radius: 4px;
font-size: .8em; font-size: .75em;
text-transform: lowercase; text-transform: lowercase;
} }
@ -640,10 +654,6 @@ a svg, .svg-icon.sort {
opacity: .35; opacity: .35;
} }
#check-all-updates-force {
margin-top: 1ex;
}
#update-all-no-updates[data-skipped-edited="true"] { #update-all-no-updates[data-skipped-edited="true"] {
font-weight: bold; font-weight: bold;
} }
@ -661,7 +671,7 @@ a svg, .svg-icon.sort {
top: var(--header-height); top: var(--header-height);
left: 0; left: 0;
height: var(--toolbar-height); height: var(--toolbar-height);
padding: 4px 16px; padding: 4px 0;
z-index: 100; z-index: 100;
} }

1
manage/tooltips.css
View File

@ -19,6 +19,7 @@
color: var(--tooltip-text); color: var(--tooltip-text);
content: attr(data-title); content: attr(data-title);
font-size: 12px; font-size: 12px;
line-height: 1.5em;
letter-spacing: normal; letter-spacing: normal;
padding: .5em .75em; padding: .5em .75em;
text-align: center; text-align: center;

16
options.html
View File

@ -132,10 +132,10 @@
<label> <label>
<span i18n-text="optionsUpdateInterval"> <span i18n-text="optionsUpdateInterval">
<a data-cmd="note" <a data-cmd="note"
i18n-title="optionsUpdateImportNote" i18n-title="optionsUpdateImportNote"
href="#" href="#"
class="svg-inline-wrapper" class="svg-inline-wrapper"
tabindex="0"> tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
</span> </span>
@ -187,10 +187,10 @@
<label> <label>
<span i18n-text="optionsAdvancedExposeIframes"> <span i18n-text="optionsAdvancedExposeIframes">
<a data-cmd="note" <a data-cmd="note"
i18n-title="optionsAdvancedExposeIframesNote" i18n-title="optionsAdvancedExposeIframesNote"
href="#" href="#"
class="svg-inline-wrapper" class="svg-inline-wrapper"
tabindex="0"> tabindex="0">
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg> <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
</a> </a>
</span> </span>