touch.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.
 */

.pct0 {
  color: #FF0000;
}

.pct25 {
  color: #FF7F00;
}

.pct50 {
  color: #FFBF00;
}

.pct75 {
  color: #FFFF00;
}

.pct100 {
  color: #00FF00;
}

a {
  color: #007F00;
}

/**
 * The current background image should be used for demonstration purposes only. Please use your own
 * background image, preferably with some green accents. ... or why not go nuts and change it all!
 */

html {
  background-attachment: fixed;
  background-color: #000000;
  background-image: url( "http://vignette2.wikia.nocookie.net/thehungergames/images/d/de/Technoid_background-other_%281%29.jpg/revision/latest?cb=20121111203647" );
  background-size: 100%;
}

body {
  background-color: rgba( 0, 0, 0, 0.5 );
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 11pt;
  font-weight: bold;
  margin: 0;
  padding: 8px;
  text-shadow: -1px -1px 4px #3F3F3F, 1px -1px 4px #3F3F3F, -1px 1px 4px #3F3F3F, 1px 1px 4px #3F3F3F;
}

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

h1 {
  font-size: 28pt;
}

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

ul#menu {
  border-radius: 8px;
  display: block;
  font-weight: bold;
}

body.box ul#menu {
  background-color: rgba( 255, 255, 255, 0.25 );
  border-radius: 8px;
}

ul#menu li {
  background-color: rgba( 255, 255, 255, 0.25 );
  border: 1px solid rgba( 255, 255, 255, 0.5 );
  border-radius: 8px;
  color: #000000;
  height: 32px;
  line-height: 32px;
  margin-right: 8px;
  padding: 0.5em 1em;
  text-align: center;
  text-shadow: -1px -1px 4px #BFBFBF, 1px -1px 4px #BFBFBF, -1px 1px 4px #BFBFBF, 1px 1px 4px #BFBFBF;
  transition: box-shadow 0.4s ease 0s, color 0.4s ease 0s;
  width:96px;
}

ul#menu li:hover {
  background-color: rgba( 255, 255, 255, 0.5 );
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 ), inset 0 0 8px rgba( 0, 255, 0, 0.5 );
  color: #FFFFFF;
}

ul#menu li.selected:hover {
  background-color: rgba( 255, 255, 255, 0.75 );
}

ul#menu li.selected {
  background-color: rgba( 255, 255, 255, 0.75 );
  color: #FFFFFF;
  text-shadow: -1px -1px 4px #3F3F3F, 1px -1px 4px #3F3F3F, -1px 1px 4px #3F3F3F, 1px 1px 4px #3F3F3F;
}

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

th#filterContainerCell {
  padding: 8px;
}

body.box div#filterContainer {
  margin: 8px;
}

div.filter {
  min-height: 38px;
}

div.filter span.led {
  float: none;
}

label {
  width: 4em;
}

div#outside {
  background-color: transparent;
}

.popup {
  background-color: #3F3F3F;
  border-color: #7F7F7F #000000 #000000 #7F7F7F;
  border-style: solid;
  border-width: 0;
}

.popup div {
  display: block;
  margin: 8px 0;
  position: relative;
}

.dialog {
  background-color: rgba( 63, 63, 63, 0.85 );
  border-radius: 8px;
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 ), inset 0 0 16px rgba( 0, 255, 0, 0.5 );
  padding: 16px;
}

.dialog div:last-child .styled {
  margin: 0 0 0 8px;
  float: unset;
}

.popup ul li {
  border-color: #7F7F7F #000000 #000000 #7F7F7F;
  border-style: solid;
  border-width: 1px;
  font-weight: bold;
  padding: 8px;
}

.popup ul li:hover {
  background-color: #BFBFBF !important;
  color: #FFFFFF;
}

div#popupAbout {
  width: 368px;
}

div#popupAdd {
  width: 414px;
}

div#popupAdd input[type="text"] {
  left: 96px;
  position: absolute;
}

div#popupAdd span.led {
  margin-right: 8px;
}

span#labelDir {
  display: inline-block;
  line-height: 38px;
  margin-left: 26px;
}

span#port-is-open {
  margin-top: 2px;
}

.styled {
  -moz-box-sizing: border-box;
  background-color: rgba( 255, 255, 255, 0.25 );
  border: 1px solid rgba( 255, 255, 255, 0.5 );
  border-radius: 8px;
  box-sizing: border-box;
  font-weight: bold;
  height: 34px;
  padding: 4px 8px;
  transition: box-shadow 0.4s ease 0s, color 0.4s ease 0s;
}

.dialog .styled {
  background-color: unset;
}

.keyvalue .styled {
  border: 1px solid rgba( 255, 255, 255, 0.5 );
}

.filter input.styled {
  background-color: transparent;
}

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

button.styled {
  color: #000000;
  line-height: 30px;
  min-width: 96px;
  padding: 0 8px;
  text-align: center;
  text-shadow: -1px -1px 4px #BFBFBF, 1px -1px 4px #BFBFBF, -1px 1px 4px #BFBFBF, 1px 1px 4px #BFBFBF;
}

button.styled:focus, button.styled:hover {
  color: #FFFFFF;
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 ), inset 0 0 8px rgba( 0, 255, 0, 0.5 );
}

button.styled.add {
  margin-right: 0;
}

select.styled {
  background-image:
    linear-gradient( 45deg, transparent 50%, #FFFFFF 50% ),
    linear-gradient( 135deg, #FFFFFF 50%, transparent 50% );
  background-position:
    calc(100% - 16px) 0.9em,
    calc(100% - 8px) 0.9em;
  background-size:
    8px 8px,
    8px 8px;
  padding: 0 2em 0 8px;
}

select.styled option {
  border-color: #7F7F7F #000000 #000000 #7F7F7F;
  border-style: solid;
  border-width: 1px 0;
  padding: 8px;
}

select.styled option:first-child {
  border-top: 0;
}

select.styled option:last-child {
  border-bottom: 0;
}

.keyvalue select.styled {
  background-color: rgba( 255, 255, 255, 0.25 );
}

td#d_bandwidthPriority select.styled {
  background-color: rgba( 255, 255, 255, 0.25 );
}

td#s_encryption select.styled {
  background-color: rgba( 255, 255, 255, 0.25 );
}

span.led {
  background-color: #00FF00;
  border: 1px solid #007F00;
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 32px;
  font-weight: bold;
  height: 32px;
  margin: 2px;
  text-align: center;
  transition: box-shadow 0.5s ease 0s, background-color 0.2s ease 0s;
  vertical-align: middle;
  width: 32px;
}

span.led:hover {
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 );
}

span.led.high {
  line-height: 32px;
}

span.led.low {
  line-height: 26px;
  text-indent: 11px;
}

span.led.none {
  background-color: #003F00;
}

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

table thead tr th {
  border: unset;
  line-height: 32px;
}

table tbody tr td {
  border: unset;
  line-height: 38px;
}

table input[type=text] {
  width: 100%;
}

table#torrentTable {
  border-collapse: separate;
  border-spacing: 0 16px;
  text-align: right;
}

table#torrentTable thead tr th {
  background-color: rgba( 255, 255, 255, 0.25 );
  border-radius: 8px;
  padding-left: 8px;
}

table#torrentTable thead tr:first-child th {
  vertical-align: top;
}

table#torrentTable thead tr:first-child th:first-child  {
  padding-left: 0px;
}

table#torrentTable thead tr:first-child th span.led {
  margin: 0 0 8px 0;
  display: block;
}

table#torrentTable thead tr:first-child th.menu span.led {
  display: inline-block;
  margin-top: 32px;
}

table#torrentTable tbody tr {
  border-radius: 8px;
  transition: box-shadow 0.4s ease 0s;
}

table#torrentTable tbody tr td {
  background-color: rgba( 255, 255, 255, 0.25 );
  border-radius: 8px;
  height: 48px;
  transition: box-shadow 0.4s ease 0s;
}

table#torrentTable tbody tr:hover {
  background-color: unset;
  box-shadow: 0 0 8px rgba( 0, 255, 0, 0.5 ), inset 0 0 8px rgba( 0, 255, 0, 0.5 );
}

table#torrentTable tbody tr:hover td {
  background-color: rgba( 255, 255, 255, 0.5 );
  box-shadow: 0 0 8px rgba( 0, 255, 0, 0.5 ), inset 0 0 8px rgba( 0, 255, 0, 0.5 );
}

table#torrentTable tbody tr.active {
  background-color: unset;
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 ), inset 0 0 16px rgba( 0, 255, 0, 0.5 );
}

table#torrentTable tbody tr.active td {
  background-color: rgba( 255, 255, 255, 0.75 );
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 ), inset 0 0 16px rgba( 0, 255, 0, 0.5 );
}

table#torrentTable tbody tr.active:hover {
  background-color: unset;
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 ), inset 0 0 16px rgba( 0, 255, 0, 0.5 );
}

table#torrentTable tbody tr.active:hover td {
  background-color: rgba( 255, 255, 255, 0.75 );
  box-shadow: 0 0 16px rgba( 0, 255, 0, 0.8 ), inset 0 0 16px rgba( 0, 255, 0, 0.5 );
}

table#peerTable {
  text-align: right;
}

col {
  width: 64px;
}

col.address {
  width: 128px;
}

col.announce {
  width: 384px;
}

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

col.errorString {
  width: 128px;
}

col.key {
  width: 256px;
}

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

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

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

col.port {
  width: 56px;
}

col.progress {
  width: 48px;
}

col.queuePosition {
  width: 48px;
}

col.status {
  width: 120px;
}

td[readonly] {
  color: #FFFFFF;
}

td.menu, th.menu {
  text-align: center;
}

td.filePercentDone, td.length {
  text-align: right;
}

td#d_magnetLink {
  white-space: normal;
}

table#torrentTable td {
  padding: 0 4px;
}

table#torrentTable td:first-child, table#fileTable th:first-child, table#fileTable td:first-child, table#trackerTable td:first-child {
  text-align: center;
}

table#shiftTable button#tracker {
}

div#header {
  background-color: unset;
}

body.fixed div#header {
  right: 9px;
  top: 8px;
  width: 99%;
}

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

body.box div#stats {
  background-color: unset;
}

body.box div#header {
  background-color: rgba( 63, 63, 63, 0.85 );
  border: 1px solid rgba( 255, 255, 255, 0.5 );
  border-radius: 16px;
  right: 9px;
  width: 300px;
}

body.box ul#menu {
  background-color: unset;
  display: block;
}

body.box ul#menu li {
  display: block;
  margin: 8px;
}

body.box ul#menu li.sub {
  margin-left: 64px;
}

canvas.pieces {
  border: 1px solid #007F00;
  border-radius: 8px;
  color: #00FF00;
  margin: 4px 0;
}

div#stats {
  background-color: rgba( 255, 255, 255, 0.25 );
  border: 1px solid rgba( 255, 255, 255, 0.5 );
  border-radius: 8px;
  float: right;
  font-size: 8pt;
  font-weight: bold;
  height: 48px;
  line-height: 10px;
  padding: 0 4px;
  width: 160px;
}

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

div#stats span.label {
  margin: 4px 0 0 4px;
}