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

Fixup usercss applies-to theme detection

Browse Source
This commit is contained in:
narcolepticinsomniac 2018-10-18 23:05:47 -04:00 committed by GitHub
parent 686c099dbc
commit 63a6098c2a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
edit/applies-to-line-widget.js
View File

@ -222,56 +222,61 @@ function createAppliesToLineWidget(cm) {
requestAnimationFrame(updateWidgetStyle); requestAnimationFrame(updateWidgetStyle);
return; return;
} }
const MIN_LUMA = .05; if (prefs.get('editor.theme') !== 'default') {
const MIN_LUMA_DIFF = .4; const MIN_LUMA = .05;
const color = { const MIN_LUMA_DIFF = .4;
wrapper: colorMimicry.get(cm.display.wrapper), const color = {
gutter: colorMimicry.get(cm.display.gutters, { wrapper: colorMimicry.get(cm.display.wrapper),
bg: 'backgroundColor', gutter: colorMimicry.get(cm.display.gutters, {
border: 'borderRightColor', bg: 'backgroundColor',
}), border: 'borderRightColor',
line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv), }),
comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv), line: colorMimicry.get('.CodeMirror-linenumber', null, cm.display.lineDiv),
}; comment: colorMimicry.get('span.cm-comment', null, cm.display.lineDiv),
const hasBorder = };
color.gutter.style.borderRightWidth !== '0px' && const hasBorder =
!/transparent|\b0\)/g.test(color.gutter.style.borderRightColor); color.gutter.style.borderRightWidth !== '0px' &&
const diff = { !/transparent|\b0\)/g.test(color.gutter.style.borderRightColor);
wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma), const diff = {
border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0, wrapper: Math.abs(color.gutter.bgLuma - color.wrapper.foreLuma),
line: Math.abs(color.gutter.bgLuma - color.line.foreLuma), border: hasBorder ? Math.abs(color.gutter.bgLuma - color.gutter.borderLuma) : 0,
}; line: Math.abs(color.gutter.bgLuma - color.line.foreLuma),
const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF; };
const fore = preferLine ? color.line.fore : color.wrapper.fore; const preferLine = diff.line > diff.wrapper || diff.line > MIN_LUMA_DIFF;
const fore = preferLine ? color.line.fore : color.wrapper.fore;
const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2); const border = fore.replace(/[\d.]+(?=\))/, MIN_LUMA_DIFF / 2);
const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`; const borderStyleForced = `1px ${hasBorder ? color.gutter.style.borderRightStyle : 'solid'} ${border}`;
actualStyle.textContent = ` actualStyle.textContent = `
.applies-to { .applies-to {
background-color: ${color.gutter.bg}; background-color: ${color.gutter.bg};
border-top: ${borderStyleForced}; border-top: ${borderStyleForced};
border-bottom: ${borderStyleForced}; border-bottom: ${borderStyleForced};
} }
.applies-to label { .applies-to label {
color: ${fore}; color: ${fore};
} }
.applies-to input, .applies-to input,
.applies-to button, .applies-to select {
.applies-to select { background-color: rgba(255, 255, 255, ${
background: rgba(255, 255, 255, ${ Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2) });
}); border: ${borderStyleForced};
border: ${borderStyleForced}; transition: none;
transition: none; color: ${fore};
color: ${fore}; }
} .applies-to .svg-icon.select-arrow {
.applies-to .svg-icon.select-arrow { fill: ${fore} !important;
fill: ${fore}; }
transition: none; .applies-to select option {
} background-color: ${color.gutter.bg};
`; }
document.documentElement.appendChild(actualStyle); `;
document.documentElement.appendChild(actualStyle);
} else if (prefs.get('editor.theme') === 'default') {
actualStyle.textContent = '';
}
} }
function doUpdate() { function doUpdate() {
@ -283,7 +288,7 @@ function createAppliesToLineWidget(cm) {
if (i === -2) { if (i === -2) {
i = widgets.length - 1; i = widgets.length - 1;
} }
if (j < 0) { if (j < 0) {actualStyle
j = widgets.length; j = widgets.length;
} }

3
edit/edit.css
View File

@ -806,6 +806,9 @@ html:not(.usercss) .usercss-only,
margin: 1em 0; margin: 1em 0;
padding: .75rem .75rem .25rem; padding: .75rem .75rem .25rem;
padding-right: calc(1em + 20px); padding-right: calc(1em + 20px);
}
.CodeMirror.cm-s-default .CodeMirror-linewidget .applies-to {
background-color: var(--gray-lightness-90); background-color: var(--gray-lightness-90);
border-top: 1px solid var(--truegray-alpha-3); border-top: 1px solid var(--truegray-alpha-3);
border-bottom: 1px solid var(--truegray-alpha-3); border-bottom: 1px solid var(--truegray-alpha-3);