1.WrapperMessage-hoverBox { 2 padding-bottom: 3px; 3 padding-top: 3px; 4 padding-left: 56px; 5 padding-right: 16px; 6 display: flex; 7 flex-direction: column; 8 position: relative; 9 width: 100%; 10} 11.WrapperMessage-systemMessage { 12 padding-left: 0; 13} 14.WrapperMessage-noOverflow { 15 overflow: hidden; 16} 17.WrapperMessage-hoverBox .WrapperMessage-buttons { 18 display: none; 19 flex-direction: row; 20 justify-content: flex-end; 21 margin-left: 0; 22} 23.WrapperMessage-hoverBox:hover .WrapperMessage-buttons, 24.WrapperMessage-decorated.active .WrapperMessage-buttons { 25 display: flex; 26 flex-direction: row; 27 justify-content: flex-end; 28 margin-left: 0; 29} 30.WrapperMessage-hoverColor:hover { 31 background-color: #ebf2fc; 32} 33.WrapperMessage-decorated.active { 34 background-color: #ebf2fc; 35} 36.darkMode .WrapperMessage-hoverColor:hover { 37 background-color: #101010; 38} 39.darkMode .WrapperMessage-decorated.active { 40 background-color: #101010; 41} 42.WrapperMessage-author { 43 padding-left: 0; 44 padding-top: 8px; 45} 46.WrapperMessage-hoverBox .WrapperMessage-emojiButton { 47 transition: box-shadow 0.1s ease-out; 48} 49.WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton { 50 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); 51} 52.darkMode .WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton { 53 box-shadow: none; 54} 55.WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton.noShadow, 56.WrapperMessage-hoverBox:hover .WrapperMessage-emojiButton:active { 57 box-shadow: none; 58} 59.WrapperMessage-hoverBox .WrapperMessage-newEmojiButton { 60 visibility: hidden; 61} 62.WrapperMessage-hoverBox:hover .WrapperMessage-newEmojiButton { 63 visibility: visible; 64} 65.WrapperMessage-hoverBox:hover .WrapperMessage-emojiRow { 66 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.08); 67} 68.WrapperMessage-centered { 69 background-color: #fff75a; 70} 71.ReplyBox:hover { 72 background-color: white; 73} 74.darkMode .ReplyBox:hover { 75 background-color: rgba(24, 45, 110, 0.5); 76} 77.WrapperMessage-hoverBox:hover .sendingStatus { 78 visibility: hidden; 79} 80.darkMode .WrapperMessage-centered { 81 background-color: #e0d733; 82} 83.darkMode .WrapperMessage-centered .text_Body { 84 color: #101010; 85} 86.darkMode .WrapperMessage-centered:hover .text_BodySmallBold { 87 /* author username */ 88 color: rgba(255, 255, 255, 0.85) !important; 89} 90.darkMode .WrapperMessage-centered:hover .text_Body { 91 /* message text */ 92 color: rgba(255, 255, 255, 0.85) !important; 93} 94.darkMode .WrapperMessage-centered:hover .text_BodyTiny { 95 /* timestamp */ 96 color: rgba(255, 255, 255, 0.4) !important; 97} 98.darkMode .WrapperMessage-centered:hover .ReplyBox .text_BodySemibold { 99 /* reply author username */ 100 color: rgba(255, 255, 255, 0.6) !important; 101} 102.darkMode .WrapperMessage-centered:hover .ReplyBox .text_BodySmall { 103 /* reply message text */ 104 color: rgba(255, 255, 255, 0.4) !important; 105} 106.darkMode .WrapperMessage-centered:hover .explodingTimeContainer { 107 background-color: rgba(255, 255, 255, 0.85) !important; 108} 109.darkMode .WrapperMessage-centered:hover .explodingTimeText { 110 color: rgba(0, 0, 0, 0.85) !important; 111} 112.darkMode .WrapperMessage-centered:hover .explodingTimeIcon { 113 color: rgba(255, 255, 255, 0.85) !important; 114} 115