ircabot/html/style.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;
}
}