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) { @media only screen and (max-width: 75em) {
#searchbox input[type=text] { width: 45vw !important; } #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 { #searchbox {
text-align: center; text-align: center;
@ -95,85 +105,86 @@ h1, #header {
overflow: auto; overflow: auto;
background-color: #1a1a1a; background-color: #1a1a1a;
color: #fff; 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 { #bwallpaperview {
float: left; float: right;
width: 75%; width: 75%;
height: 100%; height: 100%;
overflow: scroll; overflow: scroll;
}
#bwallpaperview img { img {
cursor: zoom-in; cursor: zoom-in;
max-width: 75%; max-width: 75%;
max-height: 78vh; max-height: 78vh;
width: auto; width: auto;
height: auto; height: auto;
display: block; display: block;
margin: 0 auto auto auto; margin: 0 auto auto auto;
inset: 0; inset: 0;
} }
#bwallpaperview input[type=checkbox]:checked~img { input[type=checkbox]:checked~img {
cursor: zoom-out; cursor: zoom-out;
max-height: 100000000%; max-height: 100000000%;
max-width: 100000000%; max-width: 100000000%;
width: 150%; width: 150%;
}
} }
#footer { #footer {
@ -231,28 +242,11 @@ input[id=General]:checked + label:hover,
input[id=Anime]:checked + label:hover, input[id=Anime]:checked + label:hover,
input[id=People]:checked + label:hover { border: 3px solid #afafaf; } 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 { a {
text-decoration: none; text-decoration: none;
color: #fff; color: #fff;
} }
a:hover { font-style: italic; }
a:hover {
font-style: italic;
}
#error { color: var(--nsfw-color-1); } #error { color: var(--nsfw-color-1); }
#warn { color: var(--sketchy-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"); $res = getwallpaper("https://wallhaven.cc/api/v1/w/$matches[0]?apikey=$apikey");
?> ?>
<div id='wallmaster'> <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='wallpaperinfo'>
<div id='uploader'> <div id='uploader'>
<?php <?php
@ -50,18 +64,4 @@
</details> </details>
<hr> <hr>
</div> </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> </div>