From: Sweidan Omar <TFS\sweidan.omar>
Date: Tue, 22 Feb 2022 15:13:55 +0000 (+0000)
Subject: git-tfs-id: [http://tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube... 
X-Git-Url: http://git.useribm.hu/?a=commitdiff_plain;h=28ba4026112cba1af794d76025eca59ef2a1d237;p=mediacube.git

git-tfs-id: [tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube;C32991
---

diff --git a/server/user.mediacube.gui/css/tagify.css b/server/user.mediacube.gui/css/tagify.css
index 6efa5137..3c2c01ab 100644
--- a/server/user.mediacube.gui/css/tagify.css
+++ b/server/user.mediacube.gui/css/tagify.css
@@ -1,3 +1,5 @@
+@charset "UTF-8";
+
 :root{
 	--tagify-dd-color-primary:rgb(53,149,246);
 	--tagify-dd-bg-color:white
@@ -5,6 +7,9 @@
 
 .tagify{
 	--tags-border-color:#DDD;
+	--tags-disabled-bg:#F1F1F1;
+	--tags-hover-border-color:#CCC;
+	--tags-focus-border-color:#3595f6;
 	--tag-bg:#E5E5E5;
 	--tag-hover:#D3E2E2;
 	--tag-text-color:black;
@@ -14,69 +19,101 @@
 	--tag-invalid-color:#D39494;
 	--tag-invalid-bg:rgba(211, 148, 148, 0.5);
 	--tag-remove-bg:rgba(211, 148, 148, 0.3);
+	--tag-remove-btn-color:black;
 	--tag-remove-btn-bg:none;
 	--tag-remove-btn-bg--hover:#c77777;
+	--input-color:inherit;
 	--tag--min-width:1ch;
 	--tag--max-width:auto;
-	--tag-hide-transition:.3s;
+	--tag-hide-transition:0.3s;
+	--placeholder-color:rgba(0, 0, 0, 0.4);
+	--placeholder-color-focus:rgba(0, 0, 0, 0.25);
 	--loader-size:.8em;
+	--readonly-striped:1;
 	display:flex;
 	align-items:flex-start;
 	flex-wrap:wrap;
 	border:1px solid #ddd;
 	border:1px solid var(--tags-border-color);
 	padding:0;
-	line-height:1.1;
+	line-height:0;
 	cursor:text;
-	outline:0;
-	position:relative;
+	outline:0;position:relative;
+	box-sizing:border-box;
 	transition:.1s
 }
 
 @keyframes tags--bump{
-	30%{transform:scale(1.2)}
+	30%{
+		transform:scale(1.2)
+	}
 }
+
 @keyframes rotateLoader{
-	to{transform:rotate(1turn)}
+	to{
+		transform:rotate(1turn)
+	}
 }
 
 .tagify:hover{
-	border-color:#ccc
+	border-color:#ccc;
+	border-color:var(--tags-hover-border-color)
 }
-	
+
 .tagify.tagify--focus{
 	transition:0s;
-	border-color:#3595f6
+	border-color:#3595f6;
+	border-color:var(--tags-focus-border-color)
 }
 
-.tagify[readonly]{
+.tagify[disabled]{
+	background:var(--tags-disabled-bg);
+	filter:saturate(0);
+	opacity:.5;
+	pointer-events:none
+}
+	
+.tagify[readonly].tagify--select{
+	pointer-events:none
+}
+
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select){
 	cursor:default
 }
 
-.tagify[readonly]>
-.tagify__input{
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select)>.tagify__input{
 	visibility:hidden;
 	width:0;
 	margin:5px 0
 }
 
-.tagify[readonly] 
-.tagify__tag__removeBtn{
-	display:none
-}
-
-.tagify[readonly] 
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select) 
 .tagify__tag>div{
 	padding:.3em .5em;
 	padding:var(--tag-pad)
 }
 
-.tagify[readonly] 
+.tagify[readonly]:not(.tagify--mix):not(.tagify--select) 
 .tagify__tag>div::before{
-	background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,
-		var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;
-	box-shadow:none;
-	filter:brightness(.95)
+	animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused
+}
+
+@keyframes readonlyStyles{
+	0%{
+		background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;
+		box-shadow:none;
+		filter:brightness(.95)
+	}
+}
+
+.tagify[readonly]
+.tagify__tag__removeBtn{
+	display:none
+}
+	
+.tagify--loading 
+.tagify__input>br:last-child{
+	display:none
 }
 
 .tagify--loading 
@@ -86,9 +123,8 @@
 
 .tagify--loading 
 .tagify__input::after{
-	content:'';
+	content:"";
 	vertical-align:middle;
-	margin:-2px 0 -2px .5em;
 	opacity:1;
 	width:.7em;
 	height:.7em;
@@ -97,20 +133,22 @@
 	border:3px solid;
 	border-color:#eee #bbb #888 transparent;
 	border-radius:50%;
-	animation:rotateLoader .4s infinite linear
+	animation:rotateLoader .4s infinite linear;
+	content:""!important;
+	margin:-2px 0 -2px .5em
 }
-
+		
 .tagify--loading 
 .tagify__input:empty::after{
 	margin-left:0
 }
-
-.tagify+input,
 	
-.tagify+textarea{
-	display:none!important
+.tagify+input,.tagify+textarea{
+	position:absolute!important;
+	left:-9999em!important;
+	transform:scale(0)!important
 }
-
+	
 .tagify__tag{
 	display:inline-flex;
 	align-items:center;
@@ -118,33 +156,35 @@
 	position:relative;
 	z-index:1;
 	outline:0;
+	line-height:normal;
 	cursor:default;
 	transition:.13s ease-out
 }
-
+	
 .tagify__tag>div{
 	vertical-align:top;
 	box-sizing:border-box;
 	max-width:100%;
 	padding:.3em .5em;
-	padding:var(--tag-pad);
+	padding:var(--tag-pad,.3em .5em);
 	color:#000;
-	color:var(--tag-text-color);
+	color:var(--tag-text-color,#000);
 	line-height:inherit;
 	border-radius:3px;
-	-webkit-user-select:none;
-	user-select:none;
+	white-space:nowrap;
 	transition:.13s ease-out
 }
-
+	
 .tagify__tag>div>*{
-	white-space:nowrap;
+	white-space:pre-wrap;
 	overflow:hidden;
 	text-overflow:ellipsis;
 	display:inline-block;
 	vertical-align:top;
-	min-width:var(--tag--min-width);
-	max-width:var(--tag--max-width);
+	min-width:1ch;
+	max-width:auto;
+	min-width:var(--tag--min-width,1ch);
+	max-width:var(--tag--max-width,auto);
 	transition:.8s ease,.1s color
 }
 
@@ -159,10 +199,11 @@
 }
 
 .tagify__tag>div::before{
-	content:'';
+	content:"";
 	position:absolute;
 	border-radius:inherit;
-	left:0;top:0;
+	left:0;
+	top:0;
 	right:0;
 	bottom:0;
 	z-index:-1;
@@ -170,110 +211,149 @@
 	transition:120ms ease;
 	animation:tags--bump .3s ease-out 1;
 	box-shadow:0 0 0 1.1em #e5e5e5 inset;
-	box-shadow:0 0 0 calc(var(--tag-inset-shadow-size)) var(--tag-bg) inset
+	box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-bg,#e5e5e5) inset
 }
 
-.tagify__tag:hover:not([readonly]) 
-div::before{
+.tagify__tag:focus div::before,.tagify__tag:hover:not([readonly]) div::before{
 	top:-2px;
 	right:-2px;
 	bottom:-2px;
 	left:-2px;
 	box-shadow:0 0 0 1.1em #d3e2e2 inset;
-	box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-hover) inset
+	box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-hover,#d3e2e2) inset
+}
+
+.tagify__tag--loading{
+	pointer-events:none
+}
+
+.tagify__tag--loading 
+.tagify__tag__removeBtn{
+	display:none
+}
+
+.tagify__tag--loading::after{
+	--loader-size:.4em;
+	content:"";
+	vertical-align:middle;
+	opacity:1;
+	width:.7em;
+	height:.7em;
+	width:var(--loader-size);
+	height:var(--loader-size);
+	border:3px solid;
+	border-color:#eee #bbb #888 transparent;
+	border-radius:50%;
+	animation:rotateLoader .4s infinite linear;
+	margin:0 .5em 0 -.1em
 }
 
-.tagify__tag
-.tagify--noAnim{
+.tagify__tag--flash div::before{
 	animation:none
 }
 
-.tagify__tag
-.tagify--hide{
-	width: 0!important;
-	padding-left: 0;
-	padding-right: 0;
-	margin-left: 0;
-	margin-right: 0;
-	opacity: 0;
-	transform: scale(0);
-	transition: .3s;
-	transition: var(--tag-hide-transition);
-	pointer-events: none
+.tagify__tag--hide{
+	width:0!important;
+	padding-left:0;
+	padding-right:0;
+	margin-left:0;
+	margin-right:0;
+	opacity:0;
+	transform:scale(0);
+	transition:.3s;
+	transition:var(--tag-hide-transition,.3s);
+	pointer-events:none
 }
 
-.tagify__tag
-.tagify--mark div::before{
-	animation: none
+.tagify__tag--hide>div>*{
+	white-space:nowrap
 }
 
-.tagify__tag
-.tagify--notAllowed div>span{
-	opacity: .5
+.tagify__tag.tagify--noAnim>div::before{
+	animation:none
 }
 
-.tagify__tag
-.tagify--notAllowed div::before{
-	box-shadow: 0 0 0 1.1em rgba(211,148,148,.5) inset!important;
-	box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-invalid-bg) inset!important;
-	transition: .2s
+.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div>span{
+	opacity:.5
+}
+
+.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) div::before{
+	box-shadow:0 0 0 1.1em rgba(211,148,148,.5) inset!important;
+	box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) 
+	var(--tag-invalid-bg,rgba(211,148,148,.5)) inset!important;
+	transition:.2s
 }
 	
 .tagify__tag[readonly] 
 .tagify__tag__removeBtn{
-	display: none
+	display:none
 }
 
 .tagify__tag[readonly]>div::before{
-	background: linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,
-	var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;
-	box-shadow: none;
-	filter: brightness(.95)
+	animation:readonlyStyles 1s calc(-1s * (var(--readonly-striped) - 1)) paused
+}
+	
+@keyframes readonlyStyles{
+	0%{
+		background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;
+		box-shadow:none;
+		filter:brightness(.95)
+	}
 }
 
 .tagify__tag--editable>div{
 	color:#000;
-	color: var(--tag-text-color--edit)
+	color:var(--tag-text-color--edit,#000)
 }
-
+	
 .tagify__tag--editable>div::before{
-	box-shadow: 0 0 0 2px #d3e2e2 inset!important;
-	box-shadow: 0 0 0 2px var(--tag-hover) inset!important
+	box-shadow:0 0 0 2px #d3e2e2 inset!important;
+	box-shadow:0 0 0 2px var(--tag-hover,#d3e2e2) inset!important
+}
+	
+.tagify__tag--editable>.tagify__tag__removeBtn{
+	pointer-events:none
 }
 
-.tagify__tag--editable
-.tagify--invalid>div::before{
-	box-shadow: 0 0 0 2px #d39494 inset!important;
-	box-shadow: 0 0 0 2px var(--tag-invalid-color) inset!important
+.tagify__tag--editable>.tagify__tag__removeBtn::after{
+	opacity:0;
+	transform:translateX(100%) translateX(5px)
+}
+	
+.tagify__tag--editable.tagify--invalid>div::before{
+	box-shadow:0 0 0 2px #d39494 inset!important;
+	box-shadow:0 0 0 2px var(--tag-invalid-color,#d39494) inset!important
 }
 
 .tagify__tag__removeBtn{
 	order:5;
 	display:inline-flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 50px;
-	cursor: pointer;
-	font: 14px Serif;
-	background: 0 0;
-	background: var(--tag-remove-btn-bg);
+	align-items:center;
+	justify-content:center;
+	border-radius:50px;
+	cursor:pointer;
+	font:14px/1 Arial;
+	background:0 0;
+	background:var(--tag-remove-btn-bg,none);
 	color:#000;
-	color: var(--tag-text-color);
-	width: 14px;
-	height: 14px;
-	margin-right: 4.66667px;
-	margin-left: -4.66667px;
-	transition: .2s ease-out
+	color:var(--tag-remove-btn-color,#000);
+	width:14px;
+	height:14px;
+	margin-right:4.6666666667px;
+	margin-left:auto;
+	overflow:hidden;
+	transition:.2s ease-out
 }
 
 .tagify__tag__removeBtn::after{
-	content: "\00D7"
+	content:"×";
+	transition:.3s,color 0s
 }
 
 .tagify__tag__removeBtn:hover{
 	color:#fff;
 	background:#c77777;
-	background: var(--tag-remove-btn-bg--hover)
+	background:var(--tag-remove-btn-bg--hover,#c77777)
 }
 
 .tagify__tag__removeBtn:hover+div>span{
@@ -281,56 +361,48 @@ div::before{
 }
 
 .tagify__tag__removeBtn:hover+div::before{
-	box-shadow: 0 0 0 1.1em rgba(211,148,148,.3) inset!important;
-	box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset!important;
-	transition: .2s
+	box-shadow:0 0 0 1.1em rgba(211,148,148,.3) inset!important;
+	box-shadow:0 0 0 var(--tag-inset-shadow-size,1.1em) var(--tag-remove-bg,rgba(211,148,148,.3)) inset!important;
+	transition:box-shadow .2s
 }
-
-.tagify:not(.tagify--mix) 
+	
+.tagify:not(.tagify--mix)
 .tagify__input br{
 	display:none
 }
 
 .tagify:not(.tagify--mix)
 .tagify__input *{
-	display: inline;
-	white-space: nowrap
-}
-	
-.tagify__input{
-	display: block;
-	min-width: 110px;
-	margin: 5px;
-	padding: .3em .5em;
-	padding: var(--tag-pad,.3em .5em);
-	line-height: inherit;
-	position: relative;
-	white-space: pre-line
+	display:inline;
+	white-space:nowrap
 }
 
-.tagify__input::before{
-	display: inline-block;
-	width: 0
+.tagify__input{
+	flex-grow:1;
+	display:inline-block;
+	min-width:110px;
+	margin:5px;
+	padding:.3em .5em;
+	padding:var(--tag-pad,.3em .5em);
+	line-height:normal;
+	position:relative;
+	white-space:pre-wrap;
+	color:inherit;
+	color:var(--input-color,inherit);
+	box-sizing:inherit
 }
 
-.tagify__input:empty::before{
-	transition: .2s ease-out;
-	opacity: .5;
-	transform: none;
-	width: auto
-}
-	
 .tagify__input:focus{
 	outline:0
 }
-
+	
 .tagify__input:focus::before{
-	transition: .2s ease-out;
-	opacity: 0;
-	transform: translatex(6px)
+	transition:.2s ease-out;
+	opacity:0;
+	transform:translatex(6px)
 }
 
-@supports (-moz-appearance:none){
+@supports (-ms-ime-align:auto){
 	.tagify__input:focus::before{
 		display:none
 	}
@@ -338,39 +410,30 @@ div::before{
 
 .tagify__input:focus:empty::before{
 	transition:.2s ease-out;
-	opacity:.3;
-	transform:none
+	opacity:1;
+	transform:none;
+	color:rgba(0,0,0,.25);
+	color:var(--placeholder-color-focus)
 }
-
-@supports (-moz-appearance:none){
-	.tagify__input:focus:empty::before{
-		display:inline-block
+	
+@-moz-document url-prefix(){
+	.tagify__input:focus:empty::after{
+		display:none
 	}
 }
-
+	
 .tagify__input::before{
 	content:attr(data-placeholder);
-	line-height:1.8;
-	position:absolute;
-	top:0;
+	height:1em;
+	line-height:1em;
+	margin:auto 0;
 	z-index:1;
-	color:#000;
+	color:rgba(0,0,0,.4);
+	color:var(--placeholder-color);
 	white-space:nowrap;
 	pointer-events:none;
-	opacity:0
-}
-
-.tagify--mix
-.tagify__input::before{
-	position:static;
-	line-height:inherit
-}
-
-@supports (-moz-appearance:none){
-	.tagify__input::before{
-		line-height:inherit;
-		position:relative
-	}
+	opacity:0;
+	position:absolute
 }
 
 .tagify__input::after{
@@ -382,28 +445,29 @@ div::before{
 	pointer-events:none;
 	max-width:100px
 }
-
-.tagify__input
+	
+.tagify__input 
 .tagify__tag{
-	margin:0
-}
-
-.tagify__input
-.tagify__tag>div{
-	padding-top:0;
-	padding-bottom:0
+	margin:0 1px
 }
 	
 .tagify--mix{
-	line-height:1.7
+	display:block
 }
-
-.tagify--mix
-.tagify__input{
+	
+.tagify--mix .tagify__input{
 	padding:5px;
 	margin:0;
 	width:100%;
 	height:100%;
+	line-height:1.5;
+	display:block
+}
+
+.tagify--mix 
+.tagify__input::before{
+	height:auto;
+	display:none;
 	line-height:inherit
 }
 
@@ -413,7 +477,7 @@ div::before{
 }
 
 .tagify--select::after{
-	content:'>';
+	content:">";
 	opacity:.5;
 	position:absolute;
 	top:50%;
@@ -430,7 +494,7 @@ div::before{
 .tagify--select[aria-expanded=true]::after{
 	transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)
 }
-
+	
 .tagify--select
 .tagify__tag{
 	position:absolute;
@@ -449,10 +513,25 @@ div::before{
 	width:100%
 }
 
+.tagify--empty 
+.tagify__input::before{
+	transition:.2s ease-out;
+	opacity:1;
+	transform:none;
+	display:inline-block;
+	width:auto
+}
+	
+.tagify--mix 
+.tagify--empty 
+.tagify__input::before{
+	display:inline-block
+}
+
 .tagify--invalid{
 	--tags-border-color:#D39494
 }
-	
+
 .tagify__dropdown{
 	position:absolute;
 	z-index:9999;
@@ -462,42 +541,39 @@ div::before{
 	
 .tagify__dropdown[placement=top]{
 	margin-top:0;
-	transform:translateY(-2px)
+	transform:translateY(-100%)
 }
-	
-.tagify__dropdown[placement=top] 
+
+.tagify__dropdown[placement=top]
 .tagify__dropdown__wrapper{
-	border-top-width:1px;
+	border-top-width:1.1px;
 	border-bottom-width:0
 }
 	
-.tagify__dropdown--text{
+.tagify__dropdown[position=text]{
 	box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);
 	font-size:.9em
 }
-	
-.tagify__dropdown--text
+
+.tagify__dropdown[position=text] 
 .tagify__dropdown__wrapper{
 	border-width:1px
 }
 
 .tagify__dropdown__wrapper{
 	max-height:300px;
-	overflow:hidden;
+	overflow:auto;
 	background:#fff;
 	background:var(--tagify-dd-bg-color);
 	border:1px solid #3595f6;
 	border-color:var(--tagify-dd-color-primary);
+	border-bottom-width:1.33px;
 	border-top-width:0;
 	box-shadow:0 2px 4px -2px rgba(0,0,0,.2);
 	transition:.25s cubic-bezier(0,1,.5,1)
 }
 
-.tagify__dropdown__wrapper:hover{
-	overflow:auto
-}
-	
-.tagify__dropdown--initial
+.tagify__dropdown--initial 
 .tagify__dropdown__wrapper{
 	max-height:20px;
 	transform:translateY(-1em)
@@ -517,7 +593,7 @@ div::before{
 	position:relative;
 	outline:0
 }
-
+	
 .tagify__dropdown__item--active{
 	background:#3595f6;
 	background:var(--tagify-dd-color-primary);