inital commit

1 files changed, 225 insertions, 0 deletions

diff --git a/style/style.css b/style/style.css
new file mode 100644
index 0000000..11f90fe
--- /dev/null
+++ b/style/style.css
@@ -0,0 +1,225 @@
+:root {
+  --bg-color: #161616;
+
+  /* purity colors */
+  --sfw-color-1: #99ff99;
+  --sfw-color-2: #92f592;
+  --sketchy-color-1: #ffff99;
+  --sketchy-color-2: #f0f08f;
+  --nsfw-color-1: #ff9999;
+  --nsfw-color-2: #ff9a99;
+
+  /* role colors */
+  --owner-color-1: #b336ed;
+  --owner-color-2: #b886ed;
+  --developer-color-1: #fa8072;
+  --admin-color-1: #ffd700;
+  --user-color-1: #4169e1;
+  --deleted-color-1: #aaaaaa;
+}
+
+html, body {
+  background-color: var(--bg-color);
+  font-family: sans-serif;
+}
+
+h1, #header {
+  font-size: 2em;
+  color: white;
+  text-align: center;
+}
+
+#searchbox {
+  text-align: center;
+  font-size: 1em;
+}
+
+#options { display: inline-block; }
+
+#heaven {
+  -webkit-animation-name: heaven;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-direction: alternate;
+}
+
+@-webkit-keyframes heaven {
+  from {
+    text-shadow: 0 0 10px #ff9, 0 0 20px #ff9, 0 0 30px #fd8, 0 0 40px #fd8;
+  } to {
+    text-shadow: 0 0 10px #ff9, 0 0 20px #ff9, 0 0 30px #fd9, 0 0 40px #fd9, 0 0 50px #fd9, 0 0 60px #fd9;
+  }
+}
+
+#wallpapers {
+  text-align: center;
+  color: #fff;
+}
+#wallpapers form { display: inline-block; }
+
+button[name=wall] {
+  all: unset;
+  margin: 3px;
+  cursor: pointer;
+}
+
+#wallmaster {
+  width: 100%;
+  height: 80%;
+}
+
+#wallpaperinfo {
+  width: 15%;
+  max-height: 100%;
+  margin-right: 10px;
+  padding: 10px;
+  float: left;
+  overflow-y: 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;
+}
+
+#bwallpaperview {
+  float: left;
+  width: 75%;
+  height: 100%;
+}
+
+#bwallpaperview img {
+  display: block;
+  margin: auto;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+#footer {
+  user-select: none;
+  text-align: center;
+  font-size: 1.5em;
+}
+
+/* wallpaper preview borders */
+#sfw { border: 3px solid var(--sfw-color-1);  }
+#sketchy { border: 3px solid var(--sketchy-color-1); }
+#nsfw { border: 3px solid var(--nsfw-color-1); }
+
+/* search category buttons */
+input[type=checkbox] { display: none; }
+input[type=checkbox] + label {
+  border: 3px solid var(--bg-color);
+  background-color: var(--bg-color);
+  color: white;
+  user-select: none;
+}
+input[type=checkbox] + label:hover {
+  border: 3px solid #555;
+  cursor: pointer;
+}
+input[type=checkbox]:checked + label { color: #000; }
+/* sfw */
+input[id=SFW]:checked + label {
+  background-color: var(--sfw-color-1);
+  border: 3px solid var(--sfw-color-2);
+}
+input[id=SFW]:checked + label:hover { border: 3px solid #77ff77; }
+/* sketchy */
+input[id=Sketchy]:checked + label {
+  background-color: var(--sketchy-color-1);
+  border: 3px solid var(--sketchy-color-2);
+}
+input[id=Sketchy]:checked + label:hover { border: 3px solid #ffff66; }
+/* nsfw */
+input[id=NSFW]:checked + label {
+  background-color: var(--nsfw-color-1);
+  border: 3px solid var(--nsfw-color-2);
+}
+input[id=NSFW]:checked + label:hover { border: 3px solid #ffaaaa; }
+/* other tags */
+input[id=General]:checked + label,
+input[id=Anime]:checked + label,
+input[id=People]:checked + label,
+#properties span[id='category'] {
+  color: #000;
+  background-color: #eeeeee;
+  border: 3px solid #efefef;
+}
+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;
+}