42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

home layout three dots working and found a better way to use css with partial global

Browse Source
This commit is contained in:
simplonco
2022-12-24 22:43:20 +01:00
parent 05d5f2a3ec
commit 06bca96853
5 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
srcs/requirements/svelte/api_front/src/pieces/chat/Buttons.svelte
View File

@@ -29,6 +29,8 @@
button.grid#settings {grid-area: settings;}
*/
/* default config
*/
button {
display: flex;
width: auto;
@@ -59,5 +61,6 @@
}
*/
</style>

15
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -51,30 +51,27 @@
}
/* button "new" appearance
/* button "new"
*/
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_new {
width: auto;
.grid_box :global(button#chat_new:not(:hover)) {
background-color: transparent;
}
/* button "settings" as 3 dots
*/
#chat_box.home .chat_item#chat_settings p {
.grid_box :global(button#chat_settings p) {
display: none;
}
#chat_box.home button.chat_item#chat_settings {
.grid_box :global(button#chat_settings) {
width: 30px;
height: 100%;
padding: 0px;
}
/* add or remove '.chat_item' to toggle the hover effect */
#chat_box.home button.chat_item#chat_settings {
.grid_box :global(button#chat_settings:not(:hover)) {
background-color: transparent;
}
#chat_box.home .chat_item#chat_settings::after {
.grid_box :global(button#chat_settings::after) {
content: '\2807';
font-size: 20px;
position: absolute;