1:root { 2 font: caption; 3} 4 5html { 6 background-color: #111; 7} 8 9body { 10 font-family: Arial, sans-serif; 11 color: white; 12 max-width: 600px; 13 margin: 30px auto 0; 14 box-shadow: 0 2px 3px black; 15 background-color: #3C3E40; 16} 17 18h1 { 19 margin: 0; 20 padding: 20px; 21 background-color: rgba(0,0,0,0.12); 22 background-image: radial-gradient(ellipse farthest-corner at center top , rgb(159, 223, 255), rgba(101, 203, 255, 0.3)), radial-gradient(ellipse farthest-side at center top , rgba(101, 203, 255, 0.4), rgba(101, 203, 255, 0)); 23 background-size: 100% 2px, 100% 5px; 24 background-repeat: no-repeat; 25 border-bottom: 1px solid rgba(0,0,0,0.1); 26} 27 28form { 29 display: inline-block; 30} 31 32label { 33 display: block; 34 margin: 10px; 35} 36 37label > span { 38 display: inline-block; 39 min-width: 150px; 40 text-align: right; 41 margin-right: 10px; 42} 43 44#submit { 45 float: right; 46} 47 48input:invalid { 49 box-shadow: 0 0 2px 2px #F06; 50} 51 52section { 53 min-height: 160px; 54 margin: 60px 20px; 55 display: none; /* By default, hidden */ 56} 57 58.error-message { 59 color: red; 60} 61 62.error-message:not(.active) { 63 display: none; 64} 65 66body:not(.actors-mode):not(.connecting) > #connection-form { 67 display: block; 68} 69 70body.actors-mode > #actors-list { 71 display: block; 72} 73 74body.connecting > #connecting { 75 display: block; 76} 77 78#connecting { 79 text-align: center; 80} 81 82#connecting > p > img { 83 vertical-align: top; 84} 85 86.actors { 87 padding-left: 0; 88} 89 90.actors > a { 91 display: block; 92 margin: 5px; 93 padding: 5px; 94 color: white; 95} 96 97.remote-process { 98 font-style: italic; 99 opacity: 0.8; 100} 101 102footer { 103 padding: 10px; 104 background-color: rgba(0,0,0,0.12); 105 border-top: 1px solid rgba(0,0,0,0.1); 106 font-size: small; 107} 108 109footer > a, 110footer > a:visited { 111 color: white; 112} 113