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

Fix styling for width < 1100px

Browse Source
This commit is contained in:
Rob Garrison 2019-01-01 21:37:50 -06:00
parent b5387deb9a
commit 9fd4e0f57d
3 changed files with 62 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
manage.html
View File

@ -549,9 +549,9 @@
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<span i18n-text="manageNewStyleAsUsercss" i18n-title="optionsAdvancedNewStyleAsUsercss"></span>
<a id="usercss-wiki"
href="https://github.com/openstyles/stylus/wiki/Usercss"
i18n-title="externalUsercssDocument"
tabindex="0">
href="https://github.com/openstyles/stylus/wiki/Usercss"
i18n-title="externalUsercssDocument"
tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
</svg>
@ -593,7 +593,7 @@
</div>
</div>
</div>
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
</div>
<div id="options-buttons">
@ -602,9 +602,9 @@
i18n-text="shortcuts"
i18n-title="shortcutsNote"></button>
<a id="find-editor-styles"
href="https://userstyles.org/styles/browse/chrome-extension"
i18n-title="editorStylesButton"
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
href="https://userstyles.org/styles/browse/chrome-extension"
i18n-title="editorStylesButton"
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
</div>
</details>

35
manage/manage.css
View File

@ -855,11 +855,42 @@ details.applies-to-extra[open] {
}
}
@media (max-width: 900px) {
@media (max-width: 1100px) {
body,
#main-header,
#tools-wrapper,
.manage-row {
position: static;
display: block;
height: auto;
}
#installed .entry-header {
position: static;
width: 100%;
height: auto;
}
#manage-backups {
display: inline-block;
vertical-align: center;
}
#manage-backups:hover .dropdown {
display: block;
left: -20px;
right: auto;
top: 99%;
}
#installed,
#tools-wrapper:not(.hidden) + #installed {
margin-top: 0;
}
#installed .entry,
#installed .entry-col,
#installed .entry-header {
display: block;
flex-wrap: wrap;
}
.header-name,
.entry-name {
flex: 1;
}
.entry-actions {
white-space: normal;

22
manage/tooltips.css
View File

@ -162,3 +162,25 @@
.update-problem .check-update:before {
border-right-color: var(--tooltip-error);
}
@media (max-width: 1100px) {
/* Action icons flip to left side; switch tooltip direction */
#main-actions [data-title].tt-w:after {
bottom: 50%;
left: 100%;
right: auto;
margin-left: 6px;
margin-right: 0;
transform: translateY(50%)
}
#main-actions [data-title].tt-w:before {
border-left-color: transparent;
border-right-color: var(--tooltip-bkgd);
bottom: 50%;
margin-top: -6px;
left: auto;
right: -7px;
top: 50%
}
}