|
@@ -9,8 +9,7 @@
|
|
|
* liability that might arise from its use.
|
|
|
------------------------------------------------------------------------------------ */
|
|
|
|
|
|
-html { font-size: 16px; }
|
|
|
-body { position: relative; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; color: #222; background-color: #ffffff; line-height: 1.2; }
|
|
|
+body { margin: 0; padding: 0; background-color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #222; line-height: 1.2; }
|
|
|
div { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
|
|
|
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
|
|
|
h2, h3, h4, h5, h6 { font-weight: normal; }
|
|
@@ -22,110 +21,108 @@ p { font-size: 18px; color: #494949; }
|
|
|
a { text-decoration: none; color: #4495d4; }
|
|
|
small, sub, sup { padding: 5px 0; color: #666; font-size: 12px; }
|
|
|
sub, sup { font-style: italic; }
|
|
|
+pre, code { word-wrap: break-word; overflow-wrap: break-word; }
|
|
|
a:hover { text-decoration: underline; }
|
|
|
-input[type="text"]:invalid ~ input[type="submit"] { opacity: 0.5; pointer-events: none; }
|
|
|
-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>"); }
|
|
|
+input[type="text"]: invalid ~ input[type="submit"] { opacity: 0.5; pointer-events: none; }
|
|
|
+input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; -webkit-mask-image: url("data: image/svg+xml;utf8,<svg xmlns='http: //www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>"); }
|
|
|
|
|
|
/* Page structure */
|
|
|
-.wrap { min-height: 100vh; overflow: hidden; }
|
|
|
-.header-wrap { display: block; padding-top: 16px; width: 100%; }
|
|
|
-.results-wrap { position: relative; display: flex; margin: 0 158px 50px 158px; }
|
|
|
-.footer-wrap { position: absolute; bottom: 0; display: block; margin-top: 15px; padding: 0; width: 100%; }
|
|
|
-
|
|
|
-/* Main page */
|
|
|
-body.main { background-color: #1f242b; color: #f0f6fc; }
|
|
|
-.search-box-main, .password-generator { text-align: center; margin-top: 10%; }
|
|
|
-.search-box-main h1 { font-size: 4rem; }
|
|
|
-.search-box-main .search, .password-generator .password { padding: 10px 20px; width: 600px; color: #f0f6fc; background-color: #333333; font-size: 2rem; font-family: sans-serif; border: 1px solid #3C4043; border-radius: 10px; }
|
|
|
-.search-box-main .search[type="search"]::-webkit-search-cancel-button { background-size: 28px 28px; height: 28px; width: 28px; background-color: #f0f6fc; }
|
|
|
-.search-box-buttons button { margin: 30px 20px 10px 20px; padding: 13px 10px 13px 10px; min-width: 130px; color: #f0f6fc; background-color: #333333; font-size: 0.8rem; border: 1px solid #3C4043; border-radius: 6px; }
|
|
|
-.search-box-buttons button:hover { border: 1px solid #5f6368; }
|
|
|
+body { min-height: 100vh; display: flex; flex-direction: column; }
|
|
|
+.header { padding-top: 16px; width: 100%; }
|
|
|
+.content { margin: 0 158px; padding: 15px 0; }
|
|
|
+.footer { bottom: 0; margin-top: auto; padding: 0; width: 100%; }
|
|
|
+
|
|
|
+/* Start page */
|
|
|
+.startpage { background-color: #1f242b; color: #f0f6fc; }
|
|
|
+.startpage-search, .password-generator { text-align: center; margin-top: 10%; }
|
|
|
+.startpage-search h1 { font-size: 4rem; }
|
|
|
+.startpage-search .search, .password-generator .password { padding: 10px 20px; width: 600px; color: #f0f6fc; background-color: #333333; font-size: 2rem; font-family: sans-serif; border: 1px solid #3C4043; border-radius: 10px; }
|
|
|
+.startpage-search .search[type="search"]::-webkit-search-cancel-button { background-size: 28px 28px; height: 28px; width: 28px; background-color: #f0f6fc; }
|
|
|
+.search-buttons button { margin: 30px 20px 10px 20px; padding: 13px 10px 13px 10px; min-width: 130px; color: #f0f6fc; background-color: #333333; font-size: 1rem; border: 1px solid #3C4043; border-radius: 6px; }
|
|
|
+.startpage-search .search:focus, .password-generator .password:focus, .search-buttons button:hover { border: 1px solid #5f6368; }
|
|
|
|
|
|
.password-generator { margin: 30px auto; padding: 0; }
|
|
|
.password-generator .password { margin: 10px auto; width: 300px; text-align: center; font-size: 0.8rem; }
|
|
|
|
|
|
-/* Search Results - Header */
|
|
|
-.header-wrap { background-color: #1f242b; color: #f0f6fc; border-bottom: 2px solid #1fa4d1; }
|
|
|
-.header-wrap .search, .header-wrap .button { position: relative; height: 40px; color: #f0f6fc; font-size: 1rem; font-weight: 400; }
|
|
|
-.header-wrap .search { margin: 28px 0 28px 158px; padding: 5px 5px 5px 15px; width: 580px; background-color: #1f242b; border: 1px solid #303842; border-radius: 10px 0 0 10px; }
|
|
|
-.header-wrap .search[type="search"]::-webkit-search-cancel-button { background-size: 20px 20px; height: 20px; width: 20px; background-color: #f0f6fc; }
|
|
|
-.header-wrap .button { margin: 28px 10px 28px 0; padding: 5px 20px 5px 15px; background-color: #1fa4d1; border: none; border-radius: 0 10px 10px 0; }
|
|
|
-
|
|
|
-/* Search results - Header Navigation */
|
|
|
-.navigation-header { margin-left: 165px; margin-bottom: 10px; }
|
|
|
-.navigation-header img { margin-right: 5px; height: 16px; vertical-align: middle; }
|
|
|
-.navigation-header a { margin-right: 20px; border: none; font-size: 1rem; cursor: pointer; text-decoration: none; }
|
|
|
-.navigation-header a:hover { color: #ebf3fa; }
|
|
|
-.navigation-header a:visited { color: #1fa4d1; }
|
|
|
-.navigation-header .active { padding-bottom: 8px; border-bottom: 4px #1fa4d1 solid; }
|
|
|
-
|
|
|
-/* Search results */
|
|
|
-.main-column { width: 100%; }
|
|
|
-.main-column ol .meta { margin: .75rem 0 .05rem 0; padding: .5rem 10px 0 10px; }
|
|
|
-.main-column ol .sources { margin: .05rem 0 .75rem 0; padding: 0 10px .5rem 10px; font-size: 0.75rem; color: #666; }
|
|
|
-
|
|
|
-.main-column ol .special-result { margin: .75rem 0 .25rem 0; padding: .5rem 10px; }
|
|
|
-.main-column ol .result { margin: .50rem 0 .50rem 0; padding: 0; }
|
|
|
-
|
|
|
-.main-column ol li article { padding: .5rem 10px; border: 1px solid #fefefe; border-radius: 8px; }
|
|
|
-.main-column ol li article div.url:first-child, .main-column ol li.special-result article div.source:first-child { flex-grow: 0; }
|
|
|
-.main-column ol li article div.url { display: inline-block; margin: 0; max-width: 100%; color: #666; font-size: 1rem; line-height: 1.6; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
-.main-column ol li article div.url a { margin: 0; color: #3f6e35; cursor: pointer; text-decoration: none; }
|
|
|
-.main-column ol li article div.title, .main-column ol li.special-result article div.title { margin-bottom: .29rem; }
|
|
|
-.main-column ol li article div.title h2 { margin: 0; padding: 0; position: relative; font-size: 1.46rem; letter-spacing: -.01px; }
|
|
|
-.main-column ol li article div.title h2:hover { text-decoration: underline; }
|
|
|
-.main-column ol li article div.title a { margin: 0; display: block; cursor: pointer; }
|
|
|
-.main-column ol li article div.title a:visited { color: #6d59a3; }
|
|
|
-.main-column ol li article div.description { margin: 0; line-height: 1.4; font-size: 1rem; color: #494949; }
|
|
|
-.main-column ol li article div.engine { padding: 2px 0; font: 12px italic; color: #666; }
|
|
|
-.main-column ol li article div.description .seeders { color: #518257; }
|
|
|
-.main-column ol li article div.description .leechers { color: #c00; }
|
|
|
-
|
|
|
-/* Image results */
|
|
|
-.main-column .image-wrapper { width: 100%; margin: .75rem 0 .75rem 0; }
|
|
|
-@supports not (display: grid) {
|
|
|
- .image-grid > * { max-width: 8rem; margin-left: auto; margin-right: auto; }
|
|
|
- .image-grid li.result { display: inline-block; margin: .75rem; width: 12.5%; }
|
|
|
- .image-grid > * + * { margin-top: 1rem; }
|
|
|
-}
|
|
|
+/* oAUTH page*/
|
|
|
+.oauthpage { background-color: #1f242b; color: #f0f6fc; }
|
|
|
+.oauth-form { text-align: center; margin-top: 20px; }
|
|
|
+.oauth-form h1 { font-size: 4rem; }
|
|
|
+.oauth-form p, .oauth-form small { margin-bottom: 15px; color: #f0f6fc; }
|
|
|
+.oauth-form .field { padding: 5px 10px; width: 300px; color: #f0f6fc; background-color: #333333; font-size: 1rem; font-family: sans-serif; border: 1px solid #3C4043; border-radius: 10px; }
|
|
|
+.oauth-buttons button { margin: 30px 20px 10px 20px; padding: 13px 10px 13px 10px; min-width: 130px; color: #f0f6fc; background-color: #333333; font-size: 1rem; border: 1px solid #3C4043; border-radius: 6px; }
|
|
|
+.oauth-buttons button:hover { border: 1px solid #5f6368; }
|
|
|
+
|
|
|
+/* Results page header */
|
|
|
+.header { background-color: #1f242b; color: #f0f6fc; border-bottom: 2px solid #1fa4d1; }
|
|
|
+.header .search, .header .button { position: relative; height: 40px; color: #f0f6fc; font-size: 1rem; font-weight: 400; }
|
|
|
+.header .search { margin: 28px 0 28px 158px; padding: 5px 5px 5px 15px; width: 580px; background-color: #1f242b; border: 1px solid #5f6368; border-radius: 10px 0 0 10px; }
|
|
|
+.header .search[type="search"]::-webkit-search-cancel-button { background-size: 20px 20px; height: 20px; width: 20px; background-color: #f0f6fc; }
|
|
|
+.header .button { margin: 28px 10px 28px 0; padding: 5px 20px 5px 15px; background-color: #1fa4d1; border: none; border-radius: 0 10px 10px 0; }
|
|
|
+
|
|
|
+.navigation { margin-left: 158px; margin-bottom: 10px; }
|
|
|
+.navigation img { margin-right: 5px; height: 16px; vertical-align: middle; }
|
|
|
+.navigation a { margin-right: 20px; border: none; font-size: 1rem; cursor: pointer; text-decoration: none; }
|
|
|
+.navigation a:hover { color: #ebf3fa; }
|
|
|
+.navigation a: visited { color: #1fa4d1; }
|
|
|
+.navigation .active { padding-bottom: 8px; border-bottom: 4px solid #1fa4d1; }
|
|
|
+
|
|
|
+/* Search results spacing */
|
|
|
+.content .meta { padding: 10px 0 0 0; }
|
|
|
+.content .sources { padding: 0 0 10px 0; font-size: 0.75rem; color: #666; }
|
|
|
+.content .suggestion { padding: 15px 0; }
|
|
|
+.content .result { margin: 0 0 25px 0; }
|
|
|
+.content .result-special { margin: 15px 0 25px 0; padding: 10px; }
|
|
|
+.content .result.image { margin: 0; }
|
|
|
+
|
|
|
+/* Search results (web, image and magnet) */
|
|
|
+.content .result { border: 1px solid #fefefe; border-radius: 8px; }
|
|
|
+.content .result div.url, .content .result-special div.source { max-width: 100%; font-size: 1rem; line-height: 1.6; letter-spacing: .2px; white-space: nowrap; overflow: hidden; }
|
|
|
+.content .result div.url a, .content .result-special div.source a { color: #3f6e35; cursor: pointer; text-decoration: none; }
|
|
|
+.content .result div.title, .content .result-special div.title { margin-bottom: 5px; }
|
|
|
+.content .result div.title h2 { padding: 0; position: relative; font-size: 1.46rem; letter-spacing: -.01px; }
|
|
|
+.content .result div.title h2:hover { text-decoration: underline; }
|
|
|
+.content .result div.title a { display: block; cursor: pointer; }
|
|
|
+.content .result div.title a: visited { color: #6d59a3; }
|
|
|
+.content .result div.description { line-height: 1.4; font-size: 1rem; color: #494949; }
|
|
|
+.content .result div.engine { padding: 2px 0; font: 12px italic; color: #666; }
|
|
|
+.content .result div.description .seeders { color: #518257; }
|
|
|
+.content .result div.description .leechers { color: #c00; }
|
|
|
+
|
|
|
+.content .result-special { position: relative; background-color: #fefefe; overflow: hidden; border: 1px solid #aeaeae; border-radius: 8px; color: #222; }
|
|
|
+.content .result-special div.title h2 { padding: 0; font-size: 1.5rem; font-weight: 600; word-wrap: break-word; color: #222; }
|
|
|
+.content .result-special div.title h2:hover { text-decoration: none; }
|
|
|
+.content .result-special div.title a { display: block; color: #6c00a2; cursor: pointer; }
|
|
|
+.content .result-special div.title a: visited { color: #6d59a3; }
|
|
|
+.content .result-special div.text, .content .result-special div.source { position: relative; font-style: normal; }
|
|
|
+
|
|
|
+/* Grids (image and magnet highlights) */
|
|
|
@supports (display: grid) {
|
|
|
- .main-column ol.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); grid-gap: 1rem; }
|
|
|
+ .image-grid ol, .magnet-grid ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); grid-gap: 1rem; }
|
|
|
}
|
|
|
-.main-column ol.image-grid .result .image-box { position: relative; }
|
|
|
-.main-column ol.image-grid .result .image-box::after { display: block; padding-bottom: 100%; content: ""; }
|
|
|
-.main-column ol.image-grid .result .image-box img { position: absolute; object-fit: cover; width: 100%; height: 100%; border-radius: 10px; }
|
|
|
-.main-column ol.image-grid .result .image-box img:hover { outline: none; border-color: #3C4043; box-shadow: 0 0 10px #3C4043; }
|
|
|
-.main-column ol.image-grid .result span { padding: 5px 0 0 0; color: #666; font-size: 0.75rem; }
|
|
|
-
|
|
|
-/* Special results - Main column */
|
|
|
-.main-column ol .special-result { background-color: #fefefe; }
|
|
|
-.main-column ol li.special-result article { padding: .5rem 10px; position: relative; overflow: hidden; border: 1px solid #aeaeae; border-radius: 8px; color: #222; }
|
|
|
-.main-column ol li.special-result article div.title h2 { margin: 0; padding: 0; font-size: 1.5rem; font-weight: 600; word-wrap: break-word; color: #222; }
|
|
|
-.main-column ol li.special-result article div.title h2:hover { text-decoration: none; }
|
|
|
-.main-column ol li.special-result article div.title a { margin: 0; display: block; color: #6c00a2; cursor: pointer; }
|
|
|
-.main-column ol li.special-result article div.title a:visited { color: #6d59a3; }
|
|
|
-.main-column ol li.special-result article div.text, .main-column ol li article div.source { position: relative; font-style: normal; }
|
|
|
-.main-column ol li.special-result article div.text img { padding: 0 0 10px 10px; }
|
|
|
-.main-column ol li.special-result article div.source { display: inline-block; margin: 0; max-width: 100%; color: #666; font-size: 1rem; line-height: 1.6; letter-spacing: .2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: inherit; }
|
|
|
-.main-column ol li.special-result article div.source a { margin: 0; color: #3f6e35; text-decoration: none; }
|
|
|
-
|
|
|
-/* Magnet highlights */
|
|
|
-.main-column .magnet-wrapper { width: 100%; margin: .75rem 0 .75rem 0; }
|
|
|
@supports not (display: grid) {
|
|
|
- .magnet-grid > * { max-width: 8rem; margin-left: auto; margin-right: auto; }
|
|
|
- .magnet-grid li.result { display: inline-block; margin: .75rem; width: 12.5%; }
|
|
|
- .magnet-grid > * + * { margin-top: 1rem; }
|
|
|
-}
|
|
|
-@supports (display: grid) {
|
|
|
- .main-column ol.magnet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); grid-gap: 1rem; padding: .5rem 10px; }
|
|
|
+ .image-grid ol > *, .magnet-grid ol > * { max-width: 8rem; margin-left: auto; margin-right: auto; }
|
|
|
+ .image-grid ol .result, .magnet-grid ol .result { display: inline-block; margin: .75rem; width: 12.5%; }
|
|
|
+ .image-grid ol > * + *, .magnet-grid ol > * + * { margin-top: 1rem; }
|
|
|
}
|
|
|
-.main-column ol.magnet-grid .result .magnet-box { position: relative; }
|
|
|
-.main-column ol.magnet-grid .result .magnet-box::after { display: block; content: ""; }
|
|
|
-.main-column ol.magnet-grid .result .magnet-box img { width: 100%; height: 100%; border-radius: 10px; }
|
|
|
-.main-column ol.magnet-grid .result .magnet-box p { visibility: hidden; opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #1f242b; transition: opacity .1s, visibility .1s; padding: 10px; line-height: 1.4; text-align: center; font-size: 0.8rem; color: #f0f6fc; }
|
|
|
-.main-column ol.magnet-grid .result .magnet-box a { display: block; position: relative; margin: 5px 0 5px 0; padding: 5px 20px; background-color: #1fa4d1; border: 1px solid #466f82; border-radius: 10px; color: #f0f6fc; font-weight: 800; text-align: center; }
|
|
|
-.main-column ol.magnet-grid .result .magnet-box a:hover { text-decoration: none; }
|
|
|
-.main-column ol.magnet-grid .result .magnet-box:hover p { visibility: visible; opacity: .90; outline: none; border-color: #3C4043; border-radius: 10px; box-shadow: 0 0 10px #3C4043; }
|
|
|
+
|
|
|
+/* Image results */
|
|
|
+.image-grid { width: 100%; margin: 25px 0; }
|
|
|
+.image-grid ol .result .image-box { position: relative; }
|
|
|
+.image-grid ol .result .image-box::after { display: block; padding-bottom: 100%; content: ""; }
|
|
|
+.image-grid ol .result .image-box img { position: absolute; object-fit: cover; width: 100%; height: 100%; border-radius: 10px; }
|
|
|
+.image-grid ol .result .image-box img:hover { outline: none; border-color: #3C4043; box-shadow: 0 0 10px #3C4043; }
|
|
|
+.image-grid ol .result span { padding: 5px 0 0 0; color: #666; font-size: 0.75rem; }
|
|
|
+
|
|
|
+/* Magnet highlights */
|
|
|
+.magnet-grid { width: 100%; margin: 25px 0; }
|
|
|
+.magnet-grid ol .result .magnet-box { position: relative; }
|
|
|
+.magnet-grid ol .result .magnet-box::after { display: block; content: ""; }
|
|
|
+.magnet-grid ol .result .magnet-box img { width: 100%; height: 100%; border-radius: 10px; }
|
|
|
+.magnet-grid ol .result .magnet-box p { visibility: hidden; opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #1f242b; transition: opacity .1s, visibility .1s; padding: 10px; line-height: 1.4; text-align: center; font-size: 0.8rem; color: #f0f6fc; }
|
|
|
+.magnet-grid ol .result .magnet-box a { display: block; position: relative; margin: 5px 0 5px 0; padding: 5px 20px; background-color: #1fa4d1; border: 1px solid #466f82; border-radius: 10px; color: #f0f6fc; font-weight: 800; text-align: center; }
|
|
|
+.magnet-grid ol .result .magnet-box a:hover { text-decoration: none; }
|
|
|
+.magnet-grid ol .result .magnet-box:hover p { visibility: visible; opacity: .90; outline: none; border-color: #3C4043; border-radius: 10px; box-shadow: 0 0 10px #3C4043; }
|
|
|
|
|
|
/* Misc */
|
|
|
.logo { position: absolute; margin: 28px 18px; }
|
|
@@ -133,104 +130,104 @@ body.main { background-color: #1f242b; color: #f0f6fc; }
|
|
|
.no-decoration, .no-decoration:hover { text-decoration: none; }
|
|
|
.hide { display: none; }
|
|
|
.G { color: #1fa4d1; }
|
|
|
-.warning { position: relative; overflow: hidden; margin: 1rem 0 1rem 0; padding: .5rem 10px; color: #db9900; background-color: #ffffe0; border: 1px solid #e6db55; border-radius: 10px; }
|
|
|
-.error { position: relative; overflow: hidden; margin: 1rem 0 1rem 0; padding: .5rem 10px; color: #c00; background-color: #ffebe8; border: 1px solid #c00; border-radius: 10px; }
|
|
|
-.auth-error { margin-top: 15%; font-size: 2rem; text-align: center; color: #eaeaea; }
|
|
|
+.warning { position: relative; overflow: hidden; margin: 20px 0; padding: 10px; color: #db9900; background-color: #ffffe0; border: 1px solid #e6db55; border-radius: 10px; }
|
|
|
+.error { position: relative; overflow: hidden; margin: 20px 0; padding: 10px; color: #c00; background-color: #ffebe8; border: 1px solid #c00; border-radius: 10px; }
|
|
|
+.auth-success { margin-top: 15%; font-size: 1rem; text-align: center; color: #f0f6fc; }
|
|
|
+.auth-error { margin-top: 15%; font-size: 2rem; text-align: center; color: #f0f6fc; }
|
|
|
+a.update { color: #c90; font-weight: bold; }
|
|
|
|
|
|
-/* Footer bar */
|
|
|
-.footer-wrap { background-color: #161616; color: #f0f6fc; border-top: 2px solid #303134; }
|
|
|
-.footer { padding: 10px; }
|
|
|
+/* Footer */
|
|
|
+.footer { background-color: #161616; color: #f0f6fc; border-top: 1px solid #1fa4d1; }
|
|
|
.footer a { color: #f0f6fc; }
|
|
|
-a.update { color: #c90; font-weight: bold; }
|
|
|
+.footer-left, .footer-right { display: inline-block; padding: 10px; }
|
|
|
+.footer-right { float: right; }
|
|
|
|
|
|
-@media only screen and (max-width:960px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
|
|
|
+@media only screen and (max-width: 960px) { /* tablet, landscape iPad, lo-res/smaller laptops */
|
|
|
/* Page structure */
|
|
|
- .results-wrap { position: relative; display: flex; margin: 0 48px 20px 48px; }
|
|
|
+ .content { position: relative; margin: 0 48px; }
|
|
|
+ .footer-left, .footer-right { display: block; padding: 5px 5px 0 5px; text-align: center; }
|
|
|
+ .footer-right { float: none; padding: 0px 5px 5px 5px; }
|
|
|
|
|
|
- /* Main page */
|
|
|
- .search-box-main { margin-top: 10%; }
|
|
|
- .search-box-main input { width: 80%; }
|
|
|
- .search-box-buttons button { display: table-row; margin: 30px 0px 0px 0px; width: 80%; }
|
|
|
+ /* Start page */
|
|
|
+ .startpage-search { margin-top: 10%; }
|
|
|
+ .startpage-search .search { width: 80%; }
|
|
|
+ .search-buttons button { display: table-row; margin: 30px 0px 0px 0px; width: 80%; }
|
|
|
|
|
|
/* Search Results - Header */
|
|
|
- .header-wrap { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
- .header-wrap .search { margin: 10px 0px 28px 48px; width: 400px; }
|
|
|
- .header-wrap .search, .header-wrap .button { margin: 10px 0px 28px 0px; }
|
|
|
+ .header { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
+ .header .search { margin: 10px 0px 28px 48px; width: 400px; }
|
|
|
+ .header .search, .header .button { margin: 10px 0px 28px 0px; }
|
|
|
|
|
|
/* Search results - Header Navigation */
|
|
|
- .navigation-header { display: flex; margin: 0; padding: 0; align-items: baseline; }
|
|
|
- .navigation-header a { margin: 0 auto; padding: 0; }
|
|
|
+ .navigation { margin: 0 auto 10px auto; padding: 0; align-items: baseline; }
|
|
|
|
|
|
/* Misc */
|
|
|
.logo { position: relative; display: block;margin: 0 auto; float: none; padding: 10px; font-size: 1.75rem; }
|
|
|
}
|
|
|
|
|
|
-@media only screen and (max-width:640px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
|
|
|
+@media only screen and (max-width: 640px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
|
|
|
/* Page structure */
|
|
|
- .results-wrap { position: relative; display: flex; margin: 0 10px 10px 10px; }
|
|
|
+ .content { position: relative; margin: 0 10px; }
|
|
|
+ .footer-left, .footer-right { display: block; padding: 5px 5px 0 5px; text-align: center; }
|
|
|
+ .footer-right { float: none; padding: 0px 5px 5px 5px; }
|
|
|
|
|
|
- /* Main page */
|
|
|
- .search-box-main { margin-top: 10%; }
|
|
|
- .search-box-main input { width: 80%; }
|
|
|
- .search-box-buttons button { display: table-row; margin: 30px 0px 0px 0px; width: 80%; }
|
|
|
+ /* Start page */
|
|
|
+ .startpage-search { margin-top: 10%; }
|
|
|
+ .startpage-search .search { width: 80%; }
|
|
|
+ .search-buttons button { display: table-row; margin: 30px 0px 0px 0px; width: 80%; }
|
|
|
|
|
|
/* Search Results - Header */
|
|
|
- .header-wrap { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
- .header-wrap .search, .header-wrap .button { margin: 0px 0px 10px 0px; width: 80%; border-radius: 25px; }
|
|
|
+ .header { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
+ .header .search, .header .button { margin: 0px 0px 10px 0px; width: 80%; border-radius: 25px; }
|
|
|
|
|
|
/* Search results - Header Navigation */
|
|
|
- .navigation-header { display: flex; margin: 0; padding: 0; align-items: baseline; }
|
|
|
- .navigation-header a { margin: 0 auto; padding: 0; }
|
|
|
+ .navigation { margin: 0 auto 10px auto; padding: 0; align-items: baseline; }
|
|
|
|
|
|
/* Misc */
|
|
|
.logo { position: relative; display: block; float: none; margin: 0 auto; padding: 10px; font-size: 1.75rem; }
|
|
|
}
|
|
|
|
|
|
-@media only screen and (max-width:480px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
|
|
|
+@media only screen and (max-width: 480px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
|
|
|
/* Page structure */
|
|
|
- .results-wrap { position: relative; display: flex; margin: 0 10px 10px 10px; }
|
|
|
+ .content { position: relative; margin: 0 10px; }
|
|
|
+ .footer-left, .footer-right { display: block; padding: 5px 5px 0 5px; text-align: center; }
|
|
|
+ .footer-right { float: none; padding: 0px 5px 5px 5px; }
|
|
|
|
|
|
- /* Main page */
|
|
|
- .search-box-main { margin-top: 10%; }
|
|
|
- .search-box-main input { width: 80%; }
|
|
|
- .search-box-main h1 { font-size: 2.5rem; }
|
|
|
- .search-box-buttons button { display: table-row; margin: 30px 0px 0px 0px; width: 80%; }
|
|
|
+ /* Start page */
|
|
|
+ .startpage-search { margin-top: 10%; }
|
|
|
+ .startpage-search h1 { font-size: 2.5rem; }
|
|
|
+ .startpage-search .search { width: 80%; }
|
|
|
+ .search-buttons button { display: table-row; margin: 30px 0px 0px 0px; width: 80%; }
|
|
|
|
|
|
/* Search Results - Header */
|
|
|
- .header-wrap { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
- .header-wrap .search, .header-wrap .button { margin: 0px 0px 10px 0px; width: 80%; border-radius: 25px; }
|
|
|
+ .header { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
+ .header .search, .header .button { margin: 0px 0px 10px 0px; width: 80%; border-radius: 25px; }
|
|
|
|
|
|
/* Search results - Header Navigation */
|
|
|
- .navigation-header { display: flex; margin: 0; padding: 0; align-items: baseline; }
|
|
|
- .navigation-header a { margin: 0 auto; padding: 0; }
|
|
|
-
|
|
|
- /* Magnet highlights */
|
|
|
- .main-column .magnet-wrapper { display: none; }
|
|
|
+ .navigation { margin: 0 auto 10px auto; padding: 0; align-items: baseline; }
|
|
|
|
|
|
/* Misc */
|
|
|
.logo { position: relative; display: block; float: none; margin: 0 auto; padding: 10px; font-size: 1.75rem; }
|
|
|
}
|
|
|
|
|
|
-@media only screen and (max-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
|
|
|
+@media only screen and (max-width: 320px) { /* smartphones, iPhone, portrait 480x320 phones, split screen devices */
|
|
|
/* Page structure */
|
|
|
- .results-wrap { position: relative; display: flex; margin: 0 10px 10px 10px; }
|
|
|
+ .content { position: relative; margin: 0 10px; }
|
|
|
+ .footer-left, .footer-right { display: block; padding: 5px 5px 0 5px; text-align: center; }
|
|
|
+ .footer-right { float: none; padding: 0px 5px 5px 5px; }
|
|
|
|
|
|
- /* Main page */
|
|
|
- .search-box-main { margin-top: 40px; }
|
|
|
- .search-box-main input { width: 80%; }
|
|
|
- .search-box-main h1 { font-size: 2.5rem; }
|
|
|
- .search-box-buttons button { display: table-row; margin: 20px 0px 0px 0px; width: 80%; }
|
|
|
+ /* Start page */
|
|
|
+ .startpage-search { margin-top: 40px; }
|
|
|
+ .startpage-search h1 { font-size: 2.5rem; }
|
|
|
+ .startpage-search .search { width: 80%; }
|
|
|
+ .search-buttons button { display: table-row; margin: 20px 0px 0px 0px; width: 80%; }
|
|
|
|
|
|
/* Search Results - Header */
|
|
|
- .header-wrap { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
- .header-wrap .search, .header-wrap .button { margin: 0px 0px 10px 0px; width: 80%; border-radius: 25px; }
|
|
|
+ .header { margin-left: auto; margin-right: auto; text-align: center; }
|
|
|
+ .header .search, .header .button { margin: 0px 0px 10px 0px; width: 80%; border-radius: 25px; }
|
|
|
|
|
|
/* Search results - Header Navigation */
|
|
|
- .navigation-header { display: flex; margin: 0; padding: 0; align-items: baseline; }
|
|
|
- .navigation-header a { margin: 0 auto; padding: 0; }
|
|
|
-
|
|
|
- /* Magnet highlights */
|
|
|
- .main-column .magnet-wrapper { display: none; }
|
|
|
+ .navigation { margin: 0 auto 10px auto; padding: 0; align-items: baseline; }
|
|
|
|
|
|
/* Misc */
|
|
|
.logo { position: relative; float: none; display: block; margin: 0 auto; padding: 10px; font-size: 1.75rem; }
|