Add rounded square avatars theme option

d336ea7a13ad53c83810de3550444785f57ad3a9

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: fdc9a2a93be4deac11a34f314bc0fd175c3d601d
4 files changed, +9 -0Showing whitespace changes
public/css/toggle-dependent.css+5 -0
@@ -45,6 +45,11 @@ body.square-avatars .avatar img {
4545 border-radius: var(--avatar-base-border-radius) !important;
4646}
4747
48+body.rounded-avatars .avatar,
49+body.rounded-avatars .avatar img {
50+ border-radius: var(--avatar-base-border-radius-rounded) !important;
51+}
52+
4853/*char list grid mode*/
4954
5055body.charListGrid #rm_print_characters_block {
public/index.html+1 -0
@@ -4348,6 +4348,7 @@
43484348 <select id="avatar_style" class="widthNatural flex1 margin0 text_pole">
43494349 <option value="0" data-i18n="Circle">Circle</option>
43504350 <option value="2" data-i18n="Square">Square</option>
4351+ <option value="3" data-i18n="Rounded">Rounded</option>
43514352 <option value="1" data-i18n="Rectangle">Rectangle</option>
43524353 </select>
43534354 </div>
public/scripts/power-user.js+2 -0
@@ -96,6 +96,7 @@ const avatar_styles = {
9696 ROUND: 0,
9797 RECTANGULAR: 1,
9898 SQUARE: 2,
99+ ROUNDED: 3,
99100};
100101
101102export const chat_styles = {
@@ -1021,6 +1022,7 @@ function applyNoShadows() {
10211022function applyAvatarStyle() {
10221023 $('body').toggleClass('big-avatars', power_user.avatar_style === avatar_styles.RECTANGULAR);
10231024 $('body').toggleClass('square-avatars', power_user.avatar_style === avatar_styles.SQUARE);
1025+ $('body').toggleClass('rounded-avatars', power_user.avatar_style === avatar_styles.ROUNDED);
10241026 $('#avatar_style').val(power_user.avatar_style).prop('selected', true);
10251027}
10261028
public/style.css+1 -0
@@ -117,6 +117,7 @@
117117 --avatar-base-width: 50px;
118118 --avatar-base-border-radius: 2px;
119119 --avatar-base-border-radius-round: 50%;
120+ --avatar-base-border-radius-rounded: 10px;
120121 --inline-avatar-small-factor: 0.6;
121122
122123 --animation-duration: 125ms;