mirror of https://github.com/supernets/LibreY.git
made the css cleaner and responsive
This commit is contained in:
parent
c6959a3507
commit
06539593a8
|
@ -13,9 +13,11 @@
|
||||||
<h1>LibreX</h1>
|
<h1>LibreX</h1>
|
||||||
<input type="text" name="q"/>
|
<input type="text" name="q"/>
|
||||||
<input type="hidden" name="p" value="0"/>
|
<input type="hidden" name="p" value="0"/>
|
||||||
<input type="submit" style="display:none"/> <br/>
|
<input type="submit" style="display:none"/>
|
||||||
|
<div class="search-button-wrapper">
|
||||||
<button name="type" value="0" type="submit">Search with LibreX</button>
|
<button name="type" value="0" type="submit">Search with LibreX</button>
|
||||||
<button name="type" value="1" type="submit">Search images with LibreX</button>
|
<button name="type" value="1" type="submit">Search images with LibreX</button>
|
||||||
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="info-container">
|
<div class="info-container">
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
echo "<input type=\"hidden\" name=\"type\" value=\"$type\"/>";
|
echo "<input type=\"hidden\" name=\"type\" value=\"$type\"/>";
|
||||||
?>
|
?>
|
||||||
<button type="submit" style="display:none;"></button>
|
<button type="submit" style="display:none;"></button>
|
||||||
<div class="result_change">
|
<div class="result-change">
|
||||||
<button name="type" value="0">Text results</button>
|
<button name="type" value="0">Text results</button>
|
||||||
<button name="type" value="1">Image results</button>
|
<button name="type" value="1">Image results</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -17,10 +17,6 @@
|
||||||
echo "</form>";
|
echo "</form>";
|
||||||
}
|
}
|
||||||
|
|
||||||
ini_set('display_errors', 1);
|
|
||||||
ini_set('display_startup_errors', 1);
|
|
||||||
error_reporting(E_ALL);
|
|
||||||
|
|
||||||
session_start();
|
session_start();
|
||||||
|
|
||||||
require_once "google.php";
|
require_once "google.php";
|
||||||
|
@ -78,6 +74,9 @@ error_reporting(E_ALL);
|
||||||
}
|
}
|
||||||
else if ($type == 1) // image search
|
else if ($type == 1) // image search
|
||||||
{
|
{
|
||||||
|
|
||||||
|
echo "<div class=\"image-result-container\">";
|
||||||
|
|
||||||
foreach($results as $result)
|
foreach($results as $result)
|
||||||
{
|
{
|
||||||
$src = $result["base64"];
|
$src = $result["base64"];
|
||||||
|
@ -87,6 +86,8 @@ error_reporting(E_ALL);
|
||||||
echo "<img src=\"data:image/jpeg;base64,$src\">";
|
echo "<img src=\"data:image/jpeg;base64,$src\">";
|
||||||
echo "</a>";
|
echo "</a>";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
echo "</div>";
|
||||||
}
|
}
|
||||||
|
|
||||||
better_session_destroy();
|
better_session_destroy();
|
||||||
|
|
|
@ -1,182 +1,415 @@
|
||||||
html {
|
html {
|
||||||
color: #e8eaed;
|
color: #e8eaed;
|
||||||
|
background-color: #202124;
|
||||||
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
hr {
|
||||||
background-color: #202124;
|
margin-top: 30px;
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hr { margin: 30px 0px 30px 0px; }
|
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 80vh;
|
||||||
|
max-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
img { padding:15px; }
|
img {
|
||||||
|
|
||||||
.search-container {
|
border: 1px solid #5f6368;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .search-container START */
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
max-width: 560px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top:13%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-container input , .small-search-container input {
|
display: flex;
|
||||||
padding:10px;
|
flex-direction: column;
|
||||||
font-size: 16px;
|
|
||||||
border:1px solid #5f6368;
|
|
||||||
border-radius: 25px;
|
|
||||||
color: inherit;
|
|
||||||
background-color: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-container input { width: 520px; }
|
margin-left:auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top:12%;
|
||||||
|
|
||||||
.small-search-container input {
|
padding-left: 16px;
|
||||||
width: 600px;
|
padding-right: 16px;
|
||||||
margin-left:-10px;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.search-container input:hover, .small-search-container input:hover {
|
.search-container input {
|
||||||
background-color: #303134;
|
display: flex;
|
||||||
border-color: #303134;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-container input:focus , .small-search-container input:focus { outline: none; }
|
.search-container button:hover {
|
||||||
|
|
||||||
.search-container h1 { font-size:70px; }
|
|
||||||
|
|
||||||
.search-container button {
|
|
||||||
background-color: #303134;
|
|
||||||
border:none;
|
|
||||||
border-radius: 4px;
|
|
||||||
color:inherit;
|
|
||||||
padding:13px 10px 13px 10px;
|
|
||||||
margin-top:30px;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-left:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-container button:hover {
|
|
||||||
border: 1px solid #5f6368;
|
border: 1px solid #5f6368;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-container {
|
.search-container h1 {
|
||||||
|
font-size: 70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .search-container END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .small-search-container START */
|
||||||
|
|
||||||
|
.small-search-container {
|
||||||
|
margin:2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-search-container input {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-search-container h1, a {
|
||||||
|
display: inline;
|
||||||
|
color:inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .small-search-container END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
.search-container,
|
||||||
|
.small-search-container
|
||||||
|
START
|
||||||
|
*/
|
||||||
|
.search-container input ,
|
||||||
|
.small-search-container input {
|
||||||
|
color: inherit;
|
||||||
|
background-color: inherit;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
border: 1px solid #5f6368;
|
||||||
|
border-radius: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container input:hover ,
|
||||||
|
.small-search-container input:hover {
|
||||||
|
background-color: #303134;
|
||||||
|
border-color: #303134;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container input:focus ,
|
||||||
|
.small-search-container input:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
.search-container,
|
||||||
|
.small-search-container
|
||||||
|
END
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .search-button-wrapper START */
|
||||||
|
|
||||||
|
.search-button-wrapper {
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button-wrapper button {
|
||||||
|
color: inherit;
|
||||||
|
background-color: #303134;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
width: auto;
|
||||||
|
padding: 13px 10px 13px 10px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .search-button-wrapper END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .info-container START */
|
||||||
|
|
||||||
|
.info-container {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color:#171717;
|
background-color:#171717;
|
||||||
font-size:15px;
|
font-size:15px;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
border-top:1px solid #303134;
|
border-top:1px solid #303134;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-container a , p {
|
.info-container a , p {
|
||||||
color:#999da2;
|
color:#999da2;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-container a {
|
.info-container a {
|
||||||
padding-left: 25px;
|
padding-left:20px;
|
||||||
font-size:16px;
|
font-size:16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-container #right { float:right; }
|
.info-container #right {
|
||||||
|
float:right;
|
||||||
|
padding-right:20px;
|
||||||
|
}
|
||||||
|
|
||||||
.info-container a:hover { text-decoration: underline; }
|
.info-container a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.small-search-container h1, a {
|
/* .info-container END */
|
||||||
display: inline;
|
|
||||||
margin-right:40px;
|
|
||||||
color:inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-search-container { margin:2%; }
|
|
||||||
|
|
||||||
.result-container, #time, #special-result {
|
|
||||||
margin-left:10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-container {
|
/* .result-container START */
|
||||||
|
|
||||||
|
.result-container {
|
||||||
max-width: 550px;
|
max-width: 550px;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-container span { font-size: 15px; }
|
.result-container span {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.result-container a {
|
.result-container a {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color:#bdc1c6;
|
color:#bdc1c6;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-container h2 {
|
.result-container h2 {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color:#8ab4f8;
|
color:#8ab4f8;
|
||||||
padding-top:5px;
|
padding-top:5px;
|
||||||
margin-top:1px;
|
margin-top:1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-container h2:hover { text-decoration: underline; }
|
.result-container h2:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
#special-result {
|
/* .result-container END */
|
||||||
padding:10px;
|
|
||||||
border: 1px solid #bdc1c6;
|
|
||||||
width:500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-container {
|
|
||||||
|
|
||||||
|
/* .image-result-container START */
|
||||||
|
|
||||||
|
.image-result-container {
|
||||||
|
margin-left:8%;
|
||||||
|
margin-right:8%;
|
||||||
|
|
||||||
|
margin-bottom:30px;
|
||||||
|
|
||||||
|
max-height: 100vh;
|
||||||
|
max-width: 84%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .image-result-container END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .page-container START */
|
||||||
|
|
||||||
|
.page-container {
|
||||||
margin-top:50px;
|
margin-top:50px;
|
||||||
margin-bottom:50px;
|
margin-bottom:50px;
|
||||||
margin-left:15%;
|
margin-left:15%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-container #page { display: inline; }
|
.page-container #page {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
.page-container #page button {
|
.page-container #page button {
|
||||||
padding-right: 10px;
|
|
||||||
background-color: inherit;
|
|
||||||
font-size: 16px;
|
|
||||||
color:#8ab4f8;
|
color:#8ab4f8;
|
||||||
border: none;
|
background-color: inherit;
|
||||||
}
|
|
||||||
|
|
||||||
.page-container #page button:hover {
|
padding-right: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container #page button:hover {
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result_change button {
|
/* .page-container END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .result-change START */
|
||||||
|
|
||||||
|
.result-change {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-change button {
|
||||||
color:#c58af9;
|
color:#c58af9;
|
||||||
background-color: inherit;
|
background-color: inherit;
|
||||||
border:none;
|
|
||||||
text-decoration: underline;
|
|
||||||
display: inline;
|
display: inline;
|
||||||
margin:20px 0px 0px 0px;
|
|
||||||
|
border:none;
|
||||||
|
|
||||||
|
text-decoration: underline;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
|
||||||
|
|
||||||
.result_change { margin-left: 11%;}
|
margin-top:20px;
|
||||||
|
}
|
||||||
|
|
||||||
.result_change button:hover { cursor: pointer; }
|
.result-change button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .result-change END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* .donate-container START */
|
||||||
|
|
||||||
|
.donate-container {
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-right: 5%;
|
||||||
|
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
|
||||||
.donate-container {
|
|
||||||
margin-left: 25%;
|
|
||||||
margin-right: 25%;
|
|
||||||
margin-top: 13%;
|
margin-top: 13%;
|
||||||
|
|
||||||
|
|
||||||
border: 1px solid #bdc1c6;
|
border: 1px solid #bdc1c6;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-container a {
|
||||||
|
color: #8ab4f8;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .donate-container END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* @media START */
|
||||||
|
|
||||||
|
@media only screen and (min-width:900px) {
|
||||||
|
.search-button-wrapper {
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-button-wrapper button {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-search-container input {
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-bottom: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-change {
|
||||||
|
margin-left: 9%
|
||||||
|
}
|
||||||
|
|
||||||
|
.donate-container {
|
||||||
|
margin-left: 25%;
|
||||||
|
margin-right: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (max-width:900px) {
|
||||||
|
.info-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-container a {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-search-container input {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-search-container a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
margin-top:10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-change {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @media END */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.result-container ,
|
||||||
|
#time ,
|
||||||
|
#special-result {
|
||||||
|
margin-left: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.donate-container a {
|
#special-result {
|
||||||
color:#8ab4f8;
|
padding: 10px;
|
||||||
text-decoration: underline;
|
border: 1px solid #bdc1c6;
|
||||||
|
width: 500px;
|
||||||
}
|
}
|
Loading…
Reference in New Issue