Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .chat-container {
- background-color: #343a40;
- padding-top: 56px;
- display: flex;
- height: 100vh;
- }
- .chatroom-container {
- display: flex;
- flex: 1;
- flex-direction: column;
- }
- .chatroom-header {
- background-color: #343a40;
- padding: 8px;
- display: flex;
- align-items: center;
- border-top: 1px solid gray;
- border-bottom: 1px solid gray;
- }
- .chatroom-header-title {
- padding: 5px 10px;
- color: white;
- }
- .message-list {
- background-color: #343a40;
- height: calc(100vh - 114px);
- padding: 10px;
- display: flex;
- flex-direction: column-reverse;
- overflow: scroll;
- position: relative;
- }
- .message-list::-webkit-scrollbar-track {
- background: #343a40;
- }
- .message-list::-webkit-scrollbar-thumb {
- background: #888;
- }
- .message {
- position: relative;
- padding: 6px 10px;
- border-radius: 8px;
- margin-bottom: 5px;
- color: white;
- box-shadow: 0px 0px 8px #22262a;
- word-break: break-all;
- overflow-wrap: break-word;
- hyphens: auto;
- line-break: anywhere;
- max-width: 40vw;
- }
- .message-image {
- width: '300px';
- height: 'auto';
- }
- .message-received {
- background: linear-gradient(to bottom, #73808c, #5c6670);
- border-top-left-radius: 0px;
- }
- .message-sent {
- background: linear-gradient(to bottom, #20b2aa, #1b9891);
- border-top-right-radius: 0px;
- }
- .send-box {
- padding: 10px;
- display: flex;
- }
- .send-box .message-input {
- border-radius: 20px;
- background: linear-gradient(to bottom, #fff, #ddd);
- box-shadow: 0px 0px 12px #22262a;
- margin-right: 8px;
- margin-left: 8px;
- }
- .button {
- background: linear-gradient(to bottom, #20b2aa, #1b9891);
- border: none;
- border-radius: 20px;
- width: 38px;
- height: 38px;
- box-shadow: 0px 0px 12px #22262a;
- }
- .dropdown-toggle {
- background-color: transparent;
- border: none;
- }
- .dropdown-toggle:hover,
- .dropdown-toggle:focus,
- .dropdown-toggle:active {
- background-color: transparent !important;
- border: none !important;
- outline: none !important;
- box-shadow: none !important;
- }
- .dropdown-toggle:after {
- display: none;
- }
- .dropdown-menu {
- background-color: transparent;
- border: none;
- transition: all 0.5s ease;
- }
- .dropdown-item {
- padding: 0.33rem 0px;
- text-align: left;
- }
- .dropdown-item:hover {
- background-color: transparent;
- }
- .dropdown-item:focus {
- background-color: transparent;
- }
- .poza {
- width: 100px !important;
- height: 100px !important;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement