| /** Variable and font definitions */ |
| |
| :root { |
| /* color definitions */ |
| --jami-light-blue: rgba(59, 193, 211, 0.3); |
| --jami-dark-blue: #004e86; |
| --jami-green: #219d55; |
| --jami-green-hover: #1f8b4c; |
| --jami-red: #dc2719; |
| --jami-red-hover: #b02e2c; |
| /* main properties */ |
| --bg-color: #ffffff; |
| /* navbar properties */ |
| --navbar-height: 40px; |
| --navbar-padding-top: 8px; |
| --navbar-padding-bottom: var(--navbar-padding-top); |
| /* message bar properties */ |
| --textarea-max-height: 150px; |
| --placeholder-text-color: #d3d3d3; |
| /* button properties */ |
| --action-icon-color: #00; |
| --deactivated-icon-color: #bebebe; |
| --action-icon-hover-color: #ededed; |
| --action-critical-icon-hover-color: rgba(211, 77, 59, 0.3); /* complementary color of jami 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(212, 212, 212, 1.0); |
| --invite-hover-color: white; |
| /* hairline properties */ |
| --hairline-color: #f0f0f0; |
| --hairline-thickness: 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 { |
| --messagebar-size: 57px; |
| margin: 0; |
| overflow: hidden; |
| background-color: var(--bg-color); |
| padding-bottom: var(--messagebar-size); |
| /* disable selection highlight because it looks very bad */ |
| -webkit-user-select: none; |
| |
| } |
| |
| ::-webkit-scrollbar-track { |
| background-color: var(--bg-color); |
| } |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| background-color: var(--bg-color); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background-color: #f0f0f0; |
| } |
| |
| /** 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); |
| display: flex; |
| } |
| |
| .hiddenState { |
| /* Used to hide navbar and message bar */ |
| display: none !important; |
| } |
| |
| .svgicon { |
| display: block; |
| margin: auto; |
| height: 70%; |
| } |
| |
| .nav-button { |
| width: 30px; |
| height: 30px; |
| margin: 8px; |
| padding: 2px; |
| display: flex; |
| cursor: pointer; |
| align-self: center; |
| border-radius: 16px; |
| } |
| |
| .nav-button.deactivated { |
| width: 30px; |
| height: 30px; |
| margin: 8px; |
| padding: 2px; |
| align-self: center; |
| display: flex; |
| border-radius: 16px; |
| cursor: auto; |
| } |
| |
| .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); |
| } |
| |
| #callButtons { |
| display: flex; |
| } |
| |
| #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(--bg-color); |
| position: absolute; |
| width: 100%; |
| padding-bottom: 10px; |
| |
| /* hairline */ |
| border-bottom: var(--hairline-thickness) solid var(--hairline-color); |
| } |
| |
| #invitation #invite_header { |
| margin: 10px; |
| list-style: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| /* enable selection (it is globally disabled in the body) */ |
| -webkit-user-select: auto; |
| } |
| |
| #invitation .sender_image { |
| width: 50px; |
| height: 50px; |
| } |
| |
| #invitation #actions { |
| margin-right: auto; |
| margin-left: auto; |
| list-style: none; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| |
| /* enable selection (it is globally disabled in the body) */ |
| -webkit-user-select: auto; |
| } |
| |
| #invitation #actions div { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 5px; |
| margin-left: 5px; |
| } |
| |
| #invitation #text { |
| text-align: center; |
| font: 11pt sans-serif; |
| |
| /* enable selection (it is globally disabled in the body) */ |
| -webkit-user-select: auto; |
| } |
| |
| #invite_contact_name { |
| font-weight: 500; |
| } |
| |
| /** Messaging bar */ |
| #sendMessage { |
| background-color: var(--bg-color); |
| display: flex; |
| overflow: hidden; |
| padding: 4px; |
| align-items: center; |
| position: fixed; |
| left: 0; |
| right: 0; |
| z-index: 500; |
| bottom: 0; |
| /* hairline */ |
| border-top: var(--hairline-thickness) solid var(--hairline-color); |
| } |
| |
| #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: var(--placeholder-text-color); |
| } |
| |
| /** Main chat view */ |
| |
| #lazyloading-icon { |
| margin: auto; |
| margin-bottom: 10px; |
| margin-top: 5px; |
| vertical-align: center; |
| width: 30px; |
| display: flex; |
| } |
| |
| #container { |
| position: relative; |
| height: 100%; |
| width: 100%; |
| margin: 0; |
| padding: 0; |
| display: flex; |
| flex-direction: column; |
| /* When there are not enough messages to occupy full height of the |
| container, make sure they are displayed at the bottom, not at the |
| top. */ |
| 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; |
| } |
| |
| #back_to_bottom_button_container { |
| position: absolute; |
| z-index: 1; |
| display: flex; |
| justify-content: center; |
| width: 100%; |
| height: 4em; |
| } |
| |
| #back_to_bottom_button { |
| visibility: hidden; |
| margin: auto; |
| font: 0.875em emoji; |
| text-align: center; |
| width: 10em; |
| border-radius: 2em; |
| background-color: var(--jami-dark-blue); |
| color: #fff; |
| padding: 0.5em; |
| box-shadow: 2px 2px 4px black; |
| opacity: 1; |
| overflow: hidden; |
| white-space: nowrap; |
| transition: opacity .5s ease, width .2s ease, color .1s ease .2s; |
| } |
| |
| #back_to_bottom_button:hover { |
| cursor: pointer; |
| } |
| |
| #back_to_bottom_button.fade { |
| opacity: 0; |
| width: 1em; |
| color: transparent; |
| transition: .2s opacity ease .1s, .2s width ease .1s, color .1s ease; |
| } |
| #back_to_bottom_button.fade:hover { |
| cursor: context-menu; |
| } |
| |
| #messages { |
| position: relative; |
| z-index: 0; |
| width: 100%; |
| overflow: hidden; |
| height: auto; |
| padding-top: 0.5em; |
| opacity: 1; |
| transition: 0.5s opacity; |
| } |
| |
| #messages.fade { |
| opacity: 0; |
| transition: none; |
| } |
| |
| #messages:hover { |
| overflow-y: overlay; |
| } |
| |
| .last_message { |
| /* The last message gets a bigger bottom padding so that it is not |
| "glued" to the message bar. */ |
| padding-bottom: 1.5em !important; |
| margin-top: 4px; |
| } |
| |
| /* General messages */ |
| |
| .internal_mes_wrapper { |
| max-width: 70%; |
| margin: 0px 0 0 0; |
| display: flex; |
| flex-direction: column; |
| /* If a message is smaller (in width) than the timestamp, do not fill |
| full width and pack message at the left. */ |
| align-items: flex-start; |
| align-content: flex-start; |
| } |
| |
| .message_out > .internal_mes_wrapper { |
| /* If message is in the outgoing direction, pack at the right. */ |
| align-items: flex-end; |
| align-content: flex-end; |
| } |
| |
| .message_wrapper { |
| max-width: calc(100% - 2em); |
| border-radius: 10px; |
| padding: 0.5em 1em 0.5em 1em; |
| position: relative; |
| display: flex; |
| flex-direction: row; |
| } |
| |
| .message_type_data_transfer .message_wrapper { |
| display: flex; |
| flex-direction: column; |
| padding: 0; |
| width: 450px; |
| max-width: none; |
| } |
| |
| .transfer_info_wrapper { |
| display: flex; |
| flex-direction: row; |
| } |
| |
| .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%; |
| /* Message sent by the user should be displayed at the right side of |
| the screen. */ |
| flex-direction: row-reverse; |
| } |
| |
| .message_delivery_status { |
| margin: 10px 10px; |
| color: #A0A0A0; |
| } |
| |
| .message_sender { |
| display: none; |
| } |
| |
| .sender_image, .invite_sender_image { |
| border-radius: 50%; |
| margin: 0px 10px 0px 10px; |
| } |
| |
| div.last_message > span { |
| margin: 0px 10px 0px 10px; |
| } |
| |
| .message_out .message_wrapper { |
| border-top-right-radius: 0; |
| transform-origin: top right; |
| } |
| |
| .message_in .message_wrapper { |
| border-top-left-radius: 0; |
| transform-origin: top left; |
| } |
| |
| .message_out .message_wrapper { |
| background-color: #cfd8dc; |
| } |
| |
| .message_in .message_wrapper { |
| background-color: #cfebf5; |
| } |
| |
| .message_in .sender_image, |
| .message_out .sender_image { |
| visibility: hidden; |
| } |
| |
| .message_in.last_of_sequence .sender_image, |
| .message_in.single_message .sender_image { |
| visibility: visible; |
| } |
| |
| .message_in.last_of_sequence .sender_image { |
| margin-top: 2px; |
| } |
| |
| .message_in.middle_of_sequence .sender_image { |
| margin-top: 0px; |
| } |
| |
| .generated_message.message_in .message_wrapper, |
| .generated_message.message_out .message_wrapper { |
| background-color: transparent !important; |
| border-radius: 0px !important; |
| } |
| |
| .single_message.message_in .message_wrapper, |
| .single_message.message_out .message_wrapper { |
| border-radius: 20px 20px 20px 20px !important; |
| } |
| |
| .last_of_sequence.message_in .message_wrapper { |
| border-radius: 4px 20px 20px 20px; |
| } |
| |
| .first_of_sequence.message_in .message_wrapper { |
| border-radius: 20px 20px 20px 4px; |
| } |
| |
| .middle_of_sequence.message_in .message_wrapper { |
| border-radius: 4px 20px 20px 5px; |
| } |
| |
| .last_of_sequence.message_out .message_wrapper { |
| border-radius: 20px 4px 20px 20px; |
| } |
| |
| .first_of_sequence.message_out .message_wrapper { |
| border-radius: 20px 20px 4px 20px; |
| } |
| |
| .middle_of_sequence.message_out .message_wrapper { |
| border-radius: 20px 5px 4px 20px; |
| } |
| |
| .middle_of_sequence .internal_mes_wrapper, |
| .last_of_sequence .internal_mes_wrapper, |
| .last_message .internal_mes_wrapper { |
| margin: 0px 0 0 0 !important; |
| } |
| |
| .message_out .sender_image { |
| margin: 8px; |
| } |
| |
| .first_of_sequence.message_out .internal_mes_wrapper, |
| .single_message.message_out .internal_mes_wrapper { |
| margin: 0px 0 0 0 !important; |
| } |
| |
| @-webkit-keyframes fade-in { |
| from { |
| opacity: 0; |
| } |
| |
| to { |
| opacity: 1; |
| } |
| } |
| |
| .sender_image_cell { |
| vertical-align: bottom; |
| min-width: 16px; |
| } |
| |
| .dummy_cell { |
| padding: 0; |
| } |
| |
| .timestamp_cell { |
| padding: 0; |
| max-width: 0px; |
| overflow: visible; |
| white-space: nowrap; |
| } |
| |
| .timestamp_cell_out { |
| padding: 0; |
| text-align: right; |
| direction: rtl; |
| max-width: 0px; |
| overflow: visible; |
| white-space: nowrap; |
| } |
| |
| table { |
| border-collapse: collapse; |
| border-spacing: 0 0px; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .timestamp { |
| display: inline-flex; |
| justify-content: flex-start; |
| align-self: stretch; |
| color: #333; |
| font-size: 10px; |
| padding: 5px; |
| } |
| |
| .timestamp_out { |
| flex-direction: row-reverse; |
| } |
| |
| .timestamp_action { |
| margin: auto; |
| padding: 0; |
| vertical-align: center; |
| opacity: 0; |
| transition: visibility 0.3s linear, opacity 0.3s linear; |
| } |
| |
| .message_type_contact .message_wrapper:hover .timestamp_action, |
| .message_type_call .message_wrapper:hover .timestamp_action { |
| opacity: 1; |
| } |
| |
| /* Ellipsis - dropdown menu */ |
| |
| input[type=checkbox] { |
| display: none; |
| } |
| |
| .menu_interaction { |
| margin: 5px; |
| padding: 10px; |
| padding-top: 0; |
| opacity: 0; |
| height: 20px; |
| transition: visibility 0.3s linear, opacity 0.3s linear; |
| } |
| |
| .message_type_contact .menu_interaction { |
| display: none; |
| visibility: hidden; |
| } |
| |
| .message_type_call .menu_interaction { |
| margin: auto; |
| padding: 0; |
| vertical-align: center; |
| } |
| |
| .message_type_call .menu_interaction .dropdown { |
| margin-top: -17px; |
| } |
| |
| .message:hover:not(.message_type_contact) .menu_interaction { |
| display: block; |
| opacity: 1; |
| } |
| |
| .dropdown { |
| display: none; |
| z-index: 1; |
| position: absolute; |
| background-color: #fff; |
| padding-top: 3px; |
| padding-bottom: 3px; |
| } |
| |
| .dropdown div { |
| color: #111; |
| padding: 10px; |
| } |
| |
| .dropdown div:hover { |
| background-color: #ddd; |
| } |
| |
| .showmenu:checked ~ .dropdown { |
| display: block; |
| } |
| |
| .menuoption { |
| user-select: none; |
| cursor: pointer; |
| } |
| |
| /* Buttons */ |
| |
| .flat-button { |
| border: 0; |
| border-radius: 5px; |
| transition: all 0.3s ease; |
| color: #f9f9f9; |
| padding: 10px 20px 10px 20px; |
| vertical-align: middle; |
| cursor: pointer; |
| flex: 1; |
| padding: 0; |
| } |
| |
| .left_buttons { |
| 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; |
| } |
| |
| /* Contact + Call interactions */ |
| .message_type_contact .message_wrapper, |
| .message_type_call .message_wrapper { |
| width: auto; |
| margin: auto; |
| display: flex; |
| flex-wrap: wrap; |
| background-color: var(--bg-color); |
| padding: 0; |
| } |
| |
| .message_type_contact .message_wrapper:before, |
| .message_type_call .message_wrapper:before { |
| 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 .internal_mes_wrapper { |
| padding: 0; |
| display: flex; |
| flex-wrap: wrap; |
| } |
| |
| .invite-btn-red { |
| transition: background-color 0.5s ease; |
| } |
| |
| .invite-btn-red:hover { |
| background: var(--jami-red); |
| } |
| |
| .invite-btn-red svg { |
| fill: var(--jami-red); |
| transition: fill 0.5s ease; |
| } |
| |
| .invite-btn-red:hover svg { |
| fill: var(--invite-hover-color); |
| } |
| |
| .invite-btn-green { |
| transition: background-color 0.5s ease; |
| } |
| |
| .invite-btn-green:hover { |
| background: var(--jami-green); |
| } |
| |
| .invite-btn-green svg { |
| fill: var(--jami-green); |
| transition: fill 0.5s ease; |
| } |
| |
| .invite-btn-green:hover svg { |
| fill: var(--invite-hover-color); |
| } |
| |
| .accept, .refuse { |
| border-radius: 50%; |
| cursor: pointer; |
| } |
| |
| .accept svg, |
| .refuse svg { |
| padding: 8px; |
| width: 24px; |
| height: 24px; |
| } |
| |
| .accept { |
| fill: var(--jami-green); |
| } |
| |
| .accept:hover { |
| fill: var(--invite-hover-color); |
| background: var(--jami-green-hover); |
| } |
| |
| .refuse { |
| fill: var(--jami-red); |
| } |
| |
| .refuse:hover { |
| fill: var(--invite-hover-color); |
| background: var(--jami-red-hover); |
| } |
| |
| .message_type_data_transfer .text { |
| text-align: left; |
| align-self: left; |
| padding: 1em; |
| } |
| |
| .truncate-ellipsis { |
| display: table; |
| table-layout: fixed; |
| width: 100%; |
| white-space: nowrap; |
| } |
| |
| .truncate-ellipsis > * { |
| display: table-cell; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .message_type_data_transfer .filename { |
| cursor: pointer; |
| font-size: 1.1em; |
| } |
| |
| .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 .internal_mes_wrapper { |
| padding: 0px; |
| } |
| |
| .message_text { |
| word-break: break-all; |
| word-wrap: hyphenate; |
| max-width: 100%; |
| } |
| |
| .message_text pre { |
| display: inline; |
| } |
| |
| pre { |
| font: inherit; |
| font-family: inherit; |
| font-size: inherit; |
| font-style: inherit; |
| font-variant: inherit; |
| font-weight: inherit; |
| margin: 0; |
| padding: 0; |
| white-space: pre-wrap; |
| } |
| |
| /* Media interactions */ |
| .media_wrapper img { |
| max-width: 800px; |
| max-height: 700px; |
| margin: 2px 0 2px 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; |
| } |
| |
| /* classic screens */ |
| @media screen and (max-width: 1920px), screen and (max-height: 1080px) { |
| .message_in { |
| padding-left: 15%; |
| } |
| |
| .message_out { |
| padding-right: 15%; |
| } |
| |
| .internal_mes_wrapper { |
| max-width: 60%; |
| } |
| |
| .media_wrapper img { |
| /* It is perfectly fine to specify max-widths in px when the |
| wrapper's max-width is in %, as long as the max-width in px |
| doesn't exceed the one in %. */ |
| max-width: 450px; |
| max-height: 450px; |
| } |
| |
| .menu_interaction { |
| margin: 5px; |
| padding: 2px; |
| height: 10px; |
| font-size: 0.7em; |
| transition: visibility 0.3s linear,opacity 0.3s linear; |
| } |
| } |
| |
| /* 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_contact, |
| .message_type_call { |
| max-width: 100%; |
| } |
| |
| .internal_mes_wrapper { |
| max-width: 90%; |
| } |
| |
| /* Media interactions */ |
| .media_wrapper img { |
| max-width: 200px; |
| max-height: 200px; |
| } |
| } |
| |
| @media screen and (max-width: 550px) { |
| .message_type_data_transfer .message_wrapper { |
| width: 250px; |
| } |
| } |
| |
| /* Special case */ |
| @media screen and (max-width: 350px) { |
| .sender_image { |
| 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_data_transfer .message_wrapper { |
| width: 200px; |
| } |
| } |