Only apply to Chrome

This commit is contained in:
narcolepticinsomniac 2017-11-14 21:51:23 -05:00 committed by GitHub
parent f004d1432e
commit 785a98274b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 15 deletions

View File

@ -180,24 +180,24 @@ input[type="color"] {
display: none;
}
#advanced.collapsed {
#advanced.collapsible.collapsed {
height: 40px;
padding: 0;
margin: 0;
justify-content: center;
}
#options > .block:nth-last-of-type(3) {
html:not(.firefox):not(.opera) #options > .block:nth-last-of-type(3) {
margin-bottom: 0;
}
#advanced:not(.collapsed) .collapsible-resizer {
#advanced.collapsible:not(.collapsed) .collapsible-resizer {
padding-right: 8px;
box-sizing: border-box;
width: 30%;
}
#advanced h1 {
#advanced.collapsible h1 {
width: unset;
padding: 0;
color: #333;
@ -206,44 +206,45 @@ input[type="color"] {
align-items: center;
}
#advanced:not(.collapsed) h1:hover {
#advanced.collapsible:not(.collapsed) h1:hover {
color: #666;
}
#advanced.collapsed h1 {
#advanced.collapsible.collapsed h1 {
padding: 0;
color: #666;
}
#advanced.collapsed:hover h1 {
#advanced.collapsible.collapsed:hover h1 {
color: #333;
}
#advanced .svg-icon {
#advanced.collapsible .svg-icon {
fill: #333;
transition: fill .5s;
height: 16px;
width: 16px;
}
#advanced.collapsed .svg-icon,
#advanced:not(.collapsed) h1:hover .svg-icon {
#advanced.collapsible.collapsed .svg-icon,
#advanced.collapsible:not(.collapsed) h1:hover .svg-icon {
fill: #666;
}
#advanced.collapsed:hover .svg-icon {
#advanced.collapsible.collapsed:hover .svg-icon {
fill: #333;
}
#advanced h1 .svg-icon {
#advanced.collapsible h1 .svg-icon {
margin-left: 2px;
}
#advanced.collapsed .is-expanded {
#advanced.collapsible.collapsed .is-expanded,
#advanced:not(.collapsible) .svg-icon {
display: none;
}
#advanced:not(.collapsed) .is-collapsed {
#advanced.collapsible:not(.collapsed) .is-collapsed {
display: none;
}

View File

@ -6,7 +6,7 @@ enforceInputRange($('#popupWidth'));
if (!FIREFOX && !OPERA) {
const block = $('#advanced');
block.classList.add('collapsed');
block.classList.add('collapsible', 'collapsed');
block.onclick = event => {
if (block.classList.contains('collapsed') || event.target.closest('h1')) {
block.classList.toggle('collapsed');