- Timestamp:
- Oct 25, 2017 9:31:13 AM (3 years ago)
- Branches:
- master
- Children:
- 5ecae1a
- Parents:
- 97267a4
- Location:
- installer/resources/themes/console
- Files:
-
- 1 added
- 10 edited
Legend:
- Unmodified
- Added
- Removed
-
installer/resources/themes/console/classic/console.css
r97267a4 r0e5b46e7 528 528 } 529 529 530 #sb_general, #sb_shortgeneral, #sb_ bandwidth, #sb_peers, #sb_tunnels, #sb_queue {530 #sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue { 531 531 margin-bottom: -5px !important; 532 532 margin-top: -6px !important; 533 533 } 534 534 535 #sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, #sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { 535 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 536 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 536 537 content: ""; 537 538 display: inline-block; … … 539 540 } 540 541 541 #sb_peers td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child { 542 #sb_peers td:first-child, #sb_peersadvanced td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, 543 #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child, #sb_advancedgeneral td:first-child { 542 544 white-space: nowrap; 543 545 } … … 548 550 } 549 551 552 #sb_peersadvanced a { 553 padding: 0; 554 } 555 556 #sb_peersadvanced a b { 557 color: #2c354f; 558 } 559 560 #sb_peersadvanced a:hover b { 561 color: #f60; 562 } 563 564 #sb_peersadvanced .separator td::after { 565 min-height: 0; 566 } 567 568 #sb_peersadvanced .separator hr { 569 margin: 3px 0 2px !important; 570 color: transparent; 571 background: transparent; 572 border-bottom: 1px dashed #89f; 573 } 574 550 575 #sb_localid { 551 576 margin: -3px 0 -1px; … … 560 585 } 561 586 562 #sb_internals, #sb_services, #sb_advanced {587 #sb_internals, #sb_services, #sb_advanced, #sb_help { 563 588 margin-top: -3px !important; 564 589 } 565 590 566 #sb_internals a, #sb_services a, #sb_advanced a {591 #sb_internals a, #sb_services a, #sb_advanced a, #sb_help a { 567 592 display: inline-block; 568 593 padding: 2px; … … 834 859 835 860 /* end network status */ 861 862 /* mini sidebar graph */ 863 864 #sb_bandwidthgraph { 865 width: 202px !important; 866 margin: 0; 867 margin: -20px 0 0 0; 868 border-collapse: separate; 869 border-spacing: 0; 870 padding: 0; 871 border: 1px solid #89f; 872 border-radius: 2px; 873 box-shadow: 0 0 1px #ccf; 874 } 875 876 #sb_bandwidthgraph:hover { 877 border: 1px solid #f60; 878 cursor: url(/themes/console/images/cursor_zoom.png), pointer; 879 } 880 881 a:active #sb_bandwidthgraph { 882 border: 1px solid #f30; 883 } 884 885 #sb_bandwidthgraph td { 886 background: linear-gradient(to top, #f3f3ff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #f3f3ff 93%), linear-gradient(to right, #f3f3ff, rgba(255,255,255,0.0) 2%, rgba(255,255,255,0.0) 98%, #f3f3ff), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important; 887 padding: 0 1px; 888 box-shadow: inset 0 0 0 1px #fff; 889 height: 38px; 890 vertical-align: top; 891 } 892 893 #sb_graphstats { 894 display: inline-block; 895 padding: 2px 8px; 896 font-weight: bold; 897 background: #ddf; 898 background: linear-gradient(to right, #ddf, #efefff, #ddf); 899 border: 1px solid #89f; 900 border-top: none; 901 border-radius: 0 0 3px 3px; 902 box-shadow: inset 0 0 0 1px #fff; 903 opacity: 0; 904 transition: ease opacity 0.3s; 905 } 906 907 #sb_graphcontainer:hover #sb_graphstats { 908 opacity: 1; 909 transition: ease opacity 0.3s; 910 } 911 912 #sb_graphcontainer { 913 background-color: #f3f3ff; 914 background-position: left -60px top -35px !important; 915 background-position: left -60px top -29px !important; 916 background-size: 280px 92px !important; 917 background-size: 280px 77px !important; 918 background-repeat: no-repeat !important; 919 background-blend-mode: multiply; 920 margin: 0 2px -21px 1px !important; 921 padding: 0 5px 0 0; 922 } 923 924 @media screen and (min-width: 1500px) { 925 #sb_bandwidthgraph { 926 width: 223px !important; 927 background-size: 300px 92px !important; 928 } 929 930 #sb_graphcontainer { 931 background-size: 300px 77px !important; 932 } 933 } 934 /* end mini sidebar graph */ 935 936 /* status bars */ 937 938 .percentBarOuter { 939 width: 196px; 940 margin: -4px 0 -5px 3px; 941 text-align: center; 942 border: 1px solid #99f; 943 box-shadow: 0 0 1px rgba(200,200,200,0.8); 944 background: #eef; 945 background: repeating-linear-gradient(to right, rgba(180, 180, 255,0.7) 1px, rgba(180, 180, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 4px); 946 } 947 948 @media screen and (min-width: 1500px) { 949 .percentBarOuter { 950 width: 210px; 951 } 952 } 953 954 .percentBarInner { 955 vertical-align: middle; 956 border: none; 957 height: 14px; 958 background: #bbf; 959 background: linear-gradient(to right, rgba(0,255,0,0.1) 65px, rgba(255,255,0,0.1) 110px, rgba(255,128,0,0.1) 175px, rgba(255,0,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%); 960 box-shadow: inset 0 0 0 1px #ddf; 961 } 962 963 .percentBarText { 964 display: inline !important; 965 white-space: nowrap; 966 text-align: center !important; 967 font-weight: bold !important; 968 color: #2c354f; 969 text-shadow: 0 1px 1px rgba(255,255,255,0.8); 970 float: left; 971 width: 100%; 972 height: 14px; 973 padding: 0; 974 opacity: 0; 975 transition: ease opacity 0.2s; 976 } 977 978 .percentBarOuter:hover .percentBarText { 979 opacity: 1; 980 transition: ease opacity 0.2s; 981 } 982 983 /* updates download bar */ 984 985 .sb_updatestatus { 986 display: block; 987 border: 1px solid #99f; 988 border-top: none; 989 color: #2c354f; 990 border-radius: 0 0 3px 3px; 991 box-sizing: border-box; 992 background: #ccf; 993 background: linear-gradient(to right, #eef, #eff2ff 30%, #eff2ff 60%, #eef); 994 box-shadow: inset 0 0 0 1px #fff; 995 margin: -8px 2px 5px !important; 996 padding: 3px 0 4px; 997 font-style: italic; 998 } 999 1000 .sb_info .percentBarOuter { 1001 margin: 3px -4px -5px 2px; 1002 background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px); 1003 } 1004 1005 @keyframes downloadbar { 1006 from { 1007 background: repeating-linear-gradient(135deg, rgba(221, 221, 255, 0.7) 1px, rgba(221, 221, 255, 0.7) 6px, rgba(238, 238, 255,0.7) 7px, rgba(238, 238, 255,0.7) 11px); 1008 } 1009 1010 to { 1011 background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px); 1012 } 1013 } 1014 1015 .sb_info .percentBarOuter { 1016 animation: downloadbar 3s infinite; 1017 } 1018 1019 .sb_info .percentBarInner { 1020 height: 16px; 1021 background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%); 1022 1023 } 1024 1025 .sb_info .percentBarText { 1026 opacity: 1; 1027 padding-top: 2px; 1028 mix-blend-mode: multiply; 1029 color: #33f; 1030 1031 } 1032 /* end updates download bar */ 1033 /* end status bars */ 836 1034 837 1035 /* end sidebar */ … … 6887 7085 6888 7086 @media screen and (max-width: 1500px) { 6889 #sb_general td: first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,6890 #sb_peers td: first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {7087 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 7088 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 6891 7089 min-height: 12px; 6892 7090 } … … 6989 7187 } 6990 7188 6991 #sb_internals a, #sb_services a, #sb_advanced a {7189 #sb_internals a, #sb_services a, #sb_advanced a, #sb_help a { 6992 7190 max-width: 212px; 6993 7191 } … … 6996 7194 min-width: 100px; 6997 7195 margin: 2px 4px 1px; 7196 } 7197 7198 .percentBarOuter { 7199 width: 217px; 6998 7200 } 6999 7201 -
installer/resources/themes/console/classic/console_big.css
r97267a4 r0e5b46e7 67 67 } 68 68 69 #sb_bandwidth td:last-child, #sb_peers td:last-child, #sb_ queue td:last-child, #sb_tunnels td:last-child, #sb_general td:last-child, #sb_shortgeneral td:last-child {69 #sb_bandwidth td:last-child, #sb_peers td:last-child, #sb_peersadvanced td:last-child, #sb_queue td:last-child, #sb_tunnels td:last-child, #sb_general td:last-child, #sb_shortgeneral td:last-child, #sb_advancedgeneral td:last-child { 70 70 font-size: 10pt !important; 71 71 } … … 75 75 font-weight: normal; 76 76 text-shadow: none; 77 } 78 79 #sb_bandwidthgraph { 80 width: 218px !important; 81 margin: -25px 0 -6px !important; 82 } 83 84 #sb_graphstats { 85 font-size: 9pt !important; 86 } 87 88 #sb_graphcontainer { 89 background-position: left -66px top -30px !important; 90 background-size: 340px 80px !important; 91 } 92 93 .percentBarOuter { 94 width: 212px !important; 95 margin: -3px 0 -4px 3px; 96 } 97 98 .percentBarText { 99 font-size: 9pt !important; 100 padding: 0 !important; 101 margin-top: -1px; 77 102 } 78 103 -
installer/resources/themes/console/dark/console.css
r97267a4 r0e5b46e7 398 398 } 399 399 400 #sb_general, #sb_shortgeneral, #sb_ bandwidth, #sb_peers, #sb_tunnels, #sb_queue {400 #sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue { 401 401 margin-bottom: -4px !important; 402 402 } 403 403 404 #sb_general td::after, #sb_shortgeneral td::after, #sb_ bandwidth td::after,405 #sb_peers td::after, #sb_ tunnels td::after, #sb_queue td::after {404 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 405 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 406 406 content: ""; 407 407 display: inline-block; … … 409 409 } 410 410 411 #sb_general td, #sb_shortgeneral td {411 #sb_general td, #sb_shortgeneral td, #sb_advancedgeneral td, #sb_peersadvanced td { 412 412 white-space: nowrap; 413 413 } 414 414 415 #sb_general td:first-child, #sb_shortgeneral td:first-child {415 #sb_general td:first-child, #sb_shortgeneral td:first-child, #sb_advancedgeneral td:first-child, #sb_peersadvanced td:first-child { 416 416 max-width: 130px; 417 417 } … … 458 458 } 459 459 460 #sb_internals td, #sb_services td, #sb_advanced td { /* color ellipsis */460 #sb_internals td, #sb_services td, #sb_advanced td, #sb_help td { /* color ellipsis */ 461 461 color: #595 !important; 462 462 } 463 463 464 #sb_services, #sb_internals, #sb_advanced {464 #sb_services, #sb_internals, #sb_advanced, #sb_help { 465 465 margin-top: -4px !important; 466 466 } 467 467 468 #sb_internals a, #sb_services a, #sb_advanced a {468 #sb_internals a, #sb_services a, #sb_advanced a, #sb_help a { 469 469 padding: 1px 3px; 470 470 display: inline-block; … … 481 481 } 482 482 483 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link {483 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link { 484 484 word-break: break-all; 485 485 max-width: 192px; … … 488 488 text-overflow: ellipsis; 489 489 line-height: 140%; 490 } 491 492 #sb_peersadvanced a { 493 color: #ee9; 494 } 495 496 #sb_peersadvanced .separator td::after { 497 min-height: 0; 498 } 499 500 .routersummary .separator hr, .routersummary .separator hr:last-child { 501 display: block !important; 502 color: transparent; 503 background: transparent; 504 border-bottom: 1px dashed #141; 505 height: 1px; 506 margin: 4px 0 3px !important; 490 507 } 491 508 … … 679 696 680 697 /* end sidebar news */ 698 699 /* mini sidebar graph */ 700 701 #sb_bandwidthgraph { 702 width: 100%; 703 margin: -5px 0 -5px -5px; 704 border-collapse: separate; 705 border-spacing: 0; 706 padding: 0; 707 border: 1px solid #5df; 708 box-shadow: 0 0 1px #ccf; 709 } 710 711 #sb_bandwidthgraph:hover { 712 border: 1px solid #f60; 713 cursor: url(/themes/console/images/cursor_zoom.png), pointer; 714 } 715 716 a:active #sb_bandwidthgraph { 717 border: 1px solid #f30; 718 } 719 720 #sb_bandwidthgraph td { 721 background: linear-gradient(to top, #fff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #fff 93%), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important; 722 padding: 0 1px; 723 box-shadow: inset 0 0 0 1px #fff; 724 height: 40px; 725 vertical-align: top; 726 } 727 728 #sb_graphstats { 729 display: inline-block; 730 padding: 2px 8px; 731 font-weight: bold; 732 background: #ddf; 733 background: linear-gradient(to right, #ddf, #efefff, #ddf); 734 border: 1px solid #89f; 735 border-top: none; 736 border-radius: 0 0 3px 3px; 737 box-shadow: inset 0 0 0 1px #fff, 0 0 1px #fff; 738 opacity: 0; 739 transition: ease opacity 0.3s; 740 color: #89f; 741 } 742 743 #sb_graphcontainer:hover #sb_graphstats { 744 opacity: 1; 745 transition: ease opacity 0.3s; 746 } 747 748 #sb_graphcontainer { 749 background-color: #000; 750 background-position: left -72px top -23px !important; 751 background-size: 280px 77px !important; 752 background-repeat: no-repeat !important; 753 margin-bottom: -7px !important; 754 filter: invert(1) hue-rotate(90deg); 755 } 756 757 /* reduce flicker as graph image gets inverted and hue-rotated */ 758 759 @keyframes graphfadein { 760 from { 761 filter: invert(1) hue-rotate(90deg) opacity(0); 762 } 763 764 to { 765 filter: invert(1) hue-rotate(90deg) opacity(1); 766 } 767 } 768 769 #sb_graphcontainer { 770 animation: graphfadein 0.3s ease-in; 771 } 772 773 @media screen and (min-width: 1500px) { 774 #sb_graphcontainer { 775 background-size: 300px 77px !important; 776 } 777 } 778 /* end mini sidebar graph */ 779 780 /* status bar */ 781 782 .percentBarOuter { 783 width: 194px; 784 background: #000; 785 background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px); 786 background: repeating-linear-gradient(to right, #000 1px, #000 2px, #010 2px, #010 4px); 787 border: 1px solid #040; 788 border-bottom: 1px solid #020; 789 border-right: 1px solid #020; 790 opacity: 1; 791 box-shadow: 0 0 1px 1px rgba(0,0,0,0.8); 792 margin: -3px 0 -5px -6px; 793 } 794 795 @media screen and (min-width: 1500px) { 796 .percentBarOuter { 797 width: 220px; 798 } 799 } 800 801 .percentBarOuter:hover .percentBarText { 802 opacity: 1; 803 transition: ease opacity 0.2s; 804 } 805 806 .percentBarInner { 807 height: 14px; 808 background: #0e5f00; 809 background: linear-gradient(to bottom, rgba(28, 148, 58, 0.6) 0%, rgba(9, 47, 16, 0.6) 50%, rgba(13, 39, 7, 0.6) 50%, rgba(9, 27, 5, 0.6) 50%, rgba(9, 21, 3, 0.6) 100%); 810 box-shadow: inset 0 0 0 1px #000; 811 } 812 813 .percentBarText { 814 width: 100%; 815 font-weight: bold; 816 text-align: center; 817 vertical-align: middle; 818 float: left; 819 opacity: 0; 820 transition: ease opacity 0.2s; 821 } 822 823 /* update bar */ 824 825 .sb_updatestatus { 826 background: #000; 827 background: linear-gradient(to right, #020, #000, #020); 828 margin: -6px -2px -2px; 829 padding: 2px 0 4px; 830 border-bottom: 1px solid #494; 831 } 832 833 .sb_info .percentBarOuter { 834 margin: 6px -2px -18px 2px; 835 box-shadow: none !important; 836 background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px); 837 animation: downloadbar 3s infinite alternate; 838 } 839 840 .sb_info .percentBarText { 841 opacity: 1; 842 padding-top: 2px; 843 } 844 845 .sb_info .percentBarInner { 846 height: 16px; 847 } 848 849 @keyframes downloadbar { 850 from { 851 background: repeating-linear-gradient(135deg, #000 1px, #000 5px, #010 6px, #010 11px); 852 } 853 854 to { 855 background: repeating-linear-gradient(135deg, #010 1px, #010 6px, #000 7px, #000 11px); 856 } 857 } 858 859 /* end status bar */ 681 860 /* end sidebar */ 682 861 … … 6897 7076 6898 7077 @media screen and (max-width: 1500px) { 6899 #sb_general td: first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,6900 #sb_peers td: first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {7078 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 7079 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 6901 7080 min-height: 12px; 6902 7081 } … … 7082 7261 } 7083 7262 7084 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link {7263 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link { 7085 7264 max-width: 216px !important; 7086 7265 } -
installer/resources/themes/console/dark/console_ar.css
r97267a4 r0e5b46e7 533 533 } 534 534 535 .percentBarOuter { 536 margin: -3px -6px -5px 0; 537 } 538 539 .sb_info .percentBarOuter { 540 margin: 6px 2px -18px -2px; 541 } 542 543 .sb_info .percentBarText { 544 font-size: 9pt; 545 padding-top: 1px; 546 direction: ltr; 547 } 548 535 549 .main#console .twocol { 536 550 margin: 15px 35px 5px 0 !important; -
installer/resources/themes/console/dark/console_big.css
r97267a4 r0e5b46e7 202 202 } 203 203 204 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 205 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 206 content: ""; 207 display: inline-block; 208 min-height: 14px !important; 209 } 210 204 211 .sb_newsheadings td, .sb_newsheadings tr:hover td { 205 212 background-position: 4px center !important; … … 209 216 .search select, .search button, .search input[type="text"] { 210 217 font-size: 10pt !important; 218 } 219 220 .percentBarOuter { 221 width: 206px; 222 margin: -1px 0 -2px -4px; 223 } 224 225 #sb_graphcontainer { 226 background-position: left -74px top -21px !important; 227 background-size: 300px 77px !important; 211 228 } 212 229 -
installer/resources/themes/console/light/console.css
r97267a4 r0e5b46e7 14 14 background: #a4a4cb url(images/tile2.png) fixed; 15 15 background-size: 32px 32px; 16 } 16 17 } 17 18 … … 131 132 .routersummary div[style="height: 36px;"] { 132 133 margin: 0; 133 padding: 0 ;134 padding: 0 0 1px; 134 135 text-align: center; 135 136 } … … 142 143 143 144 .routersummary img[src$="i2plogo.png"] { 144 opacity: 0. 9;145 opacity: 0.7; 145 146 transition: ease filter 0.3s 0s, ease opacity 0.3s 0s; 146 margin-top: -1px; 147 margin-left: -1px !important; 148 width: 194px; 147 margin: 0 !important; 148 width: 190px; 149 149 height: auto; 150 150 filter: drop-shadow(0 0 1px #ccf); 151 }152 153 @media screen and (-webkit-min-device-pixel-ratio: 0) {154 .routersummary img[src$="i2plogo.png"] {155 margin-top: -2px !important;156 }157 151 } 158 152 … … 163 157 } 164 158 159 .routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img { 160 filter: drop-shadow(0 0 1px #f60); 161 } 162 165 163 .routersummary a:active img[src$="i2plogo.png"] { 166 filter: drop-shadow(0 0 2px # f30);164 filter: drop-shadow(0 0 2px #d30); 167 165 } 168 166 … … 171 169 } 172 170 173 .routersummary a[href="/"]:focus img, .routersummary a[href="/console"]:focus img {174 filter: drop-shadow(0 0 1px #f60);175 }176 177 171 .routersummary form { 178 margin: 0-7px;172 margin: -2px -7px; 179 173 padding: 0 0 3px; 180 174 } 181 175 182 .routersummary form[action="/config"] { 183 margin: -2px -7px; 176 @media screen and (-webkit-min-device-pixel-ratio:0) { 177 .routersummary form { 178 margin: -1px -7px -3px !important; 179 } 184 180 } 185 181 … … 332 328 333 329 #sb_version { 334 margin-top: 5px !important;335 margin-bottom: 8px !important;330 margin-top: 7px !important; 331 margin-bottom: 10px !important; 336 332 } 337 333 … … 375 371 } 376 372 377 #sb_internals, #sb_advanced { 378 margin: -9px -6px -6px; 379 } 380 381 #sb_internals a, #sb_advanced a { 373 #sb_internals, #sb_advanced, #sb_help { 374 margin: -9px -6px -5px; 375 width: 204px !important; 376 } 377 378 #sb_internals a, #sb_advanced a, #sb_help a { 382 379 padding: 2px; 383 380 display: inline-block; … … 388 385 } 389 386 390 #sb_general, #sb_shortgeneral, #sb_bandwidth, #sb_peers, #sb_tunnels, #sb_queue { 387 #sb_internals a:hover, #sb_advanced a:hover, #sb_help a:hover { 388 background: #ffd; 389 border-radius: 3px; 390 } 391 392 #sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue { 391 393 margin-bottom: -4px !important; 392 394 margin-top: -10px !important; 393 395 } 394 396 395 #sb_general, #sb_shortgeneral { 397 @media screen and (-webkit-min-device-pixel-ratio:0) { 398 #sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue { 399 margin-bottom: -6px !important; 400 } 401 } 402 403 #sb_shortgeneral { 396 404 margin-top: -7px !important; 397 405 } 398 406 399 #sb_general td, #sb_shortgeneral td {407 #sb_general td, #sb_shortgeneral td, #sb_advancedgeneral td { 400 408 white-space: nowrap; 401 409 } 402 410 403 #sb_general td:first-child, #sb_shortgeneral td:first-child {411 #sb_general td:first-child, #sb_shortgeneral td:first-child, #sb_advancedgeneral td:first-child { 404 412 max-width: 130px; 405 413 } 406 414 407 #sb_general td::after, #sb_shortgeneral td::after, #sb_ bandwidth td::after,408 #sb_peers td::after, #sb_ tunnels td::after, #sb_queue td::after {415 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 416 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 409 417 content: ""; 410 418 display: inline-block; … … 412 420 } 413 421 414 #sb_peers td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, #sb_general td:first-child, #sb_shortgeneral td:first-child { 422 #sb_peers td:first-child, #sb_peersadvanced td:first-child, #sb_tunnels td:first-child, #sb_queue td:first-child, #sb_bandwidth td:first-child, 423 #sb_general td:first-child, #sb_shortgeneral td:first-child, #sb_advancedgeneral td:first-child { 415 424 text-transform: capitalize; 416 425 } 426 427 #sb_peersadvanced a:hover b, #sb_peersadvanced a:visited:hover b { 428 color: #f60 !important 429 } 430 431 #sb_peersadvanced a:active b, #sb_peersadvanced a:visited:active b { 432 color: #f90 !important 433 } 434 435 #sb_peersadvanced .separator td { 436 padding: 0; 437 } 438 439 .separator hr, .separator hr:last-child { 440 color: transparent; 441 background: transparent; 442 height: 1px; 443 border-bottom: 1px dashed #99f !important; 444 margin: 3px 0 -10px !important; 445 display: block !important; 446 } 447 448 /* mini sidebar graph */ 449 450 #sb_bandwidthgraph { 451 width: 100%; 452 margin: -5px 0 -5px -5px; 453 border-collapse: separate; 454 border-spacing: 0; 455 padding: 0; 456 border: 1px solid #89f; 457 border-radius: 2px; 458 box-shadow: 0 0 1px #ccf; 459 } 460 461 @media screen and (-webkit-min-device-pixel-ratio: 0) { 462 #sb_bandwidthgraph { 463 margin: -5px 0 -6px -5px !important; 464 } 465 } 466 467 #sb_bandwidthgraph:hover { 468 border: 1px solid #f60; 469 cursor: url(/themes/console/images/cursor_zoom.png), pointer; 470 } 471 472 a:active #sb_bandwidthgraph { 473 border: 1px solid #f30; 474 } 475 476 #sb_bandwidthgraph td { 477 background: linear-gradient(to top, #f3f3ff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #f3f3ff 93%), linear-gradient(to right, #f3f3ff, rgba(255,255,255,0.0) 2%, rgba(255,255,255,0.0) 98%, #f3f3ff), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important; 478 padding: 0 1px; 479 box-shadow: inset 0 0 0 1px #fff; 480 height: 40px; 481 vertical-align: top; 482 } 483 484 #sb_graphstats { 485 display: inline-block; 486 padding: 2px 8px; 487 font-weight: bold; 488 background: #ddf; 489 background: linear-gradient(to right, #ddf, #efefff, #ddf); 490 border: 1px solid #89f; 491 border-top: none; 492 border-radius: 0 0 3px 3px; 493 box-shadow: inset 0 0 0 1px #fff, 0 0 1px #fff; 494 opacity: 0; 495 transition: ease opacity 0.3s; 496 } 497 498 #sb_graphcontainer:hover #sb_graphstats { 499 opacity: 1; 500 transition: ease opacity 0.3s; 501 } 502 503 #sb_graphcontainer { 504 background-color: #f3f3ff; 505 background-position: left -60px top -23px !important; 506 background-size: 280px 77px !important; 507 background-repeat: no-repeat !important; 508 background-blend-mode: multiply; 509 } 510 511 @media screen and (min-width: 1500px) { 512 #sb_graphcontainer { 513 background-size: 300px 77px !important; 514 } 515 } 516 /* end mini sidebar graph */ 517 518 /* status bars for memory usage and router/plugin updates */ 519 520 .percentBarOuter { 521 width: 196px; 522 margin: -4px -5px -4px -3px; 523 text-align: center; 524 border: 1px solid #99f; 525 box-shadow: 0 0 1px rgba(200,200,200,0.8); 526 background: #eef; 527 background: linear-gradient(to right, rgba(0,255,0,0.05) 50%, rgba(255,255,0,0.05) 75%, rgba(255,128,0,0.05) 90%, rgba(255,0,0,0.1)), repeating-linear-gradient(to right, rgba(180, 180, 255,0.7) 1px, rgba(180, 180, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 4px); 528 } 529 530 @media screen and (min-width: 1500px) { 531 .percentBarOuter { 532 width: 212px; 533 } 534 } 535 536 .percentBarInner { 537 vertical-align: middle; 538 border: none; 539 height: 14px; 540 background: #bbf; 541 background: linear-gradient(to right, rgba(0,255,0,0.1) 65px, rgba(255,255,0,0.1) 110px, rgba(255,128,0,0.1) 175px, rgba(255,0,0,0.1)), linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%); 542 background: linear-gradient(to bottom, rgba(255, 255, 255,0.6) 0%, rgba(238, 238, 255, 0.6) 50%, rgba(180, 180, 255, 0.7) 50%, rgba(140, 140, 255, 0.7) 100%); 543 box-shadow: inset 0 0 0 1px #ddf; 544 } 545 546 .percentBarText { 547 display: inline !important; 548 white-space: nowrap; 549 text-align: center !important; 550 font-weight: bold !important; 551 color: #41465f; 552 text-shadow: 0 1px 1px rgba(255,255,255,0.8); 553 float: left; 554 width: 100%; 555 height: 14px; 556 padding: 0; 557 opacity: 0; 558 transition: ease opacity 0.2s; 559 } 560 561 .percentBarOuter:hover .percentBarText { 562 opacity: 1; 563 transition: ease opacity 0.2s; 564 } 565 566 /* updates download bar */ 567 568 .sb_update a { 569 white-space: nowrap; 570 vertical-align: baseline; 571 } 572 573 .sb_updatestatus { 574 display: block; 575 font-style: italic; 576 border: 1px solid #99f; 577 border-top: none; 578 border-radius: 0 0 3px 3px; 579 background: #ccf; 580 background: linear-gradient(to right, #ddf, #efefff 30%, #efefff 60%, #ddf); 581 box-shadow: inset 0 0 0 1px #fff; 582 margin: -7px 2px 5px !important; 583 padding: 4px 0 3px; 584 filter: drop-shadow(0 0 1px #ccf); 585 } 586 587 .sb_info .percentBarOuter { 588 margin: 3px -4px -19px 2px; 589 background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px); 590 } 591 592 @keyframes downloadbar { 593 from { 594 background: repeating-linear-gradient(135deg, rgba(221, 221, 255, 0.7) 1px, rgba(221, 221, 255, 0.7) 6px, rgba(238, 238, 255,0.7) 7px, rgba(238, 238, 255,0.7) 11px); 595 } 596 597 to { 598 background: repeating-linear-gradient(135deg, rgba(238, 238, 255,0.7) 1px, rgba(238, 238, 255, 0.7) 5px, rgba(221, 221, 255, 0.7) 6px, rgba(221, 221, 255, 0.7) 11px); 599 } 600 } 601 602 .sb_info .percentBarOuter { 603 animation: downloadbar 3s infinite; 604 } 605 606 .sb_info .percentBarInner { 607 height: 16px; 608 } 609 610 .sb_info .percentBarText { 611 opacity: 1; 612 padding-top: 3px; 613 mix-blend-mode: multiply; 614 } 615 /* end updates download bar */ 616 /* end status bars */ 417 617 418 618 #sb_warning { … … 550 750 background-image: none !important; 551 751 border: 0 !important; 552 }553 554 .routersummary img:first-child {555 margin-bottom: -2px !important;556 opacity: 0.7;557 }558 559 .routersummary img:hover:first-child {560 margin-bottom: -2px !important;561 opacity: 1;562 752 } 563 753 … … 714 904 .sb_newsheadings table { 715 905 table-layout: auto; 716 width: 20 2px !important;906 width: 204px !important; 717 907 margin: -12px 0 -8px -14px; 718 908 } … … 1716 1906 #sidebarconf button { 1717 1907 margin: 2px 0 2px 3px !important; 1718 padding: 2px ;1908 padding: 2px 3px; 1719 1909 min-width: 0; 1720 1910 background-size: 100% 100% !important; … … 3104 3294 background: linear-gradient(135deg, #fcfcff, rgba(252,252,255,0) 600px), linear-gradient(to bottom, #fcfcff 50%, rgba(248,248,255,0.6) 50%), repeating-linear-gradient(135deg, rgba(255,255,255,0.5) 2px, rgba(221, 221, 255, 0.3) 3px, #fff 5px) #fafaff !important; 3105 3295 border: 1px solid #447; 3106 border-radius: 2px ;3296 border-radius: 2px 2px 0 0; 3107 3297 min-width: 546px; 3108 3298 z-index: 999; … … 7076 7266 } 7077 7267 7078 #sb_general td: first-child::after, #sb_shortgeneral td:first-child::after, #sb_bandwidth td:first-child::after,7079 #sb_ peers td:first-child::after, #sb_tunnels td:first-child::after, #sb_queue td:first-child::after {7268 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, 7269 #sb_bandwidth td::after, #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 7080 7270 min-height: 12px; 7081 7271 } 7082 7272 7083 #sb_internals a, #sb_advanced a {7273 #sb_internals a, #sb_advanced a #sb_help a { 7084 7274 max-width: 200px; 7085 7275 } … … 7259 7449 } 7260 7450 7261 #sb_internals a, #sb_advanced a {7451 #sb_internals a, #sb_advanced a, #sb_help a { 7262 7452 max-width: 212px; 7263 7453 } 7264 7454 7265 #sb_general, #sb_shortgeneral, #sb_ bandwidth, #sb_peers, #sb_tunnels, #sb_queue {7455 #sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue { 7266 7456 margin-bottom: -4px !important; 7267 7457 margin-top: -10px !important; 7268 7458 } 7269 7459 7270 #sb_general, #sb_shortgeneral {7271 margin-top: -7px !important; 7272 } 7273 7274 #sb_general td::after, #sb_shortgeneral td::after, #sb_ bandwidth td::after,7275 #sb_peers td::after, #sb_ tunnels td::after, #sb_queue td::after {7276 min-height: 14px;7460 #sb_general, #sb_shortgeneral, #sb_advancedgeneral { 7461 margin-top: -7px !important; 7462 } 7463 7464 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 7465 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 7466 min-height: 14px; 7277 7467 } 7278 7468 -
installer/resources/themes/console/light/console_ar.css
r97267a4 r0e5b46e7 45 45 .buckets { 46 46 margin-bottom: -10px !important; 47 } 48 49 .routersummaryouter { 50 margin-right: -1px; 51 } 52 53 .routersummary { 54 margin-bottom: 4px; 47 55 } 48 56 … … 202 210 padding-right: 28px !important; 203 211 background-position: right 6px center !important; 212 } 213 214 #sb_graphcontainer { 215 background-position: left -60px top -20px !important; 216 transform: scale(-1, +1); 217 } 218 219 #sb_bandwidthgraph { 220 margin: -5px -5px -5px 0; 221 } 222 223 224 @media screen and (-webkit-min-device-pixel-ratio: 0) { 225 #sb_bandwidthgraph { 226 margin: -5px -5px -6px 0 !important; 227 } 228 } 229 230 .percentBarOuter { 231 margin: -4px -3px -4px -5px; 232 background: linear-gradient(to left, rgba(0,255,0,0.05) 50%, rgba(255,255,0,0.05) 75%, rgba(255,128,0,0.05) 90%, rgba(255,0,0,0.1)), repeating-linear-gradient(to right, rgba(180, 180, 255,0.7) 1px, rgba(180, 180, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 2px, rgba(221, 221, 255, 0.7) 4px); 233 } 234 235 .sb_info .percentBarOuter { 236 margin: 3px 2px -19px -4px; 237 } 238 239 .sb_updatestatus, .sb_info .percentBarText { 240 font-size: 9pt; 241 } 242 243 .sb_info .percentBarText { 244 padding-top: 1px; 245 direction: ltr; 204 246 } 205 247 -
installer/resources/themes/console/light/console_big.css
r97267a4 r0e5b46e7 75 75 } 76 76 77 #sb_graphcontainer { 78 background-position: left -60px top -20px !important; 79 } 80 77 81 .sb_newsheadings td, .sb_newsheadings tr:hover td { 78 82 background-position: 4px center !important; 79 83 padding-left: 22px !important; 84 } 85 86 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, 87 #sb_bandwidth td::after, #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 88 min-height: 15px !important; 80 89 } 81 90 -
installer/resources/themes/console/midnight/console.css
r97267a4 r0e5b46e7 1294 1294 } 1295 1295 1296 #sb_general, #sb_shortgeneral, #sb_ bandwidth, #sb_peers, #sb_tunnels, #sb_queue {1296 #sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue { 1297 1297 margin-top: -6px !important; 1298 1298 margin-bottom: -5px !important; 1299 1299 } 1300 1300 1301 #sb_general td::after, #sb_shortgeneral td::after, #sb_ bandwidth td::after,1302 #sb_peers td::after, #sb_ tunnels td::after, #sb_queue td::after {1301 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 1302 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 1303 1303 content: ""; 1304 1304 display: inline-block; … … 1307 1307 } 1308 1308 1309 #sb_general td, #sb_shortgeneral td {1309 #sb_general td, #sb_shortgeneral td, #sb_advancedgeneral td { 1310 1310 white-space: nowrap; 1311 1311 } … … 1356 1356 } 1357 1357 1358 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link {1358 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link { 1359 1359 word-break: break-all; 1360 1360 max-width: 190px; … … 1368 1368 } 1369 1369 1370 #sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a, 1370 #sb_services a:hover, #sb_internals a:hover, #sb_advanced a:hover, #sb_localtunnels tr:hover, #sb_localtunnels tr:hover a, #sb_help a:hover, 1371 1371 .news a:hover, #console a:hover, tt a:hover { 1372 1372 background: #652787; … … 1375 1375 } 1376 1376 1377 #sb_services a:active, #sb_internals a:active, #sb_advanced a:active, #sb_localtunnels tr:active, .news a:active, #console a:active, tt a:active { 1377 #sb_services a:active, #sb_internals a:active, #sb_advanced a:active, #sb_help a:active, 1378 #sb_localtunnels tr:active, .news a:active, #console a:active, tt a:active { 1378 1379 background: #39144f; 1379 1380 color: #c9ceff !important; … … 1382 1383 #sb_localtunnels tr:active a { 1383 1384 color: #c9ceff !important; 1385 } 1386 1387 #sb_peersadvanced a { 1388 padding: 0; 1389 color: #c9ceff; 1390 } 1391 1392 #sb_peersadvanced a:hover, #sb_peersadvanced a:focus { 1393 color: #652787; 1394 } 1395 1396 #sb_peersadvanced .separator td::after { 1397 min-height: 0 !important; 1398 } 1399 1400 #sb_peersadvanced .separator hr, #sb_peersadvanced .separator hr:last-child { 1401 display: block !important; 1402 margin: 3px 0 2px !important; 1403 color: transparent; 1404 background: transparent; 1405 border-bottom: 1px dashed #2d296f; 1384 1406 } 1385 1407 … … 1571 1593 1572 1594 /* end sidebar news */ 1595 1596 /* mini sidebar graph */ 1597 1598 #sb_bandwidthgraph { 1599 width: 100%; 1600 margin: -13px 0 0 -8px !important; 1601 border-collapse: separate; 1602 border-spacing: 0; 1603 padding: 0; 1604 border: 1px solid #5df; 1605 box-shadow: 0 0 1px #ccf; 1606 } 1607 1608 #sb_bandwidthgraph:hover { 1609 border: 1px solid #f60; 1610 cursor: url(/themes/console/images/cursor_zoom.png), pointer; 1611 } 1612 1613 a:active #sb_bandwidthgraph { 1614 border: 1px solid #f30; 1615 } 1616 1617 #sb_bandwidthgraph td { 1618 background: linear-gradient(to top, #f3f3ff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #f3f3ff 93%), linear-gradient(to right, #f3f3ff, rgba(255,255,255,0.0) 2%, rgba(255,255,255,0.0) 98%, #f3f3ff), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important; 1619 background: linear-gradient(to top, #fff 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 89%, #fff 93%), repeating-linear-gradient(to right, rgba(255,255,255,0.0) 10px, rgba(120,120,255,0.8) 11px, rgba(255,255,255,0.0) 11px, rgba(255,255,255,0.0) 20px), repeating-linear-gradient(to top, rgba(255,255,255,0.0) 1px, rgba(120,120,255,0.8) 2px, rgba(255,255,255,0.0) 2px, rgba(255,255,255,0.0) 10px) !important; 1620 padding: 0 1px; 1621 box-shadow: inset 0 0 0 1px #fff; 1622 height: 40px; 1623 vertical-align: top; 1624 } 1625 1626 #sb_graphstats { 1627 display: inline-block; 1628 padding: 2px 8px; 1629 font-weight: bold; 1630 background: #444; 1631 border: 1px solid #999; 1632 border-top: none; 1633 box-shadow: inset 0 0 0 1px #fff, 0 0 1px #fff; 1634 opacity: 0; 1635 transition: ease opacity 0.3s; 1636 } 1637 1638 #sb_graphcontainer:hover #sb_graphstats { 1639 opacity: 1; 1640 transition: ease opacity 0.3s; 1641 } 1642 1643 #sb_graphcontainer { 1644 background-color: #000; 1645 background-position: left -72px top -26px !important; 1646 background-size: 280px 90px !important; 1647 background-repeat: no-repeat !important; 1648 margin: -7px 0 -3px !important; 1649 height: 40px; 1650 filter: invert(1) sepia(1) hue-rotate(180deg); 1651 } 1652 1653 @keyframes graphfadein { 1654 from { 1655 opacity: 0; 1656 } 1657 1658 to { 1659 opacity: 1; 1660 } 1661 } 1662 1663 #sb_graphcontainer { 1664 animation: graphfadein 0.4s ease-in; /* attempt to mitigate strobe effect as image loads before filters are applied */ 1665 } 1666 1667 @media screen and (min-width: 1500px) { 1668 #sb_graphcontainer { 1669 background-size: 300px 77px !important; 1670 background-position: left -72px top -20px !important; 1671 } 1672 1673 #sb_bandwidthgraph { 1674 width: 100%; 1675 margin: -15px 0 0 -8px !important; 1676 } 1677 } 1678 1679 /* end mini sidebar graph */ 1680 1681 /* status bar */ 1682 1683 .percentBarOuter { 1684 width: 194px; 1685 background: #000; 1686 background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px); 1687 background: repeating-linear-gradient(to right, #000 1px, #000 2px, #003 2px, #003 4px); 1688 border: 1px solid #171c3f; 1689 opacity: 1; 1690 box-shadow: 0 0 1px 1px rgba(0,0,0,0.8); 1691 margin: -3px 0 -5px -6px; 1692 } 1693 1694 @media screen and (min-width: 1500px) { 1695 .percentBarOuter { 1696 width: 210px; 1697 } 1698 } 1699 1700 .percentBarOuter:hover .percentBarText { 1701 opacity: 1; 1702 transition: ease opacity 0.2s; 1703 } 1704 1705 .percentBarInner { 1706 height: 14px; 1707 background: #0e5f00; 1708 background: linear-gradient(to bottom, #33a 0%, #226 50%, #003 50%, #000 100%); 1709 box-shadow: inset 0 0 0 1px #000; 1710 } 1711 1712 .percentBarText { 1713 width: 100%; 1714 font-weight: bold; 1715 text-align: center; 1716 vertical-align: middle; 1717 float: left; 1718 opacity: 0; 1719 transition: ease opacity 0.2s; 1720 } 1721 1722 /* update bar */ 1723 1724 .sb_updatestatus { 1725 background: #000; 1726 margin: -6px -4px -2px; 1727 padding: 2px 0 4px; 1728 border-bottom: 1px solid #443da0; 1729 color: #c9ceff; 1730 } 1731 1732 .sb_info .percentBarOuter { 1733 margin: 5px -2px -4px 0; 1734 box-shadow: none !important; 1735 background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px); 1736 animation: downloadbar 3s infinite alternate; 1737 } 1738 .sb_info .percentBarText { 1739 opacity: 1; 1740 padding-top: 2px; 1741 color: #c9ceff; 1742 } 1743 1744 .sb_info .percentBarInner { 1745 height: 16px; 1746 } 1747 1748 @keyframes downloadbar { 1749 from { 1750 background: repeating-linear-gradient(135deg, #001 1px, #001 5px, #003 6px, #003 11px); 1751 } 1752 1753 to { 1754 background: repeating-linear-gradient(135deg, #003 1px, #003 6px, #001 7px, #001 11px); 1755 } 1756 } 1757 1758 /* end status bar */ 1573 1759 /* end sidebar */ 1574 1760 … … 6807 6993 /* end network status */ 6808 6994 6809 #sb_services, #sb_internals, #sb_advanced {6995 #sb_services, #sb_internals, #sb_advanced, #sb_help { 6810 6996 margin-top: -3px !important; 6811 6997 margin-bottom: -5px !important; … … 7335 7521 7336 7522 @media screen and (max-width: 1500px) { 7337 #sb_general td::after, #sb_shortgeneral td::after, #sb_ bandwidth td::after,7338 #sb_peers td::after, #sb_ tunnels td::after, #sb_queue td::after {7523 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, #sb_bandwidth td::after, 7524 #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 7339 7525 min-height: 14px; 7340 7526 } … … 7432 7618 } 7433 7619 7434 #sb_general td::after, #sb_shortgeneral td::after, #sb_bandwidth td::after, #sb_peers td::after, #sb_tunnels td::after, #sb_queue td::after { 7620 #sb_general td::after, #sb_shortgeneral td::after, #sb_advancedgeneral td::after, 7621 #sb_bandwidth td::after, #sb_peers td::after, #sb_peersadvanced td::after, #sb_tunnels td::after, #sb_queue td::after { 7435 7622 min-height: 18px; 7436 7623 } … … 7512 7699 } 7513 7700 7514 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link {7701 #sb_services a:link, #sb_internals a:link, #sb_advanced a:link, #sb_help a:link { 7515 7702 max-width: 207px; 7516 7703 } 7517 7704 7518 #sb_general, #sb_shortgeneral, #sb_ bandwidth, #sb_peers, #sb_tunnels, #sb_queue {7705 #sb_general, #sb_shortgeneral, #sb_advancedgeneral, #sb_bandwidth, #sb_peers, #sb_peersadvanced, #sb_tunnels, #sb_queue { 7519 7706 margin-top: -4px !important; 7520 7707 margin-bottom: -4px !important; -
installer/resources/themes/console/midnight/console_ar.css
r97267a4 r0e5b46e7 90 90 #sb_localtunnels td:last-child { 91 91 text-align: left; 92 } 93 94 #sb_bandwidthgraph { 95 margin: -13px -8px 0 0 !important; 96 } 97 98 #sb_graphcontainer { 99 background-position: left -72px top -24px !important; 100 } 101 102 .percentBarOuter { 103 margin: -3px -6px -5px 0; 104 } 105 106 .sb_info .percentBarOuter { 107 margin: 5px 0 -4px -2px; 108 } 109 110 .sb_updatestatus b { 111 font-weight: bold !important; 112 } 113 114 .sb_updatestatus, .sb_info .percentBarText { 115 font-size: 9pt; 116 } 117 118 .sb_info .percentBarText { 119 padding-top: 0; 120 direction: ltr; 92 121 } 93 122
Note: See TracChangeset
for help on using the changeset viewer.