| .main-content { |
| width: 1440px; |
| margin: auto; |
| font-size: 14px; |
| } |
| |
| .connect-container { |
| margin: 20px 0; |
| } |
| |
| .container { |
| display: flex; |
| } |
| |
| .sender, .receiver { |
| flex: 1; |
| } |
| |
| .sender { |
| margin-right: 8px; |
| } |
| |
| .receiver { |
| margin-left: 8px; |
| } |
| |
| .lines-header { |
| height: 30px; |
| width: 100%; |
| box-sizing: border-box; |
| background-color: #444; |
| line-height: 30px; |
| color: white; |
| padding-left: 10px; |
| } |
| |
| .lines-body { |
| width: 100%; |
| background-color: #222; |
| min-height: 300px; |
| padding: 10px 0 20px 0; |
| } |
| |
| .line, .command-line { |
| box-sizing: border-box; |
| width: 100%; |
| color: #f1f1f1; |
| background-color: #222; |
| outline: none; |
| border: none; |
| padding: 5px 10px; |
| font-size: 14px; |
| } |
| |
| .line:hover { |
| background-color: #444; |
| } |
| |
| .button::before { |
| -webkit-border-radius: 3px; |
| -moz-border-radius: 3px; |
| -webkit-box-shadow: #959595 0 2px 5px; |
| -moz-box-shadow: #959595 0 2px 5px; |
| border-radius: 3px; |
| box-shadow: #959595 0 2px 5px; |
| content: ""; |
| display: block; |
| left: 0; |
| padding: 2px 0 0; |
| position: absolute; |
| top: 0; |
| } |
| |
| .button:active::before { padding: 1px 0 0; } |
| |
| .button.black { |
| background: #656565; |
| background: -webkit-gradient(linear, 0 0, 0 bottom, from(#656565), to(#444)); |
| background: -moz-linear-gradient(#656565, #444); |
| background: linear-gradient(#656565, #444); |
| border: solid 1px #535353; |
| border-bottom: solid 3px #414141; |
| box-shadow: inset 0 0 0 1px #939393; |
| color: #fff; |
| text-shadow: 0 1px 0 #2f2f2f; |
| padding: 8px 16px; |
| outline: none; |
| } |
| |
| .button.black:hover { |
| background: #4c4c4c; |
| background: -webkit-gradient(linear, 0 0, 0 bottom, from(#4c4c4c), to(#565656)); |
| background: -moz-linear-gradient(#4c4c4c, #565656); |
| background: linear-gradient(#4c4c4c, #565656); |
| border: solid 1px #464646; |
| border-bottom: solid 3px #414141; |
| box-shadow: inset 0 0 0 1px #818181; |
| } |
| |
| .button.black:active { |
| background: #474747; |
| background: -webkit-gradient(linear, 0 0, 0 bottom, from(#474747), to(#444)); |
| background: -moz-linear-gradient(#474747, #444); |
| background: linear-gradient(#474747, #444); |
| border: solid 1px #2f2f2f; |
| box-shadow: inset 0 10px 15px 0 #3e3e3e; |
| } |