@nextcloud/vue 8.13.0 → 8.15.0

package/dist/assets/{NcModal-6bpKFk4w.css → NcModal-Ch7ovo9y.css}

@@ -9,14 +9,14 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-999dfc9e] {
+.material-design-icon[data-v-0d4052a3] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.modal-mask[data-v-999dfc9e] {
+.modal-mask[data-v-0d4052a3] {
   position: fixed;
   z-index: 9998;
   top: 0;
@@ -26,10 +26,10 @@
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
 }
-.modal-mask--dark[data-v-999dfc9e] {
+.modal-mask--dark[data-v-0d4052a3] {
   background-color: rgba(0, 0, 0, 0.92);
 }
-.modal-header[data-v-999dfc9e] {
+.modal-header[data-v-0d4052a3] {
   position: absolute;
   z-index: 10001;
   top: 0;
@@ -43,11 +43,11 @@
   overflow: hidden;
   transition: opacity 250ms, visibility 250ms;
 }
-.modal-header__name[data-v-999dfc9e] {
+.modal-header__name[data-v-0d4052a3] {
   overflow-x: hidden;
   box-sizing: border-box;
   width: 100%;
-  padding: 0 132px 0 12px;
+  padding: 0 calc(var(--default-clickable-area) * 3) 0 12px;
   transition: padding ease 100ms;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -55,27 +55,27 @@
   margin-block: 0;
 }
 @media only screen and (min-width: 1024px) {
-.modal-header__name[data-v-999dfc9e] {
-    padding-left: 132px;
+.modal-header__name[data-v-0d4052a3] {
+    padding-left: calc(var(--default-clickable-area) * 3);
     text-align: center;
 }
 }
-.modal-header .icons-menu[data-v-999dfc9e] {
+.modal-header .icons-menu[data-v-0d4052a3] {
   position: absolute;
   right: 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 }
-.modal-header .icons-menu .header-close[data-v-999dfc9e] {
+.modal-header .icons-menu .header-close[data-v-0d4052a3] {
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  margin: 3px;
+  margin: calc((50px - var(--default-clickable-area)) / 2);
   padding: 0;
 }
-.modal-header .icons-menu .play-pause-icons[data-v-999dfc9e] {
+.modal-header .icons-menu .play-pause-icons[data-v-0d4052a3] {
   position: relative;
   width: 50px;
   height: 50px;
@@ -85,44 +85,44 @@
   border: none;
   background-color: transparent;
 }
-.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__play[data-v-999dfc9e],
-.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__pause[data-v-999dfc9e], .modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__play[data-v-999dfc9e],
-.modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__pause[data-v-999dfc9e] {
+.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__play[data-v-0d4052a3],
+.modal-header .icons-menu .play-pause-icons:hover .play-pause-icons__pause[data-v-0d4052a3], .modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__play[data-v-0d4052a3],
+.modal-header .icons-menu .play-pause-icons:focus .play-pause-icons__pause[data-v-0d4052a3] {
   opacity: 1;
-  border-radius: 22px;
+  border-radius: calc(var(--default-clickable-area) / 2);
   background-color: rgba(127, 127, 127, 0.25);
 }
-.modal-header .icons-menu .play-pause-icons__play[data-v-999dfc9e], .modal-header .icons-menu .play-pause-icons__pause[data-v-999dfc9e] {
+.modal-header .icons-menu .play-pause-icons__play[data-v-0d4052a3], .modal-header .icons-menu .play-pause-icons__pause[data-v-0d4052a3] {
   box-sizing: border-box;
-  width: 44px;
-  height: 44px;
-  margin: 3px;
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
+  margin: calc((50px - var(--default-clickable-area)) / 2);
   cursor: pointer;
   opacity: 0.7;
 }
-.modal-header .icons-menu[data-v-999dfc9e]  .action-item {
-  margin: 3px;
+.modal-header .icons-menu[data-v-0d4052a3]  .action-item {
+  margin: calc((50px - var(--default-clickable-area)) / 2);
 }
-.modal-header .icons-menu[data-v-999dfc9e]  .action-item--single {
+.modal-header .icons-menu[data-v-0d4052a3]  .action-item--single {
   box-sizing: border-box;
-  width: 44px;
-  height: 44px;
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
   cursor: pointer;
   background-position: center;
   background-size: 22px;
 }
-.modal-header .icons-menu .header-actions[data-v-999dfc9e] button:focus-visible {
+.modal-header .icons-menu .header-actions[data-v-0d4052a3] button:focus-visible {
   box-shadow: none !important;
   outline: 2px solid #fff !important;
 }
-.modal-header .icons-menu[data-v-999dfc9e] .action-item__menutoggle {
+.modal-header .icons-menu[data-v-0d4052a3] .action-item__menutoggle {
   padding: 0;
 }
-.modal-header .icons-menu[data-v-999dfc9e] .action-item__menutoggle span, .modal-header .icons-menu[data-v-999dfc9e] .action-item__menutoggle svg {
+.modal-header .icons-menu[data-v-0d4052a3] .action-item__menutoggle span, .modal-header .icons-menu[data-v-0d4052a3] .action-item__menutoggle svg {
   width: var(--icon-size);
   height: var(--icon-size);
 }
-.modal-wrapper[data-v-999dfc9e] {
+.modal-wrapper[data-v-0d4052a3] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -132,8 +132,8 @@
   /* Navigation buttons */
   /* Content */
 }
-.modal-wrapper .prev[data-v-999dfc9e],
-.modal-wrapper .next[data-v-999dfc9e] {
+.modal-wrapper .prev[data-v-0d4052a3],
+.modal-wrapper .next[data-v-0d4052a3] {
   z-index: 10000;
   height: 35vh;
   min-height: 300px;
@@ -141,18 +141,18 @@
   transition: opacity 250ms;
   color: white;
 }
-.modal-wrapper .prev[data-v-999dfc9e]:focus-visible,
-.modal-wrapper .next[data-v-999dfc9e]:focus-visible {
+.modal-wrapper .prev[data-v-0d4052a3]:focus-visible,
+.modal-wrapper .next[data-v-0d4052a3]:focus-visible {
   box-shadow: 0 0 0 2px var(--color-primary-element-text);
   background-color: var(--color-box-shadow);
 }
-.modal-wrapper .prev[data-v-999dfc9e] {
+.modal-wrapper .prev[data-v-0d4052a3] {
   left: 2px;
 }
-.modal-wrapper .next[data-v-999dfc9e] {
+.modal-wrapper .next[data-v-0d4052a3] {
   right: 2px;
 }
-.modal-wrapper .modal-container[data-v-999dfc9e] {
+.modal-wrapper .modal-container[data-v-0d4052a3] {
   position: relative;
   display: flex;
   padding: 0;
@@ -162,33 +162,33 @@
   color: var(--color-main-text);
   box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
 }
-.modal-wrapper .modal-container__close[data-v-999dfc9e] {
+.modal-wrapper .modal-container__close[data-v-0d4052a3] {
   z-index: 1;
   position: absolute;
   top: 4px;
   right: 4px;
 }
-.modal-wrapper .modal-container__content[data-v-999dfc9e] {
+.modal-wrapper .modal-container__content[data-v-0d4052a3] {
   width: 100%;
   min-height: 52px;
   overflow: auto;
 }
-.modal-wrapper--small > .modal-container[data-v-999dfc9e] {
+.modal-wrapper--small > .modal-container[data-v-0d4052a3] {
   width: 400px;
   max-width: 90%;
   max-height: min(90%, 100% - 100px);
 }
-.modal-wrapper--normal > .modal-container[data-v-999dfc9e] {
+.modal-wrapper--normal > .modal-container[data-v-0d4052a3] {
   max-width: 90%;
   width: 600px;
   max-height: min(90%, 100% - 100px);
 }
-.modal-wrapper--large > .modal-container[data-v-999dfc9e] {
+.modal-wrapper--large > .modal-container[data-v-0d4052a3] {
   max-width: 90%;
   width: 900px;
   max-height: min(90%, 100% - 100px);
 }
-.modal-wrapper--full > .modal-container[data-v-999dfc9e] {
+.modal-wrapper--full > .modal-container[data-v-0d4052a3] {
   width: 100%;
   height: calc(100% - var(--header-height));
   position: absolute;
@@ -196,7 +196,7 @@
   border-radius: 0;
 }
 @media only screen and ((max-width: 512px) or (max-height: 400px)) {
-.modal-wrapper .modal-container[data-v-999dfc9e] {
+.modal-wrapper .modal-container[data-v-0d4052a3] {
     max-width: initial;
     width: 100%;
     max-height: initial;
@@ -208,60 +208,60 @@
 }
 
 /* TRANSITIONS */
-.fade-enter-active[data-v-999dfc9e],
-.fade-leave-active[data-v-999dfc9e] {
+.fade-enter-active[data-v-0d4052a3],
+.fade-leave-active[data-v-0d4052a3] {
   transition: opacity 250ms;
 }
-.fade-enter[data-v-999dfc9e],
-.fade-leave-to[data-v-999dfc9e] {
+.fade-enter[data-v-0d4052a3],
+.fade-leave-to[data-v-0d4052a3] {
   opacity: 0;
 }
-.fade-visibility-enter[data-v-999dfc9e],
-.fade-visibility-leave-to[data-v-999dfc9e] {
+.fade-visibility-enter[data-v-0d4052a3],
+.fade-visibility-leave-to[data-v-0d4052a3] {
   visibility: hidden;
   opacity: 0;
 }
-.modal-in-enter-active[data-v-999dfc9e],
-.modal-in-leave-active[data-v-999dfc9e],
-.modal-out-enter-active[data-v-999dfc9e],
-.modal-out-leave-active[data-v-999dfc9e] {
+.modal-in-enter-active[data-v-0d4052a3],
+.modal-in-leave-active[data-v-0d4052a3],
+.modal-out-enter-active[data-v-0d4052a3],
+.modal-out-leave-active[data-v-0d4052a3] {
   transition: opacity 250ms;
 }
-.modal-in-enter[data-v-999dfc9e],
-.modal-in-leave-to[data-v-999dfc9e],
-.modal-out-enter[data-v-999dfc9e],
-.modal-out-leave-to[data-v-999dfc9e] {
+.modal-in-enter[data-v-0d4052a3],
+.modal-in-leave-to[data-v-0d4052a3],
+.modal-out-enter[data-v-0d4052a3],
+.modal-out-leave-to[data-v-0d4052a3] {
   opacity: 0;
 }
-.modal-in-enter .modal-container[data-v-999dfc9e],
-.modal-in-leave-to .modal-container[data-v-999dfc9e] {
+.modal-in-enter .modal-container[data-v-0d4052a3],
+.modal-in-leave-to .modal-container[data-v-0d4052a3] {
   transform: scale(0.9);
 }
-.modal-out-enter .modal-container[data-v-999dfc9e],
-.modal-out-leave-to .modal-container[data-v-999dfc9e] {
+.modal-out-enter .modal-container[data-v-0d4052a3],
+.modal-out-leave-to .modal-container[data-v-0d4052a3] {
   transform: scale(1.1);
 }
-.modal-mask .play-pause-icons .progress-ring[data-v-999dfc9e] {
+.modal-mask .play-pause-icons .progress-ring[data-v-0d4052a3] {
   position: absolute;
   top: 0;
   left: 0;
   transform: rotate(-90deg);
 }
-.modal-mask .play-pause-icons .progress-ring .progress-ring__circle[data-v-999dfc9e] {
+.modal-mask .play-pause-icons .progress-ring .progress-ring__circle[data-v-0d4052a3] {
   transition: 100ms stroke-dashoffset;
   transform-origin: 50% 50%;
-  animation: progressring-999dfc9e linear var(--slideshow-duration) infinite;
+  animation: progressring-0d4052a3 linear var(--slideshow-duration) infinite;
   stroke-linecap: round;
   stroke-dashoffset: 94.2477796077;
   stroke-dasharray: 94.2477796077;
 }
-.modal-mask .play-pause-icons--paused .icon-pause[data-v-999dfc9e] {
-  animation: breath-999dfc9e 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+.modal-mask .play-pause-icons--paused .icon-pause[data-v-0d4052a3] {
+  animation: breath-0d4052a3 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
 }
-.modal-mask .play-pause-icons--paused .progress-ring__circle[data-v-999dfc9e] {
+.modal-mask .play-pause-icons--paused .progress-ring__circle[data-v-0d4052a3] {
   animation-play-state: paused !important;
 }
-@keyframes progressring-999dfc9e {
+@keyframes progressring-0d4052a3 {
 from {
     stroke-dashoffset: 94.2477796077;
 }
@@ -269,7 +269,7 @@ to {
     stroke-dashoffset: 0;
 }
 }
-@keyframes breath-999dfc9e {
+@keyframes breath-0d4052a3 {
 0% {
     opacity: 1;
 }

package/dist/assets/{NcRelatedResourcesPanel-i_FBo7DY.css → NcRelatedResourcesPanel-BE9CQ8s8.css}

@@ -9,32 +9,32 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-825af6f9] {
+.material-design-icon[data-v-de46bdbe] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.team-resources__header[data-v-825af6f9] {
+.team-resources__header[data-v-de46bdbe] {
   font-weight: bold;
   margin-bottom: 6px;
 }
-.related-team[data-v-825af6f9] {
+.related-team[data-v-de46bdbe] {
   border-radius: var(--border-radius-rounded);
   border: 2px solid var(--color-border-dark);
   margin-bottom: 6px;
 }
-.related-team__open[data-v-825af6f9] {
+.related-team__open[data-v-de46bdbe] {
   border-color: var(--color-primary-element);
 }
-.related-team__header[data-v-825af6f9] {
+.related-team__header[data-v-de46bdbe] {
   padding: 6px;
   padding-right: 24px;
   display: flex;
   gap: 12px;
 }
-.related-team__name[data-v-825af6f9] {
+.related-team__name[data-v-de46bdbe] {
   display: flex;
   flex-grow: 1;
   align-items: center;
@@ -43,42 +43,42 @@
   font-weight: bold;
   margin: 0;
 }
-.related-team .related-team-provider[data-v-825af6f9] {
+.related-team .related-team-provider[data-v-de46bdbe] {
   padding: 6px 12px;
 }
-.related-team .related-team-provider__name[data-v-825af6f9] {
+.related-team .related-team-provider__name[data-v-de46bdbe] {
   font-weight: bold;
   margin-bottom: 3px;
 }
-.related-team .related-team-provider__link[data-v-825af6f9] {
+.related-team .related-team-provider__link[data-v-de46bdbe] {
   display: flex;
   gap: 12px;
   padding: 6px 12px;
   font-weight: bold;
 }
-.related-team .related-team-resource__link[data-v-825af6f9] {
+.related-team .related-team-resource__link[data-v-de46bdbe] {
   display: flex;
   gap: 12px;
-  height: 44px;
+  height: var(--default-clickable-area);
   align-items: center;
   border-radius: var(--border-radius-large);
 }
-.related-team .related-team-resource__link[data-v-825af6f9]:hover {
+.related-team .related-team-resource__link[data-v-de46bdbe]:hover {
   background-color: var(--color-background-hover);
 }
-.related-team .related-team-resource__link[data-v-825af6f9]:focus {
+.related-team .related-team-resource__link[data-v-de46bdbe]:focus {
   background-color: var(--color-background-hover);
   outline: 2px solid var(--color-primary-element);
 }
-.related-team .related-team-resource .resource__icon[data-v-825af6f9] {
-  width: 44px;
-  height: 44px;
+.related-team .related-team-resource .resource__icon[data-v-de46bdbe] {
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }
-.related-team .related-team-resource .resource__icon > img[data-v-825af6f9] {
+.related-team .related-team-resource .resource__icon > img[data-v-de46bdbe] {
   border-radius: var(--border-radius-pill);
   overflow: hidden;
   width: 32px;
@@ -94,31 +94,31 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-24815694] {
+.material-design-icon[data-v-ac1115a7] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.resource[data-v-24815694] {
+.resource[data-v-ac1115a7] {
   display: flex;
   align-items: center;
-  height: 44px;
+  height: var(--default-clickable-area);
 }
-.resource__button[data-v-24815694] {
+.resource__button[data-v-ac1115a7] {
   width: 100% !important;
   justify-content: flex-start !important;
   padding: 0 !important;
 }
-.resource__button[data-v-24815694] .button-vue__wrapper {
+.resource__button[data-v-ac1115a7] .button-vue__wrapper {
   justify-content: flex-start !important;
 }
-.resource__button[data-v-24815694] .button-vue__wrapper .button-vue__text {
+.resource__button[data-v-ac1115a7] .button-vue__wrapper .button-vue__text {
   font-weight: normal !important;
   margin-left: 2px !important;
 }
-.resource__icon[data-v-24815694] {
+.resource__icon[data-v-ac1115a7] {
   width: 32px;
   height: 32px;
   background-color: var(--color-text-maxcontrast);
@@ -127,7 +127,7 @@
   align-items: center;
   justify-content: center;
 }
-.resource__icon img[data-v-24815694] {
+.resource__icon img[data-v-ac1115a7] {
   width: 16px;
   height: 16px;
   filter: var(--background-invert-if-dark);

package/dist/assets/{NcRichContenteditable-BIclrp8v.css → NcRichContenteditable-CkvTrjfG.css}

@@ -85,18 +85,18 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-f2e5d2bb] {
+.material-design-icon[data-v-2fcc0867] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.rich-contenteditable[data-v-f2e5d2bb] {
+.rich-contenteditable[data-v-2fcc0867] {
   position: relative;
   width: auto;
 }
-.rich-contenteditable__label[data-v-f2e5d2bb] {
+.rich-contenteditable__label[data-v-2fcc0867] {
   position: absolute;
   margin-inline: 14px 0;
   max-width: fit-content;
@@ -109,7 +109,7 @@
   pointer-events: none;
   transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
 }
-.rich-contenteditable__input:focus + .rich-contenteditable__label[data-v-f2e5d2bb], .rich-contenteditable__input:not(.rich-contenteditable__input--empty) + .rich-contenteditable__label[data-v-f2e5d2bb] {
+.rich-contenteditable__input:focus + .rich-contenteditable__label[data-v-2fcc0867], .rich-contenteditable__input:not(.rich-contenteditable__input--empty) + .rich-contenteditable__label[data-v-2fcc0867] {
   inset-block-start: -10px;
   line-height: 1.5;
   font-size: 13px;
@@ -120,7 +120,7 @@
   margin-inline-start: 9px;
   transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
 }
-.rich-contenteditable__input[data-v-f2e5d2bb] {
+.rich-contenteditable__input[data-v-2fcc0867] {
   overflow-y: auto;
   width: auto;
   margin: 0;
@@ -135,18 +135,18 @@
   background-color: var(--color-main-background);
   font-family: var(--font-face);
   font-size: inherit;
-  min-height: 44px;
-  max-height: 242px;
+  min-height: var(--default-clickable-area);
+  max-height: calc(var(--default-clickable-area) * 5.5);
 }
-.rich-contenteditable__input--has-label[data-v-f2e5d2bb] {
+.rich-contenteditable__input--has-label[data-v-2fcc0867] {
   margin-top: 10px;
 }
-.rich-contenteditable__input--empty[data-v-f2e5d2bb]:focus:before, .rich-contenteditable__input--empty[data-v-f2e5d2bb]:not(.rich-contenteditable__input--has-label):before {
+.rich-contenteditable__input--empty[data-v-2fcc0867]:focus:before, .rich-contenteditable__input--empty[data-v-2fcc0867]:not(.rich-contenteditable__input--has-label):before {
   content: attr(aria-placeholder);
   color: var(--color-text-maxcontrast);
   position: absolute;
 }
-.rich-contenteditable__input[contenteditable=false][data-v-f2e5d2bb]:not(.rich-contenteditable__input--disabled) {
+.rich-contenteditable__input[contenteditable=false][data-v-2fcc0867]:not(.rich-contenteditable__input--disabled) {
   cursor: default;
   background-color: transparent;
   color: var(--color-main-text);
@@ -154,11 +154,11 @@
   opacity: 1;
   border-radius: 0;
 }
-.rich-contenteditable__input--multiline[data-v-f2e5d2bb] {
-  min-height: 132px;
+.rich-contenteditable__input--multiline[data-v-2fcc0867] {
+  min-height: calc(var(--default-clickable-area) * 3);
   max-height: none;
 }
-.rich-contenteditable__input--disabled[data-v-f2e5d2bb] {
+.rich-contenteditable__input--disabled[data-v-2fcc0867] {
   opacity: 0.5;
   color: var(--color-text-maxcontrast);
   border: 2px solid var(--color-background-darker);

package/dist/assets/{NcRichText-BKoK9ulg.css → NcRichText-BKnmtD0n.css}

@@ -9,18 +9,18 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-69858434] {
+.material-design-icon[data-v-a92ab385] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.widget--list[data-v-69858434] {
+.widget--list[data-v-a92ab385] {
   width: var(--widget-full-width, 100%);
 }
-.widgets--list.icon-loading[data-v-69858434] {
-  min-height: 44px;
+.widgets--list.icon-loading[data-v-a92ab385] {
+  min-height: var(--default-clickable-area);
 }
 /**
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors

package/dist/assets/{NcSelect-9AZOhTlS.css → NcSelect-BQt_SpyP.css}

@@ -71,7 +71,7 @@ body {
 }
 .v-select.select {
   /* Override default vue-select styles */
-  min-height: 44px;
+  min-height: var(--default-clickable-area);
   min-width: 260px;
   margin: 0;
 }

package/dist/assets/{NcSettingsSection-B_Dat_E8.css → NcSettingsSection-DZwOPKg1.css}

@@ -9,25 +9,25 @@
 /*
 * Ensure proper alignment of the vue material icons
 */
-.material-design-icon[data-v-9df5c915] {
+.material-design-icon[data-v-251fe753] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.settings-section[data-v-9df5c915] {
+.settings-section[data-v-251fe753] {
   display: block;
   margin-bottom: auto;
   padding: 30px;
 }
-.settings-section[data-v-9df5c915]:not(:last-child) {
+.settings-section[data-v-251fe753]:not(:last-child) {
   border-bottom: 1px solid var(--color-border);
 }
-.settings-section--limit-width > *[data-v-9df5c915] {
+.settings-section--limit-width > *[data-v-251fe753] {
   max-width: 900px;
 }
-.settings-section__name[data-v-9df5c915] {
+.settings-section__name[data-v-251fe753] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -35,20 +35,20 @@
   font-weight: bold;
   max-width: 900px;
 }
-.settings-section__info[data-v-9df5c915] {
+.settings-section__info[data-v-251fe753] {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 44px;
-  height: 44px;
-  margin: -14px;
+  width: var(--default-clickable-area);
+  height: var(--default-clickable-area);
+  margin: calc((var(--default-clickable-area) - 16px) / 2 * -1);
   margin-left: 0;
   color: var(--color-text-maxcontrast);
 }
-.settings-section__info[data-v-9df5c915]:hover, .settings-section__info[data-v-9df5c915]:focus, .settings-section__info[data-v-9df5c915]:active {
+.settings-section__info[data-v-251fe753]:hover, .settings-section__info[data-v-251fe753]:focus, .settings-section__info[data-v-251fe753]:active {
   color: var(--color-main-text);
 }
-.settings-section__desc[data-v-9df5c915] {
+.settings-section__desc[data-v-251fe753] {
   margin-top: -0.2em;
   margin-bottom: 1em;
   color: var(--color-text-maxcontrast);