diff --git a/static/css/style.css b/static/css/style.css index c173fb9..4346e71 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -263,7 +263,6 @@ html { flex: 1 1 auto; padding: .5rem .5rem 2rem .5rem; margin: .25rem; - border: 1px solid #00000000; border-radius: 12px; height: 10rem; max-width: 20rem; @@ -271,7 +270,7 @@ html { } .image_selected { - border-color: var(--blue); + border: 1px solid var(--border); } .image>a { @@ -1511,20 +1510,6 @@ body, h1, p, a, input, button { } } -/* -.material-icons-round { - font-family: 'Material Icons Round'; - font-weight: normal; - font-style: normal; - line-height: 1; - letter-spacing: normal; - text-transform: none; - display: inline-block; - white-space: nowrap; - word-wrap: normal; - direction: ltr; -} */ - @media only screen and (max-width: 1220px) { .snip { @@ -1697,6 +1682,10 @@ body, h1, p, a, input, button { margin-right: 1.2% !important; } + .image { + max-width: 100%; + } + .logomobile { position: relative; float: none; @@ -1705,21 +1694,21 @@ body, h1, p, a, input, button { margin-left: auto; margin-right: auto; padding: 10px; - font-size: 26px; display: block; margin-top: 0px; top: -5px; /* how ? why ? I dont even wanna know */ left: 0px; } + .logo-container svg { + width: 100px; + height: 35px; + } + .mobile-none { display: none; } - /* .search-menu { - display: none; - } */ - .sub-search-button-wrapper { margin: 0; padding: 0; @@ -1738,8 +1727,6 @@ body, h1, p, a, input, button { } .sub-search-button-wrapper button { - margin-right: 4px; - margin-left: 4px; padding: 0; display: flex; flex-direction: column; @@ -1866,12 +1853,55 @@ body, h1, p, a, input, button { } +@media only screen and (max-width: 470px) { + .sub-search-button-wrapper { + display: flex; + flex-direction: row; + justify-content: flex-start; + overflow-x: auto; + white-space: nowrap; + padding-left: 10px; + padding-right: 10px; + position: relative; + scroll-behavior: smooth; + scrollbar-width: none; /* Hide scrollbar for Firefox */ + } + + /* Hide scrollbar for Webkit-based browsers (e.g., Chrome, Safari) */ + .sub-search-button-wrapper::-webkit-scrollbar { + display: none; + } + + /* Gradient as a fixed visual indicator */ + .sub-search-button-wrapper::after { + content: ''; /* Adds a gradient or fade effect as a scroll indicator */ + position: fixed; /* Ensure it doesn't move with scrolling */ + top: 90px; + right: 0; + height: 40px; + width: 20px; + background: linear-gradient(to left, var(--html-bg), rgba(255, 255, 255, 0)); /* Adjust colors */ + pointer-events: none; /* Prevent interaction */ + z-index: 1; /* Ensure it is above the scrollable content */ + } + + /* Hide gradient when fully scrolled */ + .sub-search-button-wrapper:has(.search-container-results-btn:last-child:in-view)::after { + display: none; + } +} + /* This is really bad */ @media only screen and (max-width: 400px) { .icon-button { padding: 5% } + + .results_settings { + display: flex; /* Enable flexbox */ + flex-wrap: wrap; /* Allow elements to wrap onto new lines when necessary */ + } } /* Ensuring dark theme compliance */