diff --git a/static/css/style-search.css b/static/css/style-search.css new file mode 100644 index 0000000..adda3d2 --- /dev/null +++ b/static/css/style-search.css @@ -0,0 +1,61 @@ + + +.search-page-content { + display: flex; + flex-direction: column; + align-items: center; +} + +.search-page-content h1 { + text-align: center; + margin-bottom: 20px; +} + +#search-input { + width: 100%; + padding: 12px; + font-size: 16px; +} + +.search-type-icons { + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 30px; + margin-top: 30px; +} + +.icon-button { + display: flex; + flex-direction: column; + align-items: center; + background: none; + border: none; + cursor: pointer; + text-align: center; +} + +.icon-button .material-icons-round { + font-size: 48px; + color: var(--sub-search-wrapper-ico); +} + +.icon-button p { + margin-top: 8px; + font-size: 14px; + color: var(--sub-search-wrapper-ico); +} + +.icon-button:hover .material-icons-round { + transition: all .3s ease; + color: var(--blue); +} + +.icon-button:hover p { + transition: all .3s ease; + color: var(--blue); +} + +.icon-button button:focus { + outline: none; +} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 9fc2778..af1b700 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1538,6 +1538,20 @@ 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 { @@ -1910,98 +1924,6 @@ body, h1, p, a, input, button { } } -/* Center the entire search page content */ -.search-page-content { - display: flex; - flex-direction: column; - align-items: center; -} - -/* Center the logo */ -.search-page-content h1 { - text-align: center; - margin-bottom: 20px; -} - -/* Style for the search input */ -#search-input { - width: 100%; - padding: 12px; - font-size: 16px; -} - -/* Style for the search button inside the search bar */ -#search-wrapper-ico { - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - font-size: 24px; - background: none; - border: none; - cursor: pointer; -} - -/* Styles for the search type icons */ -.search-type-icons { - display: flex; - justify-content: center; - flex-wrap: wrap; - gap: 30px; - margin-top: 30px; -} - -/* Style for each icon button */ -.icon-button { - display: flex; - flex-direction: column; - align-items: center; - background: none; - border: none; - cursor: pointer; - text-align: center; -} - -/* Style for the icons */ -.icon-button .material-icons-round { - font-size: 48px; /* Adjust the size of the icons */ - color: var(--sub-search-wrapper-ico); -} - -/* Style for the labels under icons */ -.icon-button p { - margin-top: 8px; - font-size: 14px; - color: var(--sub-search-wrapper-ico); -} - -/* Hover effects */ -.icon-button:hover .material-icons-round { - color: var(--blue); -} - -.icon-button:hover p { - color: var(--blue); -} - -/* Remove button default focus outline */ -.icon-button button:focus { - outline: none; -} - -.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; -} - /* :root { --background-color: #ffffff; diff --git a/templates/search.html b/templates/search.html index dde47de..fd68aa2 100755 --- a/templates/search.html +++ b/templates/search.html @@ -8,6 +8,7 @@ {{ end }} Search with Ocásek + @@ -122,7 +123,7 @@
-

Files

+

Torrents