refact: removed razor.css files

Author: EliasMasche

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor

@@ -1,12 +1,13 @@
 @inject IJSRuntime JSRuntime
 
 <div class="progress-container" @ref="progressContainer">
-    <svg class="progress-circle" viewBox="0 0 36 36">
-        <circle class="progress-bg" cx="18" cy="18" r="15.91549431" />
-        <circle class="progress-bar" id="progressBar" cx="18" cy="18" r="15.91549431" />
-    </svg>
+	<svg class="progress-circle" viewBox="0 0 36 36">
+		<circle class="progress-bg" cx="18" cy="18" r="15.91549431" />
+		<circle class="progress-bar" id="progressBar" cx="18" cy="18" r="15.91549431" />
+	</svg>
 </div>
 
+
 @code {
 	[Parameter, EditorRequired]
 	public required string ContainerCssSelector { get; set; }

src/LinkDotNet.Blog.Web/Features/ShowBlogPost/Components/ReadingIndicator.razor.css

@@ -223,7 +223,7 @@ code {
 
 /*#endregion */
 
-/*#region ShortBlogPost */
+/*#region ShortBlogPost.razor */
 .blog-card {
 	display: flex;
 	flex-direction: column;
@@ -436,6 +436,89 @@ code {
 	z-index: initial;
 	max-width: 130px;
 }
-
 /*#endregion */
 
+/*#region ReadingIndicator.razor */
+.progress-container {
+	position: fixed;
+	bottom: 20px;
+	right: 20px;
+	z-index: 1000;
+	opacity: 0;
+	transition: opacity 1.5s;
+}
+
+.progress-container.visible {
+	opacity: 1;
+}
+
+@keyframes fadeOut {
+	to {
+		opacity: 0;
+	}
+}
+
+.progress-circle {
+	width: 50px;
+	height: 50px;
+}
+
+.progress-bg {
+	fill: none;
+	stroke: #f3f3f3;
+	stroke-width: 4;
+}
+
+.progress-bar {
+	fill: none;
+	stroke: #4caf50;
+	stroke-width: 4;
+	stroke-linecap: round;
+	transform-origin: center;
+	transform: rotate(-90deg);
+	stroke-dasharray: 100, 100;
+	stroke-dashoffset: 100;
+}
+
+[data-bs-theme='light'] .progress-bg {
+	stroke: #444444;
+}
+
+/*region ShowBlogPostPage.razor */
+.blog-container {
+	background: var(--background);
+	width: clamp(60%, 2vw, 90%);
+	box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
+	border-radius: 5px;
+	padding: 20px;
+}
+
+.blogpost-tag:before {
+	font-family: 'icons';
+	font-weight: 900;
+	content: "\e936";
+}
+
+.blogpost-content {
+	padding-top: 20px;
+	overflow-x: hidden;
+}
+
+.blogpost-content img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+@media only screen and (max-width: 700px) {
+	.blog-outer-box .blog-container {
+		width: 90%;
+	}
+}
+
+@media only screen and (min-width: 700px) and (max-width: 1024px) {
+	.blog-outer-box .blog-container {
+		width: 80%;
+	}
+}
+/*#endregion */