form ok
This commit is contained in:
@@ -172,16 +172,35 @@
|
|||||||
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
|
<div class="chat_item chat_panel chat_panel_protected" id="chat_panel_protected">
|
||||||
<p class="__center" id="chat_protected_title">this room is protected</p>
|
<p class="__center" id="chat_protected_title">this room is protected</p>
|
||||||
<form>
|
<form>
|
||||||
<label><p>password :</p></label>
|
<label for="chat_pswd"><p>password :</p></label>
|
||||||
<input type="password" id="pswd">
|
<input id="chat_pswd" type="password">
|
||||||
<input type="submit" value="⮡">
|
<input type="submit" value="⮡">
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CREATE -->
|
<!-- CREATE -->
|
||||||
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
|
<div class="chat_item chat_panel chat_panel_create" id="chat_panel_create">
|
||||||
<!-- content -->
|
<form>
|
||||||
panel create
|
<label for="chat_name"><p>name :</p></label>
|
||||||
|
<input id="chat_name">
|
||||||
|
|
||||||
|
<input id="chat_public" type="radio" name="chat_create_type" checked>
|
||||||
|
<label for="chat_public" class="_radio"><p>public</p></label>
|
||||||
|
|
||||||
|
<input id="chat_private" type="radio" name="chat_create_type">
|
||||||
|
<label for="chat_private" class="_radio"><p>private</p></label>
|
||||||
|
|
||||||
|
<input id="chat_protected" class="_check_show_next" type="radio" name="chat_create_type">
|
||||||
|
<label for="chat_protected" class="_radio"><p>protected</p></label>
|
||||||
|
|
||||||
|
<div class="__content _is_hidden">
|
||||||
|
<label for="chat_pswd"><p>choose a password :</p></label>
|
||||||
|
<input id="chat_pswd" type="password">
|
||||||
|
<p>confirm password :</p>
|
||||||
|
<input type="password">
|
||||||
|
</div>
|
||||||
|
<input type="submit" value="⮡">
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- USER -->
|
<!-- USER -->
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ cxv
|
|||||||
@import 'chat_write.css';
|
@import 'chat_write.css';
|
||||||
@import 'chat_msg.css';
|
@import 'chat_msg.css';
|
||||||
@import 'chat_blocked.css';
|
@import 'chat_blocked.css';
|
||||||
|
@import 'chat_form.css';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@import '_chat_controls.css';
|
@import '_chat_controls.css';
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
/* p in chat_box
|
/* p in chat_box
|
||||||
*/
|
*/
|
||||||
#chat_box p {
|
#chat_box p {
|
||||||
@@ -7,6 +8,7 @@
|
|||||||
font-family: Cantarell;
|
font-family: Cantarell;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* show child only if it's alone
|
/* show child only if it's alone
|
||||||
*/
|
*/
|
||||||
#chat_box .__show_if_only_child {
|
#chat_box .__show_if_only_child {
|
||||||
@@ -45,3 +47,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* display content
|
||||||
|
*/
|
||||||
|
#chat_box .__content{
|
||||||
|
display: content;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
65
tests_hugo/chat_node/chat_client/style/chat_form.css
Normal file
65
tests_hugo/chat_node/chat_client/style/chat_form.css
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
|
||||||
|
/* default element take all space on each line
|
||||||
|
*/
|
||||||
|
#chat_box .chat_item form {
|
||||||
|
margin: 0px auto;
|
||||||
|
}
|
||||||
|
#chat_box .chat_item form * {
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* radio elements style check
|
||||||
|
*/
|
||||||
|
#chat_box .chat_item form input[type=radio] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#chat_box .chat_item form label._radio {
|
||||||
|
margin: 0px 0px 0px auto;
|
||||||
|
padding-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#chat_box .chat_item form label._radio::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: calc(50% - 6px);
|
||||||
|
right: 0px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 2px solid rgb(150, 150, 150);
|
||||||
|
box-sizing: border-box;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
#chat_box .chat_item form input[type=radio]:checked
|
||||||
|
+ label._radio::after {
|
||||||
|
background-color: rgb(200, 200, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* hide and show next element on focus
|
||||||
|
*/
|
||||||
|
#chat_box form ._is_hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#chat_box form ._check_show_next:checked ~ ._is_hidden {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* submit button
|
||||||
|
https://www.fileformat.info/info/unicode/category/So/list.htm
|
||||||
|
U+21AA RIGHTWARDS ARROW WITH HOOK ↪
|
||||||
|
U+21B3 DOWNWARDS ARROW WITH TIP RIGHTWARDS ↳
|
||||||
|
U+2BA1 DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS ⮡
|
||||||
|
U+2BB1 RIBBON ARROW DOWN RIGHT ⮱
|
||||||
|
U+2BA9 BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW ⮩
|
||||||
|
*/
|
||||||
|
#chat_box .chat_item form input[type=submit] {
|
||||||
|
padding: 0px 10px;
|
||||||
|
border: none;
|
||||||
|
margin: 10px 0px 0px auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -34,26 +34,3 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* form
|
|
||||||
*/
|
|
||||||
#chat_box.protected form {
|
|
||||||
margin: 0px auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* submit button
|
|
||||||
https://www.fileformat.info/info/unicode/category/So/list.htm
|
|
||||||
U+21AA RIGHTWARDS ARROW WITH HOOK ↪
|
|
||||||
U+21B3 DOWNWARDS ARROW WITH TIP RIGHTWARDS ↳
|
|
||||||
U+2BA1 DOWNWARDS TRIANGLE-HEADED ARROW WITH LONG TIP RIGHTWARDS ⮡
|
|
||||||
U+2BB1 RIBBON ARROW DOWN RIGHT ⮱
|
|
||||||
U+2BA9 BLACK CURVED DOWNWARDS AND RIGHTWARDS ARROW ⮩
|
|
||||||
*/
|
|
||||||
#chat_box.protected input[type=submit] {
|
|
||||||
padding: 0px 10px;
|
|
||||||
border: none;
|
|
||||||
margin: 10px 0px 0px auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user