Swift
summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorTobias Markmann <tm@ayena.de>2016-10-20 10:56:59 (GMT)
committerKevin Smith <kevin.smith@isode.com>2016-10-24 07:36:45 (GMT)
commitb26ad89bddfc171050c3148e3b122599f3b3464b (patch)
tree8b7058fa2021c10ea161ec9acb170b8dcce8c4d3
parente7ea063f2d5e448d10111d14539c7b19b34243a6 (diff)
downloadswift-b26ad89bddfc171050c3148e3b122599f3b3464b.zip
swift-b26ad89bddfc171050c3148e3b122599f3b3464b.tar.bz2
Make avatar size relative to font size
A recent change to web view scaling to have equal font sizes in and outside the web view cause the pixel sized avatars to be half the usual size. With this fix the avatar is as high as The the nickname plus the first line of the first message. Test-Information: Tested on macOS 10.12 with Qt 5.7.0 and QtWebKit TP4. Change-Id: I13e3c83fdb00e0dc9079c3ad5d6a380f6db5a499
Diffstat
-rw-r--r--Swift/resources/themes/Default/main.css52
1 files changed, 24 insertions, 28 deletions
diff --git a/Swift/resources/themes/Default/main.css b/Swift/resources/themes/Default/main.css
index d759ced..c5cc977 100644
--- a/Swift/resources/themes/Default/main.css
+++ b/Swift/resources/themes/Default/main.css
@@ -1,242 +1,238 @@
/* Chat Window Container */
body {
font-family: 'Lato', sans-serif;
margin: 0;
padding: 0;
}
/* This turns the insert marker element into a vertical fill.
* This way the colored side bar is expanded to the full height of the view. */
#insert {
display: table-row;
height: 100%;
}
.container {
height: 100%;
width: 100%;
background-color: #fff;
- /*border: solid 1px #595959; /* REMOVE THIS LINE. FOR DISPLAY PURPOSE ONLY. */
- /*margin-left: 20%; /* REMOVE THIS LINE. FOR DISPLAY PURPOSE ONLY. */
- /*margin-top: 75px; /* REMOVE THIS LINE. FOR DISPLAY PURPOSE ONLY. */
position: absolute;
- display: table;
+ display: table;
}
/* Holds all user and message content */
.message-block {
display: table;
border: 0px solid black;
border-spacing: 0;
height: 100%;
width: 100%;
z-index: 10;
top: 0;
left: 0;
overflow-wrap: break-word; /* Allow breaking of long words (e.g. URLs) to prevent overflow. */
- /*margin-top: -2px; /* REMOVE THIS LINE. FOR DISPLAY PURPOSE ONLY. */
}
/* Individual message */
.message {
display: table-row;
border: inherit;
width: 100%;
margin-top: 10px;
border-top: 0.2em solid transparent;
}
.additional {
margin-top: -12px;
}
.unread {
height: 30px;
display: table-row;
border: inherit;
/*width: 100%;*/
margin-top: -6px;
margin-bottom: -15px;
margin-left: 190px;
margin-right: 20px;
text-align: right;
}
.unread p {
margin-top: 0px;
font-size: 75%;
text-transform: uppercase;
color: #ffd180;
border-top: solid 1px #ffd180;
margin-left: 20px;
margin-right: 20px;
}
/* Left column content */
:not(.additional) > .user {
- height: 32px;
+ height: 2.5em;
}
.user {
display: table-cell;
border: inherit;
text-align: center;
margin-top: 2px;
width: 175px;
max-width: 175px;
min-width: 175px;
background-color: #595959;
}
.time {
- height: 32px;
+ height: 2.5em;
width: 103px;
float: left;
text-align: right;
}
.time p {
margin-top: 3px;
margin-bottom: 1px;
margin-right: 10px;
color: #f9f9f9;
font-size: 80%;
font-weight: 300;
}
.time-additional {
width: 103px;
float: left;
text-align: right;
}
.time-additional p {
margin-top: 0px;
margin-bottom: 1px;
margin-right: 10px;
color: #f9f9f9;
font-size: 80%;
font-weight: 300;
}
.time img {
margin-right: 10px;
height: 10px;
}
.time-additional img {
margin-right: 10px;
height: 10px;
}
.myavatar {
- height: 32px;
- width: 32px;
+ height: 2.5em;
+ width: 2.5em;
display: inline-block;
- margin:0 auto;
+ margin: 0 auto;
background-color: #92c47e;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.otheravatar {
- height: 32px;
- width: 32px;
+ height: 2.5em;
+ width: 2.5em;
display: inline-block;
- margin:0 auto;
+ margin: 0 auto;
background-color: #6eb6ce;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
.myavatar img {
border-radius: 50%;
- height: 32px;
+ height: 2.5em;
position: relative;
left: -1px;
}
.otheravatar img {
border-radius: 50%;
- height: 32px;
+ height: 2.5em;
position: relative;
left: -1px;
}
.myright {
- float:right;
- width:40px;
- height: 32px;
+ float: right;
+ width: 1.65em;
+ height: 2.5em;
background: #92c47e;
}
.otherright {
- float:right;
- width:40px;
- height: 32px;
+ float: right;
+ width: 1.65em;
+ height: 2.5em;
background: #6eb6ce;
}
:not(.additional) > div > .systemavatar {
- height: 32px;
+ height: 2.5em;
}
.systemavatar {
- width: 32px;
+ width: 2.5em;
display: inline-block;
- margin:0 auto;
+ margin: 0 auto;
background-color: #595959;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
:not(.additional) > div > .systemright {
- height: 32px;
+ height: 2.5em;
}
.systemright {
- float:right;
- width: 40px;
+ float: right;
+ width: 1.65em;
background: #595959;
}
/* Right column content */
.message:not(.additional) {
border-top: 1.2em solid transparent; /* Workaround for table rows not having a padding. */
}
.message:not(.additional) .text {
- min-height: 32px;
+ min-height: 2.5em;
}
.text {
display: table-cell;
border: inherit;
margin-left: 175px;
color: #595959;
vertical-align: top;
/* Break long URLs at any point. */
word-break: break-word;
word-wrap: break-word;
hyphens: auto;
}
.username {
margin-left: 20px;
font-weight: 700;
margin-top: 0px;
margin-bottom: 0.2em;
}
.myusername {
color: #92c47e;
}
.otherusername {
color: #6eb6ce;
}