mirror of
https://github.com/rystaf/mlmym.git
synced 2024-11-08 08:04:26 +00:00
dark mode
This commit is contained in:
Ryan Stafford
parent
ef8496ec4f
commit
d61a6f3bf1
5
public/index.html
Normal file
5
public/index.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<html>
|
||||
<body>
|
||||
Hello!
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/link.png
Normal file
BIN
public/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
3
public/link.svg
Normal file
3
public/link.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges">
|
||||
<path d="M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 911 B |
892
public/style.css
Normal file
892
public/style.css
Normal file
|
|
@ -0,0 +1,892 @@
|
|||
body {
|
||||
font: normal x-small verdana,arial,helvetica,sans-serif;
|
||||
margin: 0px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
body.dark {
|
||||
background-color: #262626;
|
||||
color: #ddd;
|
||||
}
|
||||
.dark a {
|
||||
color: #8cb3d9;
|
||||
}
|
||||
.dark input[type=text], .dark input[type=password], .dark textarea {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-color: #4d4d4d
|
||||
}
|
||||
.rank, .thumb, .score {
|
||||
float: left;
|
||||
}
|
||||
.clearleft {
|
||||
clear: left;
|
||||
}
|
||||
.post {
|
||||
margin: 6px;
|
||||
}
|
||||
.post .thumb {
|
||||
height: 52px;
|
||||
width: 70px;
|
||||
margin: 0px 4px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
--background-color: #e7e7e7;
|
||||
}
|
||||
.rank {
|
||||
color: #c6c6c6;
|
||||
font-size: medium;
|
||||
margin-top: 17px;
|
||||
text-align: right;
|
||||
min-width: 19px;
|
||||
}
|
||||
.dark .post .rank {
|
||||
color: #646464;
|
||||
}
|
||||
.post .score {
|
||||
color: #c6c6c6;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
min-width: 42px;
|
||||
}
|
||||
.dark .post .score {
|
||||
color: #646464;
|
||||
}
|
||||
.comment .score {
|
||||
margin-right: 2px;
|
||||
overflow:hidden;
|
||||
}
|
||||
.comment .content {
|
||||
overflow:hidden;
|
||||
}
|
||||
.comment.hidden .score {
|
||||
display: none;
|
||||
}
|
||||
.score form.link-btn input {
|
||||
display: block;
|
||||
color: #b7b7b7;
|
||||
font-size: 20px;
|
||||
line-height: 16px;
|
||||
}
|
||||
.dark .score form.link-btn input {
|
||||
color: #646464;
|
||||
}
|
||||
.comment form.link-btn input {
|
||||
line-height: 17px;
|
||||
}
|
||||
.score form.like.link-btn input:first-child, .score .like div {
|
||||
color: orangered;
|
||||
}
|
||||
.score form.dislike.link-btn input:last-child, .score .dislike div {
|
||||
color: #8080FF;
|
||||
}
|
||||
|
||||
.score form div {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.title a {
|
||||
color: #0000ff;
|
||||
font-size: medium;
|
||||
text-decoration: none;
|
||||
}
|
||||
.dark .title a {
|
||||
color: #dedede;
|
||||
}
|
||||
.post.deleted .title a {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
[disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.post .title {
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
}
|
||||
.activity .post .title a {
|
||||
font-size: medium;
|
||||
}
|
||||
.activity .post .title {
|
||||
margin: 0;
|
||||
}
|
||||
.activity .title a {
|
||||
font-size: 13px;
|
||||
}
|
||||
.activity .title {
|
||||
margin: 5px 0px 0px 10px;
|
||||
}
|
||||
.activity .post {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.message {
|
||||
margin: 10px 10px 15px 10px;
|
||||
}
|
||||
.message div {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.message b {
|
||||
color: #000;
|
||||
}
|
||||
.meta {
|
||||
color: #888;
|
||||
}
|
||||
.dark .meta {
|
||||
color: #b4b4b4;
|
||||
}
|
||||
|
||||
.comment {
|
||||
font-size: 14px;
|
||||
margin: 0px 0px 5px 15px;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 3px;
|
||||
padding: 5px 10px 5px 5px;
|
||||
}
|
||||
.dark .comment {
|
||||
border-color: #333;
|
||||
}
|
||||
.activity .comment {
|
||||
border: 0px;
|
||||
}
|
||||
.comment img {
|
||||
max-height: 300px;
|
||||
}
|
||||
.comment .comment {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.comment .comment,
|
||||
.comment .comment .comment .comment,
|
||||
.comment .comment .comment .comment .comment .comment,
|
||||
.comment .comment .comment .comment .comment .comment .comment .comment,
|
||||
.comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
|
||||
background-color:#f7f7f8;
|
||||
}
|
||||
.dark .comment .comment,
|
||||
.dark .comment .comment .comment .comment,
|
||||
.dark .comment .comment .comment .comment .comment .comment,
|
||||
.dark .comment .comment .comment .comment .comment .comment .comment .comment,
|
||||
.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment .comment {
|
||||
background-color:#161616;
|
||||
}
|
||||
.comment .comment .comment,
|
||||
.comment .comment .comment .comment .comment,
|
||||
.comment .comment .comment .comment .comment .comment .comment,
|
||||
.comment .comment .comment .comment .comment .comment .comment .comment .comment {
|
||||
background-color:#fff;
|
||||
}
|
||||
.dark .comment,
|
||||
.dark .comment .comment .comment,
|
||||
.dark .comment .comment .comment .comment .comment,
|
||||
.dark .comment .comment .comment .comment .comment .comment .comment,
|
||||
.dark .comment .comment .comment .comment .comment .comment .comment .comment .comment {
|
||||
background-color: #121212;
|
||||
}
|
||||
.comment .meta {
|
||||
font-size: 10px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.meta a {
|
||||
color: #369;
|
||||
text-decoration: none;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.dark .meta a {
|
||||
color: #6a98af;
|
||||
}
|
||||
.meta a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.comment .meta a.submitter {
|
||||
background-color: #0055df;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
padding: 0px 2px;
|
||||
}
|
||||
.commentmenu {
|
||||
font-size: 16px;
|
||||
margin: 0px 0px 10px 10px;
|
||||
}
|
||||
.commentmenu div {
|
||||
border-top: 1px dotted gray;
|
||||
font-size: 12px;
|
||||
}
|
||||
.savecomment {
|
||||
margin: 10px;
|
||||
}
|
||||
.savecomment textarea {
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
}
|
||||
.comment .meta a.minimize {
|
||||
color: #369;
|
||||
font-size: 10px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
.comment.hidden {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.comment.hidden .meta a {
|
||||
color: gray;
|
||||
font-weight: 400;
|
||||
}
|
||||
.comment.hidden .meta a:last-child {
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
.comment.hidden .content, .comment.hidden .children {
|
||||
display: none;
|
||||
}
|
||||
.morecomments {
|
||||
margin: 10px 0px;
|
||||
font-size: 10px;
|
||||
}
|
||||
.morecomments a {
|
||||
color: #336699;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
.morecomments a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.member {
|
||||
display: inline-block;
|
||||
margin-bottom:3px;
|
||||
}
|
||||
.member input {
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
padding: 1px 4px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #444444;
|
||||
color: white;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.join input {
|
||||
background-color: green;
|
||||
}
|
||||
.leave input {
|
||||
background-color: #cf6165;
|
||||
}
|
||||
.pending input {
|
||||
background-color: #369;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.gray {
|
||||
color: #808080;
|
||||
}
|
||||
.error {
|
||||
color: red;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
}
|
||||
.alert {
|
||||
color: #8080FF;
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
}
|
||||
.green {
|
||||
background-color: #efffc7;
|
||||
width: 8px;
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
margin: 0 2px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #78b04d;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.pager {
|
||||
margin: 10px;
|
||||
}
|
||||
.pager a {
|
||||
padding: 1px 4px;
|
||||
background: #eee;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
color: #369;
|
||||
}
|
||||
.buttons li {
|
||||
display: inline;
|
||||
}
|
||||
.buttons, .buttons input {
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.comment .buttons {
|
||||
margin: 8px 0px 3px 0px;
|
||||
}
|
||||
.comment.hidden .buttons {
|
||||
display: none;
|
||||
}
|
||||
.expando blockquote, .comment blockquote {
|
||||
margin: 5px 0 5px 15px;
|
||||
border-left: 2px solid #c5c1ad;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.buttons a, .buttons form input {
|
||||
text-decoration: none;
|
||||
color: #888;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.buttons a:hover, .title a:hover, .buttons input:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.entry {
|
||||
overflow: hidden;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.expando-button {
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background-color: #ccccc9;
|
||||
border-radius: 4px;
|
||||
margin: 0px 4px 0px 0px;
|
||||
cursor: pointer;
|
||||
float:left;
|
||||
}
|
||||
.expando-button::before{
|
||||
content: "+";
|
||||
float: left;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
left: 11px;
|
||||
top: 3px;
|
||||
}
|
||||
.open.expando-button {
|
||||
border-radius: 30px;
|
||||
}
|
||||
.open.expando-button::before {
|
||||
content: "x";
|
||||
color: #fff;
|
||||
left: 7px;
|
||||
top: 0px;
|
||||
font-weight: bold;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.expando-button:hover{
|
||||
background-color: #466599;
|
||||
}
|
||||
.expando {
|
||||
display: none;
|
||||
max-width: 587px;
|
||||
color: #000;
|
||||
}
|
||||
.expando.open{
|
||||
display: block;
|
||||
}
|
||||
.expando img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.expando > div {
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #369;
|
||||
border-radius: 7px;
|
||||
padding: 5px 10px;
|
||||
margin: 5px 0px;
|
||||
font-size: 14px;
|
||||
overflow: auto;
|
||||
}
|
||||
.dark .expando > div {
|
||||
background-color: #262626;
|
||||
color: #ddd;
|
||||
}
|
||||
.expando p, .comment p, .message p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.search {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
font-weight: 700;
|
||||
margin: 10px 5px 20px 30px;
|
||||
max-width: 605px;
|
||||
}
|
||||
.search .query {
|
||||
white-space: nowrap;
|
||||
padding-right: 142px;
|
||||
}
|
||||
.search .query input[type=text] {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.search .query input {
|
||||
font-size: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
.search div:last-child input {
|
||||
margin: 2px 0px;
|
||||
}
|
||||
.search label {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#sideToggle {
|
||||
text-align: right;
|
||||
}
|
||||
.side {
|
||||
margin: 0 auto;
|
||||
font-size: 12px;
|
||||
width: 300px;
|
||||
padding-right: 5px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
main {
|
||||
position: relative;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.side {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
main {
|
||||
padding-right: 310px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.side form {
|
||||
margin: 0px 0px 5px 0px;
|
||||
}
|
||||
.side input[type=text] {
|
||||
width: 285px;
|
||||
padding: 6px;
|
||||
margin: 0px;
|
||||
font-size: 13px;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
.side .stats {
|
||||
padding: 5px;
|
||||
border: 1px solid #5f99cf;
|
||||
background-color: #EFF7FF;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.dark .side .stats {
|
||||
background-color: #393939;
|
||||
border-color: #666;
|
||||
}
|
||||
.side .stats b span {
|
||||
font-size: 22px;
|
||||
}
|
||||
.side .banner {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.user.side b {
|
||||
font-size: 18px;
|
||||
}
|
||||
.side .login {
|
||||
border: 1px solid gray;
|
||||
margin: 10px 0px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.side .login input[type=text],
|
||||
.side .login input[type=password] {
|
||||
font-size: 11px;
|
||||
border: 1px solid #999;
|
||||
width: 125px;
|
||||
margin: 5px 0px 0px 5px;
|
||||
padding: 6px;
|
||||
}
|
||||
.side .login input[type=submit] {
|
||||
margin: 5px;
|
||||
float:right;
|
||||
}
|
||||
.create a div {
|
||||
margin: 5px 0px;
|
||||
background-color: #EFF7FF;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
border: 1px solid #369;
|
||||
}
|
||||
.dark .create a div {
|
||||
background-color: #444444;
|
||||
border: 0;
|
||||
}
|
||||
.create a div:hover {
|
||||
background-color: #369;
|
||||
}
|
||||
.dark .create a div:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
.create a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
color: #369;
|
||||
}
|
||||
.dark .create a {
|
||||
color: white;
|
||||
}
|
||||
.create a:hover {
|
||||
color: white;
|
||||
}
|
||||
.dark .create a:hover{
|
||||
color: #1496dc;
|
||||
}
|
||||
.dark .create input[type=submit],
|
||||
.dark .search .query input,
|
||||
.dark .create input[type=file],
|
||||
.dark .create select {
|
||||
color: #fff;
|
||||
border: 1px outset gray;
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
h1, h2 {
|
||||
margin: 5px 0px;
|
||||
}
|
||||
.age {
|
||||
border-top: 1px solid black;
|
||||
text-align: right;
|
||||
color: #888;
|
||||
padding: 2px 5px 0px 0px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.age a {
|
||||
text-decoration: none;
|
||||
color: #369;
|
||||
}
|
||||
.moderators {
|
||||
border: 1px solid black;
|
||||
padding: 3px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.moderators a {
|
||||
text-decoration: none;
|
||||
color: #369;
|
||||
}
|
||||
.dark .moderators a {
|
||||
color: #6a98af;
|
||||
}
|
||||
.community {
|
||||
margin: 20px 50px;
|
||||
max-width: 840px;
|
||||
position: relative;
|
||||
}
|
||||
.community .description {
|
||||
padding: 2px 5px;
|
||||
background-color: #fafafa;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 7px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 3px;
|
||||
max-height: 170px;
|
||||
overflow: auto;
|
||||
}
|
||||
.dark .community .description {
|
||||
background-color: #333;
|
||||
color: #ddd;
|
||||
border-color: #777;
|
||||
}
|
||||
.community .details {
|
||||
margin-left: 36px;
|
||||
}
|
||||
nav {
|
||||
border-bottom: 1px solid #5f99cf;
|
||||
background-color: #cee3f8;
|
||||
z-index: 99;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.dark nav {
|
||||
background-color: #696969;
|
||||
}
|
||||
|
||||
nav .communities {
|
||||
background-color: #f0f0f0;
|
||||
color: gray;
|
||||
padding: 3px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid gray;
|
||||
text-transform: uppercase;
|
||||
font-size: 9px;
|
||||
}
|
||||
nav .communities a {
|
||||
margin: 0px 2px;
|
||||
}
|
||||
.dark nav .communities {
|
||||
background-color: #cccccc;
|
||||
}
|
||||
.dark nav .communities a {
|
||||
color: #000;
|
||||
}
|
||||
nav .communities a.more {
|
||||
background-color: #f0f0f0;
|
||||
color: black;
|
||||
padding: 0px 5px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
.orangered, .orangered b {
|
||||
color: orangered !important;
|
||||
}
|
||||
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
nav > a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav .title, nav > span {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
margin: 0px 3px 0px 2.5px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.dark nav .title, .dark nav > span {
|
||||
color: #8cb3d9;;
|
||||
}
|
||||
nav a.title {
|
||||
margin-left: 70px;
|
||||
}
|
||||
|
||||
nav .host {
|
||||
padding: 0px 3px 1px 3px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
nav .spacer {
|
||||
height: 40px;
|
||||
position: relative;
|
||||
}
|
||||
nav .space a {
|
||||
z-index: 100;
|
||||
}
|
||||
nav .icon {
|
||||
height: 54px;
|
||||
width: 60px;
|
||||
margin: 2px 5px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center bottom;
|
||||
}
|
||||
nav .icon img {
|
||||
max-width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
margin: 5px 2.5px 0px 2.5px;
|
||||
padding: 0;
|
||||
display: inline;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
nav li {
|
||||
margin: 0px 1px;
|
||||
padding: 0px;
|
||||
display: inline;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
nav ul a {
|
||||
background-color: #eff7ff;
|
||||
text-decoration: none;
|
||||
color: #369;
|
||||
padding: 2px 6px 0 6px;
|
||||
}
|
||||
.dark nav ul a {
|
||||
background-color: #262626;
|
||||
color: #6a98af;
|
||||
}
|
||||
|
||||
.selected {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav .selected a {
|
||||
color: orangered;
|
||||
background-color: white;
|
||||
border: 1px solid #5f99cf;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.dark nav .selected a {
|
||||
border-bottom: 1px solid #262626;
|
||||
}
|
||||
|
||||
nav .right {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
background-color: #EFF7FF;
|
||||
padding: 4px 6px;
|
||||
line-height: 12px;
|
||||
border-bottom-left-radius: 7px;
|
||||
color: gray;
|
||||
font-size: 10px;
|
||||
z-index: 101;
|
||||
}
|
||||
.dark nav .right {
|
||||
background-color: #333333;
|
||||
}
|
||||
nav .right a.mailbox {
|
||||
font-size: 21px;
|
||||
position: relative;
|
||||
top: 4px;
|
||||
color: gray;
|
||||
}
|
||||
nav .right a, .right input[type=submit] {
|
||||
color: #369;
|
||||
text-decoration: none;
|
||||
}
|
||||
.dark nav .right a, .dark .right input[type=submit]{
|
||||
color: #8cb3d9;
|
||||
}
|
||||
nav .right form, .comment form, form.link-btn {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
nav .right form input, .comment .buttons input, form.link-btn input {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
border: 0px;
|
||||
font-size: unset;
|
||||
font-family: unset;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu {
|
||||
border-bottom: 1px dotted gray;
|
||||
padding: 0px 0px 5px 20px;
|
||||
color: gray;
|
||||
}
|
||||
.menu a {
|
||||
margin: 0px 2.5px;
|
||||
color: gray;
|
||||
font-weight: bold;
|
||||
}
|
||||
.commentmenu .selected, .menu .selected {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
.dark .commentmenu .selected, .dark .menu .selected {
|
||||
color: #ddd;
|
||||
}
|
||||
.dark .commentmenu a, .dark .menu {
|
||||
color: #6a98af;
|
||||
}
|
||||
.warning {
|
||||
background-color: #f6e69f;
|
||||
border-color: #ffa500;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
padding: 5px 10px;
|
||||
margin: 5px 10px;
|
||||
}
|
||||
.highlight {
|
||||
background-color: #ffc;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
form.create {
|
||||
width: 520px;
|
||||
}
|
||||
|
||||
form.create div {
|
||||
margin: 10px 0px;
|
||||
padding: 5px 5px 10px 5px;
|
||||
background-color: #cee3f8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.dark form.create div {
|
||||
background-color: #181818
|
||||
}
|
||||
form.create label {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
form.create div > input, form.create div textarea {
|
||||
width: 98%;
|
||||
}
|
||||
form.create input[type=checkbox] {
|
||||
display: block;
|
||||
}
|
||||
form.create input[type=file], form.create select {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.required::before {
|
||||
content: "*";
|
||||
color: red;
|
||||
}
|
||||
.preferences div {
|
||||
font-size: 13px;
|
||||
margin: 10px;
|
||||
}
|
||||
.preferences label{
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
|
||||
}
|
||||
.preferences input[type=submit] {
|
||||
margin-top:10px;
|
||||
}
|
||||
.signup {
|
||||
margin: 0px 30px;
|
||||
}
|
||||
.signup h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.signup > div {
|
||||
float: left;
|
||||
margin: 30px;
|
||||
}
|
||||
.signup > div:first-child {
|
||||
border-right: 1px solid #e0e0e0;
|
||||
padding-right: 60px;
|
||||
}
|
||||
.root label, .signup label {
|
||||
font-size: 15px;
|
||||
}
|
||||
.signup label div {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.root {
|
||||
margin: 30px;
|
||||
}
|
||||
.root input, .signup input {
|
||||
font-size: 15px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.root input[type="text"] {
|
||||
width: 300px;
|
||||
}
|
||||
.signup input[type=submit] {
|
||||
margin-top: 20px;
|
||||
float: right;
|
||||
}
|
||||
.signup .question {
|
||||
max-width: 500px;
|
||||
font-size: 13px;
|
||||
}
|
||||
BIN
public/text.png
Normal file
BIN
public/text.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
91
public/utils.js
Normal file
91
public/utils.js
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
function request(url, params, callback) {
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.onreadystatechange = function() {
|
||||
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
|
||||
callback(xmlHttp.responseText);
|
||||
}
|
||||
var method = "GET"
|
||||
if (params) method = "POST"
|
||||
xmlHttp.open(method, url, true);
|
||||
if (method = "POST")
|
||||
xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
||||
xmlHttp.send(params);
|
||||
}
|
||||
function postClick(e) {
|
||||
console.log(e)
|
||||
e = e || window.event;
|
||||
if (e.target.className.indexOf("expando-button") == -1) { return }
|
||||
var targ = e.currentTarget || e.srcElement || e;
|
||||
if (targ.nodeType == 3) targ = targ.parentNode;
|
||||
var bdy = targ.getElementsByClassName("expando")[0]
|
||||
var btn = targ.getElementsByClassName("expando-button")[0]
|
||||
console.log(bdy.style.display)
|
||||
console.log(bdy.style.display.indexOf("block"))
|
||||
if (bdy.className.indexOf("open")>-1) {
|
||||
bdy.className = 'expando';
|
||||
btn.className = "expando-button"
|
||||
} else {
|
||||
bdy.className = 'expando open';
|
||||
btn.className = "expando-button open"
|
||||
}
|
||||
}
|
||||
function commentClick(e) {
|
||||
e = e || window.event;
|
||||
var targ = e.currentTarget || e.srcElement || e;
|
||||
if (targ.nodeType == 3) targ = targ.parentNode;
|
||||
if (e.target.name=="vote") {
|
||||
e.preventDefault()
|
||||
var form = e.target.parentNode
|
||||
if (form) {
|
||||
data = new FormData(form)
|
||||
if (("c"+data.get("commentid")) != targ.id) { return }
|
||||
params = new URLSearchParams(data).toString()
|
||||
params += "&" + e.target.name + "=" + e.target.value
|
||||
params += "&xhr=1"
|
||||
request(targ.target, params, function(res){
|
||||
targ.outerHTML = res
|
||||
})
|
||||
}
|
||||
return false
|
||||
}
|
||||
if (e.target.className.indexOf("minimize") != -1) {
|
||||
if (e.target.getAttribute("for") != targ.id) { return }
|
||||
e.preventDefault()
|
||||
var btn = targ.getElementsByClassName("minimize")[0]
|
||||
var children = targ.getElementsByClassName("children")[0]
|
||||
if (targ.className.indexOf("hidden") == -1) {
|
||||
targ.className = "comment hidden"
|
||||
btn.innerHTML = "[+]"
|
||||
} else {
|
||||
targ.className = "comment"
|
||||
btn.innerHTML = "[-]"
|
||||
}
|
||||
return false
|
||||
}
|
||||
if ((e.target.className.indexOf("loadmore") != -1) ||
|
||||
(e.target.className.indexOf("edit") != -1) ||
|
||||
(e.target.className.indexOf("source") != -1) ||
|
||||
(e.target.className.indexOf("reply") != -1)) {
|
||||
var id = targ.id
|
||||
if (e.target.getAttribute("for") != id) { return }
|
||||
e.preventDefault()
|
||||
request(e.target.href+"&xhr",false, function(res){
|
||||
targ.outerHTML = res
|
||||
})
|
||||
return false
|
||||
}
|
||||
}
|
||||
function formSubmit(e) {
|
||||
e = e || window.event;
|
||||
var targ = e.currentTarget || e.srcElement || e;
|
||||
console.log(e)
|
||||
e.preventDefault()
|
||||
var data = new FormData(targ)
|
||||
params = new URLSearchParams(data).toString()
|
||||
params += "&" + e.submitter.name + "=" + e.submitter.value
|
||||
params += "&xhr=1"
|
||||
request(targ.target, params, function(res){
|
||||
targ.outerHTML = res
|
||||
})
|
||||
return false
|
||||
}
|
||||
13
routes.go
13
routes.go
|
|
@ -169,6 +169,7 @@ func Initialize(Host string, r *http.Request) (State, error) {
|
|||
}
|
||||
state.Listing = getCookie(r, "DefaultListingType")
|
||||
state.Sort = getCookie(r, "DefaultSortType")
|
||||
state.Dark = getCookie(r, "Dark") != ""
|
||||
state.ParseQuery(r.URL.RawQuery)
|
||||
if state.Sort == "" {
|
||||
state.Sort = "Hot"
|
||||
|
|
@ -480,6 +481,13 @@ func Settings(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
|||
for _, name := range []string{"DefaultSortType", "DefaultListingType"} {
|
||||
setCookie(w, name, r.FormValue(name))
|
||||
}
|
||||
if r.FormValue("darkmode") != "" {
|
||||
setCookie(w, "Dark", "1")
|
||||
state.Dark = true
|
||||
} else {
|
||||
deleteCookie(w, "Dark")
|
||||
state.Dark = false
|
||||
}
|
||||
state.Listing = r.FormValue("DefaultListingType")
|
||||
state.Sort = r.FormValue("DefaultSortType")
|
||||
case "GET":
|
||||
|
|
@ -600,7 +608,7 @@ func Search(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
|||
return
|
||||
}
|
||||
if state.CommunityName != "" {
|
||||
state.GetCommunity(ps.ByName("community"))
|
||||
state.GetCommunity(state.CommunityName)
|
||||
}
|
||||
if state.UserName != "" {
|
||||
state.GetUser(state.UserName)
|
||||
|
|
@ -744,8 +752,7 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
|||
fmt.Println(err)
|
||||
}
|
||||
case "create_post":
|
||||
state.CommunityName = r.FormValue("communityname")
|
||||
state.GetCommunity("")
|
||||
state.GetCommunity(state.CommunityName)
|
||||
state.GetSite()
|
||||
if state.Community == nil {
|
||||
state.Status = http.StatusBadRequest
|
||||
|
|
|
|||
1
state.go
1
state.go
|
|
@ -87,6 +87,7 @@ type State struct {
|
|||
Query string
|
||||
SearchType string
|
||||
Captcha *types.CaptchaResponse
|
||||
Dark bool
|
||||
}
|
||||
|
||||
func (p State) SortBy(v string) string {
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<head>
|
||||
<title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
|
||||
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
|
||||
<link rel="stylesheet" href="/_/static/style.css">
|
||||
<link rel="stylesheet" href="/_/static/style.css?1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<body {{ if .Dark }}class="dark"{{end}}>
|
||||
<noscript>
|
||||
<style>
|
||||
.expando-button {
|
||||
|
|
@ -18,10 +18,10 @@
|
|||
</noscript>
|
||||
|
||||
{{ template "nav.html" . -}}
|
||||
<main>
|
||||
{{ if or (contains .Sort "Top") (and (not .PostID) (not .User) (not .Community) (not .Activities) (eq .Op ""))}}
|
||||
{{ template "menu.html" . }}
|
||||
{{ end}}
|
||||
<main>
|
||||
|
||||
{{ if .Error }}
|
||||
<div class="error">{{.Error}}</div>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<head>
|
||||
<title>{{ host .Host }}: sign up or log in</title>
|
||||
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
|
||||
<link rel="stylesheet" href="/_/static/style.css">
|
||||
<link rel="stylesheet" href="/_/static/style.css?1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
<body>
|
||||
<body {{ if .Dark }}class="dark"{{end}}>
|
||||
<nav>
|
||||
<div class="communities">
|
||||
<a href="/{{.Host}}">home</a>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
<title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
|
||||
<link rel="stylesheet" href="/_/static/style.css">
|
||||
<link rel="stylesheet" href="/_/static/style.css?1">
|
||||
</head>
|
||||
<body>
|
||||
<body{{ if .Dark }} class="dark"{{end}}>
|
||||
<noscript>
|
||||
<style>
|
||||
.expando-button {
|
||||
|
|
@ -18,10 +18,10 @@
|
|||
</noscript>
|
||||
|
||||
{{ template "nav.html" . -}}
|
||||
<main>
|
||||
{{ if or (contains .Sort "Top") (and (not .PostID) (not .User) (not .Community) (not .Activities) (eq .Op ""))}}
|
||||
{{ template "menu.html" . }}
|
||||
{{ end}}
|
||||
<main>
|
||||
|
||||
{{ if or (ne .Query "") .Communities }}
|
||||
<form class="search" method="GET">
|
||||
|
|
|
|||
Loading…
Reference in a new issue