<style>
.main-content {
flex-grow: 1;
padding-right: 0px;
}
.search-max-container {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
margin: 0 auto;
}
.top-bar {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0);
padding: 0 20px;
}
.logo {
flex: 1;
color: #ffffff;
}
.custom-menu {
display: flex;
margin-left: auto;
}
.custom-menu a {
margin-left: 20px;
}
.search-area {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 80px;
margin-bottom: -35px;
}
.current-time {
width: 285px;
text-align: center;
color: white;
font-size: 58px;
}
div#current-time {
font-family: 'iconfont' !important;
letter-spacing: 5px !important;
display: inline-block !important;
transform: scaleX(1.1) scaleY(1.5) !important;
font-size: 38px !important;
width: 210px !important;
text-shadow: 0 0px 3px rgb(0 0 0 / 33%) !important;
}
.search-form {
width: 650px;
height: 53px;
display: flex;
align-items: center;
position: relative;
}
.search-icon {
width: 90px;
height: 66%;
display: flex;
align-items: center;
justify-content: center;
}
.search-icon img {
width: 30px;
height: 30px;
border-radius: 30%;
}
.search-icon img:hover {
transform: scale(1.2);
transition: transform 0.2s;
}
.search-form input {
width: calc(100% - 30px);
height: 100%;
padding: 10px;
margin-left: 5px;
box-sizing: border-box;
border-width: 0px;
}
.search-form input:focus {
outline: none;
}
.search-form button {
background-color: #ffffff;
align-items: center;
color: rgba(0, 0, 0, .86);
display: flex;
font-size: 20px;
font-weight: 600;
height: 56px;
justify-content: center;
margin-left: 20px;
position: relative;
width: 80px;
padding-inline: 7px;
border-width: 0px;
border-radius: 0px 15px 15px 0px;
cursor: pointer;
}
.bottom-bar {
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
height: 39px;
display: flex;
align-items: center;
justify-content: space-between;
opacity: 1;
padding: 0 20px;
transition: all 0.3s ease;
}
.bottom-bar:hover {
background-image: linear-gradient(128deg, #00000000, #00000009, #00000000 100%) !important;
backdrop-filter: blur(2px);
}
.bottom-bar:hover a {
color: #ffffff !important;
}
.search-maxx {
box-shadow: 0px 0px 23px -1px #83838369;
}
.links a {
margin-right: 10px;
border-radius: 13px;
border: 1px solid #d1d1d100;
padding: 4px 11px;
cursor: pointer;
}
.links a:hover {
color: #ffffff !important;
background-color: #00000061;
border-radius: 13px;
padding: 4px 11px;
border: 1px solid #ffffff9e;
}
.bottom-bar a {
color: #ffffffe0;
font-size: 13px;
text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
text-decoration: none;
}
.controls {
display: flex;
align-items: center;
}
.controls i {
font-size: 24px;
margin-left: 23px;
cursor: pointer;
transition: transform 0.2s;
}
.height-adjuster {
position: relative;
display: flex;
align-items: center;
}
.height-adjuster .arrow-icons {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
right: 0px;
top: -120%;
transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
}
.height-adjuster.enlarged i {
transform: scale(1.5);
}
.height-adjuster i {
cursor: pointer;
} .search-engine-dropdown {
display: none;
position: absolute;
margin-top: 8px;
background: #ffffff;
border-radius: 4px;
width: 200px;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.search-engine-dropdown ul {
padding: 0;
margin: 0;
list-style: none;
}
.search-engine-dropdown li {
display: flex;
align-items: center;
padding: 8px 10px;
cursor: pointer;
}
.search-engine-dropdown li:hover {
background-color: #f5f5f5;
border-radius: 5px;
}
.engine-icon {
margin-left: 10px;
width: 30px;
height: 30px;
margin-right: 10px;
border-radius: 30%;
} .skin-modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 1200px;
height: 520px;
transform: translate(-50%, -50%);
background: white;
border: 1px solid #ccc;
z-index: 1001;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
border-radius: 8px;
}
.modal-header {
height: 60px;
background-color: white;
padding: 10px;
border-bottom: 1px solid #ccc;
}
#skin-modal .modal-body {
height: 370px;
overflow-y: auto;
display: flex;
justify-content: center;
}
.image-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
padding: 20px;
}
.thumbnail {
width: 100%;
cursor: pointer;
border-radius: 8px;
transition: transform 0.2s;
}
.thumbnail:hover {
transform: scale(1.05);
}
.modal-footer {
height: 80px;
background-color: white;
text-align: right;
padding: 10px;
border-top: 1px solid #ccc;
}
i.iconfont.icon-arrow-t {
padding-bottom: 50px !important;
} .overlay {
position: absolute; 
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5); 
pointer-events: none; 
}
input#url-input {
margin: 5px;
border: 2px solid #34343436;
border-radius: 8px;
width: 390px;
padding: 9pt;
height: 38px;
font-size: .85pc;
}
button#save-url, button#close-modal {
margin: 5px;
border: 2px solid #34343436;
border-radius: 8px;
padding: 1px 10px;
cursor: pointer;
} .fixed-bottom-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
background-color: rgba(0, 0, 0, 0.8);
transition: all 0.3s ease;
}
</style>