Spaces:
Running
Running
Scrollbar tweaks
Browse files- client/css/conversation.css +16 -1
- client/css/sidebar.css +6 -3
client/css/conversation.css
CHANGED
|
@@ -104,6 +104,21 @@
|
|
| 104 |
}
|
| 105 |
}
|
| 106 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 107 |
@media screen and (max-width: 990px) {
|
| 108 |
.conversation {
|
| 109 |
width: 100%;
|
|
@@ -112,7 +127,7 @@
|
|
| 112 |
}
|
| 113 |
|
| 114 |
@media screen and (max-height: 720px) {
|
| 115 |
-
.box {
|
| 116 |
height: 70%;
|
| 117 |
}
|
| 118 |
|
|
|
|
| 104 |
}
|
| 105 |
}
|
| 106 |
|
| 107 |
+
/* scrollbar */
|
| 108 |
+
.conversation #messages::-webkit-scrollbar {
|
| 109 |
+
width: 4px;
|
| 110 |
+
padding: 8px 0px;
|
| 111 |
+
}
|
| 112 |
+
|
| 113 |
+
.conversation #messages::-webkit-scrollbar-track {
|
| 114 |
+
background-color: #ffffff00;
|
| 115 |
+
}
|
| 116 |
+
|
| 117 |
+
.conversation #messages::-webkit-scrollbar-thumb {
|
| 118 |
+
background-color: #555555;
|
| 119 |
+
border-radius: 10px;
|
| 120 |
+
}
|
| 121 |
+
|
| 122 |
@media screen and (max-width: 990px) {
|
| 123 |
.conversation {
|
| 124 |
width: 100%;
|
|
|
|
| 127 |
}
|
| 128 |
|
| 129 |
@media screen and (max-height: 720px) {
|
| 130 |
+
.conversation.box {
|
| 131 |
height: 70%;
|
| 132 |
}
|
| 133 |
|
client/css/sidebar.css
CHANGED
|
@@ -1,7 +1,6 @@
|
|
| 1 |
.sidebar {
|
| 2 |
max-width: 260px;
|
| 3 |
padding: var(--section-gap);
|
| 4 |
-
overflow: auto;
|
| 5 |
flex-shrink: 0;
|
| 6 |
display: flex;
|
| 7 |
flex-direction: column;
|
|
@@ -37,11 +36,15 @@
|
|
| 37 |
.sidebar .top {
|
| 38 |
display: flex;
|
| 39 |
flex-direction: column;
|
|
|
|
| 40 |
gap: 16px;
|
| 41 |
-
overflow: auto;
|
| 42 |
padding-right: 8px;
|
| 43 |
}
|
| 44 |
|
|
|
|
|
|
|
|
|
|
|
|
|
| 45 |
.sidebar .info {
|
| 46 |
padding: 8px 12px 0px 12px;
|
| 47 |
display: flex;
|
|
@@ -66,9 +69,9 @@
|
|
| 66 |
|
| 67 |
.sidebar-footer {
|
| 68 |
width: 100%;
|
|
|
|
| 69 |
display: flex;
|
| 70 |
flex-direction: column;
|
| 71 |
-
gap: 10px;
|
| 72 |
}
|
| 73 |
|
| 74 |
.sidebar-footer button {
|
|
|
|
| 1 |
.sidebar {
|
| 2 |
max-width: 260px;
|
| 3 |
padding: var(--section-gap);
|
|
|
|
| 4 |
flex-shrink: 0;
|
| 5 |
display: flex;
|
| 6 |
flex-direction: column;
|
|
|
|
| 36 |
.sidebar .top {
|
| 37 |
display: flex;
|
| 38 |
flex-direction: column;
|
| 39 |
+
overflow: hidden;
|
| 40 |
gap: 16px;
|
|
|
|
| 41 |
padding-right: 8px;
|
| 42 |
}
|
| 43 |
|
| 44 |
+
.sidebar .top:hover {
|
| 45 |
+
overflow: auto;
|
| 46 |
+
}
|
| 47 |
+
|
| 48 |
.sidebar .info {
|
| 49 |
padding: 8px 12px 0px 12px;
|
| 50 |
display: flex;
|
|
|
|
| 69 |
|
| 70 |
.sidebar-footer {
|
| 71 |
width: 100%;
|
| 72 |
+
margin-top: 16px;
|
| 73 |
display: flex;
|
| 74 |
flex-direction: column;
|
|
|
|
| 75 |
}
|
| 76 |
|
| 77 |
.sidebar-footer button {
|