2018-09-13 00:06:59 +02:00
/* put your custom css here. */
@ import url ( https : / / rawgit . com / BeardDesign1 / Material-design-theme-ressources / master / code-files / update / version . css ) ;
2018-11-10 19:35:29 +01:00
html , [ class * = isCompact- ] : not ( code ) {
2018-09-13 00:06:59 +02:00
font-family : Lato ! important ;
}
. emoji . jumboable {
margin-top : -0 . 3em ! important ;
width : 42px ! important ;
height : 42px ! important ;
vertical-align : baseline ! important ;
}
code {
font-family : Hack ! important ;
}
/* prevent follow-up timestamps from being hidden (currently hardcoded for dark mode) */
2018-11-10 19:35:29 +01:00
. theme-dark [ class * = timestampVisibleOnHover- ] {
2018-09-13 00:06:59 +02:00
color : hsla ( 0 , 0 % , 100 % , . 2 ) ;
}
/* material theme adjustments */
2018-11-10 19:35:29 +01:00
[ class * = usernameWrapper- ] [ class * = username- ] : hover {
2018-09-13 00:06:59 +02:00
border-bottom : 1px solid ;
}
2018-11-10 19:35:29 +01:00
[ class * = attachButton- ] {
2018-09-13 00:06:59 +02:00
width : 50px ;
}
2018-11-10 19:35:29 +01:00
[ class * = textArea- ] {
2018-09-13 00:06:59 +02:00
padding : 16px 0 16px 50px ! important ;
}
2018-11-10 19:35:29 +01:00
/*[class*=containerCompact-][class*=container-] {*/
/*.containerCompact-3V0ioj.container-1YxwTf {*/
[ class * = containerCompactBounded- ] {
2018-09-13 00:06:59 +02:00
padding : 0 ;
margin : 0 ! important ;
}
2018-11-10 19:35:29 +01:00
[ class * = divider- ] {
2018-09-13 00:06:59 +02:00
height : 30px ;
}
2018-11-10 19:35:29 +01:00
[ class * = divider- ] > span {
2018-09-13 00:06:59 +02:00
background : hsl ( 0 , 0 % , 25 % ) ! important ;
}
2018-11-10 19:35:29 +01:00
[ class * = divider- ] [ class * = dividerRed- ] > span {
2018-09-13 00:06:59 +02:00
background : hsl ( 358 , 22 % , 30 % ) ! important ;
}
2018-11-10 19:35:29 +01:00
[ class * = channels- ] [ class * = scrollerWrap- ] {
2018-09-13 00:06:59 +02:00
box-shadow : none ;
}
. container-1YxwTf {
background : none ;
}
2018-11-10 19:35:29 +01:00
[ class * = chat- ] [ class * = messages- ] {
2018-09-13 00:06:59 +02:00
background : hsl ( 0 , 0 % , 17 % ) ! important ;
} ;
. theme-dark . unreadMentionsBar-1VrBNe {
box-shadow : none ;
}
2018-11-10 19:35:29 +01:00
[ class * = messagesWrapper- ] [ class * = messages- ] {
2018-09-13 00:06:59 +02:00
padding-bottom : 1 . 2rem ;
}
[ class * = "members-" ] [ class * = "member-" ] {
padding : 0 ! important ;
}
/* Variables for configuration. You can override these in your user css. */
/* compact user list */
. channel-members-wrap {
min-width : initial ;
}
. channel-members-wrap . channel-members {
width : 78px ;
padding : 0 0 18px 10px ;
}
. channel-members h2 {
padding : 0 ;
margin : 9px 0 1px 0 ;
text-align : center ;
word-wrap : break-word ;
}
. member . member-status {
padding : 0 4px ;
padding-top : 8px ;
}
. member . member-status . avatar-small {
width : 50px ;
height : 50px ;
background-size : 50px 50px ;
}
. member . member-status . member-inner {
display : none ;
}
. channel-members :: -webkit-scrollbar {
max-width : 10px ;
}
2018-11-10 19:35:29 +01:00
/* right-aligned nicknames */
2018-09-13 00:06:59 +02:00
: root {
/ * ch as unit makes the most sense here ,
* but doesn ' t work properly with calculating offset of the . accessory div * /
--username-width : 7 . 3rem ;
--timestamp-width : 3rem ;
--header-offset : calc ( 0 . 3rem + 0 . 3em ) ; /* first 0.3em from margin-left on timestamp */
/ * --username-width : 13ch ;
--timestamp-width : 9ch ; * / /* use `6ch` for 24h timestamps */
}
2018-11-10 19:35:29 +01:00
[ class * = containerCompact- ] { /* accessory */
2018-09-13 00:06:59 +02:00
padding-left : calc ( 70px - var ( --timestamp-default-width ) + var ( --timestamp-width ) + var ( --username-width ) ) ;
2018-11-10 19:35:29 +01:00
position : relative ;
2018-09-13 00:06:59 +02:00
}
2018-11-10 19:35:29 +01:00
[ class * = containerCompact- ] [ class * = timestampCompactBase- ] {
2018-09-13 00:06:59 +02:00
float : left ;
top : 1 . 5ex ;
width : var ( --timestamp-width ) ;
/*text-align: center;*/
}
2018-11-10 19:35:29 +01:00
/*.headerCompact-3wRt2W {*/
[ class * = headerCompact- ] {
2018-09-13 00:06:59 +02:00
position : absolute ;
left : 0 ;
2018-11-10 19:35:29 +01:00
padding-bottom : 1px ; /* for on-hover underline on border; user_style.css */
2018-09-13 00:06:59 +02:00
}
2018-11-10 19:35:29 +01:00
/*.containerCompact-3V0ioj .usernameWrapper-1S-G5O {*/
[ class * = headerCompact- ] > span {
2018-09-13 00:06:59 +02:00
display : inline-block ;
text-align : right ;
width : var ( --username-width ) ;
overflow : hidden ;
2018-11-10 19:35:29 +01:00
text-overflow : ellipsis ;
2018-09-13 00:06:59 +02:00
}
2018-11-10 19:35:29 +01:00
[ class * = markup- ] [ class * = isCompact- ] {
2018-09-13 00:06:59 +02:00
margin-left : 0 ! important ;
padding-left : calc ( var ( --username-width ) + var ( --timestamp-width ) + var ( --header-offset ) ) ! important ;
text-indent : 0 ;
}
2018-11-10 19:35:29 +01:00
/*.containerCompact-3bB5aN {*/
[ class * = containerCompact- ] [ class * = content- ] ~ [ class * = containerCompact- ] {
2018-09-13 00:06:59 +02:00
padding-left : calc ( var ( --username-width ) + var ( --timestamp-width ) + var ( --header-offset ) + 0rem ) ;
}
2018-11-10 19:35:29 +01:00
[ class * = containerCompact- ] [ class * = container- ] [ class * = isMentioned- ] [ class * = markup- ] {
2018-09-13 00:06:59 +02:00
/*padding: 0;*/
/*margin: 0;*/
border-right : solid # FAA61A ;
border-width : 0 2px ;
}
2018-11-10 19:35:29 +01:00
/* Material theme sets this */
[ class * = container- ] h2 {
margin-left : 0 ;
}