Merge pull request #5056 from matrix-org/joriks/style-fighting
Quick win session 24/07/2020
This commit is contained in:
Jorik Schellekens
@@ -605,3 +605,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@define-mixin unreal-focus {
|
||||
outline-width: 2px;
|
||||
outline-style: solid;
|
||||
outline-color: Highlight;
|
||||
|
||||
/* WebKit gets its native focus styles. */
|
||||
@media (-webkit-min-device-pixel-ratio: 0) {
|
||||
outline-color: -webkit-focus-ring-color;
|
||||
outline-style: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -41,13 +41,19 @@ limitations under the License.
|
||||
|
||||
.mx_FilePanel .mx_EventTile {
|
||||
word-break: break-word;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MFileBody {
|
||||
line-height: 2.4rem;
|
||||
}
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
|
||||
padding-top: 8px;
|
||||
display: flex;
|
||||
font-size: $font-14px;
|
||||
color: $event-timestamp-color;
|
||||
@@ -60,7 +66,7 @@ limitations under the License.
|
||||
|
||||
.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
|
||||
flex: 1 0 0;
|
||||
font-size: $font-11px;
|
||||
font-size: $font-14px;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -80,7 +86,7 @@ limitations under the License.
|
||||
flex: 1 1 auto;
|
||||
line-height: initial;
|
||||
padding: 0px;
|
||||
font-size: $font-11px;
|
||||
font-size: $font-14px;
|
||||
opacity: 1.0;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
@@ -90,7 +96,7 @@ limitations under the License.
|
||||
text-align: right;
|
||||
visibility: visible;
|
||||
position: initial;
|
||||
font-size: $font-11px;
|
||||
font-size: $font-14px;
|
||||
opacity: 1.0;
|
||||
color: $event-timestamp-color;
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ limitations under the License.
|
||||
left: 4px; // center with parent of 32px
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: $rightpanel-button-color;
|
||||
background-color: $icon-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
@@ -99,7 +99,7 @@ limitations under the License.
|
||||
background: rgba($accent-color, 0.25);
|
||||
// make the icon the accent color too
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
background-color: $accent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -51,7 +51,8 @@ limitations under the License.
|
||||
display: inherit;
|
||||
}
|
||||
.mx_ShareDialog_matrixto_copy > div {
|
||||
background-image: url($copy-button-url);
|
||||
mask-image: url($copy-button-url);
|
||||
background-color: $message-action-bar-fg-color;
|
||||
margin-left: 5px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
@@ -80,5 +80,11 @@ limitations under the License.
|
||||
background-color: $accent-color;
|
||||
border-color: $accent-color;
|
||||
}
|
||||
|
||||
&.focus-visible {
|
||||
& + label .mx_Checkbox_background {
|
||||
@mixin unreal-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,6 +63,7 @@ limitations under the License.
|
||||
box-sizing: border-box;
|
||||
height: $font-16px;
|
||||
width: $font-16px;
|
||||
margin-left: 2px; // For the highlight on focus
|
||||
|
||||
border: $font-1-5px solid $radio-circle-color;
|
||||
border-radius: $font-16px;
|
||||
@@ -77,6 +78,12 @@ limitations under the License.
|
||||
}
|
||||
}
|
||||
|
||||
&.focus-visible {
|
||||
& + div {
|
||||
@mixin unreal-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
& + div {
|
||||
border-color: $active-radio-circle-color;
|
||||
|
||||
@@ -34,6 +34,8 @@ limitations under the License.
|
||||
|
||||
// Make sure the _thumbnail is positioned relative to the _container
|
||||
position: relative;
|
||||
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail_spinner {
|
||||
|
||||
@@ -24,7 +24,7 @@ limitations under the License.
|
||||
line-height: $font-24px;
|
||||
border-radius: 4px;
|
||||
background: $message-action-bar-bg-color;
|
||||
top: -18px;
|
||||
top: -26px;
|
||||
right: 8px;
|
||||
user-select: none;
|
||||
// Ensure the action bar appears above over things, like the read marker.
|
||||
|
||||
@@ -536,11 +536,12 @@ $left-gutter: 64px;
|
||||
display: inline-block;
|
||||
visibility: hidden;
|
||||
cursor: pointer;
|
||||
top: 8px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-image: url($copy-button-url);
|
||||
mask-image: url($copy-button-url);
|
||||
background-color: $message-action-bar-fg-color;
|
||||
}
|
||||
|
||||
.mx_EventTile_body .mx_EventTile_pre_container:focus-within .mx_EventTile_copyButton,
|
||||
|
||||
@@ -54,7 +54,7 @@ $irc-line-height: $font-18px;
|
||||
flex-shrink: 0;
|
||||
width: var(--name-width);
|
||||
text-overflow: ellipsis;
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
|
||||
@@ -21,6 +21,7 @@ limitations under the License.
|
||||
border-top: 1px solid $primary-hairline-color;
|
||||
position: relative;
|
||||
padding-left: 82px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_replaced_wrapper {
|
||||
@@ -178,25 +179,44 @@ limitations under the License.
|
||||
color: $accent-color;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button_highlight {
|
||||
background: rgba($accent-color, 0.25);
|
||||
// make the icon the accent color too
|
||||
&::before {
|
||||
background-color: $accent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button {
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
border-radius: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background-color: $composer-button-color;
|
||||
background-color: $icon-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($accent-color, 0.1);
|
||||
|
||||
&::before {
|
||||
background-color: $accent-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.mx_MessageComposer_hangup::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
@@ -288,7 +308,7 @@ limitations under the License.
|
||||
mask-size: contain;
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
background-color: $composer-button-color;
|
||||
background-color: $icon-button-color;
|
||||
|
||||
&.mx_MessageComposer_markdownDisabled {
|
||||
opacity: 0.2;
|
||||
|
||||
@@ -222,7 +222,7 @@ limitations under the License.
|
||||
left: 4px; // center with parent of 32px
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
background-color: $roomheader-button-color;
|
||||
background-color: $icon-button-color;
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_SecurityRoomSettingsTab label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mx_SecurityRoomSettingsTab_warning {
|
||||
display: block;
|
||||
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.75 3.75H3.75V10.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="7" y="7" width="7" height="7" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
@@ -1,86 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="19px"
|
||||
height="19px"
|
||||
viewBox="0 0 19 19"
|
||||
version="1.1"
|
||||
id="svg3734"
|
||||
sodipodi:docname="icon_copy_message.svg"
|
||||
inkscape:version="0.92.1 r">
|
||||
<metadata
|
||||
id="metadata3738">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1596"
|
||||
inkscape:window-height="846"
|
||||
id="namedview3736"
|
||||
showgrid="false"
|
||||
inkscape:zoom="12.421053"
|
||||
inkscape:cx="3.4935767"
|
||||
inkscape:cy="2.469644"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="Symbols" />
|
||||
<!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
|
||||
<title
|
||||
id="title3722">ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
|
||||
<desc
|
||||
id="desc3724">Created with sketchtool.</desc>
|
||||
<defs
|
||||
id="defs3726" />
|
||||
<g
|
||||
id="Symbols"
|
||||
stroke="none"
|
||||
stroke-width="1"
|
||||
fill="none"
|
||||
fill-rule="evenodd">
|
||||
<path
|
||||
d="M 9.5,19 C 14.746705,19 19,14.746705 19,9.5 19,4.2532949 14.746705,0 9.5,0 4.2532949,0 0,4.2532949 0,9.5 0,14.746705 4.2532949,19 9.5,19 Z"
|
||||
id="Oval-69"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#ececec" />
|
||||
<g
|
||||
id="g4632"
|
||||
transform="translate(-2.3841858e-7,-1)">
|
||||
<rect
|
||||
style="stroke:#9b9b9b;stroke-width:0.91585475;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
y="4.3017478"
|
||||
x="4.6289611"
|
||||
height="10.396504"
|
||||
width="7.7420783"
|
||||
id="rect3745-3" />
|
||||
<rect
|
||||
style="fill:#ececec;fill-opacity:1;stroke:#9b9b9b;stroke-width:0.91585475;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
y="6.3017478"
|
||||
x="6.6289611"
|
||||
height="10.396504"
|
||||
width="7.7420783"
|
||||
id="rect3745" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.7 KiB |
@@ -46,7 +46,7 @@ $inverted-bg-color: $base-color;
|
||||
$selected-color: $room-highlight-color;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: $header-panel-bg-color;
|
||||
$event-selected-color: #21262c;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: transparent;
|
||||
@@ -100,10 +100,9 @@ $roomheader-bg-color: $bg-color;
|
||||
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);
|
||||
$roomheader-addroom-fg-color: $text-primary-color;
|
||||
$tagpanel-button-color: $header-panel-text-primary-color;
|
||||
$roomheader-button-color: $header-panel-text-primary-color;
|
||||
$groupheader-button-color: $header-panel-text-primary-color;
|
||||
$rightpanel-button-color: $header-panel-text-primary-color;
|
||||
$composer-button-color: $header-panel-text-primary-color;
|
||||
$icon-button-color: #8E99A4;
|
||||
$roomtopic-color: $text-secondary-color;
|
||||
$eventtile-meta-color: $roomtopic-color;
|
||||
|
||||
|
||||
@@ -95,10 +95,9 @@ $roomheader-color: $text-primary-color;
|
||||
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
|
||||
$roomheader-addroom-fg-color: $text-primary-color;
|
||||
$tagpanel-button-color: $header-panel-text-primary-color;
|
||||
$roomheader-button-color: $header-panel-text-primary-color;
|
||||
$groupheader-button-color: $header-panel-text-primary-color;
|
||||
$rightpanel-button-color: $header-panel-text-primary-color;
|
||||
$composer-button-color: $header-panel-text-primary-color;
|
||||
$icon-button-color: $header-panel-text-primary-color;
|
||||
$roomtopic-color: $text-secondary-color;
|
||||
$eventtile-meta-color: $roomtopic-color;
|
||||
|
||||
|
||||
@@ -162,10 +162,9 @@ $roomheader-bg-color: $primary-bg-color;
|
||||
$roomheader-addroom-bg-color: #91a1c0;
|
||||
$roomheader-addroom-fg-color: $accent-fg-color;
|
||||
$tagpanel-button-color: #91a1c0;
|
||||
$roomheader-button-color: #91a1c0;
|
||||
$groupheader-button-color: #91a1c0;
|
||||
$rightpanel-button-color: #91a1c0;
|
||||
$composer-button-color: #91a1c0;
|
||||
$icon-button-color: #91a1c0;
|
||||
$roomtopic-color: #9e9e9e;
|
||||
$eventtile-meta-color: $roomtopic-color;
|
||||
|
||||
@@ -228,7 +227,8 @@ $event-redacted-border-color: #cccccc;
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
||||
$copy-button-url: "$(res)/img/icon_copy_message.svg";
|
||||
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
|
||||
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
|
||||
@@ -74,7 +74,7 @@ $droptarget-bg-color: rgba(255,255,255,0.5);
|
||||
$selected-color: $secondary-accent-color;
|
||||
|
||||
// selected for hoverover & selected event tiles
|
||||
$event-selected-color: $header-panel-bg-color;
|
||||
$event-selected-color: #f6f7f8;
|
||||
|
||||
// used for the hairline dividers in RoomView
|
||||
$primary-hairline-color: transparent;
|
||||
@@ -158,10 +158,9 @@ $roomheader-bg-color: $primary-bg-color;
|
||||
$roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);
|
||||
$roomheader-addroom-fg-color: #5c6470;
|
||||
$tagpanel-button-color: #91A1C0;
|
||||
$roomheader-button-color: #91A1C0;
|
||||
$groupheader-button-color: #91A1C0;
|
||||
$rightpanel-button-color: #91A1C0;
|
||||
$composer-button-color: #91A1C0;
|
||||
$icon-button-color: #C1C6CD;
|
||||
$roomtopic-color: #9e9e9e;
|
||||
$eventtile-meta-color: $roomtopic-color;
|
||||
|
||||
@@ -230,7 +229,7 @@ $event-redacted-border-color: #cccccc;
|
||||
// event timestamp
|
||||
$event-timestamp-color: #acacac;
|
||||
|
||||
$copy-button-url: "$(res)/img/icon_copy_message.svg";
|
||||
$copy-button-url: "$(res)/img/feather-customised/clipboard.svg";
|
||||
|
||||
// e2e
|
||||
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
|
||||
|
||||
Reference in New Issue
Block a user