shift.css

/**
 * Shift: a Transmission web interface.
 *
 * © 2018 Killemov.
 *
 * This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License.
 * To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/ or send a
 * letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
 */

a {
  color: #5CA941;
}

body {
  font-family: Arial, sans-serif;
  font-size: 11pt;
  margin: 2px;
}

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

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

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

ul#menu {
  width: calc( 100% - 18em );
}

body.box ul#menu {
  background-color: #EFEFEF;
  background-image: linear-gradient( -8deg, #EFEFEF, #FCFCFC );
  border: 1px solid #D5D5D5;
  border-radius: 4px;
}

ul#menu li {
  background-color: #60B044;
  background-image: linear-gradient( -8deg, #60B044, #8ADD6D );
  border-color: #5CA941 #8ADD6D #8ADD6D #5CA941;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  color: #3F3F3F;
  margin: 2px;
  min-width: 8em;
  text-shadow: 0 1px 0 rgba( 0, 0, 0, 0.15 );
}

ul#menu li.selected {
  color: #FFFFFF;
  text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.15 );
}

ul#menu li.sub {
  clear: right;
  float: left;
}

.popup div.menuSpacer {
  border: 1px solid #D3D3D3;
}

body.box div#filterContainer {
  background-color: #EFEFEF;
  background-image: linear-gradient( -8deg, #EFEFEF, #FCFCFC );
  border: 1px solid #D5D5D5;
  border-radius: 4px;
}

div.drop div {
  border: 1px solid #D5D5D5;
  border-radius: 4px;
  font-weight: normal;
}

.popup {
  background-color: #EFEFEF;
  border: 1px solid #D5D5D5;
  box-shadow: 8px 8px 16px #3F3F3F;
}

.dialog {
  background-image: linear-gradient( -8deg, #EFEFEF, #FCFCFC );
  border-radius: 8px;
}

.dialog div:last-child .styled {
  margin-left: 8px;
}

.popup ul li {
  background-color: #EFEFEF;
  background-image: linear-gradient( -8deg, #EFEFEF, #FCFCFC );
  border: 1px solid #D5D5D5;
}

.popup ul li:hover {
  background-color: #60B044;
  background-image: linear-gradient( -8deg, #60B044, #8ADD6D );
  border: 1px solid #5CA941;
  color: #FFFFFF;
}

.popup input.styled {
  border: 1px solid #D5D5D5;
}

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

.styled {
  border: none;
  border-radius: 4px;
  text-align: left;
}

.filter .styled {
  border: 1px solid #D5D5D5;
  margin-right: 2px;
}

input.styled, textarea.styled {
  background-color: transparent;
}

button.styled {
  background-color: #60B044;
  background-image: linear-gradient( -8deg, #60B044, #8ADD6D );
  border-color: #5CA941 #8ADD6D #8ADD6D #5CA941;
  border-style: solid;
  border-width: 1px;
  color: #FFFFFF;
  font: inherit;
  margin: 2px;
  min-width: 8em;
  text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.15 );
}

select.styled {
  background-image:
    linear-gradient( 45deg, transparent 50%, #60B044 50% ),
    linear-gradient( 135deg, #60B044 50%, transparent 50% );
  border: 1px solid #D5D5D5;
}

select.styled option {
  border: 1px solid #D5D5D5;
}

select.styled option:hover {
  background-color: #60B044;
}

.keyvalue textarea.styled {
  border: 1px solid #D5D5D5;
}

span.led {
  background-color: #60B044;
  background-image: linear-gradient( -8deg, #60B044, #8ADD6D );
  border-color: #5CA941 #8ADD6D #8ADD6D #5CA941;
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  color: #3F3F3F;
  font-size: 1.1em;
  font-weight: 900;
  height: 12px;
  margin: 2px;
  text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.15 );
  width: 12px;
}

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

span.led.low {
  line-height: 10px;
  padding-left: 1px;
  text-align: left;
  width: 11px;
}

span.led.none {
  background-color: #EFEFEF;
  background-image: linear-gradient( -8deg, #EFEFEF, #FCFCFC );
  border: 1px solid #D5D5D5;
  color: #3F3F3F;
}

table {
  border: none;
  border-radius: 4px;
  table-layout: fixed;
}

table thead tr th {
  border-bottom: 1px solid #000000;
  border-left: none;
  border-top: 1px solid #000000;
  border-right: none;
  line-height: unset;
  padding: 1px 4px;
}

table tbody tr:hover {
  background-color: rgba( 239, 239, 239, 0.5 );
}

table tbody tr td {
  border: none;
  line-height: unset;
  padding: 0 4px;
}

col {
  width: 64px;
}

col.address {
  width: 128px;
}

col.announce {
  width: 384px;
}

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

col.errorString, col.uploadRatio {
  width: 128px;
}

col.key {
  width: 256px;
}

col.doneDate {
  width: 152px;
}

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

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

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

col.port {
  width: 56px;
}

col.progress {
}

col.queuePosition {
  width: 48px;
}

col.status {
  width: 120px;
}

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

body.normal div#header {
  height: 74px;
}

body.fixed div#header {
  padding-top: 2px;
}

body.fixed div#content {
  margin-top: 76px;
}

body.box div#header {
  background-color: #EFEFEF;
  background-image: linear-gradient( -8deg, #EFEFEF, #FCFCFC );
  border: 1px solid #D5D5D5;
  border-radius: 8px;
  box-shadow: 8px 8px 16px #3F3F3F;
  right: 9px;
  width: 372px;
}

canvas.pieces {
  color: #5CA941;
}

div#stats {
  background-color: #EFEFEF;
  background-image: linear-gradient( -8deg, #EFEFEF, #FCFCFC );
  border: 1px solid #D5D5D5;
  border-radius: 8px;
  color: #3F3F3F;
  float: right;
  margin: 8px 8px -22px 0;
  min-width: 16em;
  padding: 0 0.5em;
}

body.fixed div#stats {
  margin-right: 12px;
}

span.led.clipboard {
  margin: 0 8px 0 16px;
}