diff --git a/manifest.json b/manifest.json
index 527816d..d66c5f1 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "StyTab",
- "version": "1.0.6",
+ "version": "1.0.7",
"description": "Stytab - A minimalist Startpage that meets your needs.",
"chrome_url_overrides": {
"newtab": "startpage.html"
diff --git a/startpage.html b/startpage.html
index bd411e2..c950cc7 100644
--- a/startpage.html
+++ b/startpage.html
@@ -5,14 +5,12 @@
StyTab
-
-
@@ -65,7 +63,6 @@ Settings
-
@@ -100,8 +97,7 @@ Settings
-
-
+
@@ -125,14 +121,9 @@ QuickLinks
-
-
+
-
-
-
-
diff --git a/styles/quick-links.css b/styles/quick-links.css
index e886715..6ae6e40 100644
--- a/styles/quick-links.css
+++ b/styles/quick-links.css
@@ -7,14 +7,16 @@
padding: 10px 20px;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0.1);
- transition: background-color 0.3s ease, transform 0.3s ease;
+ transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.quick-links a:hover {
background-color: rgba(255, 255, 255, 0.3);
- transform: scale(1.1);
+ transform: scale(1.1);
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
+/* Quick Links Sidebar Styling */
.quick-links-sidebar a {
margin: 0 15px;
text-decoration: none;
@@ -23,12 +25,13 @@
padding: 10px 20px;
border-radius: 25px;
background-color: rgba(255, 255, 255, 0.1);
- transition: background-color 0.3s ease, transform 0.3s ease;
+ transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.quick-links-sidebar a:hover {
background-color: rgba(255, 255, 255, 0.3);
- transform: scale(1.1);
+ transform: scale(1.06);
+ box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
@@ -170,6 +173,7 @@
.quicklinks-sidebar input[type="url"],
.quicklinks-sidebar select {
width: calc(100% - 20px);
+ font-size: 15px;
padding: 10px;
margin-top: 5px;
margin-bottom: 15px;
@@ -180,6 +184,7 @@
}
.quicklinks-sidebar button {
+ font-size: 15px;
padding: 10px;
background-color: #00b894;
border: none;
@@ -188,7 +193,7 @@
margin-top: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
- width: calc(100% - 0px);
+ width: 100%;
}
.quicklinks-sidebar button:hover {
diff --git a/styles/search-bar.css b/styles/search-bar.css
index 4afec6d..59e556a 100644
--- a/styles/search-bar.css
+++ b/styles/search-bar.css
@@ -1,21 +1,25 @@
-/* Search Bar Styling */
-input[type="text"] {
- width: 400px; /* Default width for larger screens */
+/* Search Bar Styling (for #search-query inside .search-box) */
+.search-box #search-query {
+ width: 400px;
padding: 12px;
font-size: 18px;
border: none;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
- transition: box-shadow 0.3s ease, width 0.3s ease;
- margin-bottom: 10px; /* Adds space below the search bar */
+ transition: box-shadow 0.3s ease, width 0.3s ease, background-color 0.3s ease;
+ margin-bottom: 10px;
+ background-color: #fff;
}
-input[type="text"]:focus {
+.search-box #search-query:hover,
+.search-box #search-query:focus {
outline: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ background-color: #ddd;
}
-input[type="submit"] {
+/* Search Button Styling (for submit button inside .search-box) */
+.search-box input[type="submit"] {
padding: 12px 20px;
font-size: 18px;
border: none;
@@ -24,39 +28,39 @@ input[type="submit"] {
color: #333;
margin-left: 10px;
cursor: pointer;
- transition: background-color 0.3s ease;
+ transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
-input[type="submit"]:hover {
+.search-box input[type="submit"]:hover,
+.search-box input[type="submit"]:focus {
background-color: #ddd;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
/* Media Queries for Responsiveness */
@media (max-width: 768px) {
- /* For tablets and smaller screens */
- input[type="text"] {
- width: 80%; /* Adjust width for medium screens */
- font-size: 16px; /* Slightly smaller font size */
- padding: 10px; /* Reduce padding */
+ .search-box #search-query {
+ width: 80%;
+ font-size: 16px;
+ padding: 10px;
}
- input[type="submit"] {
- padding: 10px 15px; /* Adjust button padding */
- font-size: 16px; /* Adjust font size */
+ .search-box input[type="submit"] {
+ padding: 10px 15px;
+ font-size: 16px;
margin-left: 8px;
}
}
@media (max-width: 480px) {
- /* For mobile devices */
- input[type="text"] {
- width: 100%; /* Full width for small screens */
- font-size: 14px; /* Smaller font size */
- padding: 8px; /* Further reduce padding */
+ .search-box #search-query {
+ width: 100%;
+ font-size: 14px;
+ padding: 8px;
}
- input[type="submit"] {
- padding: 8px 12px; /* Smaller button padding */
+ .search-box input[type="submit"] {
+ padding: 8px 12px;
font-size: 14px;
margin-left: 5px;
}
diff --git a/styles/settings.css b/styles/settings.css
index 32e16a9..f89ee44 100644
--- a/styles/settings.css
+++ b/styles/settings.css
@@ -51,6 +51,7 @@
.settings-sidebar input[type="text"],
.settings-sidebar select {
width: calc(100% - 20px);
+ font-size: 15px;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
@@ -60,6 +61,7 @@
}
.settings-sidebar button {
+ font-size: 15px;
padding: 10px;
background-color: #00b894;
border: none;
@@ -67,7 +69,7 @@
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
- width: calc(100% - 30px);
+ width: 100%;
}
.settings-sidebar button:hover {