Skip to content

Commit

Permalink
- adjusted right nav padding
Browse files Browse the repository at this point in the history 
- added border radius to big avatar group collages
- fixed avatar collages squashing horizontally on narrow displays
- removed gaps from mobile display (imperfect fix)
  • Loading branch information
@RossAscends
RossAscends committed Apr 9, 2023
1 parent a021dc2 commit eea466c
Showing 1 changed file with 77 additions and 23 deletions.
100 changes: 77 additions & 23 deletions public/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,14 +456,14 @@ body.big-avatars .avatar {
justify-content: center;
align-items: center;
overflow: visible;
border-radius: 5px;
border-radius: 10px;
box-shadow: 0 0 5px var(--black50a);
}

body.big-avatars #user_avatar_block .avatar {
height: 90px;
width: 60px;
border-radius: 5px;
border-radius: 10px;
}

body.big-avatars #user_avatar_block .avatar img {
Expand Down Expand Up @@ -631,6 +631,7 @@ input[type="file"] {
max-height: 30px;
display: flex;
align-items: flex-end;
padding: 0 10px;
}

#right-nav-panel-tabs .right_menu_button:last-of-type {
Expand Down Expand Up @@ -725,6 +726,7 @@ input[type="file"] {
#rm_ch_create_block {
display: none;
overflow-y: auto;
padding: 0 5px;
}

#rm_extensions_block {
Expand Down Expand Up @@ -853,6 +855,7 @@ img[src="img/load.svg"] {
flex-direction: row;
align-items: center;
margin-bottom: 10px;
padding-left: 5px;
}

#character_search_bar {
Expand Down Expand Up @@ -2220,6 +2223,7 @@ input[type="range"]::-webkit-slider-thumb {
align-items: center;
column-gap: 10px;
flex-wrap: wrap;
padding: 0 5px;
}

.rm_group_settings {
Expand Down Expand Up @@ -2428,9 +2432,21 @@ input[type="range"]::-webkit-slider-thumb {
overflow: hidden;
}

body:not(.big-avatars) .avatar_collage {
min-width: 50px;
}

body.big-avatars .avatar_collage {
min-width: 60px;
}


.avatar_collage img {
position: absolute;
overflow: hidden;
}

body:not(.big-avatars) .avatar_collage img {
border-radius: 0% !important;
}

Expand Down Expand Up @@ -2515,6 +2531,44 @@ input[type="range"]::-webkit-slider-thumb {
height: 50%;
}

/* border radius for big avatars collages */

body.big-avatars .collage_2 .img_1 {
border-radius: 10px 0 0 10px !important;
}

body.big-avatars .collage_2 .img_2 {
border-radius: 0 10px 10px 0 !important;
}

body.big-avatars .collage_3 .img_1 {
border-radius: 10px 0 0 0 !important;
}

body.big-avatars .collage_3 .img_2 {
border-radius: 0 10px 0 0 !important;
}

body.big-avatars .collage_3 .img_3 {
border-radius: 0 0 10px 10px !important;
}

body.big-avatars .collage_4 .img_1 {
border-radius: 10px 0 0 0 !important;
}

body.big-avatars .collage_4 .img_2 {
border-radius: 0 10px 0 0 !important;
}

body.big-avatars .collage_4 .img_3 {
border-radius: 0 0 0 10px !important;
}

body.big-avatars .collage_4 .img_4 {
border-radius: 0 0 10px 0 !important;
}

span.warning {
color: rgb(190, 0, 0);
font-weight: bolder;
Expand Down Expand Up @@ -2645,7 +2699,8 @@ a {
margin: 0;
right: 0;
left: auto;
padding: 0 10px;
padding: 0;
padding-bottom: 5px;
backdrop-filter: blur(10px);
background-color: var(--black50a);
-webkit-backdrop-filter: blur(10px);
Expand Down Expand Up @@ -3095,15 +3150,16 @@ label[for="extensions_autoconnect"] {
overflow: hidden;
height: 100vh;
width: 100vw;
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.drawer-content {
min-width: unset;
width: calc(100vw - 10px);
max-height: calc(100vh - 70px);
width: 100vw;
max-height: calc(100vh - 45px);
position: fixed;
left: 0;
top: 10px;
top: 5px;
border: 1px solid var(--grey30);
}

Expand All @@ -3128,10 +3184,10 @@ label[for="extensions_autoconnect"] {
#character_popup,
#world_popup {
/*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
height: calc(100svh - 70px);
width: calc(100vw - 10px);
height: calc(100svh - 45px);
width: 100vw;
margin: 0 auto;
margin-left: 5px;
margin-left: 0px;
position: fixed;
}

Expand Down Expand Up @@ -3160,11 +3216,10 @@ label[for="extensions_autoconnect"] {

#right-nav-panel,
#left-nav-panel {
height: calc(100svh - 70px);
height: calc(100svh - 45px);
min-width: 0px;
width: calc(100vw - 10px);
max-width: calc(100vw - 10px);
left: 5px !important;
width: 100vw;
max-width: 100vw;
overflow-y: auto;
border-left: 1px solid var(--grey30);
border-right: 1px solid var(--grey30);
Expand Down Expand Up @@ -3246,11 +3301,11 @@ label[for="extensions_autoconnect"] {

.drawer-content {
min-width: unset;
width: calc(100vw - 10px);
max-height: calc(100vh - 70px);
width: 100vw;
max-height: calc(100vh - 45px);
position: fixed;
left: 0;
top: 10px;
top: 5px;
border: 1px solid var(--grey30);
}

Expand All @@ -3275,10 +3330,10 @@ label[for="extensions_autoconnect"] {
#character_popup,
#world_popup {
/*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
height: calc(100svh - 70px);
width: calc(100vw - 10px);
height: calc(100svh - 45px);
width: 100vw;
margin: 0 auto;
margin-left: 5px;
margin-left: 0px;
position: fixed;
}

Expand Down Expand Up @@ -3307,11 +3362,10 @@ label[for="extensions_autoconnect"] {

#right-nav-panel,
#left-nav-panel {
height: calc(100svh - 70px);
height: calc(100svh - 45px);
min-width: 0px;
width: calc(100vw - 10px);
max-width: calc(100vw - 10px);
left: 5px !important;
width: 100vw;
max-width: 100vw;
overflow-y: auto;
border-left: 1px solid var(--grey30);
border-right: 1px solid var(--grey30);
Expand Down

0 comments on commit eea466c

Please sign in to comment.