static/style.css

   1 body {
   2   background-color: white;
   3   margin: 0;
   4   font-family: Roboto, sans-serif;
   5 }
   6
   7 a {
   8   color: #546e7a;
   9   text-decoration: none;
  10 }
  11
  12 .main {
  13   height: 50ex;
  14   background-color: lightgray;
  15   color: black;
  16   padding: 1ex;
  17 }
  18
  19 .navbar, .main {
  20   max-width: 80ex;
  21   box-sizing: border-box;
  22   margin-left: auto;
  23   margin-right: auto;
  24 }
  25
  26 .navbar {
  27   background-color: white;
  28   color: #546e7a;
  29   height: 39px;
  30   position: relative;
  31 }
  32
  33 .navbar.heading {
  34   background-color: #29434e;
  35 }
  36
  37 .navbar .right {
  38   top: 0px;
  39   text-align: right;
  40   float: right;
  41 }
  42
  43 .navbar .left {
  44   float: left;
  45 }
  46
  47 .navbar .clear {
  48   clear: both;
  49 }
  50
  51 h1 {
  52   font-size: 1.5rem;
  53   font-weight: 400;
  54   line-height: 2rem;
  55   margin-bottom: 1ex;
  56   text-align: center;
  57 }
  58
  59 div.slogan {
  60   font-size: 1rem;
  61   font-weight: 400;
  62   letter-spacing: 0.04em;
  63   line-height: 1.75rem;
  64   text-align: center;
  65 }
  66
  67 hr {
  68   width: 68%;
  69 }
  70
  71 .button {
  72   background-color: white;
  73   border: 1px solid transparent;
  74   border-radius: 2px;
  75   display: inline-block;
  76   font-size: 16px;
  77   min-width: 64px;
  78   padding: 9px 16px;
  79   text-transform: uppercase;
  80   text-decoration: none;
  81   text-align: center;
  82 }
  83
  84 .button.flat {
  85   background-color: transparent;
  86   color: #546e7a;
  87 }
  88
  89 .navbar .button.flat {
  90   color: white;
  91 }
  92
  93 a.button.flat:hover {
  94   background-color: rgba(221, 221, 221, 0.4);
  95 }
  96
  97 a.button.raised {
  98   background-color: #29434e;
  99   color: white;
 100   box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
 101 }
 102
 103 a.button.raised:hover {
 104   background-color: #546e7a;
 105 }
 106
 107 div.button.raised {
 108   border-bottom: 3px solid #76ff03;
 109 }
 110
 111 table.connections {
 112   width: 95%;
 113   margin-left: auto;
 114   margin-right: auto;
 115 }
 116
 117 table.connections .icon {
 118   vertical-align: text-bottom;
 119   margin-right: .5ex;
 120 }
 121
 122 table.connections .unauthorized .icon {
 123   opacity: .2;
 124 }
 125
 126 table.connections .action {
 127   text-align: right;
 128 }
 129
 130 table.connections .name {
 131   font-weight: 700;
 132 }
 133
 134 table.connections .status {
 135   font-weight: 100;
 136   margin-left: .5ex;
 137 }
 138
 139 table.connections .authorized .status {
 140   color: #3eac5c;
 141 }
 142
 143 table.connections .unauthorized .status {
 144   color: #ca0e0e;
 145 }
 146
 147 ul.connections {
 148   text-align: center;
 149 }
 150
 151
 152 ul.connections li {
 153   list-style-type: none;
 154   display: inline-block;
 155 }