From 77cfa5c85b55d347044daec46f7d49e7694b37fa Mon Sep 17 00:00:00 2001
From: Horilla <support@horilla.com>
Date: Wed, 2 Apr 2025 12:33:04 +0530
Subject: [PATCH] [UPDT] EMPLOYEE: Change inline styles to css files

---
 .../employee/profile/profile_view.html        | 94 +------------------
 static/css/style.css                          | 92 +++++++++++++++++-
 2 files changed, 92 insertions(+), 94 deletions(-)

diff --git a/employee/templates/employee/profile/profile_view.html b/employee/templates/employee/profile/profile_view.html
index 1eb433bc1..a7312a039 100644
--- a/employee/templates/employee/profile/profile_view.html
+++ b/employee/templates/employee/profile/profile_view.html
@@ -1,95 +1,7 @@
-{% extends 'index.html' %} {% load i18n %} {% load static %} {% load basefilters %} {% load horillafilters accessibility_filters %} {% block content %}
-<style>
-	.oh-general__tab{
-		margin-bottom: 15px;
-	}
+{% extends 'index.html' %} {% load i18n static basefilters horillafilters accessibility_filters %} {% block content %}
 
-.resign-status {
-	background: #73bbe12b;
-	font-size: 0.8rem;
-	padding: 4px 8px;
-	border-radius: 10px;
-	margin-bottom: 6px;
-	font-weight: 600;
-	color: #357579;
-	}
-  .enlarge-image-container {
-    display: none;
-    position: fixed;
-    top: 40%;
-    left: 40%;
-    transform: translate(-50%, -50%);
-    width: 30%;
-    height: 50%;
-    z-index: 9999;
-  }
-  .enlarge-image-container img{
-    max-width: 100%;
-    height: auto;
-    border-radius: 5%;
-  }
-  .oh-sticky-table{
-    max-height:50vh;
-  }
-	.oh-modal_close--custom {
-	  border: none;
-	  background: none;
-	  font-size: 1.5rem;
-	  opacity: 0.7;
-	  position: absolute;
-	  top: 25px;
-	  right: 15px;
-	}
-  .oh-tabs__tablist .oh-tabs__tab--active:nth-last-child(2) {
-      border-right: 1px solid hsl(213deg,22%,84%);
-  }
-  .custom-dialog {
-	  max-width:1000px;
-	  max-height: 800px;
-  }
-  .file-validation {
-	  color: #4f5bd9;
-	  background-color: #d8e7f0;
-	  border-color: #d6e9c6;
-	  padding: 15px;
-	  border: 1px solid transparent;
-	  border-radius: 4px;
-
-  }
-  .oh-not-found {
-	  display: flex;
-	  justify-content: center;
-	  align-items: center;
-	  flex-direction: column;
-	  height: 50vh;
-	  opacity: 0.5;
-  }
-  .editable-input:read-only {
-	  color: hsl(0,0%,11%);
-	  background-color: transparent;
-	  border: none;
-	  height: 100%;
-	  border: 1px solid transparent;
-  }
-  .editable-input:read-only:hover {
-	  border: 1px solid hsl(213,22%,84%);
-  }	.file-upload {
-		margin-top: 6px !important;
-		width: 34px !important;
-		height: 34px !important;
-		font-size: 1.75rem !important;
-	}
-	.file-upload {
-		margin-top: 6px !important;
-		width: 34px !important;
-		height: 34px !important;
-		font-size: 1.75rem !important;
-	}
-</style>
-
-<div id="enlargeImageContainer"></div>
-
-<div class="oh-wrapper">
+<div class="oh-wrapper" id="profile-view">
+	<div id="enlargeImageContainer"></div>
 	<div class="oh-card mt-4 mb-5">
 		{% if perms.employee.change_ownprofile or 'profile_edit'|feature_is_accessible:request %}
 		<div class="d-flex flex-row-reverse">
diff --git a/static/css/style.css b/static/css/style.css
index d8bb2b5db..6a41ef6b8 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -579,8 +579,94 @@ form label {
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%; /* Make sure the canvas fills the modal */
+    width: 100%;
     height: 100%;
-    z-index: 1000; /* Ensure it's above the blurred background */
-    pointer-events: none; /* Ensure clicks pass through to underlying content */
+    z-index: 1000;
+    pointer-events: none;
+}
+
+#profile-view .oh-general__tab{
+	margin-bottom: 15px;
+}
+#profile-view .resign-status {
+	background: #73bbe12b;
+	font-size: 0.8rem;
+	padding: 4px 8px;
+	border-radius: 10px;
+	margin-bottom: 6px;
+	font-weight: 600;
+	color: #357579;
+	}
+#profile-view .enlarge-image-container {
+    display: none;
+    position: fixed;
+    top: 40%;
+    left: 40%;
+    transform: translate(-50%, -50%);
+    width: 30%;
+    height: 50%;
+    z-index: 9999;
+}
+#profile-view .enlarge-image-container img{
+    max-width: 100%;
+    height: auto;
+    border-radius: 5%;
+}
+#profile-view .oh-sticky-table{
+    max-height:50vh;
+}
+#profile-view .oh-modal_close--custom {
+    border: none;
+    background: none;
+    font-size: 1.5rem;
+    opacity: 0.7;
+    position: absolute;
+    top: 25px;
+    right: 15px;
+}
+#profile-view .oh-tabs__tablist .oh-tabs__tab--active:nth-last-child(2) {
+    border-right: 1px solid hsl(213deg,22%,84%);
+}
+#profile-view .custom-dialog {
+    max-width:1000px;
+    max-height: 800px;
+}
+#profile-view .file-validation {
+    color: #4f5bd9;
+    background-color: #d8e7f0;
+    border-color: #d6e9c6;
+    padding: 15px;
+    border: 1px solid transparent;
+    border-radius: 4px;
+
+}
+#profile-view .oh-not-found {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 50vh;
+    opacity: 0.5;
+}
+#profile-view .editable-input:read-only {
+    color: hsl(0,0%,11%);
+    background-color: transparent;
+    border: none;
+    height: 100%;
+    border: 1px solid transparent;
+}
+#profile-view .editable-input:read-only:hover {
+    border: 1px solid hsl(213,22%,84%);
+    }
+#profile-view .file-upload {
+    margin-top: 6px !important;
+    width: 34px !important;
+    height: 34px !important;
+    font-size: 1.75rem !important;
+}
+#profile-view .file-upload {
+    margin-top: 6px !important;
+    width: 34px !important;
+    height: 34px !important;
+    font-size: 1.75rem !important;
 }