changed searchbar style

public/index.html

@@ -72,8 +72,11 @@
 		<main id="main_content">
 			<div id="middle_section">
 				<header id="search">
+					<div class="search__icon">
+						<i class="material-icons">search</i>
+					</div>
 					<input id="searchbar" autocomplete="off" type="text" name="searchbar" value=""
-						placeholder="Search or paste a link..." autofocus>
+						placeholder="Search something or paste a link..." autofocus>
 				</header>
 				<section id="content">
 					<div id="container">

src/styles/scss/_middle-section.scss

@@ -7,15 +7,69 @@
 }
 
 /* Center section */
-#search > #searchbar {
+$icon-dimension: 2rem;
-	width: calc(100% - 32px);
+
-	height: 32px;
+#search {
-	padding: 0px 8px;
-	margin: 8px;
-	border: 0px;
-	border-radius: 6px;
 	background-color: var(--secondary-background);
-	color: var(--primary-text);
+	width: 100%;
+	padding: 0 1em;
+	margin-bottom: 20px;
+	margin-right: 32px;
+	display: flex;
+	align-items: center;
+	border: 1px solid transparent;
+	transition: border 200ms ease-in-out;
+
+	.search__icon {
+		width: $icon-dimension;
+		height: $icon-dimension;
+		// cursor: pointer;
+
+		i {
+			font-size: $icon-dimension;
+			transition: color 250ms ease-in-out;
+			color: var(--main-text);
+
+			@include removeSelectionBackground;
+		}
+
+		&:hover {
+			i {
+				// color: var(--accent-color);
+			}
+		}
+	}
+
+	&:focus-within {
+		border: 1px solid var(--main-text);
+	}
+
+	$searchbar-height: calc(2rem + 1em);
+
+	#searchbar {
+		height: $searchbar-height;
+		padding-left: 0.5em;
+		border: 0px;
+		border-radius: 0px;
+		background-color: var(--secondary-background);
+		color: var(--primary-text);
+		font-size: 2rem;
+		font-family: 'Open Sans';
+		font-weight: 300;
+
+		&:focus {
+			outline: none;
+		}
+
+		// Removing Chrome autofill color
+		&:-webkit-autofill,
+		&:-webkit-autofill:hover,
+		&:-webkit-autofill:focus,
+		&:-webkit-autofill:active {
+			-webkit-box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
+			box-shadow: 0 0 0 $searchbar-height var(--secondary-background) inset !important;
+		}
+	}
 }
 
 #content {

src/styles/scss/_sidebar.scss

@@ -58,8 +58,9 @@
 		#theme_togglers {
 			position: relative;
 			opacity: 1;
-			visibility: visible;
+			transition-delay: 200ms;
 		}
+
 		.main_tablinks_text {
 			display: inline-block;
 			opacity: 1;
@@ -79,11 +80,10 @@
 #theme_togglers {
 	display: flex;
 	opacity: 0;
-	visibility: hidden;
 	width: 100%;
 	justify-content: space-evenly;
 	align-items: center;
-	transition: all 50ms ease-in-out 200ms;
+	transition: all 50ms ease 0s;
 }
 
 .theme_toggler {

src/styles/scss/base/_base.scss

@@ -29,32 +29,32 @@ html[data-theme='light'] {
 }
 
 html[data-theme='dark'] {
-	--main-background: #141414;
+	--main-background: hsl(0, 0%, 8%);
-	--secondary-background: #242424;
+	--secondary-background: hsl(0, 0%, 14%);
-	--main-text: #eeeeee;
+	--main-text: hsl(0, 0%, 93%);
-	--main-text-inverted: #333333;
+	--main-text-inverted: hsl(0, 0%, 20%);
-	--panels-background: #1a1a1a;
+	--panels-background: hsl(0, 0%, 10%);
-	--panels-text: #ffffff;
+	--panels-text: hsl(0, 0%, 100%);
-	--accent-text: #dfdfdf;
+	--accent-text: hsl(0, 0%, 87%);
 
-	--table-bg: #141414;
+	--table-bg: hsl(0, 0%, 8%);
-	--table-zebra: #242424;
+	--table-zebra: hsl(0, 0%, 14%);
-	--table-highlight: #343434;
+	--table-highlight: hsl(0, 0%, 20%);
 }
 
 html[data-theme='purple'] {
-	--main-background: #0c041b;
+	--main-background: hsl(261, 74%, 6%);
-	--secondary-background: #130a29;
+	--secondary-background: hsl(257, 61%, 10%);
-	--main-text: #eeeeee;
+	--main-text: hsl(0, 0%, 93%);
-	--accent-color: #460ead;
+	--accent-color: hsl(261, 85%, 37%);
-	--main-text-inverted: #100822;
+	--main-text-inverted: hsl(258, 62%, 8%);
-	--panels-background: #100727;
+	--panels-background: hsl(257, 70%, 9%);
-	--panels-text: #ffffff;
+	--panels-text: hsl(0, 0%, 100%);
-	--accent-text: #dfdfdf;
+	--accent-text: hsl(0, 0%, 87%);
 
-	--table-bg: #0c041b;
+	--table-bg: hsl(261, 74%, 6%);
-	--table-zebra: #130a29;
+	--table-zebra: hsl(257, 61%, 10%);
-	--table-highlight: #321874;
+	--table-highlight: hsl(257, 66%, 27%);
 }
 
 body {

src/styles/scss/base/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin removeSelectionBackground {
+	&::selection {
+		background: none;
+	}
+}

src/styles/scss/style.scss

@@ -1,5 +1,6 @@
 @import './base/base';
 @import './base/normalize';
+@import './base/mixins';
 
 @import './globals/globals';
 @import './globals/tables';