[Theme submission] The "I suck at CSS" dark theme

[parkerlreed]

Changed a few values in the shift.css to make it a bit darker. Kinda shit but sorta matches my browser theme so meh.

/**
 * Shift: a Transmission web interface.
 *
 * © 2014 Killemov.
 *
 * This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License.
 * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a
 * letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.
 */

a {
  color: #778C9E;
}

body {
  background-color: #212122;
  color: #DADADA;
  font-family: Arial, sans-serif;
  font-size: 11pt;
  padding: 0;
  margin: 8px;
}

input {
  color: #DADADA;
  font-family: Arial, sans-serif;
  font-size: 11pt;
}

h1 {
  font-size: 28pt;
  margin: 8px 0;
  text-align: center;
}

select {
  color: #DADADA;
  font-family: Arial, sans-serif;
  font-size: 11pt;
}

ul#menu {
  background-attachment: scroll;
  background-clip: border-box;
  background-color: #212122;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAABACAYAAAAwJqZDAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3ggVCSkQ5XePkwAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAjElEQVQoz42R0Q3DIAxEH5HV/UfpCN2g26RSVe76AYECidQvTs8+w5l0fzxvQA4Sb4BIJIooJ2G7CiqRitxg7sm1FGquE1FdH2kcGHi25+ZaJmsl7nNSJWyAQ1IqwiVhGAtwWIcAD0/tAff9tURmXMu6jR9y6Qo68VXPQU5v99/NjfSS5s/tJS4DNvEFcGh2gWjOH3gAAAAASUVORK5CYII=");
  background-origin: padding-box;
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 100% 100%;
  border-radius: 4px;
  display: block;
  font-weight: bold;
  margin: 0 0 8px;
  padding: 8px;
}

ul#menu li {
  background-color: rgba( 255, 255, 255, 0.2 );
  border-color: #212122 #212122 #212122 #212122;
  border-style: solid;
  border-radius: 4px;
  border-width: 1px;
  color: #DADADA;
  display: inline-block;
  margin-right: 2px;
  padding: 0.5em 1em;
  text-align: center;
}

ul#menu li:hover {
  cursor: pointer;
}

ul#menu li.selected {
  background-color: rgba( 63, 63, 63, 0.2 );
  border-color: #1C1C1C #1C1C1C #1C1C1C #1C1C1C;
  border-radius: 4px;
  color: #ECF3F7;
}

ul#menu li.sub {
  padding: 0.2em 1em;
  vertical-align: bottom;
}

div#filterContainer {
  background-color: #303030;
  border-color: #1C1C1C #1C1C1C #1C1C1C #1C1C1C;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  margin: 0 4px 4px;
}

div.filter {
  margin: 2px 8px;
}

span.filterInput {
  width: 256px;
  display: inline-block;
}

span.filterLabel {
  width: 64px;
  display: inline-block;
}

div.name {
  width: 100px;
}

div#outside {
  background-color: transparent;
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

div#popups {
  background-color: transparent;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

div.popup div {
  display: block;
  position: relative;
}

.popup {
  background-color: #353535;
  border-color: #ECF3F7 #9DB2C4 #9DB2C4 #ECF3F7;
  border-style: solid;
  border-width: 0px;
  display: none;
  position: absolute;
}

.popup:hover {
  cursor: pointer;
}

.popup ul {
  display: block;
  padding: 0;
  margin: 0;
}

.popup ul li {
  border: 0px solid #9DB2C4;
  display: block;
  font-weight: bold;
  padding-left: 4px;
  padding-right: 4px;
  margin: 0;
}

div#popupAbout {
  height: 300px;
  padding: 8px;
  position: fixed;
  text-align: center;
  width: 368px;
}

div#popupAdd {
  position: fixed;
  height: 196px;
  width: 368px;
}

span#labelDir {
  padding-left: 21px;
}

li#high, li#normal, li#low, li#none {
  display: inline-block;
  padding: 0;
}

.styled {
  border: 0px solid #9DB2C4;
}

input.styled, textarea.styled {
  background: inherit;
  border-color: #9DB2C4 #9DB2C4 #9DB2C4 #9DB2C4;
}

input.styled.number {
  text-align: right;
  width: 6em;
}

input.styled[type=button] {
  background-color: #4D4D4E;
  border-color: #1C1C1C #1C1C1C #1C1C1C #1C1C1C;
  border-radius: 0px;
  border-style: none;
  border-width: 0px;
  color: #DADADA;
  margin-right: 2px;
  padding: 0.2em 1em;
  font-weight: bold;
  width: 6em;
}

input.styled[type=button].upload {
  position: absolute;
  right: 4px;
}

select.styled {
  background: inherit;
  height: 1.6em;
}

select.styled option {
  border: 0px solid #9DB2C4;
}

textarea.styled {
  border-width: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  resize: none;
  width: 100%;
}

span.led {
  background-color: #6A6A6A;
  border: 0px solid #FF0000;
  border-radius: 8px;
  color: #333333;
  display: inline-block;
  font-size: 1.1em;
  font-weight: 900;
  height: 12px;
  margin: 2px;
  overflow: hidden;
  vertical-align: text-bottom;
  width: 12px;
}

span.led:hover {
  cursor: pointer;
}

span.led[readonly]:hover {
  cursor: auto;
}

span.led.high {
  color: #778C9E;
  line-height: 12px;
  text-align: center;
}

span.led.low {
  color: #778C9E;
  line-height: 10px;
  padding-left: 3px;
  text-align: left;
  width: 9px;
}

span.led.none {
  background-color: #2B2B2D;
}

span.upload {
  display: inline-block;
  width: 30px;
}

table {
  background-color: #1C1C1C;
  border: 0;
  border-collapse: collapse;
  border-radius: 4px;
  table-layout: fixed;
  width: 100%;
}

table thead tr th {
  padding: 2px;
  text-align: left;
  white-space: nowrap;
}

table tbody tr td {
  padding: 0 4px;
}

table#fileTable tbody tr td {
  white-space: nowrap;
}

table#torrentTable tbody tr td {
  white-space: nowrap;
}

tbody tr:nth-child( even ) {
  background-color: #1C1C1C;
}

tbody tr:nth-child( odd ) {
  background-color: #303030;
}

col.address {
  width: 128px;
}

col.announce, col.clientName, col.name, col.value {
  width: auto;
}

col.flagStr {
  width: 64px;
}

col.key {
  width: 256px;
}

col.doneDate, col.lastAnnounceTime, col.nextAnnounceTime, col.lastScrapeTime, col.nextScrapeTime {
  width: 152px;
}

col.length, col.sizeWhenDone, col.uploadedEver {
  width: 84px;
}

col.menu, col.priority {
  width: 20px;
}

col.percentDone {
  width: 66px;
}

col.port {
  width: 56px;
}

col.progress, col.rateDownload, col.rateToClient, col.rateToPeer, col.rateUpload {
  width: 72px;
}

col.queuePosition {
  width: 56px;
}

col.status {
  width: 120px;
}

td[readonly] {
  color: #DADADA;
}

td.announce, td.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

td.length, td.percentDone, td.port, td.progress, td.queuePosition, td.rateDownload, td.rateToClient, td.rateToPeer, td.rateUpload, td.sizeWhenDone, td.uploadedEver {
  text-align: right;
}

table#detailsTable input {
  border-width: 0;
  width: 100%;
}

table#detailsTable input[type=button] {
  border-width: 1px;
  width: 6em;
}

table#sessionTable input {
  border-width: 0;
  width: 100%;
}

table#sessionTable input[type=button] {
  border-width: 1px;
  width: 6em;
}

table#shiftTable input {
  border-width: 0;
  width: 100%;
}

table#shiftTable input[type=button] {
  border-width: 1px;
  width: 6em;
}

table#shiftTable input[type=button]#tracker {
  margin-left: 20px;
  width: auto;
}

div#stats {
  background-color: rgba( 33, 33, 34, 0.2 );
  border-color: #758A9C #ECF3F7 #ECF3F7 #758A9C;
  border-radius: 4px;
  border-style: none;
  border-width: 1px;
  color: #DADADA;
  float: right;
  font-weight: bold;
  font-size: 8pt;
  padding: 0 4px;
  margin-top: 4px;
  margin-right: 9px;
  width: 20em;
}

div#stats span {
  display: inline-block;
  font-weight: inherit;
  font-size: inherit;
}

div#stats span.label {
  width: 3.5em;
}

table#trackerTable tfoot tr td {
  padding: 0 4px;
}

table#trackerTable textarea.styled {
  background-color: #ECF3F7;
  border: 0px solid #9DB2C4;
}

span.drop {
  display: block;
}

td#d_errorString {
  font-weight: bold;
}

[parkerlreed]

Image preview

[killemov]

Shift now has built-in support for dark mode. A separate style sheet is no longer needed. See README.md for more details. (Oh, and please try base.css in Dark mode.)