Rewrite ideas - Githubissues

silverwind commented 8 years ago

Few ideas:

CSS Variables for colors so they can be easily modified in a single place.
@document (with -moz- prefix if necessary) sections to scope styles. Basically any site that does not use framworks-*.css + github-*.css should have its own section.

@document regex(/* old regexp */) {
  :root {
    --base-color: /*[[base-color]]*/ #4183c4;
    --grey-18: #181818; 
    --grey-1b: #1b1b1b; 
    --grey-1d: #1d1d1d; 
    --grey-22: #222222; 
    --grey-24: #242424;
    --grey-a0: #a0a0a0;
  }
  @document domain(github.com), domain(gist.github.com) {

  }
  @document domain(developer.github.com) {

  }
  @document domain(help.github.com) {

  }  
}

Mottie commented 8 years ago

I actually started trying out something similar... I split up the @document into separate files.. we can combine them in a build process.

variables.css

/* GitHub */
:root {
  /* Accent base color (links & highlights) */
  --base-color: #4183c4;
  --base-color-text: #e2e2e2; /* text for a base-color background */

  /* body */
  --body-background-color: #222;
  --body-text-color: #ddd;
  --body-background-image:  url("data:image/png;base64,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");
  --body-background-attach: fixed;

  /* borders */
  --border-base: #343434;

  /* code */
  --code-font: Menlo;
  --code-tabs-size: 4;
  --code-syntax-theme: Twilight;

  /* presets */
  --color-dark-1: #181818;
  --color-dark-2: #222;
  --color-dark-3: #343434;
  --color-dark-4: #444;
  --color-dark-5: #555;

  --color-light-f: #fff;
  --color-light-e: #e2e2e2;
  --color-light-d: #ddd;
  --color-light-c: #ccc;
  --color-light-b: #bbb;
}

main.css

body {
  background-color: var(--body-background-color) !important;
  background-image: var(--body-background-image) !important;
  background-attachment: var(--body-background-attach) !important;
  background-clip: border-box !important;
  background-origin: padding-box !important;
  color: var(--body-text-color) !important;
}

/* code font */
pre, code {
  font-family: var(--code-font), Consolas, "Liberation Mono", Menlo, Courier,
    monospace !important;
}

/* accent color */
a, .link-blue, .header a:hover {
  color: var(--base-color) !important;
}
.form-control.focus, .form-control:focus, .form-select.focus,
.form-select:focus {
  border-color: var(--base-color) !important;
  outline-color: var(--base-color) !important;
}

/* headers & panels */
.header, .dropdown-menu {
  background: var(--color-dark-1) !important;
  border-color: var(--color-dark-3) !important;
}
.header a {
  color: var(--color-light-b) !important;
}

/* arrows - down */
.dropdown-caret {
    border-top-color: var(--color-dark-b) !important;
}
/* arrows - up */
.dropdown-menu:before, .dropdown-menu:after  {
    border-bottom-color: var(--color-dark-b) !important;
}

/* inputs */
.form-control, .form-select {
    background-color: var(--color-dark-1) !important;
  border-color: var(--color-dark-3) !important;
  color: var(--color-light-e) !important;
}

svg.octicon {
  fill: currentColor !important;
  overflow: visible !important;
}

template.css

@-moz-document regexp("^https?://((raw|status|developer)\.)?github\.com((?!generated_pages\/preview).)*$"), domain("githubusercontent.com") {
  /*! Github Dark Theme v2.0.0 (9/14/2016) *//*
 * https://github.com/StylishThemes/GitHub-Dark
 * http://userstyles.org/styles/37035
 * License: https://creativecommons.org/licenses/by-sa/4.0/
 */
  /* AGENT_SHEET */
 ${main}
}

@-moz-document domain("gist.github.com") {
 ${gist}
}

@-moz-document domain("guides.github.com") {
  ${guides}
}

@-moz-document domain("help.github.com") {
  ${help}
}

@-moz-document domain("status.github.com") {
  ${status}
}

@-moz-document domain("developer.github.com") {
  ${developer}
}

silverwind commented 8 years ago

There's a maintainability issue with colors like

  --color-dark-1: #181818;
  --color-dark-2: #222;
  --color-dark-3: #343434;
  --color-dark-4: #444;
  --color-dark-5: #555;

Say, you'd like to add a shade 1 and 2, now you have to rename shades from 2 til the end to stay consistent. My approach above might be a bit easier to handle.

build process

I'd like to avoid a build process if possible. It's just so convenient to copy/paste a style as-is from the editor and unfortunately necessary as one can't interface with Stylish through other means 😢.

Mottie commented 8 years ago

I mention a build process because Chrome handles the style differently than Firefox. It splits each @-moz-document into separate sections so having separate files would make it easier for me to copy/paste 😉.

It's fine though since I use the script a lot more, it's just a bit more painful on developer.github.com since the settings panel doesn't open... hmm, I guess I could fix that LOL.

Mottie commented 8 years ago

@silverwind I'd like to post my preliminary work - only the main repo page has been done so far. Before continuing, I'd thought some discussion would be best.

Would you prefer to create a branch here, or a new temporary repo?

silverwind commented 8 years ago

@Mottie I think a separate repo might be easier to work with, call it New-GitHub-Dark or something 😉. We can merge back once it's ready.

silverwind commented 8 years ago

So as for separate stylesheets, there's at least:

frameworks-{hash}.css (which frameworks?)
github-{hash}.css (main site and gist)
gist-{hash}.css (gist only)
ipynb-{hash}.css (jupyter stuff on both gist and main site)
application.css (help)
application.css (developer)

From that, you can see that there are shared styles. E.g. gist uses stuff from the github sheet, both gist and github use stuff from ipynb. Shared stuff like that can't be scoped in regexp blocks, so I guess we'd need to have them outside those blocks.

Mottie commented 8 years ago

Good idea. I've used that method in the new repo... let's move this discussion over there: https://github.com/StylishThemes/New-GitHub-Dark/issues/1

StylishThemes / GitHub-Dark

Rewrite ideas #411

variables.css

main.css

template.css