Changeset 7de815b for installer


Ignore:
Timestamp:
May 14, 2017 5:39:51 AM (3 years ago)
Author:
str4d <str4d@…>
Branches:
master
Children:
67b3c46
Parents:
0aae9716
Message:

CSS sort buttons on /peers

  • New icons to avoid conflation of tunnel direction and sort direction
  • Active sort columnn now indicated and focused button highlighted
Location:
installer/resources/themes/console
Files:
8 added
4 edited

Legend:

Unmodified
Added
Removed
  • installer/resources/themes/console/classic/console.css

    r0aae9716 r7de815b  
    17511751     color: #0c153d;
    17521752}
     1753
     1754/* peers - sort icons */
     1755
     1756#udpconnections th {
     1757     vertical-align: top;
     1758     background: #fff;
     1759     padding-top: 3px;
     1760}
     1761
     1762#ntcpconnections th {
     1763     background: #fff;
     1764}
     1765
     1766#peers > #ntcpcon {
     1767     margin-top: 0 !important;
     1768}
     1769
     1770#upnpstatus + #ntcpcon {
     1771     margin-top: 10px !important;
     1772}
     1773
     1774.sortup, .sortdown, .sortupactive, .sortdownactive {
     1775     padding: 1px 0;
     1776     border: 1px solid #999;
     1777     border-radius: 2px;
     1778     margin: 2px 1px 0;
     1779     vertical-align: middle;
     1780     text-align: center;
     1781     display: inline-block;
     1782     width: 16px;
     1783     height: 12px;
     1784     background-size: 10px auto, 100% 100% !important;
     1785}
     1786
     1787.sortup, .sortdown {
     1788     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;;
     1789     opacity: 0.7;
     1790}
     1791
     1792.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
     1793     margin: 0;
     1794     padding: 0;
     1795     opacity: 0;
     1796     width: 16px;
     1797     height: 14px;
     1798     vertical-align: middle;
     1799     text-align: center;
     1800}
     1801
     1802.sortupactive, .sortdownactive {
     1803     opacity: 1;
     1804     box-shadow: inset 1px 1px 1px #ccc;
     1805}
     1806
     1807.sortup {
     1808     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
     1809}
     1810
     1811.sortup:hover {
     1812     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
     1813     border: 1px solid #89f;
     1814     opacity: 1;
     1815}
     1816
     1817.sortup a:focus, .sortdown a:focus {
     1818     background: rgba(255,102,0,0.15);
     1819     border-radius: 2px;
     1820     box-shadow: inset 0 0 0 1px #fff;
     1821     margin-top: -1px;
     1822     display: inline-block;
     1823}
     1824
     1825.sortupactive {
     1826     background: url(images/sort_up.png) center center no-repeat, #fff;
     1827}
     1828
     1829.sortdown {
     1830     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
     1831}
     1832
     1833.sortdown:hover {
     1834     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
     1835     border: 1px solid #89f;
     1836     opacity: 1;
     1837}
     1838
     1839.sortdownactive {
     1840     background: url(images/sort_down.png) center center no-repeat, #fff;
     1841}
     1842
     1843/* end peer sort */
    17531844
    17541845table#thresholds, table#profile_defs {
  • installer/resources/themes/console/dark/console.css

    r0aae9716 r7de815b  
    11391139     padding: 0;
    11401140}
     1141
     1142/* peers - sort icons */
     1143
     1144#udpconnections th {
     1145     vertical-align: top;
     1146     padding-top: 3px;
     1147}
     1148
     1149.sortup, .sortdown, .sortupactive, .sortdownactive {
     1150     padding: 1px 0;
     1151     border: 1px solid #171;
     1152     border-radius: 1px;
     1153     opacity: 0.7;
     1154     margin: 5px 1px 0 !important;
     1155     vertical-align: middle;
     1156     text-align: center;
     1157     display: inline-block;
     1158     width: 16px;
     1159     height: 12px;
     1160     background-size: 10px auto, 100% 100% !important;
     1161}
     1162
     1163.sortup, .sortdown {
     1164     box-shadow: inset 0 0 0 1px #000;
     1165}
     1166
     1167.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
     1168     margin: 0;
     1169     padding: 0;
     1170     opacity: 0;
     1171     width: 16px;
     1172     height: 14px;
     1173     vertical-align: middle;
     1174     text-align: center;
     1175}
     1176
     1177.sortup:hover, .sortdown:hover {
     1178     opacity: 0.9;
     1179     transition: ease all 0.3s;
     1180}
     1181
     1182.sortupactive, .sortdownactive {
     1183     opacity: 1;
     1184     box-shadow: inset 1px 1px 1px #000;
     1185}
     1186
     1187.sortup {
     1188     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #040, #000);
     1189}
     1190
     1191.sortup:hover {
     1192     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #000, #040);
     1193     border: 1px solid #f60;
     1194}
     1195
     1196.sortup a:focus, .sortdown a:focus {
     1197     background: rgba(255,255,0,0.2);
     1198     border-radius: 1px;
     1199     margin-top: -1px;
     1200     height: 14px;
     1201     width: 16px;
     1202     display: inline-block;
     1203}
     1204
     1205.sortupactive {
     1206     background: url(images/sort_up.png) center center no-repeat, #050;
     1207}
     1208
     1209.sortdown {
     1210     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #040, #000);
     1211}
     1212
     1213.sortdown:hover {
     1214     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #000, #040);
     1215     border: 1px solid #f60;
     1216}
     1217
     1218.sortdownactive {
     1219     background: url(images/sort_down.png) center center no-repeat, #050;
     1220     border: 1px solid #050;
     1221}
     1222
     1223/* end peer sort */
    11411224
    11421225tt {
  • installer/resources/themes/console/light/console.css

    r0aae9716 r7de815b  
    45314531}
    45324532
     4533/* peers - sort icons */
     4534
     4535#udpconnections th {
     4536     vertical-align: top;
     4537     padding-top: 3px;
     4538}
     4539
     4540.sortup, .sortdown, .sortupactive, .sortdownactive {
     4541     padding: 1px 0;
     4542     border: 1px solid #999;
     4543     border-radius: 2px;
     4544     margin: 3px 1px 0 !important;
     4545     vertical-align: middle;
     4546     text-align: center;
     4547     display: inline-block;
     4548     width: 16px;
     4549     height: 12px;
     4550     background-size: 10px auto, 100% 100% !important;
     4551}
     4552
     4553.sortup, .sortdown {
     4554     box-shadow: inset 0 0 0 1px #fff, 0 0 1px #ddd;
     4555     opacity: 0.75;
     4556}
     4557
     4558.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
     4559     margin: 0;
     4560     padding: 0;
     4561     opacity: 0;
     4562     width: 16px;
     4563     height: 14px;
     4564     vertical-align: middle;
     4565     text-align: center;
     4566}
     4567
     4568.sortupactive, .sortdownactive {
     4569     opacity: 1;
     4570     box-shadow: inset 1px 1px 1px #ccc;
     4571}
     4572
     4573.sortup {
     4574     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
     4575}
     4576
     4577.sortup:hover {
     4578     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
     4579     border: 1px solid #f60;
     4580     opacity: 1;
     4581}
     4582
     4583.sortup a:focus, .sortdown a:focus {
     4584     background: rgba(255,102,0,0.15);
     4585     border-radius: 2px;
     4586     box-shadow: inset 0 0 0 1px #fff;
     4587     margin-top: -1px;
     4588     display: inline-block;
     4589}
     4590
     4591.sortupactive {
     4592     background: url(images/sort_up.png) center center no-repeat, #fff;
     4593}
     4594
     4595.sortdown {
     4596     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #fff, #ddd);
     4597}
     4598
     4599.sortdown:hover {
     4600     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #ddd, #fff);
     4601     border: 1px solid #f60;
     4602     opacity: 1;
     4603}
     4604
     4605.sortdownactive {
     4606     background: url(images/sort_down.png) center center no-repeat, #fff;
     4607}
     4608
     4609/* end peer sort */
     4610
     4611
    45334612table#schedjobs {
    45344613     margin-top: -11px !important;
  • installer/resources/themes/console/midnight/console.css

    r0aae9716 r7de815b  
    26882688     overflow-x: scroll !important;
    26892689}
     2690
     2691/* peers - sort icons */
     2692
     2693#ntcpconnections th, #udpconnections th {
     2694     background: #000010 !important;
     2695}
     2696
     2697#udpconnections th {
     2698     vertical-align: top;
     2699     padding-top: 3px;
     2700}
     2701
     2702.sortup, .sortdown, .sortupactive, .sortdownactive {
     2703     padding: 1px 0;
     2704     border: 1px solid #117;
     2705     border: 1px solid #443da0;
     2706     border-radius: 1px;
     2707     margin: 4px 1px 0 !important;
     2708     vertical-align: middle;
     2709     text-align: center;
     2710     display: inline-block;
     2711     width: 16px;
     2712     height: 12px;
     2713     background-size: 10px auto, 100% 100% !important;
     2714}
     2715
     2716.sortup, .sortdown {
     2717     box-shadow: inset 0 0 0 1px #000;
     2718     opacity: 0.5;
     2719}
     2720
     2721.sortup img, .sortdown img, .sortupactive img, .sortdownactive img {
     2722     margin: 0;
     2723     padding: 0;
     2724     opacity: 0;
     2725     width: 16px;
     2726     height: 14px;
     2727     vertical-align: middle;
     2728     text-align: center;
     2729     filter: hue-rotate(60deg);
     2730}
     2731
     2732.sortupactive, .sortdownactive {
     2733     opacity: 1;
     2734     box-shadow: inset 2px 2px 1px #000;
     2735}
     2736
     2737.sortup {
     2738     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #004, #000);
     2739}
     2740
     2741.sortup:hover {
     2742     background: url(images/sort_up.png) center center no-repeat, linear-gradient(to bottom, #000, #004);
     2743     border: 1px solid #652787;
     2744     opacity: 1;
     2745}
     2746
     2747.sortup a:focus, .sortdown a:focus {
     2748     background: rgba(237, 207, 255, 0.2);
     2749     border-radius: 1px;
     2750     margin-top: -1px;
     2751     height: 14px;
     2752     width: 16px;
     2753     display: inline-block;
     2754}
     2755
     2756.sortupactive {
     2757     background: url(images/sort_up.png) center center no-repeat, #005;
     2758}
     2759
     2760.sortdown {
     2761     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #004, #000);
     2762}
     2763
     2764.sortdown:hover {
     2765     background: url(images/sort_down.png) center center no-repeat, linear-gradient(to bottom, #000, #004);
     2766     border: 1px solid #652787;
     2767     opacity: 1;
     2768}
     2769
     2770.sortdownactive {
     2771     background: url(images/sort_down.png) center center no-repeat, #005;
     2772     border: 1px solid #005;
     2773}
     2774
     2775/* end peer sort */
    26902776
    26912777pre#transports {
Note: See TracChangeset for help on using the changeset viewer.