style button back
This commit is contained in:
@@ -6,7 +6,6 @@
|
||||
@import 'action_board.css';
|
||||
*/
|
||||
|
||||
@import 'chat_buttons.css';
|
||||
@import 'layout_close.css';
|
||||
@import 'layout_home.css';
|
||||
@import 'layout_room.css';
|
||||
@@ -17,6 +16,8 @@
|
||||
@import 'layout_create.css';
|
||||
@import 'layout_user.css';
|
||||
@import 'layout_mute.css';
|
||||
@import 'chat_buttons.css';
|
||||
@import 'chat_back.css';
|
||||
|
||||
|
||||
/* vanish elements wihtout display:none;
|
||||
@@ -97,47 +98,3 @@ input.vanish {
|
||||
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;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
16
tests_hugo/chat_node/chat_client/style/chat_back.css
Normal file
16
tests_hugo/chat_node/chat_client/style/chat_back.css
Normal 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);
|
||||
}
|
||||
|
||||
@@ -8,11 +8,10 @@
|
||||
border: none;
|
||||
background-color: rgb(220, 220, 220);
|
||||
}
|
||||
#chat_box button:focus,
|
||||
#chat_box button:hover {
|
||||
background-color: rgb(200, 200, 200);
|
||||
}
|
||||
.chat_box button:active {
|
||||
background-color: rgb(220, 220, 220);
|
||||
#chat_box button:active {
|
||||
background-color: rgb(190, 190, 190);
|
||||
}
|
||||
|
||||
|
||||
@@ -12,3 +12,47 @@
|
||||
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;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
Reference in New Issue
Block a user