toolkit/components/normandy/content/about-studies/about-studies.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 :root {
   6   --icon-background-color-1: #0A84FF;
   7   --icon-background-color-2: #008EA4;
   8   --icon-background-color-3: #ED00B5;
   9   --icon-background-color-4: #058B00;
  10   --icon-background-color-5: #A47F00;
  11   --icon-background-color-6: #FF0039;
  12   --icon-background-disabled-color: #737373;
  13   --body-text-disabled-color: #737373;
  14   --study-status-active-color: #058B00;
  15   --study-status-disabled-color: #737373;
  16 }
  17
  18 html,
  19 body,
  20 #app {
  21   height: 100%;
  22   width: 100%;
  23 }
  24
  25 button > .button-box {
  26   padding-inline: 10px;
  27 }
  28
  29 .about-studies-container {
  30   max-width: 960px;
  31   margin: 0 auto;
  32 }
  33
  34 .info-box {
  35   margin-bottom: 10px;
  36   text-align: center;
  37 }
  38
  39 .info-box-content {
  40   align-items: center;
  41   background: var(--in-content-box-info-background);
  42   border: 1px solid var(--in-content-border-color);
  43   display: inline-flex;
  44   padding: 10px 15px;
  45 }
  46
  47 .info-box-content > * {
  48   margin-right: 10px;
  49 }
  50
  51 .info-box-content > *:last-child {
  52   margin-right: 0;
  53 }
  54
  55 .study-list {
  56   list-style-type: none;
  57   margin: 0;
  58   padding: 0;
  59 }
  60
  61 .study {
  62   align-items: center;
  63   border-bottom: 1px solid var(--in-content-border-color);
  64   display: flex;
  65   flex-direction: row;
  66   padding: 10px;
  67 }
  68
  69 .study.disabled {
  70   color: var(--body-text-disabled-color);
  71 }
  72
  73 .study .study-status {
  74   color: var(--study-status-active-color);
  75   font-weight: bold;
  76 }
  77
  78 .study.disabled .study-status {
  79   color: var(--study-status-disabled-color);
  80 }
  81
  82 .study:last-child {
  83   border-bottom: none;
  84 }
  85
  86 .study > * {
  87   margin-right: 15px;
  88 }
  89
  90 .study > *:last-child {
  91   margin-right: 0;
  92 }
  93
  94 .study-icon {
  95   color: #FFF;
  96   flex: 0 0 40px;
  97   font-size: 26px;
  98   height: 40px;
  99   line-height: 40px;
 100   text-align: center;
 101   text-transform: capitalize;
 102 }
 103
 104 .study:nth-child(6n+0) .study-icon {
 105   background: var(--icon-background-color-1);
 106 }
 107
 108 .study:nth-child(6n+1) .study-icon {
 109   background: var(--icon-background-color-2);
 110 }
 111
 112 .study:nth-child(6n+2) .study-icon {
 113   background: var(--icon-background-color-3);
 114 }
 115
 116 .study:nth-child(6n+3) .study-icon {
 117   background: var(--icon-background-color-4);
 118 }
 119
 120 .study:nth-child(6n+4) .study-icon {
 121   background: var(--icon-background-color-5);
 122 }
 123
 124 .study:nth-child(6n+5) .study-icon {
 125   background: var(--icon-background-color-6);
 126 }
 127
 128 .study.disabled .study-icon {
 129   background: var(--icon-background-disabled-color);
 130 }
 131
 132 .study-details {
 133   flex: 1;
 134   overflow: hidden;
 135 }
 136
 137 .study-name {
 138   font-weight: bold;
 139 }
 140
 141 .study-header {
 142   margin-bottom: .3em;
 143 }
 144
 145 .study-header > * {
 146   margin-right: 5px;
 147 }
 148
 149 .study-header > *:last-child {
 150   margin-right: 0;
 151 }
 152
 153 .study-description code {
 154   background-color: rgb(128, 128, 128, 0.1);
 155   border-radius: 3px;
 156   box-sizing: border-box;
 157   color: var(--in-content-text-color);
 158   font-size: 85%;
 159   font-family: 'Fira Mono', 'mono', monospace;
 160   padding: .05em .4em;
 161 }
 162
 163 .study-actions {
 164   flex: 0 0;
 165 }
 166
 167 .opt-in-box {
 168   border-radius: 3px;
 169   padding: 10px;
 170   color: var(--study-status-active-color);
 171   border: 1px solid;
 172 }
 173
 174 .opt-in-box.opt-in-error {
 175   color: var(--text-color-error);
 176 }