now mobile friendly(ish)
This commit is contained in:
@ -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,70 +105,70 @@ h1, #header {
|
||||
overflow: auto;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#uploader { text-align: center; }
|
||||
#uploader span[title='Owner/Developer'] {
|
||||
#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] {
|
||||
}
|
||||
#uploader span[title=Developer] {
|
||||
font-weight: bold;
|
||||
color: var(--developer-color-1);
|
||||
}
|
||||
#uploader span[title=Administrator] {
|
||||
}
|
||||
#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] {
|
||||
}
|
||||
#uploader span[title=User] { color: var(--user-color-1); }
|
||||
#uploader span[title=deleted] {
|
||||
color: var(--deleted-color-1);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
|
||||
a#similar {
|
||||
a#similar {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
#tags span {
|
||||
#tags span {
|
||||
white-space: nowrap;
|
||||
line-height: 1.8;
|
||||
}
|
||||
#tags span a { color: #000; }
|
||||
#tags span[id=sfw], #properties span[id=sfw] {
|
||||
}
|
||||
#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] {
|
||||
}
|
||||
#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] {
|
||||
}
|
||||
#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 {
|
||||
#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 {
|
||||
img {
|
||||
cursor: zoom-in;
|
||||
max-width: 75%;
|
||||
max-height: 78vh;
|
||||
@ -167,13 +177,14 @@ a#similar {
|
||||
display: block;
|
||||
margin: 0 auto auto auto;
|
||||
inset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#bwallpaperview input[type=checkbox]:checked~img {
|
||||
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
28
view.php
@ -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>
|
||||
|
Reference in New Issue
Block a user