@nextcloud/vue 8.11.2 → 8.11.3

package/dist/assets/{NcDialog-DEKSpcnR.css → NcDialog-DFMxsFp5.css}

@@ -1,4 +1,28 @@
 @charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon {
   display: flex;
   align-self: center;
@@ -6,15 +30,17 @@
   align-items: center;
   justify-content: center;
 }
+
+/** When having the small dialog style we override the modal styling so dialogs look more dialog like */
 @media only screen and (max-width: 512px) {
-  .dialog__modal .modal-wrapper--small .modal-container {
+.dialog__modal .modal-wrapper--small .modal-container {
     width: fit-content;
     height: unset;
     max-height: 90%;
     position: relative;
     top: unset;
     border-radius: var(--border-radius-large);
-  }
+}
 }
 /**
  * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
@@ -37,14 +63,17 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
-.material-design-icon[data-v-b0b5e355] {
+/*
+* Ensure proper alignment of the vue material icons
+*/
+.material-design-icon[data-v-7a462eb0] {
   display: flex;
   align-self: center;
   justify-self: center;
   align-items: center;
   justify-content: center;
 }
-.dialog[data-v-b0b5e355] {
+.dialog[data-v-7a462eb0] {
   height: 100%;
   width: 100%;
   display: flex;
@@ -52,45 +81,45 @@
   justify-content: space-between;
   overflow: hidden;
 }
-.dialog__modal[data-v-b0b5e355] .modal-wrapper .modal-container {
+.dialog__modal[data-v-7a462eb0] .modal-wrapper .modal-container {
   display: flex !important;
   padding-block: 4px 0;
   padding-inline: 12px 0;
 }
-.dialog__modal[data-v-b0b5e355] .modal-wrapper .modal-container__content {
+.dialog__modal[data-v-7a462eb0] .modal-wrapper .modal-container__content {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-.dialog__wrapper[data-v-b0b5e355] {
+.dialog__wrapper[data-v-7a462eb0] {
   display: flex;
   flex-direction: row;
   flex: 1;
   min-height: 0;
   overflow: hidden;
 }
-.dialog__wrapper--collapsed[data-v-b0b5e355] {
+.dialog__wrapper--collapsed[data-v-7a462eb0] {
   flex-direction: column;
 }
-.dialog__navigation[data-v-b0b5e355] {
+.dialog__navigation[data-v-7a462eb0] {
   display: flex;
   flex-shrink: 0;
 }
-.dialog__wrapper:not(.dialog__wrapper--collapsed) .dialog__navigation[data-v-b0b5e355] {
+.dialog__wrapper:not(.dialog__wrapper--collapsed) .dialog__navigation[data-v-7a462eb0] {
   flex-direction: column;
   overflow: hidden auto;
   height: 100%;
   min-width: 200px;
   margin-inline-end: 20px;
 }
-.dialog__wrapper.dialog__wrapper--collapsed .dialog__navigation[data-v-b0b5e355] {
+.dialog__wrapper.dialog__wrapper--collapsed .dialog__navigation[data-v-7a462eb0] {
   flex-direction: row;
   justify-content: space-between;
   overflow: auto hidden;
   width: 100%;
   min-width: 100%;
 }
-.dialog__name[data-v-b0b5e355] {
+.dialog__name[data-v-7a462eb0] {
   font-size: 21px;
   text-align: center;
   height: fit-content;
@@ -99,29 +128,33 @@
   overflow-wrap: break-word;
   margin-block: 0 12px;
 }
-.dialog__content[data-v-b0b5e355] {
+.dialog__content[data-v-7a462eb0] {
   flex: 1;
   min-height: 0;
   overflow: auto;
   padding-inline-end: 12px;
 }
-.dialog__text[data-v-b0b5e355] {
+.dialog__text[data-v-7a462eb0] {
   padding-block-end: 6px;
 }
-.dialog__actions[data-v-b0b5e355] {
+.dialog__actions[data-v-7a462eb0] {
+  box-sizing: border-box;
   display: flex;
   gap: 6px;
   align-content: center;
-  width: fit-content;
-  margin-inline: auto 12px;
+  justify-content: end;
+  width: 100%;
+  max-width: 100%;
+  padding-inline: 0 12px;
+  margin-inline: 0;
   margin-block: 0;
 }
-.dialog__actions[data-v-b0b5e355]:not(:empty) {
+.dialog__actions[data-v-7a462eb0]:not(:empty) {
   margin-block: 6px 12px;
 }
 @media only screen and (max-width: 512px) {
-  .dialog__name[data-v-b0b5e355] {
+.dialog__name[data-v-7a462eb0] {
     text-align: start;
     margin-inline-end: var(--default-clickable-area);
-  }
 }
+}

package/dist/assets/{NcEllipsisedOption-B6gjXSS9.css → NcEllipsisedOption-ClDzkIX6.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-08c4259e] {
   display: flex;
   align-self: center;
@@ -36,12 +39,10 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.name-parts__first[data-v-08c4259e],
-.name-parts__last[data-v-08c4259e] {
+.name-parts__first[data-v-08c4259e], .name-parts__last[data-v-08c4259e] {
   white-space: pre;
   cursor: inherit;
 }
-.name-parts__first strong[data-v-08c4259e],
-.name-parts__last strong[data-v-08c4259e] {
-  font-weight: 700;
-}
+.name-parts__first strong[data-v-08c4259e], .name-parts__last strong[data-v-08c4259e] {
+  font-weight: bold;
+}

package/dist/assets/{NcEmojiPicker-B-4WNYcx.css → NcEmojiPicker-XL3oUsqE.css}

@@ -1,16 +1,37 @@
 @charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .emoji-mart,
 .emoji-mart * {
   box-sizing: border-box;
   line-height: 1.15;
 }
 .emoji-mart {
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    Helvetica Neue,
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
   font-size: 16px;
+  /* display: inline-block; */
   display: flex;
   flex-direction: column;
   height: 420px;
@@ -37,31 +58,28 @@
   font-size: 32px;
 }
 .emoji-type-native {
-  font-family:
-    "Segoe UI Emoji",
-    Segoe UI Symbol,
-    Segoe UI,
-    "Apple Color Emoji",
-    Twemoji Mozilla,
-    "Noto Color Emoji",
-    EmojiOne Color,
-    "Android Emoji";
+  font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI',
+    'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'EmojiOne Color',
+    'Android Emoji';
   word-break: keep-all;
 }
 .emoji-type-image {
+  /* Emoji sheet has 56 columns, see also utils/emoji-data.js, SHEET_COLUMNS variable */
+  /* Here we use (56+1) * 100% to avoid visible edges of nearby icons when scaling for different
+   * screen sizes */
   background-size: 6100%;
 }
 .emoji-type-image.emoji-set-apple {
-  background-image: url(https://unpkg.com/emoji-datasource-apple@15.0.1/img/apple/sheets-256/64.png);
+  background-image: url('https://unpkg.com/emoji-datasource-apple@15.0.1/img/apple/sheets-256/64.png');
 }
 .emoji-type-image.emoji-set-facebook {
-  background-image: url(https://unpkg.com/emoji-datasource-facebook@15.0.1/img/facebook/sheets-256/64.png);
+  background-image: url('https://unpkg.com/emoji-datasource-facebook@15.0.1/img/facebook/sheets-256/64.png');
 }
 .emoji-type-image.emoji-set-google {
-  background-image: url(https://unpkg.com/emoji-datasource-google@15.0.1/img/google/sheets-256/64.png);
+  background-image: url('https://unpkg.com/emoji-datasource-google@15.0.1/img/google/sheets-256/64.png');
 }
 .emoji-type-image.emoji-set-twitter {
-  background-image: url(https://unpkg.com/emoji-datasource-twitter@15.0.1/img/twitter/sheets-256/64.png);
+  background-image: url('https://unpkg.com/emoji-datasource-twitter@15.0.1/img/twitter/sheets-256/64.png');
 }
 .emoji-mart-bar {
   border: 0 solid #d9d9d9;
@@ -80,9 +98,9 @@
   position: relative;
   overflow-y: scroll;
   flex: 1;
-  padding: 0 6px 6px;
-  z-index: 0;
-  will-change: transform;
+  padding: 0 6px 6px 6px;
+  z-index: 0; /* Fix for rendering sticky positioned category labels on Chrome */
+  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
   -webkit-overflow-scrolling: touch;
 }
 .emoji-mart-anchors {
@@ -100,7 +118,7 @@
   text-align: center;
   padding: 12px 4px;
   overflow: hidden;
-  transition: color .1s ease-out;
+  transition: color 0.1s ease-out;
   border: none;
   background: none;
   box-shadow: none;
@@ -133,9 +151,9 @@
   height: 250px;
   position: relative;
   flex: 1;
-  padding: 0 6px 6px;
-  z-index: 0;
-  will-change: transform;
+  padding: 0 6px 6px 6px;
+  z-index: 0; /* Fix for rendering sticky positioned category labels on Chrome */
+  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
   -webkit-overflow-scrolling: touch;
 }
 .emoji-mart-search {
@@ -146,7 +164,7 @@
   font-size: 16px;
   display: block;
   width: 100%;
-  padding: .2em .6em;
+  padding: 0.2em 0.6em;
   border-radius: 25px;
   border: 1px solid #d9d9d9;
   outline: 0;
@@ -167,7 +185,7 @@
 .emoji-mart-category .emoji-mart-emoji:hover:before,
 .emoji-mart-emoji-selected:before {
   z-index: 0;
-  content: "";
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
@@ -182,13 +200,14 @@
   opacity: 1;
 }
 .emoji-mart-category-label {
-  position: -webkit-sticky;
   position: sticky;
   top: 0;
 }
 .emoji-mart-static .emoji-mart-category-label {
   z-index: 2;
   position: relative;
+  /* position: sticky; */
+  /* position: -webkit-sticky; */
 }
 .emoji-mart-category-label h3 {
   display: block;
@@ -197,7 +216,7 @@
   font-weight: 500;
   padding: 5px 6px;
   background-color: #fff;
-  background-color: #fffffff2;
+  background-color: rgba(255, 255, 255, 0.95);
 }
 .emoji-mart-emoji {
   position: relative;
@@ -214,7 +233,7 @@
   display: none;
 }
 .emoji-mart-no-results .emoji-mart-no-results-label {
-  margin-top: .2em;
+  margin-top: 0.2em;
 }
 .emoji-mart-no-results .emoji-mart-emoji:hover:before {
   content: none;
@@ -252,7 +271,7 @@
 .emoji-mart-preview-shortname + .emoji-mart-preview-shortname,
 .emoji-mart-preview-shortname + .emoji-mart-preview-emoticon,
 .emoji-mart-preview-emoticon + .emoji-mart-preview-emoticon {
-  margin-left: .5em;
+  margin-left: 0.5em;
 }
 .emoji-mart-preview-emoticon {
   font-size: 11px;
@@ -282,33 +301,33 @@
   padding: 0 2px;
 }
 .emoji-mart-skin-swatches-opened .emoji-mart-skin-swatch-selected:after {
-  opacity: .75;
+  opacity: 0.75;
 }
 .emoji-mart-skin-swatch {
   display: inline-block;
   width: 0;
   vertical-align: middle;
   transition-property: width, padding;
-  transition-duration: .125s;
+  transition-duration: 0.125s;
   transition-timing-function: ease-out;
 }
 .emoji-mart-skin-swatch:nth-child(1) {
   transition-delay: 0s;
 }
 .emoji-mart-skin-swatch:nth-child(2) {
-  transition-delay: .03s;
+  transition-delay: 0.03s;
 }
 .emoji-mart-skin-swatch:nth-child(3) {
-  transition-delay: .06s;
+  transition-delay: 0.06s;
 }
 .emoji-mart-skin-swatch:nth-child(4) {
-  transition-delay: .09s;
+  transition-delay: 0.09s;
 }
 .emoji-mart-skin-swatch:nth-child(5) {
-  transition-delay: .12s;
+  transition-delay: 0.12s;
 }
 .emoji-mart-skin-swatch:nth-child(6) {
-  transition-delay: .15s;
+  transition-delay: 0.15s;
 }
 .emoji-mart-skin-swatch-selected {
   position: relative;
@@ -316,7 +335,7 @@
   padding: 0 2px;
 }
 .emoji-mart-skin-swatch-selected:after {
-  content: "";
+  content: '';
   position: absolute;
   top: 50%;
   left: 50%;
@@ -327,7 +346,7 @@
   border-radius: 100%;
   pointer-events: none;
   opacity: 0;
-  transition: opacity .2s ease-out;
+  transition: opacity 0.2s ease-out;
 }
 .emoji-mart-skin {
   display: inline-block;
@@ -354,6 +373,7 @@
 .emoji-mart-skin-tone-6 {
   background-color: #594539;
 }
+/* vue-virtual-scroller/dist/vue-virtual-scroller.css */
 .emoji-mart .vue-recycle-scroller {
   position: relative;
 }
@@ -381,16 +401,24 @@
   left: 0;
   will-change: transform;
 }
-.emoji-mart .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
+.emoji-mart
+  .vue-recycle-scroller.direction-vertical
+  .vue-recycle-scroller__item-wrapper {
   width: 100%;
 }
-.emoji-mart .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper {
+.emoji-mart
+  .vue-recycle-scroller.direction-horizontal
+  .vue-recycle-scroller__item-wrapper {
   height: 100%;
 }
-.emoji-mart .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
+.emoji-mart
+  .vue-recycle-scroller.ready.direction-vertical
+  .vue-recycle-scroller__item-view {
   width: 100%;
 }
-.emoji-mart .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view {
+.emoji-mart
+  .vue-recycle-scroller.ready.direction-horizontal
+  .vue-recycle-scroller__item-view {
   height: 100%;
 }
 .emoji-mart .resize-observer[data-v-b329ee4c] {
@@ -472,6 +500,7 @@
   height: auto;
 }
 .emoji-mart .emoji-mart-anchors button:focus-visible {
+  /* box-shadow: inset 0 0 0 2px var(--color-primary-element); */
   outline: 2px solid var(--color-primary-element);
 }
 .emoji-mart .emoji-mart-category {
@@ -482,7 +511,6 @@
 }
 .emoji-mart .emoji-mart-category .emoji-mart-category-label,
 .emoji-mart .emoji-mart-category .emoji-mart-emoji {
-  -webkit-user-select: none;
   user-select: none;
   flex-grow: 0;
   flex-shrink: 0;
@@ -495,8 +523,7 @@
   flex-basis: 12.5%;
   text-align: center;
 }
-.emoji-mart .emoji-mart-category .emoji-mart-emoji:hover:before,
-.emoji-mart .emoji-mart-category .emoji-mart-emoji.emoji-mart-emoji-selected:before {
+.emoji-mart .emoji-mart-category .emoji-mart-emoji:hover::before, .emoji-mart .emoji-mart-category .emoji-mart-emoji.emoji-mart-emoji-selected::before {
   background-color: var(--color-background-hover) !important;
   outline: 2px solid var(--color-primary-element);
 }
@@ -526,6 +553,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-54cb91eb] {
   display: flex;
   align-self: center;
@@ -540,12 +570,11 @@
   align-items: end;
   padding: 4px 8px;
 }
-.row-selected button[data-v-54cb91eb],
-.row-selected span[data-v-54cb91eb] {
+.row-selected button[data-v-54cb91eb], .row-selected span[data-v-54cb91eb] {
   vertical-align: middle;
 }
 .emoji-delete[data-v-54cb91eb] {
   vertical-align: top;
   margin-left: -21px;
   margin-top: -3px;
-}
+}

package/dist/assets/{NcEmptyContent-ClLPsXo5.css → NcEmptyContent--xKgddPn.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-458108e7] {
   display: flex;
   align-self: center;
@@ -32,6 +35,7 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
+  /* In case of using in a flex container - flex in advance */
   flex-grow: 1;
 }
 .modal-wrapper .empty-content[data-v-458108e7] {
@@ -45,7 +49,7 @@
   width: 64px;
   height: 64px;
   margin: 0 auto 15px;
-  opacity: .4;
+  opacity: 0.4;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 64px;
@@ -59,7 +63,7 @@
 .empty-content__name[data-v-458108e7] {
   margin-bottom: 10px;
   text-align: center;
-  font-weight: 700;
+  font-weight: bold;
   font-size: 20px;
   line-height: 30px;
 }
@@ -72,4 +76,4 @@
 .modal-wrapper .empty-content__action[data-v-458108e7] {
   margin-top: 20px;
   display: flex;
-}
+}

package/dist/assets/{NcGuestContent-CYYZPMjb.css → NcGuestContent-CeRLfUEi.css}

@@ -1,4 +1,28 @@
 @charset "UTF-8";
+/**
+ * @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-36ad47ca] {
   display: flex;
   align-self: center;
@@ -37,6 +61,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon {
   display: flex;
   align-self: center;
@@ -48,4 +75,4 @@
   overflow: auto;
   margin-bottom: 0;
   height: calc(var(--body-height) + var(--body-container-margin));
-}
+}

package/dist/assets/{NcHeaderMenu-BKufmJd0.css → NcHeaderMenu-N5y8yFGd.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-7103b917] {
   display: flex;
   align-self: center;
@@ -35,14 +38,11 @@
 .header-menu .header-menu__trigger[data-v-7103b917] {
   width: 100% !important;
   height: var(--header-height);
-  opacity: .85;
+  opacity: 0.85;
   filter: none !important;
   color: var(--color-primary-text) !important;
 }
-.header-menu--opened .header-menu__trigger[data-v-7103b917],
-.header-menu__trigger[data-v-7103b917]:hover,
-.header-menu__trigger[data-v-7103b917]:focus,
-.header-menu__trigger[data-v-7103b917]:active {
+.header-menu--opened .header-menu__trigger[data-v-7103b917], .header-menu__trigger[data-v-7103b917]:hover, .header-menu__trigger[data-v-7103b917]:focus, .header-menu__trigger[data-v-7103b917]:active {
   opacity: 1;
 }
 .header-menu .header-menu__trigger[data-v-7103b917]:focus-visible {
@@ -85,7 +85,7 @@
   margin: 12vh 10px;
 }
 @media only screen and (max-width: 512px) {
-  .header-menu[data-v-7103b917] {
+.header-menu[data-v-7103b917] {
     width: 44px;
-  }
 }
+}

package/dist/assets/{NcIconSvgWrapper-oui2KPBT.css → NcIconSvgWrapper-C5vV6-c0.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-74df2152] {
   display: flex;
   align-self: center;
@@ -47,4 +50,4 @@
   height: var(--758c7a6a);
   max-width: var(--758c7a6a);
   max-height: var(--758c7a6a);
-}
+}

package/dist/assets/{NcInputConfirmCancel-CSzzPx0i.css → NcInputConfirmCancel-UcHrm0al.css}

@@ -20,6 +20,9 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+/*
+* Ensure proper alignment of the vue material icons
+*/
 .material-design-icon[data-v-dcf0becf] {
   display: flex;
   align-self: center;
@@ -38,14 +41,13 @@
   height: 34px;
   flex: 1 1 100%;
   font-size: 100% !important;
-  margin: 5px 5px 5px -8px !important;
+  margin: 5px !important;
+  margin-left: -8px !important;
   padding: 7px !important;
 }
-.app-navigation-input-confirm__input[data-v-dcf0becf]:active,
-.app-navigation-input-confirm__input[data-v-dcf0becf]:focus,
-.app-navigation-input-confirm__input[data-v-dcf0becf]:hover {
+.app-navigation-input-confirm__input[data-v-dcf0becf]:active, .app-navigation-input-confirm__input[data-v-dcf0becf]:focus, .app-navigation-input-confirm__input[data-v-dcf0becf]:hover {
   outline: none;
   background-color: var(--color-main-background);
   color: var(--color-main-text);
   border-color: var(--color-primary-element);
-}
+}