andrew
ee7defb78a
Introduced a search engine selector dropdown in the search bar, allowing users to choose between Google, Bing, and DuckDuckGo. Updated the search logic to use the selected engine and added corresponding SVG icons. Adjusted CSS and HTML structure to accommodate the new selector.
438 lines
8.2 KiB
CSS
438 lines
8.2 KiB
CSS
/* Load InterVariable */
|
|
@font-face {
|
|
font-family: 'InterVariable';
|
|
src: url('../assets/images/fonts/InterVariable.ttf') format('truetype');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Base reset */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
body, html {
|
|
/* replace solid bg with a subtle gradient */
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background: linear-gradient(145deg, #121418 0%, #1B1035 100%);
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
font-family: 'InterVariable', sans-serif;
|
|
}
|
|
|
|
/* Center everything */
|
|
.home-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center; /* Center content vertically */
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
}
|
|
|
|
|
|
/* Logo block */
|
|
.logo {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.logo-img {
|
|
/* bump up logo size and add subtle shadow */
|
|
width: 150px;
|
|
height: 150px;
|
|
margin-bottom: 1rem;
|
|
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
|
|
}
|
|
|
|
.logo-text {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Search bar container */
|
|
.search-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
width: 550px; /* Increased width for the new button */
|
|
max-width: 95vw;
|
|
}
|
|
|
|
/* Search bar */
|
|
.search-bar {
|
|
display: flex;
|
|
flex: 1; /* Allow search bar to take remaining space */
|
|
align-items: center;
|
|
background: #ffffff;
|
|
border-radius: 0 70px 70px 0; /* Curve right side */
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
padding: 0.25rem;
|
|
overflow: hidden;
|
|
height: 54px; /* Match button height */
|
|
}
|
|
|
|
.search-bar input.search-input {
|
|
flex: 1;
|
|
border: none;
|
|
background: transparent;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
color: #333;
|
|
}
|
|
|
|
.search-bar button.search-btn {
|
|
border: none;
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|
color: white;
|
|
padding: 0.75rem;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.search-bar button.search-btn:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.search-bar button.search-btn .material-symbols-outlined {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
/* Remove default focus outline */
|
|
.search-bar input.search-input:focus,
|
|
.search-bar button.search-btn:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* Search Engine Selector */
|
|
.search-engine-selector {
|
|
position: relative;
|
|
}
|
|
|
|
.search-engine-btn {
|
|
background: #ffffff;
|
|
border: none;
|
|
border-radius: 70px 0 0 70px; /* Curve left side */
|
|
padding: 0.25rem 0.5rem 0.25rem 1rem;
|
|
cursor: pointer;
|
|
height: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.search-engine-btn img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.search-engine-dropdown {
|
|
position: absolute;
|
|
top: 110%;
|
|
left: 0;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
z-index: 100;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.search-engine-dropdown.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.search-engine-option {
|
|
cursor: pointer;
|
|
padding: 0.5rem;
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.search-engine-option:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.search-engine-option img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
/* Bookmark grid */
|
|
.bookmarks {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* Individual bookmark tile */
|
|
.bookmark {
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
backdrop-filter: blur(6px);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
color: var(--text);
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
|
|
.bookmark:hover {
|
|
transform: translateY(-4px) scale(1.1);
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.bookmark-icon {
|
|
font-size: 1.75rem;
|
|
margin-bottom: 0.25rem;
|
|
/* accentuate icons & add-button */
|
|
color: var(--accent);
|
|
}
|
|
|
|
.bookmark-title {
|
|
font-size: 0.8rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 5px;
|
|
right: 7px;
|
|
background: none;
|
|
border: none;
|
|
color: red;
|
|
font-size: 1rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Add button style */
|
|
.add-bookmark {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
font-size: 2rem;
|
|
background: rgba(255,255,255,0.05);
|
|
border: 1px dashed rgba(255,255,255,0.3);
|
|
backdrop-filter: blur(6px);
|
|
transition: transform 0.2s ease-in-out, background 0.3s, border-color 0.3s;
|
|
color: white;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.add-bookmark:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Popup styling */
|
|
.popup {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(18,20,24,0.8);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 99;
|
|
backdrop-filter: blur(4px); /* add subtle blur behind the overlay */
|
|
}
|
|
|
|
.popup.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Popup inner as white Material card */
|
|
.popup-inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
color: #222222;
|
|
min-width: 320px;
|
|
/* existing styling */
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
|
|
padding: 1.5rem;
|
|
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
|
transform: translateY(-10px) scale(0.95);
|
|
opacity: 0;
|
|
width: 500px; /* make popup wider */
|
|
max-width: 90vw; /* keep it responsive on small screens */
|
|
}
|
|
|
|
/* animate in when not hidden */
|
|
.popup:not(.hidden) .popup-inner {
|
|
transform: translateY(0) scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* dialog title */
|
|
.popup-inner h2 {
|
|
margin: 0 0 1rem;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
color: #333333;
|
|
}
|
|
|
|
/* field labels */
|
|
.popup-inner label {
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
font-size: 0.875rem;
|
|
color: #555555;
|
|
}
|
|
|
|
/* text/url/icon inputs */
|
|
.popup-inner input[type="text"],
|
|
.popup-inner input[type="url"] {
|
|
width: 100%;
|
|
background: #f5f5f5;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 1rem;
|
|
color: #222222;
|
|
margin-bottom: 1rem;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.popup-inner input[type="text"]:focus,
|
|
.popup-inner input[type="url"]:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 2px rgba(123,46,255,0.2);
|
|
}
|
|
|
|
/* icon-grid container */
|
|
.icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
|
gap: 8px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin: 0 -0.5rem 1rem;
|
|
padding: 0.5rem;
|
|
background: #fafafa;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* individual icon items */
|
|
.icon-item {
|
|
background: #ffffff;
|
|
border: 1px solid #ddd;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
text-align: center;
|
|
}
|
|
|
|
.icon-item:hover {
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
/* action buttons container */
|
|
.popup-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.popup-buttons button {
|
|
min-width: 80px;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 4px;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Cancel button */
|
|
#cancelBtn {
|
|
background: #e0e0e0;
|
|
color: #222222;
|
|
}
|
|
|
|
#cancelBtn:hover {
|
|
background: #d5d5d5;
|
|
}
|
|
|
|
/* Add button */
|
|
#saveBookmarkBtn {
|
|
background: var(--primary);
|
|
color: #ffffff;
|
|
}
|
|
|
|
#saveBookmarkBtn:hover {
|
|
background: #6a24e5;
|
|
}
|
|
|
|
/* Color Palette */
|
|
:root {
|
|
--bg: #121418;
|
|
--dark-blue: #0B1C2B;
|
|
--dark-purple: #1B1035;
|
|
--primary: #7B2EFF;
|
|
--accent: #00C6FF;
|
|
--text: #E0E0E0;
|
|
}
|
|
|
|
/* Icon grid styling */
|
|
.icon-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
|
|
gap: 8px;
|
|
max-height: 200px;
|
|
overflow-y: auto;
|
|
margin-bottom: 8px;
|
|
}
|
|
.icon-item {
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
}
|
|
.icon-item:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
.icon-item.selected {
|
|
border-color: #0078d4;
|
|
background: rgba(0, 120, 212, 0.1);
|
|
}
|