Merge pull request #2659 from jryans/dark-theme-more-2

Dark theme follow ups round 2

res/css/_common.scss

@@ -82,13 +82,6 @@ input[type=search]::-webkit-search-results-decoration {
     display: none;
 }
 
-.input[type=text]::-webkit-input-placeholder,
-.input[type=text]::-moz-placeholder,
-.input[type=search]::-webkit-input-placeholder,
-.input[type=search]::-moz-placeholder {
-    color: #a5aab2;
-}
-
 // Override Firefox's UA style so we get a consistent look across browsers
 input::placeholder,
 textarea::placeholder {
@@ -111,6 +104,71 @@ textarea {
     color: $primary-fg-color;
 }
 
+// .mx_textinput is a container for a text input
+// + some other controls like buttons, ...
+// it has the appearance of a text box so the controls
+// appear to be part of the input
+
+.mx_Dialog, .mx_MatrixChat {
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    .mx_textinput {
+        display: block;
+        box-sizing: border-box;
+        background-color: transparent;
+        color: $input-darker-fg-color;
+        border-radius: 4px;
+        border: 1px solid #c1c1c1;
+        // these things should probably not be defined
+        // globally
+        margin: 9px;
+        flex: 0 0 auto;
+    }
+
+    .mx_textinput {
+        display: flex;
+        align-items: center;
+
+        > input[type=text],
+        > input[type=search] {
+            border: none;
+            flex: 1;
+            color: $primary-fg-color;
+        }
+    }
+
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text]::placeholder,
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search]::placeholder,
+    .mx_textinput input::placeholder {
+        color: $roomsublist-label-fg-color;
+    }
+}
+
+/*** panels ***/
+.dark-panel {
+    background-color: $dark-panel-bg-color;
+}
+
+.dark-panel {
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    .mx_textinput {
+        color: $input-darker-fg-color;
+        background-color: $input-darker-bg-color;
+        border: none;
+    }
+}
+
+.light-panel {
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field):not(.mx_no_textinput) > input[type=search],
+    .mx_textinput {
+        color: $input-lighter-fg-color;
+        background-color: $input-lighter-bg-color;
+        border: none;
+    }
+}
+
 /* Prevent ugly dotted highlight around selected elements in Firefox */
 ::-moz-focus-inner {
     border: 0;

res/css/structures/_MyGroups.scss

@@ -49,11 +49,11 @@ limitations under the License.
     height: 40px;
     width: 40px;
     border-radius: 20px;
-    background-color: $roomheader-addroom-color;
+    background-color: $roomheader-addroom-bg-color;
     position: relative;
 
     &:before {
-        background-color: $accent-fg-color;
+        background-color: $roomheader-addroom-fg-color;
         mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
         mask-position: center;

res/css/structures/_RoomSubList.scss

@@ -83,15 +83,24 @@ limitations under the License.
 }
 
 .mx_RoomSubList_addRoom {
-    background-color: $roomheader-addroom-color;
-    color: $roomsublist-background;
-    background-image: url('$(res)/img/icons-room-add.svg');
-    background-repeat: no-repeat;
-    background-position: center;
+    background-color: $roomheader-addroom-bg-color;
     border-radius: 10px; // 16/2 + 2 padding
     height: 16px;
     flex: 0 0 16px;
-    background-clip: content-box;
+    position: relative;
+
+    &:before {
+        background-color: $roomheader-addroom-fg-color;
+        mask: url('$(res)/img/icons-room-add.svg');
+        mask-repeat: no-repeat;
+        mask-position: center;
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
 }
 
 .mx_RoomSubList_badgeHighlight {

res/css/views/rooms/_MemberInfo.scss

@@ -34,6 +34,10 @@ limitations under the License.
     height: 16px;
     padding: 10px 15px;
     cursor: pointer;
+    mask-image: url('$(res)/img/minimise.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    background-color: $rightpanel-button-color;
 }
 
 .mx_MemberInfo_name h2 {

res/css/views/rooms/_MessageComposer.scss

@@ -255,14 +255,29 @@ limitations under the License.
 }
 
 .mx_MessageComposer_formatbar_markdown {
+    height: 17px;
+    width: 30px;
     margin-right: 64px;
 }
 
 .mx_MessageComposer_input_markdownIndicator {
-    cursor: pointer;
     height: 10px;
+    width: 12px;
     padding: 4px 4px 4px 0;
-    opacity: 0.8;
+}
+
+.mx_MessageComposer_formatbar_markdown,
+.mx_MessageComposer_input_markdownIndicator {
+    cursor: pointer;
+    mask-image: url('$(res)/img/markdown.svg');
+    mask-size: contain;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    background-color: $composer-button-color;
+
+    &.mx_MessageComposer_markdownDisabled {
+        opacity: 0.2;
+    }
 }
 
 .mx_MatrixChat_useCompactLayout {