riot-themes

A Repo containing various custom Themes
git clone git://archive.git.mtrnord.blog/Nordgedanken/riot-themes.git
Log | Files | Refs | README | LICENSE

_EventTile.scss (9630B)

      1 /*
      2 Copyright 2015, 2016 OpenMarket Ltd
      3 Copyright 2017 MTRNord <info@nordgedanken.de>
      4 
      5 Licensed under the Apache License, Version 2.0 (the "License");
      6 you may not use this file except in compliance with the License.
      7 You may obtain a copy of the License at
      8 
      9     http://www.apache.org/licenses/LICENSE-2.0
     10 
     11 Unless required by applicable law or agreed to in writing, software
     12 distributed under the License is distributed on an "AS IS" BASIS,
     13 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     14 See the License for the specific language governing permissions and
     15 limitations under the License.
     16 */
     17 
     18 .mx_EventTile {
     19   max-width: 100%;
     20   clear: both;
     21   padding-top: 18px;
     22   font-size: 14px;
     23   position: relative;
     24 }
     25 
     26 .mx_EventTile.mx_EventTile_info {
     27   padding-top: 0px;
     28 }
     29 
     30 .mx_EventTile_avatar {
     31   position: absolute;
     32   top: 14px;
     33   left: 8px;
     34   cursor: pointer;
     35   z-index: 2;
     36 }
     37 
     38 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
     39   top: 8px;
     40   left: 65px;
     41 }
     42 
     43 .mx_EventTile_continuation {
     44   padding-top: 0px ! important;
     45 }
     46 
     47 .mx_EventTile .mx_SenderProfile {
     48   color: $primary-fg-color;
     49   opacity: 0.5;
     50   font-size: 14px;
     51   display: block; /* anti-zalgo, with overflow hidden */
     52   overflow-y: hidden;
     53   cursor: pointer;
     54   padding-left: 65px; /* left gutter */
     55   padding-bottom: 0px;
     56   padding-top: 0px;
     57   margin: 0px;
     58   line-height: 22px;
     59 }
     60 
     61 .mx_EventTile .mx_MessageTimestamp {
     62   display: block;
     63   visibility: hidden;
     64   white-space: nowrap;
     65   color: $event-timestamp-color;
     66   font-size: 10px;
     67   left: 0px;
     68   width: 46px; /* 8 + 30 (avatar) + 8 */
     69   text-align: center;
     70   position: absolute;
     71 }
     72 
     73 .mx_EventTile_line {
     74   position: relative;
     75   /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
     76   margin-right: 110px;
     77   padding-left: 65px; /* left gutter */
     78   padding-top: 4px;
     79   padding-bottom: 2px;
     80   border-radius: 4px;
     81   min-height: 24px;
     82   line-height: 22px;
     83 }
     84 
     85 .mx_EventTile_info .mx_EventTile_line {
     86   padding-left: 83px;
     87 }
     88 
     89 /* HACK to override line-height which is already marked important elsewhere */
     90 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     91   font-size: 48px ! important;
     92   line-height: 48px ! important;
     93 }
     94 
     95 /* this is used for the tile for the event which is selected via the URL.
     96  * TODO: ultimately we probably want some transition on here.
     97  */
     98 .mx_EventTile_selected .mx_EventTile_line {
     99   border-left: $accent-color 5px solid;
    100   padding-left: 60px;
    101   background-color: $event-selected-color;
    102 }
    103 
    104 .mx_EventTile:hover .mx_EventTile_line,
    105 .mx_EventTile.menu .mx_EventTile_line
    106 {
    107   background-color: $event-selected-color;
    108   z-index: 1;
    109 }
    110 
    111 .mx_EventTile_searchHighlight {
    112   background-color: $accent-color;
    113   color: $accent-fg-color;
    114   border-radius: 5px;
    115   padding-left: 2px;
    116   padding-right: 2px;
    117   cursor: pointer;
    118 }
    119 
    120 .mx_EventTile_searchHighlight a {
    121   background-color: $accent-color;
    122   color: $accent-fg-color;
    123 }
    124 
    125 .mx_EventTile_encrypting {
    126   color: $event-encrypting-color ! important;
    127 }
    128 
    129 .mx_EventTile_sending {
    130   color: $event-sending-color;
    131 }
    132 
    133 .mx_EventTile_notSent {
    134   color: $event-notsent-color;
    135 }
    136 
    137 .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
    138   display: block;
    139   width: 100%;
    140   height: 36px;
    141   background-image: $event-redacted-img;
    142   background-repeat: no-repeat;
    143   background-size: contain;
    144 }
    145 
    146 .mx_EventTile.mx_EventTile_redacted .mx_EventTile_line {
    147   /*
    148      Prevent changing colour of the background because
    149      $event-redacted-img matches $primary-bg-color
    150   */
    151   background-color: initial !important;
    152 }
    153 
    154 .mx_EventTile_highlight,
    155 .mx_EventTile_highlight .markdown-body
    156 {
    157   color: $warning-color;
    158 }
    159 
    160 .mx_EventTile_contextual {
    161   opacity: 0.4;
    162 }
    163 
    164 .mx_EventTile_msgOption {
    165   float: right;
    166   text-align: right;
    167   z-index: 1;
    168   position: relative;
    169   width: 90px;
    170 
    171   /* Hack to stop the height of this pushing the messages apart.
    172      Replaces margin-top: -6px. This interacts better with a read
    173      marker being in between. Content overflows. */
    174   height: 1px;
    175 
    176   margin-right: 10px;
    177 }
    178 
    179 .mx_EventTile_msgOption a {
    180   text-decoration: none;
    181 }
    182 
    183 .mx_EventTile_last .mx_MessageTimestamp,
    184 .mx_EventTile:hover .mx_MessageTimestamp,
    185 .mx_EventTile.menu .mx_MessageTimestamp
    186 {
    187   visibility: visible;
    188 }
    189 
    190 .mx_MessagePanel_alwaysShowTimestamps .mx_MessageTimestamp {
    191   visibility: visible;
    192 }
    193 
    194 .mx_EventTile_selected .mx_MessageTimestamp {
    195   left: 3px;
    196   width: auto;
    197 }
    198 
    199 .mx_EventTile_editButton {
    200   position: absolute;
    201   display: inline-block;
    202   visibility: hidden;
    203   cursor: pointer;
    204   top: 6px;
    205   right: 6px;
    206   width: 19px;
    207   height: 19px;
    208   background-image: url($edit-button-url);
    209 }
    210 
    211 .mx_EventTile:hover .mx_EventTile_editButton,
    212 .mx_EventTile.menu .mx_EventTile_editButton
    213 {
    214   visibility: visible;
    215 }
    216 
    217 .mx_EventTile.menu .mx_MessageTimestamp {
    218   visibility: visible;
    219 }
    220 
    221 .mx_EventTile_readAvatars {
    222   position: relative;
    223   display: inline-block;
    224   width: 14px;
    225   height: 14px;
    226   top: 29px;
    227 }
    228 
    229 .mx_EventTile_continuation .mx_EventTile_readAvatars,
    230 .mx_EventTile_info .mx_EventTile_readAvatars,
    231 .mx_EventTile_emote .mx_EventTile_readAvatars {
    232   top: 7px;
    233 }
    234 
    235 .mx_EventTile_readAvatars .mx_BaseAvatar {
    236   position: absolute;
    237   display: inline-block;
    238 }
    239 
    240 .mx_EventTile_readAvatarRemainder {
    241   color: $event-timestamp-color;
    242   font-size: 11px;
    243   position: absolute;
    244 }
    245 
    246 /* all the overflow-y: hidden; are to trap Zalgos -
    247    but they introduce an implicit overflow-x: auto.
    248    so make that explicitly hidden too to avoid random
    249    horizontal scrollbars occasionally appearing, like in
    250    https://github.com/vector-im/vector-web/issues/1154
    251     */
    252 .mx_EventTile_content {
    253   display: block;
    254   overflow-y: hidden;
    255   overflow-x: hidden;
    256   margin-right: 34px;
    257 }
    258 
    259 /* De-zalgoing */
    260 .mx_EventTile_body {
    261   overflow-y: hidden;
    262 }
    263 
    264 /* End to end encryption stuff */
    265 
    266 .mx_EventTile_e2eIcon {
    267   display: block;
    268   position: absolute;
    269   top: 9px;
    270   left: 46px;
    271   z-index: 2;
    272   cursor: pointer;
    273 }
    274 
    275 .mx_EventTile_12hr .mx_EventTile_e2eIcon {
    276   padding-left: 5px;
    277 }
    278 
    279 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
    280 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
    281   padding-left: 60px;
    282 }
    283 
    284 .mx_EventTile_selected.mx_EventTile_info .mx_EventTile_line,
    285 .mx_EventTile:hover.mx_EventTile_verified.mx_EventTile_info .mx_EventTile_line,
    286 .mx_EventTile:hover.mx_EventTile_unverified.mx_EventTile_info .mx_EventTile_line {
    287   padding-left: 78px;
    288 }
    289 
    290 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
    291   border-left: $e2e-verified-color 5px solid;
    292 }
    293 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
    294   border-left: $e2e-unverified-color 5px solid;
    295 }
    296 
    297 .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
    298 .mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
    299   left: 3px;
    300   width: auto;
    301 }
    302 
    303 /*
    304 .mx_EventTile_verified .mx_EventTile_e2eIcon {
    305     display: none;
    306 }
    307 */
    308 
    309 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
    310 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
    311   display: block;
    312   left: 41px;
    313 }
    314 
    315 /* Various markdown overrides */
    316 
    317 .mx_EventTile_content .markdown-body {
    318   font-family: inherit ! important;
    319   white-space: normal ! important;
    320   line-height: inherit ! important;
    321   color: inherit;
    322   font-size: 14px;
    323 }
    324 
    325 /* have to use overlay rather than auto otherwise Linux and Windows
    326    Chrome gets very confused about vertical spacing:
    327    https://github.com/vector-im/vector-web/issues/754
    328 */
    329 .mx_EventTile_content .markdown-body pre {
    330   overflow-x: overlay;
    331   overflow-y: visible;
    332 }
    333 
    334 .mx_EventTile_content .markdown-body code {
    335   background-color: #f8f8f8;
    336 }
    337 .mx_EventTile_copyButton {
    338   position: absolute;
    339   display: inline-block;
    340   visibility: hidden;
    341   cursor: pointer;
    342   top: 6px;
    343   right: 6px;
    344   width: 19px;
    345   height: 19px;
    346   background-image: url($copy-button-url);
    347 }
    348 .mx_EventTile_body pre {
    349   position: relative;
    350 }
    351 .mx_EventTile_body pre:hover .mx_EventTile_copyButton
    352 {
    353   visibility: visible;
    354 }
    355 
    356 .mx_EventTile_content .markdown-body h1,
    357 .mx_EventTile_content .markdown-body h2,
    358 .mx_EventTile_content .markdown-body h3,
    359 .mx_EventTile_content .markdown-body h4,
    360 .mx_EventTile_content .markdown-body h5,
    361 .mx_EventTile_content .markdown-body h6
    362 {
    363   font-family: inherit ! important;
    364 }
    365 
    366 
    367 /* Make h1 and h2 the same size as h3. */
    368 .mx_EventTile_content .markdown-body h1,
    369 .mx_EventTile_content .markdown-body h2
    370 {
    371   font-size: 1.5em;
    372 }
    373 
    374 .mx_EventTile_content .markdown-body a {
    375   color: $accent-color;
    376 }
    377 
    378 .mx_EventTile_content .markdown-body .hljs {
    379   display: inline ! important;
    380 }
    381 
    382 /* end of overrides */
    383 
    384 .mx_MatrixChat_useCompactLayout {
    385   .mx_EventTile {
    386     padding-top: 4px;
    387   }
    388 
    389   .mx_EventTile.mx_EventTile_info {
    390     padding-top: 0px;
    391   }
    392 
    393   .mx_EventTile .mx_SenderProfile {
    394     font-size: 13px;
    395   }
    396 
    397   .mx_EventTile.mx_EventTile_emote {
    398     padding-top: 8px;
    399     .mx_EventTile_avatar {
    400       top: 2px;
    401     }
    402     .mx_EventTile_line {
    403       padding-top: 0px;
    404       padding-bottom: 1px;
    405     }
    406   }
    407 
    408   .mx_EventTile.mx_EventTile_emote.mx_EventTile_continuation {
    409     padding-top: 0;
    410     .mx_EventTile_line {
    411       padding-top: 0px;
    412       padding-bottom: 0px;
    413     }
    414   }
    415 
    416   .mx_EventTile_line {
    417     padding-top: 0px;
    418     padding-bottom: 0px;
    419   }
    420 
    421   .mx_EventTile_avatar {
    422     top: 2px;
    423   }
    424 
    425   .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
    426     top: 5px;
    427   }
    428 
    429   .mx_EventTile_e2eIcon {
    430     top: 7px;
    431   }
    432 
    433   .mx_EventTile_editButton {
    434     top: 3px;
    435   }
    436 
    437   .mx_EventTile_readAvatars {
    438     top: 27px;
    439   }
    440 
    441   .mx_EventTile_continuation .mx_EventTile_readAvatars,
    442   .mx_EventTile_info .mx_EventTile_readAvatars,
    443   .mx_EventTile_emote .mx_EventTile_readAvatars {
    444     top: 5px;
    445   }
    446 
    447   .mx_RoomView_MessageList h2 {
    448     margin-top: 6px;
    449   }
    450 }