1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/themes/shared/devtools/app-manager/connection-footer.css Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,223 @@
1.4 +/* This Source Code Form is subject to the terms of the Mozilla Public
1.5 + * License, v. 2.0. If a copy of the MPL was not distributed with this
1.6 + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
1.7 +
1.8 +/************** LAYOUT **************/
1.9 +
1.10 +#connection-footer {
1.11 + display: flex;
1.12 + flex-direction: column;
1.13 + height: 50px;
1.14 +}
1.15 +
1.16 +#banners-and-logs {
1.17 + display: flex;
1.18 + flex-grow: 1;
1.19 +}
1.20 +
1.21 +#logs {
1.22 + display: flex;
1.23 + width: 40%;
1.24 + padding: 0;
1.25 + width: 100%;
1.26 +}
1.27 +
1.28 +.banner {
1.29 + display: none;
1.30 + width: 60%;
1.31 +}
1.32 +
1.33 +#connection-footer[status="connected"] #banner-connected,
1.34 +#connection-footer[status="connecting"] #banner-connecting,
1.35 +#connection-footer[status="disconnected"] #banner-disconnected,
1.36 +#connection-footer[status="disconnecting"] #banner-disconnecting {
1.37 + display: flex;
1.38 +}
1.39 +
1.40 +body.show-simulators .banner,
1.41 +body.edit-connection .banner {
1.42 + display: none !important;
1.43 +}
1.44 +
1.45 +body.show-simulators #banner-simulators,
1.46 +body.edit-connection #banner-editing {
1.47 + display: flex !important;
1.48 +}
1.49 +
1.50 +#banner-logs {
1.51 + width: 40%;
1.52 + display: flex;
1.53 +}
1.54 +
1.55 +#logs > pre {
1.56 + overflow: auto;
1.57 + white-space: pre-line;
1.58 +}
1.59 +
1.60 +#status.banner-box {
1.61 + width: 100% !important;
1.62 +}
1.63 +
1.64 +.banner-box {
1.65 + display: flex;
1.66 + flex-direction: column;
1.67 + justify-content: center;
1.68 + width: 100%;
1.69 +}
1.70 +
1.71 +#banner-connected > .banner-box {
1.72 + align-items: flex-start;
1.73 +}
1.74 +
1.75 +#start-simulator-box {
1.76 + display: inline;
1.77 +}
1.78 +
1.79 +/************** PIXELS **************/
1.80 +
1.81 +* {
1.82 + margin: 0;
1.83 + padding: 0;
1.84 + box-sizing: border-box;
1.85 + font-size: 0.9rem;
1.86 +}
1.87 +
1.88 +body {
1.89 + color: #333;
1.90 + background-color: white;
1.91 + font-family: Lucida Grande, Helvetica, Helvetica Neue, sans-serif;
1.92 +}
1.93 +
1.94 +button {
1.95 + background: linear-gradient(to bottom, #49535C, #394148);
1.96 + box-shadow: 0px 1px 1px #3C444D, inset 0 1px 0px rgba(255,255,255,0.1);
1.97 + color: #9FA6AD;
1.98 + text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
1.99 + border: 1px solid #111;
1.100 + cursor: pointer;
1.101 + border-radius: 3px;
1.102 + padding: 3px 10px;
1.103 +}
1.104 +
1.105 +button.left {
1.106 + margin-right: 0px;
1.107 + border-top-right-radius: 0;
1.108 + border-bottom-right-radius: 0;
1.109 +}
1.110 +
1.111 +button.right {
1.112 + margin-left: -6px;
1.113 + border-top-left-radius: 0;
1.114 + border-bottom-left-radius: 0;
1.115 +}
1.116 +
1.117 +button.action-primary {
1.118 + background: linear-gradient(to bottom, #276DA3, #1E5580);
1.119 + color: #EEE;
1.120 +}
1.121 +
1.122 +button.action-cancel {
1.123 + background: linear-gradient(to bottom, #B32B02, #942300);
1.124 + color: #EEE;
1.125 +}
1.126 +
1.127 +#banners-and-logs {
1.128 + border-top: #111 solid;
1.129 + border-width: 1px 0;
1.130 + background: linear-gradient(to bottom, #323A42, #29313A);
1.131 + color: #A8BABF;
1.132 + box-shadow: inset 0 0 1px #424A51;
1.133 +}
1.134 +
1.135 +#status {
1.136 + background: linear-gradient(to bottom, #454F59, #404952);
1.137 + box-shadow: inset 0 0 1px #606D78, inset 0 1px 0 #5E6973;
1.138 +}
1.139 +
1.140 +#logs > pre {
1.141 + border: 1px solid #111;
1.142 + box-shadow: 0px 1px 1px #49525A, inset 0 0 5px rgba(0,0,0,0.3);
1.143 + font-size: 10px;
1.144 + background: #22272D;
1.145 + padding: 5px;
1.146 + height: 100%;
1.147 + padding-left: 20px;
1.148 + position: relative;
1.149 +}
1.150 +
1.151 +#logs > pre span{
1.152 + text-shadow: 0 1px 2px #000;
1.153 + color: #3195FB;
1.154 + position: fixed;
1.155 + right: calc(30% - 15px);
1.156 + bottom: -1px;
1.157 +}
1.158 +
1.159 +#logs > pre b {
1.160 + font-size: 10px;
1.161 + color: #70C4FF;
1.162 +}
1.163 +
1.164 +.banner-box {
1.165 + box-shadow: inset 0 0 1px #667480, inset 0 1px 0 #5E6973;
1.166 + border-right: 1px solid #111;
1.167 + background-position: center right;
1.168 + background-size: 1px 100%;
1.169 + background-repeat: no-repeat;
1.170 + padding: 10px 20px;
1.171 + position: relative;
1.172 +}
1.173 +
1.174 +.connected-status {
1.175 + color: #B3BFC9;
1.176 + text-shadow: 0px 1px 2px rgba(0,0,0,0.9);
1.177 + padding-bottom: 10px;
1.178 +}
1.179 +
1.180 +.connected-status {
1.181 + font-size: 150%;
1.182 + top: 10%;
1.183 + padding-right: 3px;
1.184 + position: relative;
1.185 +}
1.186 +
1.187 +.connected-indicator {
1.188 + box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0px 1px rgba(255,255,255,0.3);
1.189 + height: 100%;
1.190 + flex: 0 0 10px;
1.191 +}
1.192 +
1.193 +#banner-connected .connected-indicator,
1.194 +#banner-connecting .connected-indicator {
1.195 + background: linear-gradient(to bottom, #69B8FF, #339FFF );
1.196 +}
1.197 +
1.198 +#banner-simulators .connected-indicator,
1.199 +#banner-disconnected .connected-indicator,
1.200 +#banner-editing .connected-indicator,
1.201 +#banner-disconnecting .connected-indicator {
1.202 + background: linear-gradient(to bottom, #375A87, #1C4375 );
1.203 +}
1.204 +
1.205 +#banner-simulators .banner-content > * {
1.206 + display: inline-block;
1.207 +}
1.208 +
1.209 +#banner-simulators[simulator-count="0"] .found-simulator,
1.210 +#banner-simulators:not([simulator-count="0"]) .no-simulator {
1.211 + display: none;
1.212 +}
1.213 +
1.214 +#connection-no-device,
1.215 +[device-count="0"] > #connection-found-device,
1.216 +#connection-manual,
1.217 +#connection-assisted {
1.218 + display: none;
1.219 +}
1.220 +
1.221 +#connection-found-device,
1.222 +[device-count="0"] > #connection-no-device,
1.223 +[adb-available="true"] > #connection-assisted,
1.224 +[adb-available="false"] > #connection-manual {
1.225 + display: inline;
1.226 +}
