style button back

This commit is contained in:
lenovo
2022-12-12 15:08:54 +01:00
parent 7ab4aca458
commit 302a2409fc
4 changed files with 64 additions and 48 deletions

View File

@@ -6,7 +6,6 @@
@import 'action_board.css'; @import 'action_board.css';
*/ */
@import 'chat_buttons.css';
@import 'layout_close.css'; @import 'layout_close.css';
@import 'layout_home.css'; @import 'layout_home.css';
@import 'layout_room.css'; @import 'layout_room.css';
@@ -17,6 +16,8 @@
@import 'layout_create.css'; @import 'layout_create.css';
@import 'layout_user.css'; @import 'layout_user.css';
@import 'layout_mute.css'; @import 'layout_mute.css';
@import 'chat_buttons.css';
@import 'chat_back.css';
/* vanish elements wihtout display:none; /* vanish elements wihtout display:none;
@@ -97,47 +98,3 @@ input.vanish {
border: 1px solid black; border: 1px solid black;
} }
/*
* COLLAPSE
.chat._item:not(.open_close) {
display: none;
}
#chat_input:checked ~
#chat_box {
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
}
#chat_input:checked ~
#chat_box .chat._item {
display: flex;
}
#chat_input:checked ~
#chat_box .chat._item.open_close p {
display: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close {
width: 30px;
height: 20px;
padding: 0px;
justify-self: end;
background-color: transparent;
border: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 2px;
width: 15px;
background-color: black;
}
*/

View File

@@ -0,0 +1,16 @@
#chat_box .chat_item.chat_back {
width: 30px;
background-color: transparent;
}
.chat_back::before {
content: "";
position: absolute;
top: calc(50% - 10px - 1px);
left: 10px;
width: 20px;
height: 20px;
border-left: 1px solid black;
border-bottom: 1px solid black;
transform: rotate(45deg);
}

View File

@@ -8,11 +8,10 @@
border: none; border: none;
background-color: rgb(220, 220, 220); background-color: rgb(220, 220, 220);
} }
#chat_box button:focus,
#chat_box button:hover { #chat_box button:hover {
background-color: rgb(200, 200, 200); background-color: rgb(200, 200, 200);
} }
.chat_box button:active { #chat_box button:active {
background-color: rgb(220, 220, 220); background-color: rgb(190, 190, 190);
} }

View File

@@ -12,3 +12,47 @@
display: flex; display: flex;
} }
/*
* COLLAPSE
.chat._item:not(.open_close) {
display: none;
}
#chat_input:checked ~
#chat_box {
gap: 5px;
padding: 5px;
width: 300px;
height: 400px;
}
#chat_input:checked ~
#chat_box .chat._item {
display: flex;
}
#chat_input:checked ~
#chat_box .chat._item.open_close p {
display: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close {
width: 30px;
height: 20px;
padding: 0px;
justify-self: end;
background-color: transparent;
border: none;
}
#chat_input:checked ~
#chat_box .chat._item.open_close::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 4px;
width: 15px;
background-color: black;
}
*/