Fijxu/librex
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #41 from Extravi/main

Browse source 
improved the overall user interface, making it cleaner and more compact.
This commit is contained in:
hnhx 2022-08-16 14:27:53 +02:00 committed by GitHub
commit aaa66a0478
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 114 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
engines/google/text.php
View file

@ -132,8 +132,6 @@
function print_text_results($results) function print_text_results($results)
{ {
echo "<div class=\"text-result-container\">";
$special = $results[0]; $special = $results[0];
if (array_key_exists("special_response", $special)) if (array_key_exists("special_response", $special))
{ {
@ -153,6 +151,8 @@
array_shift($results); array_shift($results);
} }
echo "<div class=\"text-result-container\">";
foreach($results as $result) foreach($results as $result)
{ {
$title = $result["title"]; $title = $result["title"];

1
search.php
View file

@ -4,6 +4,7 @@
</head> </head>
<body> <body>
<form class="sub-search-container" method="get" autocomplete="off"> <form class="sub-search-container" method="get" autocomplete="off">
<h1 class="logomobile"><a class="noDecoration" href="./">Libre<span class="X">X</span></a></h1>
<a href="./"><img class="logo" src="static/images/librex.png" alt="librex logo"></a> <a href="./"><img class="logo" src="static/images/librex.png" alt="librex logo"></a>
<input type="text" name="q" <input type="text" name="q"
<?php <?php

15
static/css/dark.css
View file

@ -1,14 +1,21 @@
:root { :root {
--main-bg: #202124; --main-bg: #1c1c1c;
--main-fg: #e8eaed; --main-fg: #e8eaed;
--result-link-fg: #8ab4f8; --result-link-fg: #8ab4f8;
--result-fg: #999da2; --result-fg: #999da2;
--button-bg: #303134; --button-bg: #333333;
--special-result-border: #bdc1c6; --special-result-border: opacity: 0;
--special-text-background: #282828;
--special-text-color: #cccccc;
--search-container-text-color: #e8eaed;
--search-container-background-color: #333333;
--search-form-background-color: #161616;
--footer-fg: #999da2; --footer-fg: #999da2;
--footer-bg: #171717; --footer-bg: #161616;
} }

144
static/css/styles.css
View file

@ -5,6 +5,10 @@ html {
font-size: 16px; font-size: 16px;
} }
body {
margin: 0;
}
input, input,
button { button {
outline: none; outline: none;
@ -15,7 +19,7 @@ button {
} }
p { p {
font-size:18px; font-size: 18px;
color: var(--result-fg); color: var(--result-fg);
} }
@ -26,12 +30,12 @@ a,
.text-result-wrapper a:visited h2, .text-result-wrapper a:visited h2,
.special-result-container a, .special-result-container a,
.sub-search-button-wrapper button .sub-search-button-wrapper button {
{
color: #bd93f9; color: #bd93f9;
} }
a:hover, .text-result-wrapper h2:hover { a:hover,
.text-result-wrapper h2:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -47,8 +51,8 @@ a:hover, .text-result-wrapper h2:hover {
.search-container input, .search-container input,
.sub-search-container input { .sub-search-container input {
width: 500px; width: 500px;
color: inherit; color: var(--search-container-text-color);
background-color: inherit; background-color: var(--search-container-background-color);
padding: 10px; padding: 10px;
font-size: inherit; font-size: inherit;
font-family: inherit; font-family: inherit;
@ -73,26 +77,43 @@ a:hover, .text-result-wrapper h2:hover {
} }
.sub-search-container { .sub-search-container {
margin: 2%; background-color: var(--search-form-background-color);
width: 100%;
border-bottom: 1px solid #303134;
} }
.sub-search-container hr { .sub-search-container hr {
margin-top: 35px; opacity: 0;
margin-bottom: 35px;
} }
.sub-search-container input { .sub-search-container input {
margin-bottom: 40px; margin-bottom: 20px;
width: 600px; width: 580px;
} }
.sub-search-container .logo { .sub-search-container .logo {
vertical-align: middle; vertical-align: middle;
margin-right: 50px; margin-right: 21px;
width: 60px;
height: auto;
padding: 14px
}
.logomobile {
display: none;
}
.noDecoration {
text-decoration: none;
color: var(--main-fg);
}
.noDecoration:hover {
text-decoration: none;
} }
.sub-search-button-wrapper { .sub-search-button-wrapper {
margin-left: 150px; margin-left: 118px;
} }
.search-button-wrapper button:hover, .search-button-wrapper button:hover,
@ -101,16 +122,21 @@ a:hover, .text-result-wrapper h2:hover {
cursor: pointer; cursor: pointer;
} }
.sub-search-button-wrapper img { .sub-search-button-wrapper i {
vertical-align: middle; vertical-align: middle;
margin-right: 10px; margin-right: 5px;
} }
.sub-search-button-wrapper button { .sub-search-button-wrapper button {
border: none; border: none;
background-color: inherit; background-color: inherit;
font-size: 18px; font-size: 14px;
margin-right: 25px; margin-right: 14px;
}
.sub-search-button-wrapper img {
vertical-align: middle;
margin-right: 10px;
} }
.misc-container { .misc-container {
@ -126,12 +152,12 @@ a:hover, .text-result-wrapper h2:hover {
} }
.misc-container button { .misc-container button {
margin-right:10px; margin-right: 10px;
margin-left:10px; margin-left: 10px;
} }
.misc-container a { .misc-container a {
color:inherit; color: inherit;
text-decoration: underline; text-decoration: underline;
} }
@ -154,11 +180,10 @@ a:hover, .text-result-wrapper h2:hover {
.text-result-container, .text-result-container,
#time, #time,
.next-page-button-wrapper { .next-page-button-wrapper {
margin-left: 200px; margin-left: 116px;
} }
.text-result-container .text-result-container {
{
margin-bottom: 100px; margin-bottom: 100px;
} }
@ -166,6 +191,10 @@ a:hover, .text-result-wrapper h2:hover {
padding: 10px; padding: 10px;
border: 1px solid var(--special-result-border); border: 1px solid var(--special-result-border);
width: 500px; width: 500px;
border-radius: 8px;
background: var(--special-text-background);
color: var(--special-text-color);
margin-left: 116px;
} }
.text-result-wrapper { .text-result-wrapper {
@ -189,25 +218,25 @@ a:hover, .text-result-wrapper h2:hover {
.special-result-container a { .special-result-container a {
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;
font-size:14px; font-size: 14px;
} }
.special-result-container img { .special-result-container img {
display: flex; display: flex;
max-width: 60%; max-width: 60%;
max-height: 200px; max-height: 200px;
padding-bottom:10px; padding-bottom: 10px;
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
} }
.next-page-button-wrapper { .next-page-button-wrapper {
margin-top:-50px; margin-top: -50px;
margin-bottom:100px; margin-bottom: 100px;
} }
.next-page-button-wrapper button { .next-page-button-wrapper button {
border:none; border: none;
background-color: inherit; background-color: inherit;
color: var(--result-link-fg); color: var(--result-link-fg);
font-size: 18px; font-size: 18px;
@ -226,7 +255,7 @@ a:hover, .text-result-wrapper h2:hover {
margin-left: 9%; margin-left: 9%;
margin-right: 9%; margin-right: 9%;
padding: 0; padding: 0;
margin-bottom:50px; margin-bottom: 50px;
} }
.image-result-container img { .image-result-container img {
@ -301,51 +330,61 @@ a:hover, .text-result-wrapper h2:hover {
} }
.footer-container a { .footer-container a {
margin:10px; margin: 10px;
} }
.sub-search-container { .sub-search-container {
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
text-align: center; text-align: center;
} }
.sub-search-container .logo { .sub-search-container .logo {
margin-left:auto; display: none;
margin-right:auto;
display: block;
} }
.logomobile {
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 10px;
font-size: 28px;
display: block;
}
.sub-search-container input { .sub-search-container input {
width: 80%; width: 80%;
margin-top:30px;
} }
.sub-search-button-wrapper { .sub-search-button-wrapper {
margin:0; margin: 0;
padding:0; padding: 0;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
} }
.sub-search-button-wrapper img { .sub-search-button-wrapper img {
margin:0; margin: 0;
padding:0; padding: 0;
margin-bottom:20px; margin-bottom: 20px;
} }
.sub-search-button-wrapper button { .sub-search-button-wrapper button {
margin-left:auto; margin-left: auto;
margin-right:auto; margin-right: auto;
padding:0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.special-result-container { .special-result-container {
max-width: 80%; max-width: 100%;
margin-left: 0px;
width: auto;
border-radius: 0px;
} }
.special-result-container img { .special-result-container img {
@ -365,9 +404,18 @@ a:hover, .text-result-wrapper h2:hover {
margin-top: 10%; margin-top: 10%;
} }
p {
font-size: 16px;
}
html {
font-size: 14px;
}
.text-result-container, .text-result-container,
#time, #time,
.next-page-button-wrapper { .next-page-button-wrapper {
margin-left: 40px; margin-left: 20px;
max-width: 90%;
} }
} }