app.css

   1 html {
   2   height: 100%; }
   3
   4 body {
   5   font-family: 'Raleway', sans-serif;
   6   background-color: #F5F5F5;
   7   height: 100%; }
   8   body h1, body h2, body h3, body h4, body h5, body h6 {
   9     font-family: 'Lato', sans-serif; }
  10   body h1 {
  11     font-size: 2rem; }
  12   body h2 {
  13     font-size: 1.7rem;
  14     margin-top: 3rem;
  15     margin-bottom: 1rem; }
  16     body h2 .fas, body h2 .fab, body h2 .far {
  17       margin-right: 10px; }
  18     body h2 span {
  19       font-weight: bold;
  20       color: #4285f4; }
  21   body [v-cloak] {
  22     display: none; }
  23   body #bighead {
  24     color: #ffffff; }
  25     body #bighead .dashboard-title {
  26       padding: 6px 0 0 80px; }
  27     body #bighead .first-line {
  28       height: 100px;
  29       vertical-align: center;
  30       background-color: #3367d6; }
  31       body #bighead .first-line h1 {
  32         margin-top: -12px;
  33         font-size: 2rem; }
  34       body #bighead .first-line .headline {
  35         margin-top: 5px;
  36         font-size: 0.9rem; }
  37       body #bighead .first-line .container {
  38         height: 80px;
  39         padding: 10px 0; }
  40       body #bighead .first-line .logo {
  41         float: left; }
  42         body #bighead .first-line .logo i {
  43           vertical-align: top;
  44           padding: 8px 15px;
  45           font-size: 50px; }
  46         body #bighead .first-line .logo img {
  47           padding: 10px;
  48           max-height: 70px;
  49           max-width: 70px; }
  50     body #bighead .navbar {
  51       background-color: #4285f4; }
  52       body #bighead .navbar a {
  53         color: #ffffff; }
  54         body #bighead .navbar a:hover {
  55           background-color: #5a95f5; }
  56   body #main-section {
  57     margin-bottom: 3rem;
  58     padding: 0; }
  59     body #main-section h2 {
  60       border-bottom: 1px dashed #ccc;
  61       padding-bottom: 10px; }
  62     body #main-section .title {
  63       font-size: 1.1em; }
  64     body #main-section .subtitle {
  65       font-size: .9em;
  66       white-space: nowrap;
  67       overflow: hidden;
  68       text-overflow: ellipsis; }
  69     body #main-section .column {
  70       padding: 1.2rem .75rem; }
  71     body #main-section .message {
  72       margin-top: 45px;
  73       box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
  74       body #main-section .message .message-header {
  75         font-weight: bold; }
  76       body #main-section .message .message-body {
  77         border: none; }
  78   body .media-content {
  79     overflow: inherit; }
  80   body .tag {
  81     color: #4285f4;
  82     background-color: #4285f4;
  83     position: absolute;
  84     top: 1rem;
  85     right: -0.3rem;
  86     width: 3px;
  87     overflow: hidden;
  88     transition: all 0.2s ease-out;
  89     padding: 0; }
  90   body .card {
  91     border-radius: 5px;
  92     border: none;
  93     box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
  94     transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; }
  95   body .card:hover {
  96     background-color: #FFFFFF;
  97     transform: translate(0, -3px); }
  98     body .card:hover .tag {
  99       width: auto;
 100       color: #ffffff;
 101       padding: 0 0.75em; }
 102   body .card-content {
 103     height: 85px;
 104     padding: 1.3rem; }
 105   body .footer {
 106     position: fixed;
 107     left: 0;
 108     right: 0;
 109     bottom: 0;
 110     padding: 1rem 0.5rem;
 111     text-align: left;
 112     background-color: #fafafa;
 113     border-top: 1px solid #F5F5F5; }
 114   body .search-bar {
 115     position: relative; }
 116     body .search-bar #search {
 117       border: none;
 118       background-color: #5f98f6;
 119       border-radius: 5px;
 120       padding: 2px 12px 2px 30px;
 121       margin: 10px 0;
 122       transition: all 100ms linear;
 123       color: #ffffff;
 124       height: 30px;
 125       width: 100px; }
 126       body .search-bar #search:focus {
 127         color: #000000;
 128         width: 250px;
 129         background-color: #ffffff; }
 130     body .search-bar .search-label::before {
 131       font-family: 'FontAwesome';
 132       position: absolute;
 133       top: 12px;
 134       left: 8px;
 135       content: "\f002";
 136       width: 20px;
 137       height: 20px; }
 138     body .search-bar:focus-within .search-label::before {
 139       color: #4a4a4a; }