Skip to content

Instantly share code, notes, and snippets.

@tr37ion

tr37ion/riotim.css

Created January 30, 2018 19:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tr37ion/09fa2b3d560fa6f61498a646d022387a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tr37ion/09fa2b3d560fa6f61498a646d022387a to your computer and use it in GitHub Desktop.
Download ZIP
Riot.IM Dark Userstyle Experiment for Widescreen
Raw
riotim.css
@-moz-document domain("riot.im")
{
body
{
font-size: 15px;
background-color: #0d161b;
color: #e0e8ef;
border: 0;
margin: 0;
-webkit-font-smoothing: subpixel-antialiased;
}
.mx_HomePage
{
max-width: 100%;
height: 100%;
}
/* Login */
.mx_Login_submit
{
margin-top: 35px;
margin-bottom: 24px;
width: 100%;
border-radius: 40px;
height: 40px;
border: 0;
background-color: #0b93c380;
font-size: 15px;
color: #ffffff80;
}
.mx_Login_submit:hover
{
background-color: #0b93c3;
color: #fff;
}
.mx_textButton,
.mx_RoomSettings_leaveButton,
.mx_RoomHeader_textButton,
.mx_UserSettings_button
{
background-color: #0b93c380;
font-size: 15px;
color: #ffffff80;
}
.mx_textButton:hover,
.mx_RoomSettings_leaveButton:hover,
.mx_RoomHeader_textButton:hover,
.mx_Login_submit:hover
{
background-color: #1ba4d4;
color: #fff;
}
.mx_Dropdown_input
{
position: relative;
border-radius: 3px;
background-color: #1ba4d410;
border: 1px solid #1ba4d480;
font-weight: 300;
font-size: 13px;
user-select: none;
color: #68a;
}
.mx_Dropdown_input:focus
{
background-color: #1ba4d4a0;
}
.mx_Dropdown_arrow
{
border-color: #789 transparent transparent;
}
.mx_Dropdown_menu .mx_Dropdown_option_highlight
{
background-color: #1ba4d480;
color: #ccc;
}
.mx_Dropdown_option:focus
{
border: none;
}
.mx_Dropdown_menu
{
position: absolute;
left: -1px;
right: -1px;
top: 100%;
z-index: 2;
margin: 0;
padding: 0;
border-radius: 3px;
background-color: #152b35;
border: 1px solid #1ba4d480;
max-height: 200px;
overflow-y: auto;
font-weight: 700;
}
/* Middle Panel */
.mx_BaseAvatar_image
{
border-radius: 40px;
vertical-align: top;
background-color: initial;
}
.mx_RoomHeader_wrapper
{
max-width: 100%;
margin: auto;
height: 70px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_RoomView_messageListWrapper
{
max-width: 100%;
margin: auto;
min-height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.mx_MessageComposer_wrapper
{
max-width: 100%;
vertical-align: middle;
margin: auto;
border-top: 1px solid #474747;
position: relative;
}
.mx_RoomView_statusAreaBox
{
max-width: 100%;
margin: 0;
min-height: 2px;
}
.mx_RoomView_statusAreaBox_line
{
margin-left: 0px;
border-top: 1px solid #152b35;
height: 1px;
}
.mx_RoomView_callStatusBar
.mx_UploadBar_uploadProgressInner,
.mx_RoomView_statusArea
{
background-color: #152b3520 !important;
}
.mx_MessageComposer_row
{
background-color: #152b3560;
}
.mx_RoomView_auxPanel
{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
max-width: 100%;
width: 100%;
margin: 0 auto;
overflow: auto;
border-bottom: 1px solid #152b35;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.mx_MatrixChat .mx_MatrixChat_middlePanel
{
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
padding-left: 2rem;
padding-right: 2.12rem;
background-color: #0d161b;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-x: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.mx_RoomPreviewBar
{
text-align: center;
height: 5rem;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: flex;
background-color: initial;
-webkit-align-items: center;
}
/* Chat */
.mx_EventTile
{
font-size: 1.2rem;
}
.mx_EventTile_line
{
position: relative;
margin-right: 0;
}
/* Message Input */
.mx_MessageComposer_input .DraftEditor-root .DraftEditor-editorContainer
{
padding-top: 0px;
}
.public-DraftEditorPlaceholder-hasFocus
{
visibility: hidden;
}
.public-DraftEditorPlaceholder-root
{
visibility: hidden;
z-index: 1;
}
.mx_MessageComposer_wrapper
{
max-width: 100%;
vertical-align: middle;
margin: auto;
border-top: 1px solid #152b35;
position: relative;
}
.mx_MessageComposer_input
{
-ms-flex: 1;
flex: 1;
vertical-align: middle;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 60px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
font-size: 14px;
margin-right: 6px;
}
/* Date */
.mx_EventTile .mx_MessageTimestamp
{
visibility: visible;
color: #152b35;
}
.mx_EventTile:hover .mx_MessageTimestamp
{
visibility: visible;
color: #1ba4d4;
border-left: 0px solid #152b35;
}
/* More Messages */
.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner,
.mx_RoomView_statusArea
{
background-color: #152b35;
}
.mx_DateSeparator
{
clear: both;
margin-top: 32px;
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
border-bottom: 1px solid #1ba4d4;
}
/* Home */
.mx_HomePage_header
{
border: 0px solid #76CFA6;
background-color: initial;
border-radius: 5px;
align-items: center;
}
.mx_HomePage_header h1,
.mx_HomePage_header h2
{
margin: 1rem;
color: #a9a9a9;
}
.mx_HomePage_row
{
flex: 0 1 1;
display: flex;
margin: 2rem 0 4rem 0;
flex-direction: row;
flex-wrap: wrap;
}
.mx_HomePage_container:nth-child(2n) h3
{
padding-top: 2rem;
border-top: 1px solid #19394b40;
text-align: left;
color: #98a4ae;
}
.mx_HomePage_room
{
width: 22%;
padding-bottom: 4rem;
text-align: left;
border-right: 1px solid #152b35;
}
.mx_HomePage_room:nth-child(4n)
{
border-right: 0px solid #152b35;
}
.mx_HomePage_room .mx_HomePage_icon
{
border-radius: 0;
width: 3rem;
height: 3rem;
}
.mx_HomePage_comment
{
display: flex;
align-items: initial;
margin-left: 100px;
min-height: 64px;
}
.mx_HomePage_room .mx_HomePage_desc
{
display: block;
line-height: 1.5rem;
font-size: 1rem;
margin-top: 8px;
}
/* Text */
.changelog_text,
.mx_SearchBox_search,
body,
textarea
{
font-family: 'Fira Sans', 'Open Sans', Arial, Helvetica, Sans-Serif;
}
.mx_MImageBody_download a
{
color: #19394b;
}
a:link,
a:visited
{
color: #5b96b3;
}
a:hover
{
color: #9bd6f3;
text-decoration: underline;
}
.mx_RoomHeader_name
{
color: #3b7693;
}
.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable)
{
color: #5b96b3;
}
h4
{
color: #9ab !important;
}
/* Drop Area */
.mx_RoomDropTarget
{
font-size: 1.2rem;
border: 1px dashed #f4b41c80;
color: #f4b41c;
background-color: rgba(45, 45, 45, .1);
vertical-align: middle;
}
.mx_RoomDropTarget_label
{
position: relative;
margin: 0;
line-height: 1.6rem;
z-index: 1;
text-align: center;
}
.mx_RoomDropTarget,
.mx_SearchBar
{
padding-bottom: 5px;
}
/* Buttons */
.mx_LoginBox_loginButton,
.mx_LoginBox_registerButton
{
margin-top: 3px;
height: 3rem;
border-radius: 4px;
margin-left: 4px;
margin-right: 4px;
min-width: 80px;
border: 1px solid #19313d;
background-color: #152B35;
color: #fff;
cursor: pointer;
font-size: 1.3rem;
padding: 0 0.1rem;
}
/* Left Panel */
.mx_MatrixChat .mx_LeftPanel
{
order: 1;
background-color: #0d161b;
flex: 0 0 235px;
}
.mx_RightPanel_headerButtonGroup
{
margin-top: 6px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
background-color: #0d161b;
margin-left: 0;
}
/* Hightline */
.mx_EventTile.menu .mx_EventTile_line,
.mx_EventTile:hover .mx_EventTile_line
{
border-left: 0px solid #3b7693;
background-color: #1ba4d410;
}
.mx_EventTile_line
{
position: relative;
margin-right: 1rem;
padding-left: 65px;
padding-top: 4px;
padding-bottom: 2px;
border-radius: 4px;
min-height: 24px;
line-height: 22px;
}
.mx_LeftPanel .mx_BottomLeftMenu
{
order: 3;
border-top: 1px solid #152b35;
margin: 0rem 0.1rem;
z-index: 1;
}
/* Right Panel */
input[type="password"]:active,
input[type="text"]:focus,
textarea:focus
{
background-color: #1ba4d420;
border: 1px solid #1ba4d4a0;
color: #ccc;
}
input[type="password"],
input[type="text"],
textarea
{
background-color: #152b3520;
border: 1px solid #152b35;
color: #888;
}
.mx_RightPanel_header
{
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
border-bottom: 1px solid #152b35;
margin-right: 20px;
-webkit-box-flex: 0;
-ms-flex: 0 0 70px;
flex: 0 0 70px;
}
.mx_EntityTile
{
color: #1ba4d4;
cursor: pointer;
}
/* Room */
.mx_RoomList_emptySubListTip
{
font-size: 1rem;
line-height: 1.2rem;
padding: 5px;
border: initial;
color: #f3fa8a;
background-color: initial;
border-radius: 0px;
margin: 8px 18px 7px;
}
.mx_RoleButton
{
padding: 2px;
cursor: pointer;
display: inline-block;
}
/* Room List Left */
.mx_RoomSubList_label
{
position: relative;
text-transform: uppercase;
color: #ddd;
font-weight: 600;
font-size: 1.2rem;
height: 2rem;
cursor: pointer;
background-color: #111d23;
border-top: solid 2px #19394b;
}
.mx_RoomSubList
{
display: table;
table-layout: fixed;
width: 100%;
background-color: #111d24;
}
.mx_LeftPanel .mx_BottomLeftMenu
{
order: 3;
border-top: 1px solid rgba(118, 207, 166, .2);
margin: 0rem 0.1rem;
z-index: 1;
}
.mx_RoomHeader_rightRow
{
margin-top: 4px;
background-color: initial;
display: flex;
align-items: center;
order: 3;
}
.mx_DateSeparator
{
clear: both;
margin-top: 32px;
margin-bottom: 8px;
margin-left: 63px;
padding-bottom: 6px;
border-bottom: 1px solid #1ba4d480;
}
/* Settings */
.mx_UserSettings
{
max-width: 99%;
padding: 3rem;
}
.mx_UserSettings h3
{
font-size: 2rem;
padding-top: 4rem;
margin: 3rem 1rem 1rem 0rem;
border-bottom: 1px solid #3daee960;
color: #518dac;
}
.mx_UserSettings_profileTable
{
display: run-in;
float: left;
}
.mx_UserSettings_profileInputCell .mx_EditableText,
.mx_UserSettings_profileInputCell input
{
border-bottom: 1px solid #1ba4d4;
}
.mx_UserSettings_avatarPicker,
.mx_UserSettings_changePasswordButton,
.mx_UserSettings_logout
{
margin-left: 3rem;
margin-right: 3rem;
float: left;
}
.mx_UserSettings_toggle
{
padding: 0.5rem;
}
.mx_UserSettings_section
{
margin-left: 2rem;
margin-top: 3rem;
margin-bottom: 2rem;
}
.mx_UserSettings_profileInputCell
{
display: table-cell;
padding: 21px;
}
.mx_UserSettings_profileInputCell
{
display: table-cell;
padding: 0;
}
.mx_UserSettings_profileInputCell input,
.mx_UserSettings_profileInputCell textarea
{
padding: 5px;
border-radius: 3px;
}
.mx_UserSettings_profileInputCell input:focus,
.mx_UserSettings_profileInputCell textarea:focus
{
padding: 5px;
border-radius: 3px;
border: 1px solid #1ba4d4;
}
.mx_textButton,
.mx_UserSettings_button
{
background-color: #0b93c380;
color: #ffffff80;
float: right;
}
.mx_textButton:hover,
.mx_UserSettings_button:hover
{
background-color: #0b93c3;
color: #ffffff;
float: right;
}
.mx_UserSettings_button.danger
{
background-color: #ff0064a0;
}
.mx_UserSettings_button.danger:hover
{
background-color: #ff0064;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment