Highlight selected file version (Nextcloud Office)

After my PR #32492 fail, I create a new PR.

Signed-off-by: Jérôme Herbinet <jerome.herbinet@arawa.fr>

Signed-off-by: Jérôme Herbinet <33763786+Jerome-Herbinet@users.noreply.github.com>

1 files changed, 98 insertions, 0 deletions

diff --git a/apps/files_versions/src/css/versions.css b/apps/files_versions/src/css/versions.css
new file mode 100644
index 00000000000..80aeaf4b88a
--- /dev/null
+++ b/apps/files_versions/src/css/versions.css
@@ -0,0 +1,98 @@
+.versionsTabView .clear-float {
+	clear: both;
+}
+
+.versionsTabView li {
+	width: 100%;
+	cursor: default;
+	height: 56px;
+	float: left;
+	border-bottom: 0;
+}
+
+.versionsTabView li:last-child {
+	border-bottom: none;
+}
+
+.versionsTabView a,
+.versionsTabView div > span {
+	vertical-align: middle;
+	opacity: .5;
+}
+
+.versionsTabView li a{
+	padding: 19px 10px 7px;
+}
+
+.versionsTabView a:hover,
+.versionsTabView a:focus {
+	opacity: 1;
+}
+
+.versionsTabView .preview-container {
+	display: inline-block;
+  vertical-align: top;
+}
+
+.versionsTabView img {
+	cursor: pointer;
+	padding-right: 4px;
+}
+
+.versionsTabView img.preview {
+	position: relative;
+	top: 6px;
+	left: 10px;
+	border: 1px solid var(--color-border-dark);		
+	cursor: default;
+	padding-right: 0;
+}
+
+.versionsTabView .version-container {
+	display: inline-block;
+}
+
+.versionsTabView .versiondate {
+	min-width: 100px;
+	vertical-align: super;
+}
+
+.versionsTabView .version-details {
+	text-align: left;
+}
+
+.versionsTabView .version-details > span {
+	padding: 0 10px;
+}
+
+.versionsTabView .revertVersion {
+	cursor: pointer;
+	float: right;
+	margin-right: 0;
+}
+
+.versionsTabView li.active .downloadVersion {
+	opacity: 1;
+}
+
+.versionsTabView li.active .version-details .size {
+	color: var(--color-main-text);
+	opacity: 1;
+}
+
+.versionsTabView li.active {
+	background-color: var(--color-primary-light);
+	border-radius: 16px;
+}
+
+.versionsTabView li.active a.revertVersion {
+ 	opacity: 1;
+}
+
+.version-container {
+	padding-left: 5px;
+}
+
+.version-details {
+	margin-top: -7px;
+}