make css changes a theme

This commit is contained in:
Iuri Matias 2019-04-10 22:04:36 -04:00
parent e22d65c666
commit 1528e6a946
2 changed files with 55 additions and 56 deletions

View File

@ -4,65 +4,10 @@
body {
background-color: #eef2f5;
}
._status-chat-widget {
background-color: white;
width: 33%;
border-radius: 16px;
font-family: "Inter UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
background: url(https://status.im/img/status-logo-symbol.svg) 99% 3% no-repeat white;
background-size: 55px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
._status-chat-widget h3 {
margin-top: 0px;
color: #4360df;
font-weight: 600;
font-size: 20px;
padding: 24px;
padding-bottom: 5px;
}
._status-chat-widget .chat {
height: 218px;
overflow: auto;
padding: 24px;
border-top: 1px solid #ddd;
background-color: #eef2f5;
}
._status-chat-widget .post {
width: 100%;
height: 60px;
padding-left: 30px;
border-radius: 0px 0px 10px 10px;
border: 0px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 14px;
}
._status-chat-widget .username {
color: #939ba1;
font-size: 14px;
}
._status-chat-widget .message {
background-color: white;
padding: 5px 10px;
border-radius: 10px;
border: 1px solid #eee;
display: block;
margin-top: 3px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<link rel="stylesheet" href="./themes/status.css">
<script src="./dist/js/statuswidget.js"></script>
<div id="status-chat-widget"></div>
<script>StatusWidget("gitter-bridge", document.getElementById("status-chat-widget"));</script>

54
themes/status.css Normal file
View File

@ -0,0 +1,54 @@
._status-chat-widget {
background-color: white;
width: 33%;
border-radius: 16px;
font-family: "Inter UI",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
background: url(https://status.im/img/status-logo-symbol.svg) 99% 3% no-repeat white;
background-size: 55px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
._status-chat-widget h3 {
margin-top: 0px;
color: #4360df;
font-weight: 600;
font-size: 20px;
padding: 24px;
padding-bottom: 5px;
}
._status-chat-widget .chat {
height: 218px;
overflow: auto;
padding: 24px;
border-top: 1px solid #ddd;
background-color: #eef2f5;
}
._status-chat-widget .post {
width: 100%;
height: 60px;
padding-left: 30px;
border-radius: 0px 0px 10px 10px;
border: 0px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-size: 14px;
}
._status-chat-widget .username {
color: #939ba1;
font-size: 14px;
}
._status-chat-widget .message {
background-color: white;
padding: 5px 10px;
border-radius: 10px;
border: 1px solid #eee;
display: block;
margin-top: 3px;
margin-bottom: 10px;
}