dashboard/public/css/style.css

   1 body {
   2   width: 1920px;
   3   height: 1080px;
   4   overflow-x: hidden;
   5   overflow-y: auto;
   6 }
   7
   8 html {
   9   width: 1920px;
  10   height: 1080px;
  11   overflow-x: hidden;
  12   overflow-y: auto;
  13 }
  14
  15 body {
  16   margin: 0;
  17   background: url("../image/bg.png") no-repeat fixed;
  18   background-size: 1920px 1080px;
  19 }
  20
  21 #text-container {
  22   width: 1200px;
  23   color: #ffffff;
  24   padding-top: 50px;
  25   margin-left: 110px;
  26 }
  27
  28 #project-title {
  29   font: 800 60px 'arial';
  30   line-height: 70px;
  31 }
  32
  33 #project-main-text {
  34   font: 500 28px 'arial';
  35   line-height: 48px;
  36   margin-top: 20px;
  37 }
  38
  39 ul {
  40   list-style-image: url("../image/bullet.png");
  41 }
  42
  43 li {
  44   padding-left: 20px;
  45 }
  46
  47 .nobull {
  48   list-style: none;
  49   list-style-type: none;
  50   display: inline-block;
  51 }
  52
  53 .try-it-bullet {
  54   margin-left: -65px;
  55   position: absolute;
  56   font-size: 18px;
  57   font-family: 'arial';
  58   color: #FBB03B;
  59   -ms-transform: rotate(-20deg); /* IE 9 */
  60   -webkit-transform: rotate(-20deg); /* Safari */
  61   transform: rotate(-20deg);
  62 }
  63
  64 .shake-it {
  65   animation: shake 2s cubic-bezier(.36,.07,.19,.97) both infinite;
  66 }
  67
  68 @keyframes shake {
  69   10%, 90%      { transform: rotate(-20deg) }
  70   20%, 80%      { transform: rotate(20deg) }
  71   30%, 50%, 70% { transform: rotate(-20deg) }
  72   40%, 60%      { transform: rotate(20deg) }
  73 }
  74
  75 .blink {
  76   -webkit-animation: blink 2.0s linear infinite;
  77 }
  78 @-webkit-keyframes blink {
  79   0% { opacity: 1.0; }
  80   10% { opacity: 0.3; }
  81   40% { opacity: 1.0; }
  82   100% { opacity: 1.0; }
  83 /*    from { background-color: red;}
  84   to {background-color: green;}  */
  85 }
  86
  87 #diagram-container {
  88   width: 1735px;
  89   font: 800 36px 'arial';
  90   margin: 60px 0 0 70px;
  91 }
  92
  93 #diagram-bg {
  94   position: absolute;
  95   margin: 0 0 0 -20px;
  96   width: 1020px;
  97   height: 400px;
  98   background-color: #ffffff;
  99   opacity: 0.1;
 100 }
 101
 102 #diagram-title {
 103   font: 500 25px 'arial';
 104   color: #FBB03B;
 105   padding: 25px 0 0 15px;
 106 }
 107
 108 .d-text-tizen {
 109   color: #F47A0B;
 110 }
 111
 112 .d-text-st {
 113   color: #FBB03B;
 114 }
 115
 116 .d-text-tizen {
 117   text-shadow: 2px 2px 4px #113255;
 118 }
 119
 120 .d-text-st {
 121   text-shadow: 2px 2px 4px #113255;
 122 }
 123
 124 .caption-text {
 125   font: 500 18px 'arial';
 126   line-height: 1px;
 127   display: block;
 128 }
 129
 130 .caption-arrow {
 131   font: 500 18px 'arial';
 132   color: #A9ABAC;
 133   line-height: 1px;
 134 }
 135
 136 .arrow-01 {
 137   width: 51px;
 138   background: url("../image/arrow-01.png") center no-repeat;
 139 }
 140
 141 .arrow-02 {
 142   width: 46px;
 143   background: url("../image/arrow-02.png") no-repeat;
 144   background-position: center bottom;
 145   margin-bottom: -20px;
 146 }
 147
 148 .arrow-03 {
 149   width: 48px;
 150   background: url("../image/arrow-03.png") no-repeat;
 151   background-position: center top;
 152   margin-top: -20px;
 153 }
 154
 155 .arrow-04 {
 156   width: 67px;
 157   background: url("../image/arrow-04.png") center no-repeat;
 158 }
 159
 160 .arrow-05 {
 161   width: 305px;
 162   background: url("../image/arrow-05.png") center no-repeat;
 163 }
 164
 165 .arrow-06 {
 166   width: 473px;
 167   background: url("../image/arrow-06.png") center no-repeat;
 168 }
 169
 170 .arrow-04, .arrow-05, .arrow-06 {
 171   padding-top: 10px;
 172 }
 173
 174 .caption-text {
 175   margin-top:-10px;
 176 }
 177
 178 .diagram-main > div {
 179   display: inline-block;
 180   height: 80px;
 181   line-height: 80px;
 182   text-align: center;
 183   vertical-align: middle;
 184   margin-right: 15px;
 185 }
 186
 187 .two-line {
 188   line-height: 40px !important;
 189 }
 190
 191 #diagram-top {
 192   margin: 15px 0 0 330px;
 193 }
 194
 195 #diagram-middle {
 196   margin: 10px 0 0 30px;
 197 }
 198
 199 #diagram-bottom {
 200   margin: 30px 0 0 335px;
 201 }
 202
 203 #diagram-right {
 204   position: absolute;
 205   top: 490px;
 206   left: 1420px;
 207 }
 208
 209 #diagram-right > div {
 210   position: absolute;
 211 }
 212
 213 .arrow-07 {
 214   width: 129px;
 215   height: 361px;
 216   background: url("../image/arrow-07.png") center no-repeat;
 217   margin: 15px 0 0 -20px;
 218 }
 219
 220 .arrow-08 {
 221   width: 42px;
 222   height: 85px;
 223   background: url("../image/arrow-08.png") center no-repeat;
 224   margin: 400px 0 0 280px;
 225 }
 226
 227 #mobile {
 228   width: 131px;
 229   height: 261px;
 230   background: url("../image/mobile.png") center no-repeat;
 231   margin: 100px 0 0 250px;
 232   text-align: center;
 233   color: #ffffff;
 234   font: 800 18px 'arial';
 235 }
 236
 237 #mobile-detection {
 238   margin-top: 100px;
 239 }
 240
 241 .smaller-text {
 242   font-size: 13px;
 243   line-height: 10px;
 244 }
 245
 246 #mobile-caption {
 247   margin-top: 120px;
 248 }
 249
 250 #camera-container {
 251   position: absolute;
 252   top: 5px;
 253   left: 1100px;
 254 }
 255
 256 #camera-container > div, img {
 257   position: absolute;
 258 }
 259
 260 #camera-view-bg {
 261   z-index:-1;
 262   width: 878px;
 263   height: 658px;
 264   background-image: url("../image/shadow.png");
 265 }
 266
 267 #camera-view {
 268   width: 640px;
 269   height: 480px;
 270   left: 90px;
 271   top: 65px;
 272   background-image: url("../image/image.png");
 273   outline: 5px solid #FBB03B;
 274 }
 275
 276 #camera-view-caption {
 277   width: 878px;
 278   top: 560px;
 279   left: -15px;
 280 }
 281
 282 .image-caption {
 283   color: #8FC2F2;
 284   font: 800 15px 'arial';
 285   text-align: center;
 286 }
 287
 288 #canvas-container canvas {
 289   z-index: 10;
 290   position: absolute;
 291   left: 90px;
 292   top: 65px;
 293 }
 294
 295 #fps {
 296   font-weight: 800;
 297 }