mirror of https://notabug.org/acetone/ircabot.git
307 lines
5.3 KiB
CSS
307 lines
5.3 KiB
CSS
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.wrapper {
|
|
height: 90%;
|
|
padding: 2% 7%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.left_menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 15%;
|
|
}
|
|
|
|
.left_menu__wrapper {
|
|
flex: 93%;
|
|
overflow: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #6493bc #b6c7d6;
|
|
margin-bottom: 10%;
|
|
}
|
|
|
|
.left_menu__item {
|
|
width: 98%;
|
|
margin-bottom: 5%;
|
|
border: 2px solid #b6c7d6;
|
|
}
|
|
|
|
.left_menu__item_title {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #6493bc;
|
|
padding: 2% 0 0 2%;
|
|
margin-bottom: 3%;
|
|
}
|
|
|
|
.left_menu__item_rooms {
|
|
margin-bottom: 5%;
|
|
}
|
|
|
|
.left_menu__item_link {
|
|
display: block;
|
|
padding-left: 7%;
|
|
text-decoration: none;
|
|
color: #2f444c;
|
|
font-size: 18px;
|
|
margin-bottom: 1%;
|
|
}
|
|
|
|
.left_menu__item_link:hover {
|
|
text-decoration: 1.5px underline;
|
|
}
|
|
|
|
.left_menu__item_link__selected {
|
|
display: block;
|
|
padding-left: 2%;
|
|
text-decoration: none;
|
|
color: #2f444c;
|
|
font-size: 18px;
|
|
background: #b6c7d6;
|
|
margin: 0 5% 1% 5%;
|
|
}
|
|
|
|
.left_menu__footer {
|
|
display: flex;
|
|
flex: 3%;
|
|
font-size: 18px;
|
|
color: #6493bc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.main {
|
|
flex: 68%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 2%;
|
|
}
|
|
|
|
.main_header {
|
|
flex: 5%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.main_header__title {
|
|
font-size: 34px;
|
|
flex: 69%;
|
|
font-weight: bold;
|
|
color: #2f444c;
|
|
}
|
|
|
|
.main_header__search {
|
|
flex: 30%;
|
|
}
|
|
|
|
.main_header__search_form {
|
|
width: 100%;
|
|
height: 70%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.main_header__search_input {
|
|
width: 75%;
|
|
height: 100%;
|
|
border: 2px solid #b6c7d6;
|
|
font-size: 18px;
|
|
font-family: monospace;
|
|
color: #2f444c;
|
|
}
|
|
|
|
.main_header__search_button {
|
|
width: 20%;
|
|
margin-left: 2%;
|
|
height: 84%;
|
|
border: 2px solid #b6c7d6;
|
|
}
|
|
|
|
.main_header__search_button__img {
|
|
background: url(/svg/magnifier.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
width: 95%;
|
|
height: 95%;
|
|
border: none;
|
|
}
|
|
|
|
.main_header__search_button:hover {
|
|
background: #b6c7d6;
|
|
border: 2px solid #6493bc;
|
|
}
|
|
|
|
.main_middle {
|
|
flex: 3%;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
flex-direction: row;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.main_middle__path {
|
|
color: #6493bc;
|
|
flex: 77.5%;
|
|
}
|
|
|
|
.main_middle__online {
|
|
color: #b6c7d6;
|
|
flex: 21.5%;
|
|
text-align: end;
|
|
}
|
|
|
|
.main_middle__online_list {
|
|
display: block;
|
|
position: fixed;
|
|
visibility: hidden;
|
|
width: 14.25%;
|
|
height: 80%;
|
|
z-index: 2;
|
|
color: white;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.main_middle__online_point {
|
|
display: flex;
|
|
width: 98%;
|
|
padding: 1%;
|
|
background: #6493bc;
|
|
cursor: default;
|
|
}
|
|
|
|
#menu__toggle:checked ~ .main_middle__online_list {
|
|
visibility: visible;
|
|
}
|
|
|
|
#menu__toggle {
|
|
display: none;
|
|
}
|
|
|
|
.main_payload {
|
|
flex: 91%;
|
|
border: 2px solid #b6c7d6;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
scrollbar-width: auto;
|
|
scrollbar-color: #6493bc #b6c7d6;
|
|
}
|
|
|
|
.main_payload__block {
|
|
display: flex;
|
|
width: 95%;
|
|
height: 4%;
|
|
margin: 0.5% 0 0 2.5%;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.main_payload__block:hover {
|
|
background: #b6c7d6;
|
|
}
|
|
|
|
.main_payload__block_folder {
|
|
flex: 5%;
|
|
background: url(/svg/folder.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.main_payload__block_message {
|
|
flex: 5%;
|
|
background: url(/svg/message.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
}
|
|
|
|
.main_payload__block_text {
|
|
flex: 93%;
|
|
font-size: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #2f444c;
|
|
}
|
|
|
|
.main_payload__chat {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 95%;
|
|
margin: 1% 0 0 2.5%;
|
|
font-size: 18px;
|
|
color: #821010;
|
|
}
|
|
|
|
.main_payload__chat_username {
|
|
flex: 10%;
|
|
margin-right: 1%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.main_payload__chat_mail {
|
|
flex: 89%;
|
|
color: #2f444c;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.main_payload__error {
|
|
width: 95%;
|
|
font-size: 20px;
|
|
margin: 2% 2% 0 2%;
|
|
}
|
|
|
|
@media screen and (max-width: 950px) {
|
|
.wrapper {
|
|
padding: 1% 2%;
|
|
}
|
|
|
|
.main_middle__path {
|
|
flex: 67.5%;
|
|
}
|
|
|
|
.main_middle__online {
|
|
flex: 31.5%;
|
|
}
|
|
|
|
.main_middle__online_list {
|
|
width: 23%;
|
|
}
|
|
|
|
.main_header__search_input {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.left_menu__footer {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 950px) {
|
|
.main_payload__block_text {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 750px) {
|
|
.main_payload__block_text {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 600px) {
|
|
.main_payload__block_text {
|
|
font-size: 14px;
|
|
}
|
|
}
|