| /** Variable and font definitions */ |
| |
| :root { |
| /* color definitions */ |
| --ring-light-blue: rgba(59, 193, 211, 0.3); |
| --ring-dark-blue: #003b4e; |
| |
| /* main properties */ |
| --bg-color: #f2f2f2; /* same as macOS client */ |
| |
| /* navbar properties */ |
| --navbar-height: 40px; |
| --navbar-padding-top: 8px; |
| --navbar-padding-bottom: var(--navbar-padding-top); |
| |
| /* message bar properties */ |
| --textarea-max-height: 150px; |
| |
| /* button properties */ |
| --action-icon-color: var(--ring-dark-blue); |
| --deactivated-icon-color: #BEBEBE; |
| --action-icon-hover-color: var(--ring-light-blue); |
| --action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of ring light blue */ |
| --action-critical-icon-press-color: rgba(211, 77, 59, 0.5); |
| --action-critical-icon-color: #4E1300; |
| --non-action-icon-color: #212121; |
| --action-icon-press-color: rgba(59, 193, 211, 0.5); |
| |
| /* hairline properties */ |
| --hairline-color: #d9d9d9; |
| --hairline-thickness: 0.2px; |
| } |
| |
| @font-face { |
| font-family: emoji; |
| |
| /* Fonts for text outside emoji blocks */ |
| src: local('Open sans'), |
| local('Helvetica'), |
| local('Segoe UI'), |
| local('sans-serif'); |
| } |
| |
| @font-face { |
| font-family: emoji; |
| |
| src: local('Noto Color Emoji'), |
| local('Android Emoji'), |
| local('Twitter Color Emoji'); |
| |
| /* Emoji unicode blocks */ |
| unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF, U+2600-26FF; |
| } |
| |
| /** Body */ |
| |
| body { |
| --navbar-size: calc(var(--navbar-height) + var(--navbar-padding-top) + var(--navbar-padding-bottom)); |
| --messagebar-size: 57px; /* FIXME clean this up */ |
| |
| margin: 0; |
| overflow: hidden; |
| background-color: var(--bg-color); |
| padding-top: var(--navbar-size); |
| padding-bottom: var(--messagebar-size); |
| |
| /* disable selection highlight because it looks very bad */ |
| -webkit-user-select: none; |
| } |
| |
| /** Navbar */ |
| |
| .navbar-wrapper { |
| /* on top, over everything and full width */ |
| position: fixed; |
| left:0; right:0; |
| z-index: 500; |
| top: 0; |
| } |
| |
| #navbar { |
| background-color: var(--bg-color); |
| padding-right: 8px; |
| padding-left: 8px; |
| padding-top: var(--navbar-padding-top); |
| padding-bottom: var(--navbar-padding-bottom); |
| height: var(--navbar-height); |
| overflow: hidden; |
| align-items: center; |
| |
| /* takes whole width */ |
| left:0; right:0; |
| |
| /* hairline */ |
| border-bottom: var(--hairline-thickness) solid var(--hairline-color); |
| } |
| |
| #navbar.hiddenState { |
| visibility: hidden; |
| } |
| |
| .svgicon { |
| display: block; |
| margin: auto; |
| height: 100%; |
| } |
| |
| .nav-button { |
| width: 40px; |
| height: 40px; |
| align-self: center; |
| display: flex; |
| cursor: pointer; |
| border-radius: 50%; |
| } |
| |
| .nav-button.deactivated { |
| width: 40px; |
| height: 40px; |
| align-self: center; |
| display: flex; |
| border-radius: 50%; |
| cursor: auto; |
| } |
| |
| .nav-right { |
| float: right; |
| } |
| |
| .nav-left { |
| float: left; |
| } |
| |
| #nav-contactid { |
| margin: 0px; |
| margin-left: 5px; |
| padding: 0px; |
| height: 100%; |
| font-family: emoji; |
| |
| /* enable selection (it is globally disabled in the body) */ |
| -webkit-user-select: auto; |
| } |
| |
| #nav-contactid.oneEntry { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| #nav-contactid-alias { |
| font-size: 14px; |
| font-weight: bold; |
| margin: 5px 0px 3px; |
| } |
| |
| #nav-contactid-bestId { |
| font-size: 11px; |
| } |
| |
| .oneEntry #nav-contactid-bestId { |
| visibility: hidden; |
| } |
| |
| .action-button svg { |
| fill: var(--action-icon-color); |
| } |
| |
| .action-button.deactivated svg { |
| fill: var(--deactivated-icon-color); |
| } |
| |
| .non-action-button svg { |
| fill: var(--non-action-icon-color); |
| } |
| |
| .non-action-button:hover, .action-button:hover { |
| background: var(--action-icon-hover-color); |
| } |
| |
| .non-action-button:active, .action-button:active { |
| background: var(--action-icon-press-color); |
| } |
| |
| .action-button.deactivated:hover, .action-button.deactivated:active { |
| background: none; |
| } |
| |
| .action-critical-button svg { |
| fill: var(--action-critical-icon-color); |
| } |
| |
| .action-critical-button:hover { |
| background: var(--action-critical-icon-hover-color); |
| } |
| |
| .action-critical-button:active { |
| background: var(--action-critical-icon-press-color); |
| } |
| |
| #navbar #addBannedContactButton, #navbar #addToConversationsButton { |
| display: none; |
| } |
| |
| #navbar.onBannedState #addToConvButton, #navbar.onBannedState #callButtons, #navbar.onBannedState #addToConversationsButton { |
| display: none; |
| } |
| |
| #navbar.onBannedState #addBannedContactButton { |
| display: flex; |
| } |
| |
| /** Invitation bar */ |
| |
| #invitation { |
| visibility: hidden; |
| background: var(--ring-light-blue); |
| position: absolute; |
| width: 100%; |
| |
| /* hairline */ |
| border-bottom: var(--hairline-thickness) solid var(--hairline-color); |
| } |
| |
| #actions |
| { |
| margin: 10px; |
| list-style: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .invitation-button, |
| .flat-button { |
| margin: 5px; |
| border: 0; |
| border-radius: 5px; |
| transition: all 0.3s ease; |
| color: #f9f9f9; |
| padding: 10px 20px 10px 20px; |
| vertical-align: middle; |
| cursor: pointer; |
| } |
| |
| .button-green { |
| background: #27ae60; |
| } |
| |
| .button-green:hover { |
| background: #1f8b4c; |
| } |
| |
| .button-red { |
| background: #dc3a37; |
| } |
| |
| .button-red:hover { |
| background: #b02e2c; |
| } |
| |
| #invitation #text h1 { |
| font-size: 1.5em; |
| } |
| |
| #invitation #text { |
| text-align: center; |
| width: 90%; |
| margin: auto; |
| margin-top: 10px; |
| font-size: 0.8em; |
| } |
| |
| /** Messaging bar */ |
| |
| #sendMessage { |
| background-color: var(--bg-color); |
| display: flex; |
| position: relative; |
| padding-right: 10px; |
| padding-left: 8px; |
| overflow: hidden; |
| padding-top: 8px; |
| padding-bottom: 8px; |
| align-items: center; |
| |
| position: fixed; |
| left:0; right:0; |
| z-index: 500; |
| bottom: 0; |
| /* hairline */ |
| border-top: var(--hairline-thickness) solid var(--hairline-color); |
| } |
| |
| #sendMessage.hiddenState { |
| visibility: hidden; |
| } |
| |
| #message { |
| font-family: emoji; |
| flex: 1; |
| background-color: var(--bg-color); |
| border: 0; |
| overflow-y: scroll; |
| color: black; |
| max-height: var(--textarea-max-height); |
| margin-right: 10px; |
| resize: none; |
| |
| /* enable selection (it is globally disabled in the body) */ |
| -webkit-user-select: auto; |
| } |
| |
| #message:focus, |
| #message.focus { |
| outline: none; |
| } |
| |
| #container[disabled] { |
| background-color: #ccc; |
| } |
| |
| input[placeholder], [placeholder], *[placeholder] { |
| color: #d3d3d3; |
| } |
| |
| /** Main chat view */ |
| |
| #container { |
| position: relative; |
| height: 100%; |
| width: 100%; |
| display: flex; |
| flex-direction: column; |
| margin: 0; |
| padding: 0; |
| justify-content: flex-end; |
| } |
| |
| a:link { |
| text-decoration: none; |
| color: #0e649b; |
| transition: all 0.2s ease-in-out; |
| border-bottom: dotted 1px; |
| } |
| |
| a:hover { |
| border: 0; |
| } |
| |
| #messages { |
| position: relative; |
| z-index: 0; |
| width: 100%; |
| overflow-y: scroll; |
| height: auto; |
| padding-top: 0.5em; |
| padding-bottom: 1em; |
| } |
| |
| /* General messages */ |
| |
| .wc { |
| will-change: transform; |
| } |
| |
| .message_wrapper { |
| transform: scale(0); |
| max-width: 70%; |
| margin: 8px 0 0 0; |
| display: inline-block; |
| padding: 1em; |
| border-radius: 10px; |
| position: relative; |
| -webkit-animation: talk; |
| -webkit-animation-duration: 0.3s; |
| -webkit-animation-delay: 0.1s; |
| -webkit-animation-fill-mode: forwards; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .message { |
| font: 0.875em emoji; |
| margin: 0; |
| display: flex; |
| justify-content: flex-start; |
| align-items: top; |
| overflow: hidden; |
| |
| /* enable selection (it is globally disabled in the body) */ |
| -webkit-user-select: auto; |
| } |
| |
| .message_in { |
| padding-left: 25%; |
| } |
| |
| .message_out { |
| padding-right: 25%; |
| flex-direction: row-reverse; |
| } |
| |
| .message_in + .message_in .sender_image { |
| opacity: 0; |
| } |
| |
| .message_out + .message_out .sender_image { |
| opacity: 0; |
| } |
| |
| .message_in > .message_wrapper:before { |
| content: ""; |
| width: 10px; |
| height: 10px; |
| position: absolute; |
| left: -10px; |
| top: 0; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M10,0 L0,0 C10,0 10,10 10,10' fill='%23fdfdfd'/%3E %3C/svg%3E"); |
| transform-origin: top left; |
| } |
| |
| .message_in + .message_in > .message_wrapper:before { |
| display: none; |
| } |
| |
| .message_out + .message_out > .message_wrapper:after { |
| display: none; |
| } |
| |
| .message_out > .message_wrapper:after { |
| content: ""; |
| width: 10px; |
| height: 10px; |
| position: absolute; |
| right: -10px; |
| top: 0; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E %3Cpath d= 'M0,0 L10,0 C0,0 0,10 0,10' fill='%23cfd8dc'/%3E %3C/svg%3E"); |
| transform-origin: top right; |
| } |
| |
| .message_delivery_status { |
| margin: 10px 10px; |
| color: #A0A0A0; |
| opacity: 0; |
| -webkit-animation-name: fade-in; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-timing-function: ease-in-out; |
| -webkit-animation-delay: 0.4s; |
| -webkit-animation-fill-mode: forwards; |
| transition: opacity 0.5s ease-in-out; |
| } |
| |
| .message_sender { |
| display: none; |
| } |
| |
| .sender_image { |
| border-radius: 50%; |
| transition: transform 0.2s ease-in-out; |
| margin: 10px; |
| } |
| |
| .message_in .sender_image { |
| -webkit-animation-name: enter-stage-left; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .message_out .sender_image { |
| -webkit-animation-name: enter-stage-right; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| @-webkit-keyframes enter-stage-left { |
| from { |
| transform: translateX(-100%); |
| } |
| to { |
| transform: translateX(0); |
| } |
| } |
| |
| @-webkit-keyframes enter-stage-right { |
| from { |
| transform: translateX(100%); |
| } |
| to { |
| transform: translateX(0); |
| } |
| } |
| |
| .message_out > .message_wrapper { |
| background-color: #cfd8dc; |
| border-top-right-radius: 0; |
| transform-origin: top right; |
| } |
| |
| .message_out + .message_out > .message_wrapper { |
| border-top-right-radius: 10px; |
| } |
| |
| .message_in > .message_wrapper { |
| background-color: #fdfdfd; |
| border-top-left-radius: 0; |
| transform-origin: top left; |
| } |
| |
| .message_in + .message_in > .message_wrapper { |
| border-top-left-radius: 10px; |
| } |
| |
| |
| @-webkit-keyframes fade-in { |
| from { |
| opacity: 0; |
| } |
| to { |
| opacity: 1; |
| } |
| } |
| |
| @-webkit-keyframes talk { |
| from { |
| transform: scale(0); |
| } |
| to { |
| transform: scale(1); |
| } |
| } |
| |
| .timestamp { |
| display: flex; |
| justify-content: flex-start; |
| color: #333; |
| font-size: 10px; |
| padding: 5px; |
| } |
| |
| .timestamp_out { |
| flex-direction: row-reverse; |
| } |
| |
| /* Buttons */ |
| |
| .flat-button { |
| flex: 1; |
| padding: 0; |
| } |
| |
| .left_buttons { |
| display: flex; |
| align-self: center; |
| max-width: 90px; |
| padding-left: 1em; |
| } |
| |
| /* Status */ |
| |
| .status_circle { |
| fill: #A0A0A0; |
| -webkit-animation: circle-dance; |
| -webkit-animation-duration: 0.8s; |
| -webkit-animation-iteration-count: infinite; |
| -webkit-animation-direction: alternate; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .anim-first { |
| -webkit-animation-delay: 0.7s; |
| } |
| |
| .anim-second { |
| -webkit-animation-delay: 0.9s; |
| } |
| |
| .anim-third { |
| -webkit-animation-delay: 1.1s; |
| } |
| |
| @-webkit-keyframes circle-dance { |
| 0%,50% { |
| -webkit-transform: translateY(0); |
| fill: #A0A0A0; |
| } |
| 100% { |
| -webkit-transform: translateY(-8px); |
| fill: #000; |
| } |
| } |
| |
| .status-x { |
| stroke-dasharray: 12; |
| stroke-dashoffset: 12; |
| -webkit-animation: dash-x; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-fill-mode: forwards; |
| -webkit-animation-timing-function: ease-in-out; |
| } |
| |
| .x-first { |
| -webkit-animation-delay: 0.7s; |
| } |
| |
| .x-second { |
| -webkit-animation-delay: 0.9s; |
| } |
| |
| @-webkit-keyframes dash-x{ |
| from { |
| stroke-dashoffset: 12; |
| } |
| to { |
| stroke-dashoffset: 0; |
| } |
| } |
| |
| /* Contact + Call interactions */ |
| .message_type_contact .message_wrapper, |
| .message_type_call .message_wrapper { |
| width: auto; |
| margin-left: 30%; |
| margin-right: 30%; |
| display: flex; |
| flex-wrap: wrap; |
| background-color: #f2f2f2; |
| padding: 0; |
| } |
| |
| .message_type_contact .message_wrapper:before, |
| .message_type_call .message_wrapper:before { |
| display: none; |
| } |
| |
| .message_type_call .message_wrapper:after, |
| .message_type_contact .message_wrapper:after { |
| display: none; |
| } |
| |
| .message_type_contact .text, |
| .message_type_call .text { |
| align-self: center; |
| font-size: 1.2em; |
| padding: 1em; |
| } |
| |
| /* file interactions */ |
| |
| .message_type_data_transfer .message_wrapper { |
| padding: 0; |
| width: 30%; |
| display: flex; |
| flex-wrap: wrap; |
| } |
| |
| .accept, .refuse { |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| |
| .accept svg, |
| .refuse svg { |
| padding: 8px; |
| width: 24px; |
| height: 24px; |
| } |
| |
| .accept { |
| fill: #219d55; |
| } |
| |
| .accept:hover { |
| fill: white; |
| background: #219d55; |
| } |
| |
| .refuse { |
| fill: #dc2719; |
| } |
| |
| .refuse:hover { |
| fill: white; |
| background: #dc2719; |
| } |
| |
| .message_type_data_transfer .text { |
| padding: 1em; |
| text-align: left; |
| align-self: left; |
| max-width: calc(100% - 180px); |
| } |
| |
| .message_type_data_transfer .filename { |
| cursor: pointer; |
| font-size: 1.1em; |
| overflow: hidden; |
| } |
| |
| .message_type_data_transfer .informations { |
| color: #555; |
| font-size: 0.8em; |
| } |
| |
| .message_progress_bar { |
| width: 100%; |
| height: 1em; |
| position: relative; |
| overflow: hidden; |
| background-color: #eee; |
| border-radius: 0; |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; |
| } |
| |
| .message_progress_bar > span { |
| display: inline; |
| height: 100%; |
| background-color: #01a2b8; |
| position: absolute; |
| overflow: hidden; |
| } |
| |
| /* text interactions */ |
| |
| .message_type_text .message_wrapper { |
| max-width: 40%; |
| } |
| |
| .message_type_text .message_text { |
| padding: 0px; |
| } |
| |
| .message_text { |
| hyphens: auto; /* When webkitgtk+ will supports this, intelligent word-breaking */ |
| word-break: break-word; |
| word-wrap: break-word; |
| display: block; |
| } |
| |
| pre { |
| font : inherit; |
| font-family : inherit; |
| font-size : inherit; |
| font-style : inherit; |
| font-variant : inherit; |
| font-weight : inherit; |
| margin: 0; |
| padding: 0; |
| } |
| |
| /* Media interactions */ |
| .media_wrapper img { |
| max-width: 800px; |
| max-height: 700px; |
| margin: 5px 0 0 0; |
| border-radius: 10px; |
| } |
| |
| .playVideo { |
| background-color: rgba(0, 0, 0, 0.6); |
| height: 50px; |
| width: 50px; |
| border-radius: 5px; |
| float: right; |
| position: absolute; |
| top: calc(50% - 25px); |
| left: calc(50% - 25px); |
| z-index: 3; |
| } |
| |
| .containerVideo { |
| width: 100%; |
| position: relative; |
| } |
| |
| .playVideo svg { |
| height: 40px; |
| width: 40px; |
| margin: 5px; |
| } |
| |
| /* Text interaction */ |
| .failure, |
| .sending { |
| margin: 10px 10px; |
| color: #A0A0A0; |
| opacity: 0; |
| -webkit-animation-name: fade-in; |
| -webkit-animation-duration: 0.2s; |
| -webkit-animation-timing-function: ease-in-out; |
| -webkit-animation-delay: 0.4s; |
| -webkit-animation-fill-mode: forwards; |
| transition: opacity 0.5s ease-in-out; |
| } |
| |
| /* Classic screens */ |
| @media screen and (max-width: 1920px), screen and (max-height: 1080px) { |
| .message_in { |
| padding-left: 15%; |
| } |
| |
| .message_out { |
| padding-right: 15%; |
| } |
| |
| .message_type_text .message_wrapper { |
| max-width: 60%; |
| } |
| |
| /* File interactions */ |
| .message_type_data_transfer .message_wrapper { |
| width: 40%; |
| } |
| |
| /* Media interactions */ |
| .media_wrapper img { |
| max-width: 450px; |
| max-height: 450px; |
| } |
| } |
| |
| /* lower resolutions */ |
| @media screen and (max-width: 1000px), screen and (max-height: 480px) { |
| .message_in { |
| padding-left: 0; |
| } |
| |
| .message_out { |
| padding-right: 0; |
| } |
| |
| .message_type_text .message_wrapper { |
| max-width: 90%; |
| } |
| |
| /* File interactions */ |
| .message_type_data_transfer .message_wrapper { |
| width: 70%; |
| } |
| |
| /* Media interactions */ |
| .media_wrapper img { |
| max-width: 200px; |
| max-height: 200px; |
| } |
| } |
| |
| /* Special case */ |
| @media screen and (max-width: 300px) { |
| .sender_image { |
| visibility: hidden; |
| display: none; |
| } |
| |
| /* File interactions */ |
| .message_type_data_transfer .left_buttons { |
| max-width: 100%; |
| } |
| |
| .message_type_data_transfer .text { |
| max-width: 100%; |
| padding-left: 0; |
| } |
| } |
| |
| .message_type_contact .message_wrapper:hover .timestamp_action, |
| .message_type_call .message_wrapper:hover .timestamp_action { |
| opacity: 1; |
| } |
| |
| .timestamp_action { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| opacity:0; |
| transition:visibility 0.3s linear,opacity 0.3s linear; |
| } |