setup/res/template.css

   1 body {
   2   background: #eee;
   3 }
   4 /* Header */
   5 .civicrm-setup-header{
   6   height: 300px;
   7   width: 100%;
   8   display: block;
   9 }
  10
  11 .civicrm-setup-header .title{
  12   width: 25%;
  13   position: absolute;
  14   overflow: hidden;
  15   float: left;
  16   margin-left: 10%;
  17   margin-top: 50px;
  18   margin-right: 20%;
  19   display: inline-flex;
  20 }
  21
  22 .civicrm-setup-header h1{
  23   line-height: 35px;
  24   color: #ddd;
  25   position: relative;
  26   left: 400px;
  27   -webkit-animation: slide 1s forwards;
  28   -webkit-animation-delay: 0.5s;
  29   animation: slide 1s forwards;
  30   animation-delay: 0.5s;
  31
  32 }
  33
  34 @-webkit-keyframes slide{
  35     100% { left: 0; color:#555;}
  36 }
  37
  38 @keyframes slide{
  39     100% { left: 0; color: #555;}
  40 }
  41
  42
  43 .civicrm-setup-header hr{
  44   border-bottom: 2px solid #fff;
  45   border-top: 2px solid #ddd;
  46 }
  47
  48 .civicrm-setup-body .civicrm-logo {
  49   float: right;
  50   width: 30%;
  51   display: grid;
  52   margin-top: 50px;
  53   margin-right: 10%;
  54 }
  55
  56 .civicrm-setup-body .civicrm-logo img{
  57   width: 100%;
  58 }
  59
  60
  61 /* Header End */
  62
  63 .civicrm-setup-body #All {
  64   font-family: Arial, sans-serif;
  65   width: auto;
  66   margin: 0.5em auto;
  67   padding: 1em;
  68   border: 1px #ccc solid;
  69   border-radius: 10px;
  70   background: #fff;
  71   max-width: 1200px;
  72 }
  73
  74 .civicrm-setup-body form {
  75   margin: 3%;
  76 }
  77
  78 .civicrm-setup-body h2 {
  79   margin-top: 0;
  80   display: inline-block;
  81 }
  82
  83 .civicrm-setup-body li {
  84   padding-bottom: 1.5em;
  85 }
  86
  87 .civicrm-setup-block-components label span {
  88   float: left;
  89   width: 120px;
  90 }
  91
  92 .civicrm-setup-body p.error {
  93   padding: 0.5em;
  94   background-color: #c00;
  95   border: 1px #700 solid;
  96   color: white;
  97   clear: both;
  98 }
  99
 100 .civicrm-setup-body p.warning {
 101   padding: 0.5em;
 102   background-color: #e70;
 103   border: 1px #a70 solid;
 104   color: white;
 105   clear: both;
 106 }
 107
 108 .civicrm-setup-body p.good {
 109   padding: 0.5em;
 110   background-color: #0c0;
 111   border: 1px #070 solid;
 112   color: white;
 113   clear: both;
 114 }
 115
 116 .civicrm-setup-body p.error a {
 117   color: #FFF;
 118   font-weight: bold;
 119 }
 120
 121 .civicrm-setup-body p.tip {
 122   background: #ffb;
 123   padding: 0.5em;
 124   margin: 1em auto;
 125   width: 50%
 126 }
 127
 128 .civicrm-setup-body .advancedTip {
 129   border-collapse: collapse;
 130   font-size: 80%;
 131 }
 132
 133 .civicrm-setup-body .reqTable {
 134   border-collapse: collapse;
 135   width: 100%;
 136 }
 137
 138 .civicrm-setup-body .reqTable td {
 139   border: 1px #ccc solid;
 140 }
 141
 142 .civicrm-setup-body .reqSeverity-info { color: green; }
 143 .civicrm-setup-body .reqSeverity-warning { color: #a70; }
 144 .civicrm-setup-body .reqSeverity-error { color: #c00; }
 145
 146 .civicrm-setup-body .settingsTable {
 147   border-collapse: collapse;
 148   margin: 2em
 149 }
 150
 151 .civicrm-setup-body th, .civicrm-setup-body td {
 152   text-align: left;
 153   padding: 0.25em;
 154   vertical-align: top;
 155 }
 156
 157 .civicrm-setup-body .comp-box {
 158   height: 3.5em;
 159   width: 30%;
 160   display: inline-block;
 161   padding: 0.5em;
 162   padding-top: 15px;
 163   margin: 0.25em;
 164   border: 1px dashed #aaa;
 165   background: #eee;
 166   text-align: center;
 167 }
 168 .civicrm-setup-body .comp-box:hover { background: #ddd; cursor: hand; }
 169 .civicrm-setup-body .comp-box > span {  width: 100%;  }
 170 .civicrm-setup-body .comp-label {  font-size: 1.5em; }
 171 .civicrm-setup-body .comp-desc { font-style: italic; }
 172 .civicrm-setup-body .comp-cb:checked + label { background: #dfd; }
 173 .civicrm-setup-body .comp-cb:checked + label:hover { background: #cec; }
 174
 175 .civicrm-setup-body .optin-box {
 176   height: 3.5em;
 177   width: 45%;
 178   display: inline-block;
 179   padding: 0.5em;
 180   margin: 0.75em;
 181   border: 1px dashed #aaa;
 182   background: #eee;
 183   text-align: center;
 184 }
 185 .civicrm-setup-body .optin-box:hover { background: #ddd; cursor: hand; }
 186 .civicrm-setup-body .optin-box > span {  width: 100%; }
 187 .civicrm-setup-body .optin-label {  font-size: 1.5em; }
 188 .civicrm-setup-body .optin-desc { font-style: italic; }
 189 .civicrm-setup-body .optin-cb:checked + label { background: #dfd; }
 190 .civicrm-setup-body .optin-cb:checked + label:hover { background: #cec; }
 191
 192 .civicrm-setup-body .sr-only {
 193   position: absolute;
 194   width: 1px;
 195   height: 1px;
 196   padding: 0;
 197   margin: -1px;
 198   overflow: hidden;
 199   clip: rect(0, 0, 0, 0);
 200   border: 0;
 201 }
 202
 203 .civicrm-setup-body.has-errors .if-no-errors {display: none;}
 204 .civicrm-setup-body.has-warnings .if-no-warnings {display: none;}
 205 .civicrm-setup-body.has-problems .if-no-problems {display: none;}
 206 .civicrm-setup-body.has-no-problems .if-problems {display: none;}
 207
 208 .civicrm-setup-body .action-box {
 209   width: 100%;
 210   text-align: center;
 211   margin: 2em 0.5em;
 212 }
 213 .civicrm-setup-body input[type=submit] {
 214   padding:15px 25px;
 215   background:#82C459;
 216   color: white;
 217   border:0 none;
 218   cursor:pointer;
 219   -webkit-border-radius: 5px;
 220   border-radius: 5px;
 221   font-size: 20px;
 222 }
 223 .civicrm-setup-body input[type=submit]:hover {
 224   background: #60A237;
 225 }
 226
 227 .civicrm-setup-body .settingsTable input[type=text] { width: 80%; }
 228
 229
 230
 231 @media only screen and (max-width: 801px){
 232   .civicrm-setup-body .comp-box{
 233     width: 45%;
 234   }
 235 }
 236
 237 @media only screen and (max-width: 635px){
 238   .civicrm-setup-header .title{
 239     width: 45%;
 240     margin-left: 5%;
 241     margin-top: 30px;
 242   }
 243
 244   .civicrm-setup-body .settingsTable{
 245     display: block;
 246     overflow-x: auto;
 247     white-space: nowrap;
 248     width: 95%;
 249     margin: 10px 2% 10px 2%;
 250   }
 251
 252 }
 253
 254 @media only screen and (max-width: 503px){
 255   .civicrm-setup-body .comp-box{
 256     width: 95%;
 257   }
 258 }
 259