squibid/wallheaven
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

now mobile friendly(ish)

Browse Source
This commit is contained in:
Squibid
2023-10-30 18:39:32 -04:00
parent c75861db6a
commit ad842b7b2c
2 changed files with 96 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
style/style.css
View File

@ -32,6 +32,16 @@ h1, #header {
@media only screen and (max-width: 75em) {
#searchbox input[type=text] { width: 45vw !important; }
}
@media only screen and (max-width: 950px) {
#wallmaster #wallpaperinfo, #wallmaster #bwallpaperview {
width: inherit;
height: auto;
padding: 0 !important;
margin: 0 !important;
div, details { padding: 5px 10px 5px 10px; }
}
#wallmaster #wallpaperinfo { margin: 25px 0 0 0 !important; }
}
#searchbox {
text-align: center;
@ -95,85 +105,86 @@ h1, #header {
overflow: auto;
background-color: #1a1a1a;
color: #fff;
#uploader { text-align: center; }
#uploader span[title='Owner/Developer'] {
font-weight: bold;
color: var(--owner-color-1);
text-shadow: 0 0 2px var(--owner-color-1), 0 0 5px var(--owner-color-2);
}
#uploader span[title=Developer] {
font-weight: bold;
color: var(--developer-color-1);
}
#uploader span[title=Administrator] {
font-weight: bold;
color: var(--admin-color-1);
}
#uploader span[title=User] { color: var(--user-color-1); }
#uploader span[title=deleted] {
color: var(--deleted-color-1);
text-decoration: line-through;
}
a#similar {
text-decoration: underline;
color: inherit;
float: right;
}
#tags span {
white-space: nowrap;
line-height: 1.8;
}
#tags span a { color: #000; }
#tags span[id=sfw], #properties span[id=sfw] {
color: #000;
background-color: var(--sfw-color-1);
border: 3px solid var(--sfw-color-2);
}
#tags span[id=sketchy], #properties span[id=sketchy] {
color: #000;
background-color: var(--sketchy-color-1);
border: 3px solid var(--sketchy-color-2);
}
#tags span[id=nsfw], #properties span[id=nsfw] {
color: #000;
background-color: var(--nsfw-color-1);
border: 3px solid var(--nsfw-color-2);
}
#properties p { color: #ccf; }
#tags a, summary { user-select: none; }
#properties span {
color: #fff;
float: right;
}
}
#uploader { text-align: center; }
#uploader span[title='Owner/Developer'] {
font-weight: bold;
color: var(--owner-color-1);
text-shadow: 0 0 2px var(--owner-color-1), 0 0 5px var(--owner-color-2);
}
#uploader span[title=Developer] {
font-weight: bold;
color: var(--developer-color-1);
}
#uploader span[title=Administrator] {
font-weight: bold;
color: var(--admin-color-1);
}
#uploader span[title=User] { color: var(--user-color-1); }
#uploader span[title=deleted] {
color: var(--deleted-color-1);
text-decoration: line-through;
}
a#similar {
text-decoration: underline;
color: inherit;
float: right;
}
#tags span {
white-space: nowrap;
line-height: 1.8;
}
#tags span a { color: #000; }
#tags span[id=sfw], #properties span[id=sfw] {
color: #000;
background-color: var(--sfw-color-1);
border: 3px solid var(--sfw-color-2);
}
#tags span[id=sketchy], #properties span[id=sketchy] {
color: #000;
background-color: var(--sketchy-color-1);
border: 3px solid var(--sketchy-color-2);
}
#tags span[id=nsfw], #properties span[id=nsfw] {
color: #000;
background-color: var(--nsfw-color-1);
border: 3px solid var(--nsfw-color-2);
}
#properties p { color: #ccf; }
#tags a, summary { user-select: none; }
#properties span {
color: #fff;
float: right;
}
#bwallpaperview {
float: left;
float: right;
width: 75%;
height: 100%;
overflow: scroll;
}
#bwallpaperview img {
cursor: zoom-in;
max-width: 75%;
max-height: 78vh;
width: auto;
height: auto;
display: block;
margin: 0 auto auto auto;
inset: 0;
}
img {
cursor: zoom-in;
max-width: 75%;
max-height: 78vh;
width: auto;
height: auto;
display: block;
margin: 0 auto auto auto;
inset: 0;
}
#bwallpaperview input[type=checkbox]:checked~img {
cursor: zoom-out;
max-height: 100000000%;
max-width: 100000000%;
width: 150%;
input[type=checkbox]:checked~img {
cursor: zoom-out;
max-height: 100000000%;
max-width: 100000000%;
width: 150%;
}
}
#footer {
@ -231,28 +242,11 @@ input[id=General]:checked + label:hover,
input[id=Anime]:checked + label:hover,
input[id=People]:checked + label:hover { border: 3px solid #afafaf; }
/* search box */
input[type=text] {
padding: 5px;
width: 42vw;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #555;
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
font-style: italic;
}
a:hover { font-style: italic; }
#error { color: var(--nsfw-color-1); }
#warn { color: var(--sketchy-color-1); }

28
view.php
View File

@ -25,6 +25,20 @@
$res = getwallpaper("https://wallhaven.cc/api/v1/w/$matches[0]?apikey=$apikey");
?>
<div id='wallmaster'>
<div id='bwallpaperview'>
<?php
if ($_GET['p'] == "nsfw" && !$apikey)
printf("<p id='error'>Server doesn't have an apikey, cannot view image.</p>");
?>
<div>
<label>
<input type="checkbox">
<?php
printf("<img src='/proxy.php?i=%s'>\n", $_POST['wall']);
?>
</label>
</div>
</div>
<div id='wallpaperinfo'>
<div id='uploader'>
<?php
@ -50,18 +64,4 @@
</details>
<hr>
</div>
<div id='bwallpaperview'>
<?php
if ($_GET['p'] == "nsfw" && !$apikey)
printf("<p id='error'>Server doesn't have an apikey, cannot view image.</p>");
?>
<div>
<label>
<input type="checkbox">
<?php
printf("<img src='/proxy.php?i=%s'>\n", $_POST['wall']);
?>
</label>
</div>
</div>
</div>