devs
/
v5shoutbox
4
0
Fork 1
Code Issues 2 Pull Requests Projects Releases Wiki Activity

style: Header and login field style

This commit is contained in:
Eragon 2023-06-19 11:54:40 +02:00 committed by Lephenixnoir
parent 203b1288e4
commit 16f902004e
Signed by: Lephenixnoir
GPG Key ID: 1BBA026E13FC0495
2 changed files with 83 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -10,10 +10,11 @@
<div id="v5shoutbox">
<header>
<div class="status"></div>
<div class="channel-buttons"></div>
<a class="show-log" role="button">Log</a>
<div class="left-header">
<div class="channel-buttons"></div>
<a class="show-log" role="button">Log</a>
</div>
</header>
<hr>
<div class="channels">
<div data-channel="\login">
<form class="login-form">
@ -24,7 +25,6 @@
</div>
<pre class="log" data-channel="\log" style="display: none"></pre>
</div>
<hr>
<div>
<form class="shoutbox-form">
<input type="text" name="message" class="message" />

81
style.css
View File

@ -1,6 +1,83 @@
body {
height: 100vh;
margin: 0;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.5;
font-size: 12px;
color: #333;
}
header {
display: flex;
justify-content: space-between;
padding: 1px 4px;
padding-right: 10px;
background: #ececec;
border: 1px solid rgba(0, 0, 0, .15);
}
a {
color: #ce1919;
}
a:active, a:hover, a:focus {
color: #ce1919;
text-decoration: underline;
outline: 0;
}
#v5shoutbox {
height: 100%
}
.channel-buttons button {
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 3px;
}
.channel-buttons button:nth-child(1) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.channel-buttons button:nth-child(2) {
border-radius: 0;
}
.channel-buttons button:nth-child(3) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.channel-buttons *.bg-activity {
background: red;
color: #ce1919;
}
.channel-buttons *.current {
color: green;
color: #097ba1;
}
.channels {
height: 100%;
display: flex;
justify-content: space-around;
}
.channels div[data-channel="\\login"] {
width: 40%;
height: 30%;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 3px;
align-self: center;
}
.channels .login-form {
height: 100%;
width: 90%;
margin-left: 5%;
display: flex;
flex-flow: column;
justify-content: space-evenly;
}
.channel {
width: 100%;
height: 100%;
}