403 lines
7.1 KiB
CSS
403 lines
7.1 KiB
CSS
/* ------------- Site-wide Rules ------------- */
|
|
@font-face{
|
|
font-family: Roboto;
|
|
src: url('res/roboto.ttf');
|
|
}
|
|
@font-face{
|
|
font-family: Montserrat;
|
|
src: url('res/montserrat.ttf');
|
|
}
|
|
body{
|
|
margin: 0;
|
|
font-family: 'Roboto', sans-serif;
|
|
background-color: #f0f0f0;
|
|
}
|
|
html{
|
|
font-size: 100%;
|
|
}
|
|
h1, h2, h3, h4, h5, h6{
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
h2{
|
|
font-size: 1.4em;
|
|
}
|
|
input, button{
|
|
outline-width: 0;
|
|
}
|
|
span[onclick]:hover{
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
a.color{
|
|
color: #00bc8f;
|
|
text-decoration: none;
|
|
}
|
|
a.color:hover{
|
|
text-decoration: underline;
|
|
}
|
|
.noSelect, .tags{
|
|
-webkit-touch-callout: none; /* iOS Safari */
|
|
-webkit-user-select: none; /* Safari */
|
|
-khtml-user-select: none; /* Konqueror HTML */
|
|
-moz-user-select: none; /* Firefox */
|
|
-ms-user-select: none; /* Internet Explorer/Edge */
|
|
user-select: none; /* Non-prefixed version, currently
|
|
supported by Chrome and Opera */
|
|
}
|
|
.card{
|
|
color: #333;
|
|
background-color: white;
|
|
margin-bottom: 2em;
|
|
border-radius: 0.2em;
|
|
padding: 1em;
|
|
}
|
|
.card.noMargin{
|
|
margin-bottom: 0;
|
|
}
|
|
.card:not(.noShadow){
|
|
box-shadow: 1px 1px 3px #ddd;
|
|
}
|
|
.card:hover:not(.noShadow):not(.noHover){
|
|
box-shadow: 1px 2px 3px #bbb;
|
|
}
|
|
|
|
.postReport{
|
|
font-size: 0.8em;
|
|
float: left;
|
|
}
|
|
.postReport>a{
|
|
text-decoration: none;
|
|
color: #888;
|
|
}
|
|
.postReport>a:hover{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.center{
|
|
text-align: center;
|
|
}
|
|
.noStyle{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.noStyle:hover{
|
|
text-decoration: underline;
|
|
}
|
|
.smallWidth{
|
|
width: 70%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
button[type="submit"]:not(#commentSubmitButton){
|
|
font-size: 1em;
|
|
color: #00d09f;
|
|
border: 1px solid #00d09f;
|
|
border-radius: 0.2em;
|
|
background-color: white;
|
|
padding: 0.5em 1em;
|
|
margin: 2em auto 0 auto;
|
|
display: block;
|
|
}
|
|
button[type="submit"]:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ------------- Global forums ------------- */
|
|
#container{
|
|
width: 80%;
|
|
margin: 3% auto;
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr;
|
|
grid-column-gap: 3%;
|
|
}
|
|
#container>*{
|
|
border-radius: 0.3em;
|
|
}
|
|
#monoContainer{
|
|
width: 45%;
|
|
margin: 3% auto;
|
|
max-height: 80vh;
|
|
}
|
|
#monoContainer>*{
|
|
border-radius: 0.3em;
|
|
}
|
|
p[onclick]:hover, span[onclick]:hover, button:hover{
|
|
cursor: pointer;
|
|
}
|
|
.commentTop>p>.material-icons{
|
|
font-size: 0.9em !important;
|
|
}
|
|
/* General forum stuff */
|
|
.forumLink{
|
|
text-decoration: none;
|
|
}
|
|
/* ------------- Posts ------------- */
|
|
/* Title, username, time posted */
|
|
.title>h2{
|
|
margin: 0.3em 0 0.4em 0;
|
|
}
|
|
.preview>p{
|
|
margin: 0.3em 0;
|
|
}
|
|
.info>*{
|
|
font-size: 0.75em;
|
|
color: #888;
|
|
margin: 0;
|
|
display: inline-block;
|
|
}
|
|
.userlink:hover, .postType:hover{
|
|
text-decoration: underline;
|
|
}
|
|
.postType{
|
|
color: #666;
|
|
font-weight: bold;
|
|
margin: 0 0.5em 0 0.2em;
|
|
}
|
|
.forum{
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* Text, clip, image of post previews */
|
|
.postPrevImg.clip{
|
|
width: 0.67em;
|
|
margin-bottom: 0.08em;
|
|
margin-left: 0.3em;
|
|
display: inline;
|
|
}
|
|
.forum.image{
|
|
display: grid;
|
|
grid-template-columns: 3fr 1fr;
|
|
grid-column-gap: 1em;
|
|
}
|
|
.postPrevImg{
|
|
width: 100%;
|
|
min-height: 100%;
|
|
max-height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Back/next buttons at bottom of forum page */
|
|
#pages{
|
|
font-size: 1.6em;
|
|
display: grid;
|
|
grid-gap: 3em;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
#pages>div>a{
|
|
color: #555;
|
|
text-decoration: none;
|
|
}
|
|
#prevPage{
|
|
margin-left: auto;
|
|
}
|
|
#nextPage{
|
|
margin-right: auto;
|
|
}
|
|
|
|
msg{
|
|
position: fixed;
|
|
left: 50%;
|
|
top: -100px;
|
|
transform: translateX(-50%);
|
|
z-index: 4;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: 1px solid #ccc;
|
|
border-radius: 0.7em;
|
|
padding: 0.5em 1em;
|
|
/* Leaving animation */
|
|
animation: move;
|
|
animation-duration: 3s;
|
|
}
|
|
msg.neutral{
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
@keyframes move {
|
|
15% {
|
|
top: 20%;
|
|
}
|
|
95%{
|
|
top: 20%;
|
|
}
|
|
100% {
|
|
top: -50px;
|
|
}
|
|
}
|
|
|
|
/* @tagging people */
|
|
.userRefLink{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.userRefLink:hover{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Notifs */
|
|
#right{
|
|
text-align: center;
|
|
align-self: start;
|
|
line-height: 1.3em;
|
|
}
|
|
#notifAdminMsg{
|
|
font-size: 0.9em;
|
|
}
|
|
#notifAdder{
|
|
width: calc(100% - 0.6em);
|
|
margin-top: 1em;
|
|
font-size: 1em;
|
|
border-radius: 0.3em;
|
|
border: 1px solid #ccc;
|
|
padding: 0.3em;
|
|
}
|
|
.notifTitle{
|
|
margin: 0;
|
|
}
|
|
.notif{
|
|
margin-top: 0.5em;
|
|
margin-bottom: 0;
|
|
}
|
|
.deletable{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.deletable:hover{
|
|
color: red;
|
|
text-decoration: line-through;
|
|
}
|
|
/* Mentions (alerts) */
|
|
.alert{
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: block;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
.alert:hover{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* ------------- For the top bar ------------- */
|
|
#topSpacer{
|
|
height: 2em;
|
|
padding: 1% 0;
|
|
}
|
|
#top{
|
|
text-align: center;
|
|
display: grid;
|
|
grid-template-columns: 1fr 8fr 1fr 1fr;
|
|
height: 2em;
|
|
align-items:center;
|
|
padding: 1% 5%;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 8;
|
|
box-shadow: 0 1px 2px #ddd;
|
|
}
|
|
#top>*{
|
|
margin: auto;
|
|
}
|
|
/* Left-side logo */
|
|
#logoLink{
|
|
display: flex;
|
|
}
|
|
#logo{
|
|
height: 2em;
|
|
margin: 0 auto 0 0;
|
|
}
|
|
|
|
/* Search bar */
|
|
#search{
|
|
margin: auto 0;
|
|
}
|
|
#searchBar{
|
|
border-radius: 0.3em;
|
|
width: 80%;
|
|
height: 2em;
|
|
padding: 2px 10px 0px 10px;
|
|
font-size: 1em;
|
|
background-color: #f4f4f4;
|
|
border: 0;
|
|
outline-width: 0;
|
|
color: #444;
|
|
margin: auto 0;
|
|
}
|
|
#searchBar::-webkit-input-placeholder {
|
|
color: #999 !important;
|
|
}
|
|
#searchBar:-moz-placeholder { /* Firefox 18- */
|
|
color: #999 !important;
|
|
}
|
|
#searchBar::-moz-placeholder { /* Firefox 19+ */
|
|
color: #999 !important;
|
|
}
|
|
#searchBar:-ms-input-placeholder {
|
|
color: #999 !important;
|
|
}
|
|
/* Add post button */
|
|
#addPost{
|
|
cursor: pointer;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
border-radius: 0.3em;
|
|
}
|
|
#addPost>a{
|
|
color: #00d09f;
|
|
display: block;
|
|
text-decoration: none;
|
|
padding: 0.5em 1em;
|
|
}
|
|
#addPost:hover{
|
|
background-color: #f4f4f4;
|
|
}
|
|
/* Right-side account image */
|
|
#accountWrapper{
|
|
height: inherit;
|
|
margin: auto 0 auto auto;
|
|
border-radius: 50%;
|
|
}
|
|
#account{
|
|
border-radius: 50%;
|
|
height: inherit;
|
|
margin: auto 0 auto auto;
|
|
}
|
|
|
|
/*Tooltips*/
|
|
.tooltip {
|
|
position: relative;
|
|
}
|
|
.tooltip .tooltiptext {
|
|
visibility: hidden;
|
|
width: 120px;
|
|
background-color: #555;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px 0;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 50%;
|
|
margin-left: -60px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
.tooltip .tooltiptext::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
margin-left: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: #555 transparent transparent transparent;
|
|
}
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
} |