securedrop-docs

securedrop-docs copied to clipboard

Problem

With SD 1.0, the product UI color schemas will be new. Small updates to RTD should be made, to reflect the new color schema and use of branding in all the web UIs.

• Things we don't yet know and need answers on:
  • What are we able to customize in RTD, and what are we "stuck" with as-is?
  • Are updates made via some RTD account-level settings, or in a GH PR?
    • If the prior, then what are the areas of the UI we're able to customize?
  • Can the favicon be different artwork from the logo used in the upper-left of the screen?
    • Per 08 Aug's UX meeting, it is desired to restrict use the 3-blue cube favicon exclusively on webpages of the product itself, and monochromatic favicons in all other webpages (RTD, Weblate, Twitter, etc).

Solution

Exact solution TBD. See comments for updates. Tentatively, the below was crafted in late night Firefox pokings...

I also think the unique color on "visited" links should be disabled, as it just clutters the layout while offering little/no value to the folks who use SD's RTD.

CSSy Things

...for above screenshot.

/* theme.css | https://docs.securedrop.org/en/release-0.14.0/_static/css/theme.css */

.wy-side-nav-search {
  /* background-color: #2980B9; */
  background-color: #FFFFFF;
}

.wy-menu-vertical header, .wy-menu-vertical p.caption {
  /* color: #3a7ca8; */
  color: #2E8AE8;
}

a {
  /* color: #2980B9; */
  color: #0065DB;
}

.wy-nav-side {
  /* color: #9b9b9b; */
  /* background: #343131; */
  color: #e25cab;
  background: #202020;
}

body {
  /* color: #404040; */
  color: #303030;
}

@media screen and (min-width: 1100px) {
  .wy-nav-content {
    /* background: #fcfcfc; */
    background: #fafafa;
  }
}

.wy-side-nav-search > a, .wy-side-nav-search .wy-dropdown > a {
  /* color: #fcfcfc; */
  color: #000C6C;
}

.wy-side-nav-search > div.version {
  /* color: rgba(255,255,255,0.3); */
  color: #9C9DBB;
}

.wy-side-nav-search input[type="text"] {
  /* border-color: #2472a4; */
  border-color: #9f9f9f;
}

a:hover {
  /* color: #3091d1; */
  color: #000C6C;
}

(The logo was updated at the time, but other style tweaks are still very much worth considering. Retitled for clarity.)