stylus
stylus copied to clipboard
Published
20 hours ago •
openstyles
openstyles
Sass/SCSS support
With the Sass language you can write way cleaner code that is easier to manage than vanilla CSS. It was never present in Stylish, and I was surprised to see that none of the Stylish forks supported it either.
Implementing it should be pretty straight-forward. The user would write Sass or scss code in the CodeMirror editor, and on save it will compile the code and store both the Sass/scss code and the compiled css (so it won't have to be compiled on every injection, or on-the-fly, for performance reasons).
The sass.js library is licensed under the MIT license so there should be no licensing issues either.
It's a huge library (minified sass.js is 3.2MB), which is only beneficial to a small percentage of Stylus users, so we won't include it in the extension.
Someday we'll rewrite our editor page completely so it can use a separately installed companion extension (Stylus-coder, for example) that contains sass compiler(s), StyleLint and other huge and advanced stuff.
I see. Any ETA on when this can be expected? In the range of weeks, months, years?
I have no idea. The development so far proceeds in small unpredictable bursts. Personally, I'm only mildly interested in rewriting the editor as I no longer write userstyles.
Stylus would be a much better solution, it's smaller and completely backwards compatible with CSS.
Stylus preprocessor can be used in usercss styles. You can convert your existing style simply by adding the metadata header to your code in a new style editor.
If you're creating it via the extension UI, click "[x] usercss" to the right of Write New Style button first.
Don't know what I'm doing wrong then, because even making it a userstyle results in the same thing.
/* ==UserStyle==
@name Test
@description Test
@namespace test.net
@version 0.0.1
@author snowe <[email protected]> (https://github.com/snowe2010)
@homepageURL http://github.com/snowe2010/test
@supportURL http://github.com/snowe2010test/issues
@license MIT
@preprocessor stylus
==/UserStyle== */
Also, CSSLint doesn't work with the stylus preprocessor, you need to switch to Stylelint. I thought it's done automatically though.
switching to stylelint helped, just one error now. "Missed semicolon"
/* ==UserStyle==
@name Jira Solarized
@description Modify new JIRA theme with Solarized Dark or Light
@namespace atlassian.net
@version 0.0.1
@author snowe <[email protected]> (https://github.com/snowe2010)
@homepageURL http://github.com/snowe2010/jira-solarized
@supportURL http://github.com/snowe2010/jira-solarized/issues
@license MIT
@var select solarized 'Solarized Scheme' {
"Light": "light",
"Dark": "dark"
}
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("^https?://promontech.atlassian.net/secure.*") {
:root {
--base03: #002b36;
--base02: #073642;
--base01: #586e75;
--base00: #657b83;
--base0: #839496;
--base1: #93a1a1;
--base2: #eee8d5;
--base3: #fdf6e3;
--yellow: #b58900;
--orange: #cb4b16;
--red: #dc322f;
--magenta: #d33682;
--violet: #6c71c4;
--blue: #268bd2;
--cyan: #2aa198;
--green: #859900;
/* Dark mode */
/*
--background: var(--base03);
--background-highlights: var(--base02);
--secondary-content: var(--base01);
--primary-content: var(--base0);
--emphasized-content: var(--base1);
*/
/* Light Mode */
--background: var(--base3);
--background-highlights: var(--base2);
--secondary-content: var(--base1);
--primary-content: var(--base00);
--emphasized-content: var(--base01);
}
/****************************************************************\
/****************************************************************\
/**************** Global things **********************\
/****************************************************************\
/****************************************************************\
*/
.aui-button,
.aui-button:visited,
a.aui-button
background-color: var(--background-highlights);
color: var(--primary-content);
.aui-button-subtle.aui-button:hover .aui-theme-default .aui-button.aui-button-subtle:hover,
.aui-button:hover
background-color: var(--secondary-content);
color: var(--emphasized-content);
#navigation-app .iYJWvo
background-color: var(--background) !important;
/* keeps forms colored even on edit */
form.aui .text,
form.aui .password,
form.aui .upfile,
form.aui .textarea,
form.aui .select,
form.aui .multi-select,
form.aui .aui-select2-container
background-color: var(--background-highlights) !important;
color: var(--primary-content);
/* scrollbar stuff */
body::-webkit-scrollbar,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-button,
body::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-thumb
background-color: var(--background);
body::-webkit-scrollbar-track
background-color: var(--background);
body::-webkit-scrollbar-thumb
background-color: var(--background);
outline: 1px solid slategrey;
/* Dropdown lists */
form.aui input[type="text"]
color: var(--primary-content);
.aui-dropdown2.aui-style-default,
.aui-dropdown2.aui-style-default a
background-color: var(--background-highlights);
color: var(--primary-content);
.adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section a:hover:not([data-operation="color"]),
.adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section li:hover :not([data-operation="color"]),
.adg3 .aui-dropdown2.aui-style-default > ul > li a:hover:not([data-operation="color"]),
.adg3 .aui-dropdown2.aui-style-default > ul > li li:hover :not([data-operation="color"]),
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:focus,
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label.active
background-color: var(--secondary-content);
color: var(--background-highlights);
.aui-dropdown2.aui-style-default:hover a
background-color: var(--background-highlights);
color: var(--primary-content);
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label span
color: var(--primary-content);
/** End Dropdown Lists **/
/** labels **/
.labels,
.labels li,
.lozenge
background-color: var(--background-highlights) !important;
.adg3 .ghx-editable:hover,
.adg3 .ghx-editable::after,
.adg3 .editable-field:hover,
.adg3 .editable-field .overlay-icon.aui-iconfont-edit
background-color: var(--background-highlights);
ul.labels li a.lozenge
background-color: var(--background-highlights);
/****************************************************************\
/****************************************************************\
/**************** Navigation bar **********************\
/****************************************************************\
/****************************************************************\
/* Reverse colors in navigation-app drawer */
.fEymd,
.ulFTM,
.fBYwee
color: var(--primary-content);
.fjtgrF:before,
.fjtgrF:after
background-color: var(--background);
.cHbijf:before,
.cHbijf:after,
.idPIJS
background-color: var(--emphasized-content);
.eRZMHk
background-color: var(--background) !important;
#page-body,
.issue-view,
#issue-content,
.issue-header-content,
.command-bar
background-color: var(--background) !important;
/** navigation expander add border on left so we know where to click */
.eRZMHk
border-left: 1px solid var(--emphasized-content);
.eRZMHk:hover::before
background: var(--emphasized-content);
/* make expando button always visible */
.bgZnOn::before,
.bgZnOn::after
background-color: var(--emphasized-content);
opacity: 1;
.eRZMHk button:before,
.eRZMHk button:after,
.bgZnOn::before,
.bgZnOn::after
color: var(--emphasized-content);
opacity: 1;
.cSCDWK
background-color: var(--background);
/******************
*******************
Issue Page
*******************
******************/
/**** General ****/
/* make text readable */
.user-content-block,
p
color: var(--primary-content) !important;
.adg3 .editable-field:hover,
.adg3 .editable-field:hover > span
background-color: var(--background-highlights);
/**** Issue Pane ****/
/* Issue Summary / Title */
.adg3 .aui-page-header #summary-val
color: var(--emphasized-content);
.toggle-title
color: var(--emphasized-content);
background-color: var(--background) !important;
/*.aui-toolbar .toolbar-group .toolbar-trigger {
background-color: var(--background-highlights) !important;
color: var(--primary-content);
}*/
.aui-toolbar
.toolbar-group
.toolbar-trigger
background-color: var(--background-highlights) !important;
color: var(--primary-content);
.toolbar-trigger:hover
background-color: var(--background-highlights) !important;
color: var(--emphasized-content);
#issuedetails
color: var(--primary-content);
#issuedetails > .item > .wrap > strong.name
color: var(--violet);
#customfieldmodule .item > .wrap
color: var(--magenta);
border-bottom-color: var(--magenta);
#comment-tabpanel > strong
color: var(--magenta);
border-bottom-color: var(--magenta);
#issuedetails a
color: var(--blue);
/** issue links / attachments / etc **/
.adg3 #linkingmodule .links-list dd:hover
background-color: var(--background-highlights);
.issue-body-content .module > .mod-header .ops
background-color: var(--background-highlights);
.adg3 .mod-header ul.ops a
color: var(--primary-content);
.aui-button-subtle.aui-button:focus,
.aui-button-subtle.aui-button:hover,
.aui-button:focus,
.aui-button:hover,
.aui-theme-default .aui-button.aui-button-subtle:focus,
.aui-theme-default .aui-button.aui-button-subtle:hover
color: var(--emphasized-content);
/**** Issue Activity ****/
.adg3 .issue-data-block.focused,
.adg3 .issue-data-block:hover
background-color: var(--background-highlights);
.action-details
color: var(--primary-content);
.action-details a
color: var(--blue);
.tabwrap > .tabs.horizontal > li.active > a,
.tabwrap > .tabs.horizontal > li.active > strong
background-color: var(--background);
color: var(--primary-content);
.adg3 .tabwrap > ul.tabs > li.active > strong
color: var(--magenta);
#issue-tabs li a
background-color: var(--background);
color: var(--primary-content);
#issue-tabs
border-bottom-color: var(--secondary-content);
/** Right pane **/
#assignee-val,
#reporter-val
color: var(--primary-content);
#vote-toggle,
#watching-toggle
color: var(--blue);
#devstatus-container a
color: var(--blue);
time
color: var(--primary-content) !important;
#greenhopper-agile-issue-web-panel a
color: var(--blue);
/** Edit modal **/
#edit-issue-dialog.jira-dialog,
#create-issue-dialog .jira-dialog-heading,
#edit-issue-dialog .jira-dialog-heading,
#edit-issue-dialog .jira-dialog-heading h2,
#edit-issue-dialog .jira-dialog-content .form-body
background-color: var(--background);
color: var(--primary-content);
#edit-issue-dialog.jira-dialog
border: 1px solid var(--background-highlights);
.content .field-group .text,
.content .field-group .select,
.content .field-group .select option,
.content .field-group .textarea
background-color: var(--background-highlights);
color: var(--primary-content);
.content .field-group .text:hover,
.content .field-group .select:hover,
.content .field-group .textarea:hover
background-color: var(--secondary-content);
color: var(--primary-content);
.jira-wikifield .wiki-edit-toolbar
background-color: var(--background-highlights);
color: var(--primary-content);
.adg3 .aui-button.aui-dropdown2-trigger
color: var(--primary-content);
.aui-button.aui-button-subtle,
.aui-theme-default .aui-button.aui-button-subtle
color: var(--secondary-content);
.aui-button .aui-icon,
.ops li .aui-icon
color: var(--primary-content);
#create-issue-dialog .form-body,
#create-issue-dialog .form-footer,
#edit-issue-dialog .form-body,
#edit-issue-dialog .form-footer
background-color: var(--background);
/****************************************************************\
/****************************************************************\
/**************** Kanban Board **********************\
/****************************************************************\
/****************************************************************/
#content #subnav-title .subnavigator-title
color: var(--primary-content);
#page,
#page-body,
#content,
#gh,
#ghx-content-main,
#ghx-rabid,
#ghx-work-wrapper,
#ghx-work,
#ghx-pool-column,
#ghx-pool,
#ghx-column-headers,
#ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents,
#ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents .ghx-detail-nav-menu,
#js-detail-nav-content,
#ghx-detail-head,
#ghx-detail-issue,
#ghx-detail-contents,
#ghx-detail-view,
.ghx-swimlane-header::after
background-color: var(--background);
box-shadow: none;
.adg3 .ghx-column-headers .ghx-column,
.adg3 .ghx-columns .ghx-column
background-color: var(--background-highlights);
.ghx-issue
background-color: var(--background) !important;
.ghx-issue *
color: var(--primary-content) !important;
.ghx-issue:hover
background-color: var(--background-highlights) !important;
.ghx-issue:hover *
color: var(--primary-content) !important;
.ghx-issue:hover
border: 1px solid var(--emphasized-content);
.ghx-swimlane-header,
.ghx-swimlane-header-stalker,
.ghx-column-header-group
background-color: var(--background) !important;
.ghx-parent-group
background-color: var(--background-highlights) !important;
color: var(--primary-content);
border: 1px solid var(--emphasized-content);
.ghx-group > .ghx-summary
color: var(--secondary-content);
/** Detail **/
#ghx-detail-contents
border: none;
#ghx-detail-issue
color: var(--primary-content);
#ghx-detail-issue a
color: var(--blue);
#ghx-detail-issue .toggle-title
color: var(--primary-content);
/* color sidebar in details view */
.ghx-detail-nav-menu ul li.ghx-detail-nav-item,
.ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected
background-color: var(--background);
color: var(--primary-content);
/*recolor icons */
.ghx-detail-nav-menu ul li.ghx-detail-nav-item span
color: var(--primary-content);
/* color selected icon in sidebar in details view */
.ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected a
background-color: var(--background-highlights);
color: var(--primary-content);
/** Open issues page **/
#page #page-body #content .aui-page-panel
background-color: var(--background);
color: var(--primary-content);
/* Fix this later
#page #page-body #content .aui-page-panel a
background-color: var(--background);
color: var(--blue);
*/
.subnavigator-title
color: var(--primary-content) !important;
/* Search nav pane */
.LnFvQ
background-color: var(--background-highlights) !important;
.LnFvQ span
color: var(--secondary-content);
.ipIHid
background-color: var(--background-highlights) !important;
.ewvMIF,
.kNFuQa
background-color: transparent;
body #page #page-body h1,
body #page #page-body h2,
body #page #page-body h3,
body #page #page-body h4,
body #page #page-body h5,
body #page #page-body h6
color: var(--primary-content) !important;
/******** Backlog ***************/
#ghx-backlog,
.ghx-backlog-container
background-color: var(--background);
.ghx-issue-compact,
.ghx-issue-compact .ghx-end
background-color: var(--background);
.adg3 .js-issue.ghx-issue-compact:hover,
.adg3 .js-issue.ghx-issue-compact:hover .ghx-items-container
background-color: var(--background-highlights);
.adg3 .js-issue.ghx-selected,
.adg3 .js-issue.ghx-selected .ghx-items-container
background-color: var(--background-highlights);
}
Which means that the userstyle won't save. as it thinks I have an unmatched brace
ParseError: stylus:824:2
820|
821|
822|
823|
824| }
---------^
825|
unexpected "}"
Looks like stylus preprocessor doesn't understand @-moz-document, in which case it's a bug in the library. @eight04, any thoughts?
I think you can't write indent-based rules inside brace-based rules. Try to
- Remove braces (
{}) of@-moz-document. - Or always use braces.
This is probably a bug of Stylus. Please file it to https://github.com/stylus/stylus/issues.
I tried that before posting @eight04. It still doesn't work. I thought it might be the :root selector, so I removed that and just tried using variables, but that breaks the linter even more.
/* ==UserStyle==
@name Jira Solarized
@description Modify new JIRA theme with Solarized Dark or Light
@namespace atlassian.net
@version 0.0.1
@author snowe <[email protected]> (https://github.com/snowe2010)
@homepageURL http://github.com/snowe2010/jira-solarized
@supportURL http://github.com/snowe2010/jira-solarized/issues
@license MIT
@var select solarized 'Solarized Scheme' {
"Light": "light",
"Dark": "dark"
}
@preprocessor stylus
==/UserStyle== */
@-moz-document regexp("^https?://promontech.atlassian.net/secure.*")
base03 = #002b36;
base02 = #073642;
base01 = #586e75;
base00 = #657b83;
base0 = #839496;
base1 = #93a1a1;
base2 = #eee8d5;
base3 = #fdf6e3;
yellow = #b58900;
orange = #cb4b16;
red = #dc322f;
magenta = #d33682;
violet = #6c71c4;
blue = #268bd2;
cyan = #2aa198;
green = #859900;
/* Dark mode */
/*
background = base03;
background-highlights = base02;
secondary-content = base01;
primary-content = base0;
emphasized-content = base1;
*/
/* Light Mode */
background = base3;
background-highlights = base2;
secondary-content = base1;
primary-content = base00;
emphasized-content = base01;
/****************************************************************\
/****************************************************************\
/**************** Global things **********************\
/****************************************************************\
/****************************************************************\
*/
.aui-button,
.aui-button:visited,
a.aui-button
background-color: background-highlights;
color: primary-content;
.aui-button-subtle.aui-button:hover .aui-theme-default .aui-button.aui-button-subtle:hover,
.aui-button:hover
background-color: secondary-content;
color: emphasized-content;
#navigation-app .iYJWvo
background-color: background !important;
/* keeps forms colored even on edit */
form.aui .text,
form.aui .password,
form.aui .upfile,
form.aui .textarea,
form.aui .select,
form.aui .multi-select,
form.aui .aui-select2-container
background-color: background-highlights !important;
color: primary-content;
/* scrollbar stuff */
body::-webkit-scrollbar,
body::-webkit-scrollbar-track,
body::-webkit-scrollbar-button,
body::-webkit-scrollbar-track-piece,
body::-webkit-scrollbar-thumb
background-color: background;
body::-webkit-scrollbar-track
background-color: background;
body::-webkit-scrollbar-thumb
background-color: background;
outline: 1px solid slategrey;
/* Dropdown lists */
form.aui input[type="text"]
color: primary-content;
.aui-dropdown2.aui-style-default,
.aui-dropdown2.aui-style-default a
background-color: background-highlights;
color: primary-content;
.adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section a:hover:not([data-operation="color"]),
.adg3 .aui-dropdown2.aui-style-default .aui-dropdown2-section li:hover :not([data-operation="color"]),
.adg3 .aui-dropdown2.aui-style-default > ul > li a:hover:not([data-operation="color"]),
.adg3 .aui-dropdown2.aui-style-default > ul > li li:hover :not([data-operation="color"]),
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:focus,
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label:hover,
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label.active
background-color: secondary-content;
color: background-highlights;
.aui-dropdown2.aui-style-default:hover a
background-color: background-highlights;
color: primary-content;
.aui-dropdown2.aui-style-default .ghx-filter-panel-dropdown-label span
color: primary-content;
/** End Dropdown Lists **/
/** labels **/
.labels,
.labels li,
.lozenge
background-color: background-highlights !important;
.adg3 .ghx-editable:hover,
.adg3 .ghx-editable::after,
.adg3 .editable-field:hover,
.adg3 .editable-field .overlay-icon.aui-iconfont-edit
background-color: background-highlights;
ul.labels li a.lozenge
background-color: background-highlights;
/****************************************************************\
/****************************************************************\
/**************** Navigation bar **********************\
/****************************************************************\
/****************************************************************\
/* Reverse colors in navigation-app drawer */
.fEymd,
.ulFTM,
.fBYwee
color: primary-content;
.fjtgrF:before,
.fjtgrF:after
background-color: background;
.cHbijf:before,
.cHbijf:after,
.idPIJS
background-color: emphasized-content;
.eRZMHk
background-color: background !important;
#page-body,
.issue-view,
#issue-content,
.issue-header-content,
.command-bar
background-color: background !important;
/** navigation expander add border on left so we know where to click */
.eRZMHk
border-left: 1px solid emphasized-content;
.eRZMHk:hover::before
background: emphasized-content;
/* make expando button always visible */
.bgZnOn::before,
.bgZnOn::after
background-color: emphasized-content;
opacity: 1;
.eRZMHk button:before,
.eRZMHk button:after,
.bgZnOn::before,
.bgZnOn::after
color: emphasized-content;
opacity: 1;
.cSCDWK
background-color: background;
/******************
*******************
Issue Page
*******************
******************/
/**** General ****/
/* make text readable */
.user-content-block,
p
color: primary-content !important;
.adg3 .editable-field:hover,
.adg3 .editable-field:hover > span
background-color: background-highlights;
/**** Issue Pane ****/
/* Issue Summary / Title */
.adg3 .aui-page-header #summary-val
color: emphasized-content;
.toggle-title
color: emphasized-content;
background-color: background !important;
/*.aui-toolbar .toolbar-group .toolbar-trigger {
background-color: background-highlights !important;
color: primary-content;
}*/
.aui-toolbar
.toolbar-group
.toolbar-trigger
background-color: background-highlights !important;
color: primary-content;
.toolbar-trigger:hover
background-color: background-highlights !important;
color: emphasized-content;
#issuedetails
color: primary-content;
#issuedetails > .item > .wrap > strong.name
color: violet;
#customfieldmodule .item > .wrap
color: magenta;
border-bottom-color: magenta;
#comment-tabpanel > strong
color: magenta;
border-bottom-color: magenta;
#issuedetails a
color: blue;
/** issue links / attachments / etc **/
.adg3 #linkingmodule .links-list dd:hover
background-color: background-highlights;
.issue-body-content .module > .mod-header .ops
background-color: background-highlights;
.adg3 .mod-header ul.ops a
color: primary-content;
.aui-button-subtle.aui-button:focus,
.aui-button-subtle.aui-button:hover,
.aui-button:focus,
.aui-button:hover,
.aui-theme-default .aui-button.aui-button-subtle:focus,
.aui-theme-default .aui-button.aui-button-subtle:hover
color: emphasized-content;
/**** Issue Activity ****/
.adg3 .issue-data-block.focused,
.adg3 .issue-data-block:hover
background-color: background-highlights;
.action-details
color: primary-content;
.action-details a
color: blue;
.tabwrap > .tabs.horizontal > li.active > a,
.tabwrap > .tabs.horizontal > li.active > strong
background-color: background;
color: primary-content;
.adg3 .tabwrap > ul.tabs > li.active > strong
color: magenta;
#issue-tabs li a
background-color: background;
color: primary-content;
#issue-tabs
border-bottom-color: secondary-content;
/** Right pane **/
#assignee-val,
#reporter-val
color: primary-content;
#vote-toggle,
#watching-toggle
color: blue;
#devstatus-container a
color: blue;
time
color: primary-content !important;
#greenhopper-agile-issue-web-panel a
color: blue;
/** Edit modal **/
#edit-issue-dialog.jira-dialog,
#create-issue-dialog .jira-dialog-heading,
#edit-issue-dialog .jira-dialog-heading,
#edit-issue-dialog .jira-dialog-heading h2,
#edit-issue-dialog .jira-dialog-content .form-body
background-color: background;
color: primary-content;
#edit-issue-dialog.jira-dialog
border: 1px solid background-highlights;
.content .field-group .text,
.content .field-group .select,
.content .field-group .select option,
.content .field-group .textarea
background-color: background-highlights;
color: primary-content;
.content .field-group .text:hover,
.content .field-group .select:hover,
.content .field-group .textarea:hover
background-color: secondary-content;
color: primary-content;
.jira-wikifield .wiki-edit-toolbar
background-color: background-highlights;
color: primary-content;
.adg3 .aui-button.aui-dropdown2-trigger
color: primary-content;
.aui-button.aui-button-subtle,
.aui-theme-default .aui-button.aui-button-subtle
color: secondary-content;
.aui-button .aui-icon,
.ops li .aui-icon
color: primary-content;
#create-issue-dialog .form-body,
#create-issue-dialog .form-footer,
#edit-issue-dialog .form-body,
#edit-issue-dialog .form-footer
background-color: background;
/****************************************************************\
/****************************************************************\
/**************** Kanban Board **********************\
/****************************************************************\
/****************************************************************/
#content #subnav-title .subnavigator-title
color: primary-content;
#page,
#page-body,
#content,
#gh,
#ghx-content-main,
#ghx-rabid,
#ghx-work-wrapper,
#ghx-work,
#ghx-pool-column,
#ghx-pool,
#ghx-column-headers,
#ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents,
#ghx-detail-view.ghx-detail-view #ghx-detail-contents.ghx-detail-contents .ghx-detail-nav-menu,
#js-detail-nav-content,
#ghx-detail-head,
#ghx-detail-issue,
#ghx-detail-contents,
#ghx-detail-view,
.ghx-swimlane-header::after
background-color: background;
box-shadow: none;
.adg3 .ghx-column-headers .ghx-column,
.adg3 .ghx-columns .ghx-column
background-color: background-highlights;
.ghx-issue
background-color: background !important;
.ghx-issue *
color: primary-content !important;
.ghx-issue:hover
background-color: background-highlights !important;
.ghx-issue:hover *
color: primary-content !important;
.ghx-issue:hover
border: 1px solid emphasized-content;
.ghx-swimlane-header,
.ghx-swimlane-header-stalker,
.ghx-column-header-group
background-color: background !important;
.ghx-parent-group
background-color: background-highlights !important;
color: primary-content;
border: 1px solid emphasized-content;
.ghx-group > .ghx-summary
color: secondary-content;
/** Detail **/
#ghx-detail-contents
border: none;
#ghx-detail-issue
color: primary-content;
#ghx-detail-issue a
color: blue;
#ghx-detail-issue .toggle-title
color: primary-content;
/* color sidebar in details view */
.ghx-detail-nav-menu ul li.ghx-detail-nav-item,
.ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected
background-color: background;
color: primary-content;
/*recolor icons */
.ghx-detail-nav-menu ul li.ghx-detail-nav-item span
color: primary-content;
/* color selected icon in sidebar in details view */
.ghx-detail-nav-menu ul li.ghx-detail-nav-item.ghx-selected a
background-color: background-highlights;
color: primary-content;
/** Open issues page **/
#page #page-body #content .aui-page-panel
background-color: background;
color: primary-content;
/* Fix this later
#page #page-body #content .aui-page-panel a
background-color: background;
color: blue;
*/
.subnavigator-title
color: primary-content !important;
/* Search nav pane */
.LnFvQ
background-color: background-highlights !important;
.LnFvQ span
color: secondary-content;
.ipIHid
background-color: background-highlights !important;
.ewvMIF,
.kNFuQa
background-color: transparent;
body #page #page-body h1,
body #page #page-body h2,
body #page #page-body h3,
body #page #page-body h4,
body #page #page-body h5,
body #page #page-body h6
color: primary-content !important;
/******** Backlog ***************/
#ghx-backlog,
.ghx-backlog-container
background-color: background;
.ghx-issue-compact,
.ghx-issue-compact .ghx-end
background-color: background;
.adg3 .js-issue.ghx-issue-compact:hover,
.adg3 .js-issue.ghx-issue-compact:hover .ghx-items-container
background-color: background-highlights;
.adg3 .js-issue.ghx-selected,
.adg3 .js-issue.ghx-selected .ghx-items-container
background-color: background-highlights;
results in 19:3 Unknown Word
Using only braces seemed to work, but I can't use variables. I get the above error.
I tried that before posting
I'm not sure which method you tried, but I can install this style without problems: https://gist.github.com/eight04/7c64ac6d2acfb946ce6e95b5fe06ed74
Firefox Dev 59.0b6 Stylus 1.2.7
I get a missed semicolon error with that exact snippet using Firefox 58.0.1 and Stylus 1.2.7. I can try to upgrade to dev, though I'd rather not, because I want this code to work for those not on develop releases.
what about the Unknown word error? It doesn't seem to like stylus variables.
.
I don't know what is up with my machine then. Do variables work properly for you @tophf ?
You can change the regex to ^https?://(.*?).atlassian.net/(secure|browse).*
and test here. https://mycore.atlassian.net/browse/ARC-336
All I did was change the starting bit to
@-moz-document regexp("^https?://(.*?).atlassian.net/(secure|browse).*")
base03 = #002b36; /* <--- trying to use this variable here */
:root {
--base03: #002b36; /* <---- not this one */
--base02: #073642;
--base01: #586e75;
--base00: #657b83;
--base0: #839496;
--base1: #93a1a1;
--base2: #eee8d5;
--base3: #fdf6e3;
--yellow: #b58900;
--orange: #cb4b16;
--red: #dc322f;
--magenta: #d33682;
--violet: #6c71c4;
--blue: #268bd2;
--cyan: #2aa198;
--green: #859900;
/* Dark mode */
/*
--background: var(--base03);
--background-highlights: var(--base02);
--secondary-content: var(--base01);
--primary-content: var(--base0);
--emphasized-content: var(--base1);
*/
/* Light Mode */
--background: var(base3);
--background-highlights: var(--base2);
--secondary-content: var(--base1);
--primary-content: var(--base00);
--emphasized-content: var(--base01);
}
and it fails to render the background the proper color.
I'm trying to reference the variable I created outside of the :root scope @Mottie
http://stylus-lang.com/docs/variables.html
I'm not familiar with the stylus preprocessor so I can't help based on your description. What I know is that it works here and that the semicolon error is also displayed on other styles with the stylus preprocessor, and can be ignored.
Ok. So the stylus variable problem is not an issue with openstyles/stylus, but is an issue with stylus preprocessor?