css/phone_style.css

   1 @viewport{
   2         width: 720px;
   3         height: 1280px;
   4         user-zoom: fixed;
   5 }
   6
   7 .phoneBody {
   8         width: 720px;
   9         margin: 0;
  10         min-height: 1280px;
  11         height: auto !important;
  12         height: 100%;
  13         background-position: center top;
  14         background-repeat: no-repeat;
  15         background-size: 100% 100%;
  16 }
  17
  18 .inputPhoneNumberBox {
  19         padding-top: 195px;
  20         padding-left: 190px;
  21 }
  22
  23 .inputPhoneNumber {
  24         width: 215px;
  25         height: 75px;
  26         line-height: 75px;
  27         padding-right: 90px;
  28         padding-left: 30px;
  29         border: none;
  30         background-color: rgb(0, 0, 0);
  31         background-color: rgba(0, 0, 0, 0.2);
  32 }
  33
  34 .inputPhoneNumber:focus {
  35         outline: none;
  36 }
  37
  38 .inputPhoneNumberBox .deleteButton {
  39         display: inline-block;
  40         vertical-align: top;
  41         margin: 18px 0 0 -73px;
  42         padding: 0;
  43         width: 55px;
  44         height: 36px;
  45         background-position: center center;
  46         background-repeat: no-repeat;
  47         cursor: pointer;
  48 }
  49 .noPairedDevice{
  50         top:130px;
  51         left: 200px;
  52         margin-top: 20px;
  53         width:100%;
  54         height:100%;
  55 }
  56 .loadingSpinnerHistory {
  57         top:130px;
  58         width:100%;
  59         height:100%;
  60 }
  61 .numbersBox {
  62         margin-top: 7px;
  63         display: inline-block;
  64         width: 430px;
  65         font-size: 0;
  66         margin-bottom: 44px;
  67 }
  68
  69 .numberButton {
  70         float: left;
  71         padding: 0;
  72         padding-top: 20px;
  73         width: 105px;
  74         height: 80px;
  75         margin-right: 10px;
  76         margin-bottom: 10px;
  77         background-color: rgb(0, 0, 0);
  78         background-color: rgba(0, 0, 0, 0.2);
  79         text-transform: uppercase;
  80 }
  81
  82 .numberButtonLetters {
  83         margin-top: -3px;
  84 }
  85
  86 .specialChar {
  87         padding-top: 30px;
  88         height: 70px;
  89 }
  90
  91 .contactsCarousel {
  92         margin: 0;
  93         padding: 0;
  94         list-style: none;
  95         display: block;
  96 }
  97
  98 .contactsCarousel li {
  99         display: block;
 100         float: left;
 101 }
 102
 103 .carouselBox {
 104         width: 240px;
 105         height: 315px;
 106         margin: 0 15px 20px 0;
 107         white-space: normal;
 108         background-color: rgb(0, 0, 0);
 109         background-color: rgba(0, 0, 0, 0.2);
 110         box-shadow: 0 2px 30px rgba(0, 0, 0, .7);
 111         border-width: 1px;
 112         border-style: solid;
 113         text-transform: uppercase;
 114 }
 115
 116 .carouselEdgeBox {
 117         width: 240px;
 118         height: 315px;
 119         margin: 0 15px 20px 0;
 120         white-space: normal;
 121         visibility: hidden;
 122 }
 123
 124 .carouselPhotoArea {
 125         margin: 5px;
 126         text-align: center;
 127         border-style: solid;
 128         border-width: 0;
 129         border-bottom-width: 2px;
 130 }
 131
 132 .carouselPhotoBox {
 133         margin: 32px auto 28px auto;
 134         width: 120px;
 135         height: 120px;
 136         background-position: center center;
 137         background-repeat: no-repeat;
 138         background-size: 100% 100%;
 139 }
 140
 141 .carouselPhoto {
 142         width: 100%;
 143         height: 100%;
 144 }
 145
 146 .carouselInfoBox {
 147         width: 205px;
 148         text-align: left;
 149         white-space: nowrap;
 150         overflow: hidden;
 151         margin: 0 auto;
 152 }
 153
 154 .carouselCallContact {
 155         margin-top: 15px;
 156         margin-bottom: -5px;
 157 }
 158
 159 .carouselName {
 160         margin-top: 5px;
 161         margin-bottom: 10px;
 162 }
 163
 164 .carouselNumber {
 165         background-repeat: no-repeat;
 166         background-position: left center;
 167         width: 160px;
 168         padding-left: 45px;
 169         line-height: 38px;
 170         cursor: pointer;
 171 }
 172
 173 .callBox {
 174         position: absolute;
 175         margin: 0;
 176         margin-left: 61px;
 177         top: 770px;
 178         width: 720px;
 179         height: 160px;
 180         z-index: 100;
 181         -webkit-transition-timing-function: linear;
 182         -webkit-transition: left 1s;
 183         -moz-transition-timing-function: linear;
 184         -moz-transition: left 1s;
 185         -ms-transition-timing-function: linear;
 186         -ms-transition: left 1s;
 187         -o-transition-timing-function: linear;
 188         -o-transition: left 1s
 189 }
 190
 191 .callBoxShow {
 192         left: 0;
 193 }
 194
 195 .callBoxHidden {
 196         left: 720px;
 197 }
 198
 199 .callInfoBox {
 200         width: 300px;
 201         vertical-align: top;
 202         white-space: nowrap;
 203         overflow: hidden;
 204         display: inline-block;
 205 }
 206
 207 .callPhotoBox {
 208         width: 120px;
 209         height: 120px;
 210         display: inline-block;
 211         background-position: center center;
 212         background-repeat: no-repeat;
 213         background-size: 100% 100%;
 214 }
 215
 216 .callPhoto {
 217         width: 100%;
 218         height: 100%;
 219 }
 220
 221 .callDuration {
 222         margin-left: 60px;
 223         display: inline-block;
 224         vertical-align: top;
 225         padding-top: 46px;
 226 }
 227
 228 .inCallWith {
 229         margin-top: 11px;
 230 }
 231
 232 .callName {
 233         margin-top: 5px;
 234         text-transform: uppercase;
 235 }
 236
 237 .callControlsBox {
 238         width: 328px;
 239         display: inline-block;
 240         vertical-align: top;
 241         margin-top: 5px;
 242         margin-left: 13px;
 243         font-size: 0;
 244 }
 245
 246 .controlButton {
 247         display: inline-block;
 248         padding: 70px 0 13px 0;
 249         width: 140px;
 250         margin-right: 6px;
 251         margin-bottom: 8px;
 252         background-repeat: no-repeat;
 253         background-position: center 15px;
 254         box-shadow: 10px 10px 100px rgba(0, 0, 0, .7);
 255 }
 256
 257 #callVolumeControl {
 258         margin-left: 0;
 259         margin-top: 25px;
 260         width: 600px;
 261         height: 55px;
 262         top: 20px;
 263 }
 264
 265 .contactsCarouselBox {
 266         width: 765px;
 267         position: absolute;
 268         top: 770px;
 269         left: -16px;
 270         padding: 0;
 271         margin: 0;
 272         display: block;
 273         transition: left 1s;
 274         -webkit-transition: left 1s;
 275 }
 276
 277 .contactsCarouselBoxShow {
 278         left: -16px;
 279 }
 280
 281 .contactsCarouselBoxHide {
 282         left: -765px;
 283 }