Swiftdiff options
| author | Tobias Markmann <tm@ayena.de> | 2016-10-20 10:56:59 (GMT) |
|---|---|---|
| committer | Kevin Smith <kevin.smith@isode.com> | 2016-10-24 07:36:45 (GMT) |
| commit | b26ad89bddfc171050c3148e3b122599f3b3464b (patch) | |
| tree | 8b7058fa2021c10ea161ec9acb170b8dcce8c4d3 /Swift | |
| parent | e7ea063f2d5e448d10111d14539c7b19b34243a6 (diff) | |
| download | swift-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 (limited to 'Swift')
| -rw-r--r-- | Swift/resources/themes/Default/main.css | 52 |
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; } |