css/phone_style.css

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