Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- body {
- overflow: hidden;
- }
- :focus {
- outline: none;
- }
- #phone {
- display: none;
- position: absolute;
- bottom: 15px;
- right: 15px;
- font-family: Helvetica, Arial;
- font-size: 14px;
- width: 250px;
- height: 535px;
- border-radius: 43px;
- border: 1px solid #000;
- background-image: url('../img/phone.png');
- }
- #screen {
- background-image: url('../img/backgroundPhone.png');
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- width: 235px;
- height: 430px;
- overflow: hidden;
- }
- .status-bar {
- width: 100%;
- height: 16px;
- background-color: green;
- }
- .app {
- width: 100%;
- height: 414px;
- }
- .app-inner {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- max-height: 100%;
- padding: 5px 5px;
- overflow: hidden;
- }
- .status-bar {
- width: inherit;
- line-height: 18px;
- font-size: 12px;
- text-align: left;
- font-weight: bold;
- background: rgba(0, 0, 0, 0.9);
- color: #ddd;
- z-index: 101
- }
- .status-bar ul.signal {
- float: left;
- margin: 5px 5px 0 -35px;
- position: relative;
- height: 10px;
- width: 14px
- }
- .status-bar ul.signal li {
- float: left;
- display: block;
- width: 2px;
- margin: 0 1px 0 0;
- background: #ddd;
- position: absolute;
- bottom: 0
- }
- .status-bar ul.signal li:nth-child(1) {
- height: 2px
- }
- .status-bar ul.signal li:nth-child(2) {
- height: 3px;
- margin-left: 3px
- }
- .status-bar ul.signal li:nth-child(3) {
- height: 5px;
- margin-left: 6px
- }
- .status-bar ul.signal li:nth-child(4) {
- height: 7px;
- margin-left: 9px;
- background: #8a8a8a;
- }
- .status-bar ul.signal li:nth-child(5) {
- height: 9px;
- margin-left: 12px;
- background: #8a8a8a;
- }
- .status-bar ul.signal li.no-signal {
- height: 1px
- }
- .status-bar div.time {
- margin-top: -18px;
- margin-left: 100px;
- }
- .status-bar .battery {
- position: absolute;
- top: 4px;
- right: 5px;
- width: 16px;
- height: 9px;
- }
- .status-bar .battery .percentage {
- position: absolute;
- top: -4px;
- left: -40px
- }
- .status-bar .battery i {
- width: 1px;
- height: 3px;
- position: absolute;
- top: 2px;
- right: -3px;
- border: 1px solid #ddd
- }
- .status-bar .icons .right {
- position: absolute;
- width: 94px;
- height: 40px;
- top: -11px;
- right: 70px
- }
- /* App : Home */
- #app-home .menu-icon {
- width: 52px;
- height: 52px;
- padding: 2px;
- }
- #app-home .menu-icon .counter {
- position: relative;
- display: inline-block;
- background: #FF0000;
- border-radius: 90px;
- min-width: 16px;
- height: 16px;
- color: #FFF;
- text-align: center;
- margin-top: -50px;
- margin-left: 30px;
- padding: 1px;
- font-weight: bold;
- border: 1px solid #FFF;
- }
- #app-home .menu-icon-inner {
- transform: translateX(-50%);
- margin-left: 50%;
- width: 32px;
- height: 32px;
- border-radius: 5px;
- }
- #app-home .menu-icon-label {
- font-size: 0.7em;
- color: #FFF;
- margin-top: 2px;
- text-align: center;
- font-weight: bold;
- }
- #app-home .menu-icon i {
- width: 32px;
- height: 32px;
- margin-left: 16px;
- margin-top: 16px;
- transform: translate(-16px, -8px);
- color: #FFF;
- font-size: 1.2em;
- }
- #app-home .menu-icon-contacts .menu-icon-inner {
- background-color: #946A38;
- }
- #app-home .menu-icon-messages .menu-icon-inner {
- background-color: #23BE22;
- }
- #app-home .menu-icon-bank .menu-icon-inner {
- background-color: #1847A1;
- }
- #app-home .menu-icon-taxi .menu-icon-inner {
- background-color: #FF8B04;
- }
- #app-home .menu-icon-mecano .menu-icon-inner {
- background-color: #18AD8B;
- }
- #app-home .menu-icon-ambulance .menu-icon-inner {
- background-color: #CC0000;
- }
- #app-home .menu-icon-police .menu-icon-inner {
- background-color: #1A4B8B;
- }
- #app-home .menu-icon-sherif .menu-icon-inner {
- background-color: #1A4B8B;
- }
- #app-home .menu-icon-deepweb .menu-icon-inner {
- background-color: #5400FF;
- }
- #app-home .menu-icon-insurer .menu-icon-inner {
- background-color: #3A3ABF;
- }
- #app-home .menu-icon-lawyer .menu-icon-inner {
- background-color: #E4670C;
- }
- #app-home .menu-icon-unemployed .menu-icon-inner {
- background-color: #3B3B3B;
- }
- #app-home .menu-icon-cardealer .menu-icon-inner {
- background-color: #B500D0;
- }
- #app-home .menu-icon-grocer .menu-icon-inner {
- background-color: #0AB0E7;
- }
- #app-home .menu-icon-governor .menu-icon-inner {
- background-color: #168D03;
- }
- #app-home .menu-icon-realestateagent .menu-icon-inner {
- background-color: #C31244;
- }
- #app-home .menu-icon-journalist .menu-icon-inner {
- background-color: #C3A412;
- }
- #app-home .menu-icon-lscustom .menu-icon-inner {
- background-color: #3B2BD6;
- }
- #app-home .menu-icon-teamster .menu-icon-inner {
- background-color: #8C0073;
- }
- #app-home .menu-icon-tatoo .menu-icon-inner {
- background-color: #288018;
- }
- #app-home .menu-icon-leboncoin .menu-icon-inner {
- background-color: #D08A04;
- }
- /* App : Messages */
- #app-messages {
- color: #FFF;
- }
- #app-messages .contact-list {
- width: 100%;
- }
- #app-messages .contact {
- padding: 5px;
- width: 215px;
- }
- #app-messages .contact.selected .contact-name {
- color: #FF0000;
- font-weight: bold;
- }
- #app-messages .contact:nth-child(odd) {
- background-color: #3A3A3A;
- }
- #app-messages .contact:nth-child(even) {
- background-color: #000;
- }
- #app-messages .contact-name {
- display: inline-block;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
- #app-messages .unread {
- display: inline-block;
- border-radius: 90px;
- background-color: #9E0000;
- color: #FFF;
- min-width: 16px;
- min-height: 16px;
- padding: 3px;
- text-align: center;
- }
- /* App : Incoming Call */
- #app-incoming-call {
- background-color: #000;
- }
- #app-incoming-call .contact-infos {
- width: 100%;
- height: 50%;
- color: #FFF;
- }
- #app-incoming-call .contact-infos .contact-name {
- position: absolute;
- text-align: center;
- top: 25%;
- font-size: 2em;
- width: 100%;
- }
- #app-incoming-call .contact-infos .contact-number {
- position: absolute;
- text-align: center;
- top: 35%;
- font-size: 2em;
- width: 100%;
- }
- #app-incoming-call .contact-infos .contact-number:before {
- content: '#';
- }
- #app-incoming-call .contact-actions-wrapper {
- display: flex;
- flex-direction: row;
- align-items: center;
- width: 100%;
- height: 50%;
- position: absolute;
- bottom: 0;
- margin-left: -5px;
- }
- #app-incoming-call .contact-action {
- flex-basis: 50%;
- text-align: center;
- }
- #app-incoming-call .contact-action i {
- font-size: 3em;
- border-radius: 90px;
- width: 70px;
- height: 70px;
- line-height: 70px;
- color: #111;
- }
- #app-incoming-call .contact-action.action-accept i {
- background-color: #26a007;
- }
- #app-incoming-call .contact-action.action-deny i {
- background-color: #FF0000;
- }
- /* App : Contacts */
- #app-contacts {
- background-color: #000;
- color: #FFF;
- }
- #app-contacts .contact-actions div {
- padding: 5px;
- width: 215px;
- text-align: center;
- }
- #app-contacts .contact-actions div.selected {
- color: #FF0000;
- font-weight: bold;
- }
- #app-contacts .contact-list, #app-contacts .contact-me {
- width: 100%;
- }
- #app-contacts .contact {
- padding: 5px;
- width: 215px;
- }
- #app-contacts .contact.selected {
- color: #FF0000;
- font-weight: bold;
- }
- #app-contacts .contact-list .contact:nth-child(odd) {
- background-color: #3A3A3A;
- }
- #app-contacts .contact-list .contact:nth-child(even) {
- background-color: #000;
- }
- #app-contacts .contact-name, #app-contacts .contact-number {
- display: inline-block;
- }
- #app-contacts .contact-number {
- float: right;
- }
- #app-contacts .contact-number:before {
- content: '#';
- }
- /* App : Contact Add */
- #app-contact-add {
- background-color: #000;
- }
- #app-contact-add .add-contact-wrapper {
- width: 100%;
- }
- #app-contact-add .add-contact-wrapper div {
- width: 100%;
- }
- #app-contact-add .add-contact-wrapper div input {
- width: 100%;
- }
- /* App : Contact Actions */
- #app-contact-actions {
- background-color: #000;
- }
- #app-contact-actions .contact-infos {
- width: 100%;
- height: 50%;
- color: #FFF;
- }
- #app-contact-actions .contact-infos .contact-name {
- position: absolute;
- text-align: center;
- top: 25%;
- font-size: 2em;
- width: 100%;
- }
- #app-contact-actions .contact-infos .contact-number {
- position: absolute;
- text-align: center;
- top: 35%;
- font-size: 2em;
- width: 100%;
- }
- #app-contact-actions .contact-infos .contact-number:before {
- content: '#';
- }
- #app-contact-actions .contact-actions-wrapper {
- display: flex;
- flex-direction: row;
- align-items: center;
- width: 100%;
- height: 50%;
- position: absolute;
- bottom: 0;
- margin-left: -5px;
- }
- #app-contact-actions .contact-action.action-call {
- flex-basis: 50%;
- text-align: center;
- }
- #app-contact-actions .contact-action.action-call i {
- font-size: 3em;
- background-color: #26a007;
- border-radius: 90px;
- width: 70px;
- height: 70px;
- line-height: 70px;
- color: #111;
- }
- #app-contact-actions .contact-action.action-message {
- flex-basis: 50%;
- text-align: center;
- }
- #app-contact-actions .contact-action.action-message i {
- font-size: 3em;
- background-color: #0480F4;
- border-radius: 90px;
- width: 70px;
- height: 70px;
- line-height: 70px;
- color: #111;
- }
- /* App : Contact Action Call */
- @keyframes circle-light-1 {
- 0% {
- color: #B4CEFF;
- }
- 25% {
- color: #FFFFFF;
- }
- 50% {
- color: #005AFF;
- }
- 75% {
- color: #3079FF;
- }
- 100% {
- color: #6A9FFF;
- }
- }
- @keyframes circle-light-reverse-1 {
- 0% {
- color: #6A9FFF;
- }
- 25% {
- color: #3079FF;
- }
- 50% {
- color: #005AFF;
- }
- 75% {
- color: #FFFFFF;
- }
- 100% {
- color: #B4CEFF;
- }
- }
- @keyframes circle-light-2 {
- 0% {
- color: #3079FF;
- }
- 25% {
- color: #6A9FFF;
- }
- 50% {
- color: #B4CEFF;
- }
- 75% {
- color: #FFFFFF;
- }
- 100% {
- color: #005AFF;
- }
- }
- @keyframes circle-light-reverse-2 {
- 0% {
- color: #005AFF;
- }
- 25% {
- color: #FFFFFF;
- }
- 50% {
- color: #B4CEFF;
- }
- 75% {
- color: #6A9FFF;
- }
- 100% {
- color: #3079FF;
- }
- }
- @keyframes circle-light-3 {
- 0% {
- color: #005AFF;
- }
- 25% {
- color: #3079FF;
- }
- 50% {
- color: #6A9FFF;
- }
- 75% {
- color: #B4CEFF;
- }
- 100% {
- color: #FFFFFF;
- }
- }
- @keyframes circle-light-reverse-3 {
- 0% {
- color: #FFFFFF;
- }
- 25% {
- color: #B4CEFF;
- }
- 50% {
- color: #6A9FFF;
- }
- 75% {
- color: #3079FF;
- }
- 100% {
- color: #005AFF;
- }
- }
- #app-contact-action-call {
- background-color: #000;
- }
- #app-contact-action-call .contact-infos {
- width: 100%;
- height: 50%;
- color: #FFF;
- }
- #app-contact-action-call .contact-infos .contact-name {
- position: absolute;
- text-align: center;
- top: 25%;
- font-size: 2em;
- width: 100%;
- }
- #app-contact-action-call .contact-infos .contact-number {
- position: absolute;
- text-align: center;
- top: 35%;
- font-size: 2em;
- width: 100%;
- }
- #app-contact-action-call .contact-infos .contact-number:before {
- content: '#';
- }
- #app-contact-action-call .loader {
- width: 100%;
- height: 50%;
- }
- #app-contact-action-call .loader .circle {
- position: absolute;
- margin-left: 50%;
- transform: translateX(-50%);
- }
- #app-contact-action-call .loader .circle i {
- color: #005AFF;
- }
- #app-contact-action-call .loader .circle:nth-child(1) {
- top: 50%;
- }
- #app-contact-action-call .loader .circle:nth-child(1) i {
- animation: circle-light-1 1s infinite, circle-light-reverse-1 1s infinite;
- }
- #app-contact-action-call .loader .circle:nth-child(2) {
- top: 60%;
- animation: circle-light-2 1s infinite, circle-light-reverse-2 1s infinite;
- }
- #app-contact-action-call .loader .circle:nth-child(2) i {
- animation: circle-light-2 1s infinite, circle-light-reverse-2 1s infinite;
- }
- #app-contact-action-call .loader .circle:nth-child(3) {
- top: 70%;
- animation: circle-light-3 1s infinite, circle-light-reverse-3 1s infinite;
- }
- #app-contact-action-call .loader .circle:nth-child(3) i {
- animation: circle-light-3 1s infinite, circle-light-reverse-3 1s infinite;
- }
- #app-contact-action-call .loader .info {
- position: absolute;
- margin-left: 50%;
- transform: translateX(-50%);
- top: 85%;
- color: #FFF;
- font-size: 1.5em;
- text-align: center;
- }
- #app-contact-action-call.online .loader .circle {
- display: none;
- }
- /* App : Contact Action Message */
- #app-contact-action-message {
- background-color: #000;
- color: #FFF;
- }
- #app-contact-action-message .message-container {
- width: 100%;
- min-height: 305px;
- }
- #app-contact-action-message .message-container .time {
- width: 100%;
- text-align: center;
- font-size: 0.8em;
- }
- #app-contact-action-message .message-container .message {
- border: 1px solid #FFF;
- padding: 10px;
- margin: 10px;
- border-radius: 20px 20px 0 20px;
- background-color: #eaf5ff;
- width: 75%;
- margin-left: 10%;
- color: #000;
- }
- #app-contact-action-message .message-container .message.self {
- background-color: #0064b9;
- margin-left: 0;
- border-radius: 20px 20px 20px 0;
- color: #FFF;
- }
- #app-contact-action-message .message-input {
- width: 100%;
- }
- #app-contact-action-message .message-input textarea[name="message"] {
- width: 100%;
- height: 70px;
- }
- #app-contact-action-message .message-input textarea[name="message"].typing {
- border: 2px solid #337bff;
- }
- #app-contact-action-message .message-actions {
- height: 30px;
- }
- /* App : Bank */
- #app-bank {
- background-color: #FFF;
- }
- #app-bank .app-inner {
- height: 400px;
- }
- #app-bank .logo {
- width: 100%;
- text-align: center;
- margin-top: 20px;
- }
- #app-bank .balance {
- width: 100%;
- text-align: center;
- margin-top: 50px;
- color: #02900e;
- font-size: 2em;
- }
- #app-bank .balance:after {
- content: ' $';
- font-size: 0.6em;
- }
- #app-bank .balance.positive:before {
- content: '+ ';
- }
- #app-bank .balance.negative:before {
- content: '- ';
- }
- #app-bank .button-container {
- width: 100%;
- display: flex;
- flex-direction: column-reverse;
- align-items: center;
- }
- #app-bank .button {
- width: 80%;
- height: 40px;
- line-height: 40px;
- text-align: center;
- background-color: #061944;
- color: #FFF;
- bottom: 0;
- margin: 5px;
- }
- #app-bank .button.selected {}
- /* App : Bank Transfer */
- #app-bank-transfer {
- background-color: #FFF;
- color: #000;
- }
- #app-bank-transfer .contact {
- padding: 5px;
- width: 215px;
- }
- #app-bank-transfer .contact.selected {
- color: #0018FF;
- font-weight: bold;
- }
- #app-bank-transfer .contact:not(:last-child) {
- border-bottom: 1px solid #CCC;
- }
- /* App : Bank Transfer Menu */
- #app-bank-transfer-menu {
- background-color: #000;
- }
- #app-bank-transfer-menu .transfer-wrapper {
- width: 100%;
- margin-top: 200px;
- transform: translateY(-50%);
- }
- #app-bank-transfer-menu .transfer-wrapper div {
- width: 100%;
- }
- #app-bank-transfer-menu .transfer-wrapper div input {
- width: 100%;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement