Moving away from LESS and TypeScript part 2 of ?.
This commit is contained in:
parent
69b105cddd
commit
da5d7c41e5
133 changed files with 3009 additions and 3383 deletions
README.md
assets
README.md
css/misuzu
_input
auth
changelog
forum
actions.csscategories.cssconfirm.cssheader.cssleaderboard.csspoll.csspost.csspriority.cssstatus.csstopics.css
manage
news
profile
about.cssaccounts.cssbirthdate.cssguidelines.cssheader.cssprofile.cssrelations.csssignature.csswarning.css
search
settings
less
auth
changelog
forum
actions.lesscategories.lesscategory.lessconfirm.lessforum.lessheader.less
main.lessleaderboard
poll.lesspost.lesspriority.lessstatus.lesstopic.lesstopics.lessnews
profile
|
|
@ -5,5 +5,3 @@
|
|||
- PHP 7.4
|
||||
- MariaDB 10.4
|
||||
- [Composer](https://getcomposer.org/)
|
||||
- [node.js](https://nodejs.org/) (for the typescript and less compilers)
|
||||
- [Yarn](https://yarnpkg.com/)
|
||||
|
|
|
|||
6
assets/README.md
Normal file
6
assets/README.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
# Misuzu Assets
|
||||
|
||||
Subdirectories of the `css` and `js` folder are accessible through the web as `example.com/assets/<subdirectory>.<directory>`.
|
||||
Meaning `/assets/js/misuzu` is accessible as `/assets/misuzu.js`.
|
||||
Files are concatenated recursively, files first then directories in alphabetical order.
|
||||
Use `_` prefixes to raise things up.
|
||||
11
assets/css/misuzu/auth/buttons.css
Normal file
11
assets/css/misuzu/auth/buttons.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.auth__buttons {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.auth__buttons__button--minor {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
33
assets/css/misuzu/auth/label.css
Normal file
33
assets/css/misuzu/auth/label.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.auth__label {
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
}
|
||||
.auth__label__text {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
.auth__label__value {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.auth__label__input {
|
||||
width: 100%;
|
||||
}
|
||||
.auth__label__action {
|
||||
padding: 3px 8px;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-radius: 4px;
|
||||
transition: background-color .2s;
|
||||
margin: 2px;
|
||||
}
|
||||
.auth__label__action:hover,
|
||||
.auth__label__action:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.auth__label__action:active {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
14
assets/css/misuzu/auth/login.css
Normal file
14
assets/css/misuzu/auth/login.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.auth__login--disabled {
|
||||
--accent-colour: #555;
|
||||
opacity: .5;
|
||||
}
|
||||
.auth__login__header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.auth__login__avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
6
assets/css/misuzu/auth/logout.css
Normal file
6
assets/css/misuzu/auth/logout.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.auth__logout {
|
||||
margin: 5px;
|
||||
}
|
||||
.auth__logout__paragraph {
|
||||
margin: 5px 0;
|
||||
}
|
||||
34
assets/css/misuzu/auth/register.css
Normal file
34
assets/css/misuzu/auth/register.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.auth__register {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
}
|
||||
.auth__register__container {
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.auth__register__form {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.auth__register__info {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
flex: 0 1 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
.auth__register__paragraph {
|
||||
line-height: 1.5em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.auth__register__link {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.auth__register__container {
|
||||
flex-direction: column;
|
||||
}
|
||||
.auth__register__info {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
10
assets/css/misuzu/auth/warning.css
Normal file
10
assets/css/misuzu/auth/warning.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.auth__warning {
|
||||
margin: 5px;
|
||||
}
|
||||
.auth__warning--welcome {
|
||||
--start-colour: var(--accent-colour);
|
||||
--end-colour: #222;
|
||||
}
|
||||
.auth__warning__paragraph {
|
||||
line-height: 2em;
|
||||
}
|
||||
142
assets/css/misuzu/changelog/change.css
Normal file
142
assets/css/misuzu/changelog/change.css
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
.changelog__change {
|
||||
display: flex;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.changelog__change__info__content {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.changelog__change__info__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.changelog__change__user {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.changelog__change__user__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.changelog__change__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.changelog__change__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.changelog__change__username[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.changelog__change__userrole {
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.changelog__change__userrole[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.changelog__change__date {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.changelog__change__date:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.changelog__change__text {
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.changelog__change__tags {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.changelog__change__tag {
|
||||
border: 1px solid var(--accent-colour);
|
||||
background-color: var(--accent-colour);
|
||||
margin: 1px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.changelog__change__tag__link {
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.changelog__change__tag:hover,
|
||||
.changelog__change__tag:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.changelog__change {
|
||||
flex-direction: column;
|
||||
}
|
||||
.changelog__change__info__content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.changelog__change__info__background {
|
||||
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
.changelog__change__info {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
.changelog__change__user {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.changelog__change__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.changelog__change__userrole { display: none; }
|
||||
.changelog__change__tags {
|
||||
margin-top: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
99
assets/css/misuzu/changelog/entry.css
Normal file
99
assets/css/misuzu/changelog/entry.css
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
.changelog__entry {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
}
|
||||
.changelog__entry__info { display: flex; }
|
||||
|
||||
.changelog__entry__datetime,
|
||||
.changelog__entry__user,
|
||||
.changelog__entry__action {
|
||||
--action-colour: inherit;
|
||||
|
||||
background-color: var(--action-colour);
|
||||
color: var(--user-colour);
|
||||
flex: 0 0 auto;
|
||||
margin-right: 1px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.changelog__entry__datetime:hover,
|
||||
.changelog__entry__datetime:focus,
|
||||
.changelog__entry__user:hover,
|
||||
.changelog__entry__user:focus,
|
||||
.changelog__entry__action:hover,
|
||||
.changelog__entry__action:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.changelog__entry__datetime__text,
|
||||
.changelog__entry__user__text,
|
||||
.changelog__entry__action__text {
|
||||
width: 100%;
|
||||
}
|
||||
.changelog__action--add { --action-colour: #159635; }
|
||||
.changelog__action--remove { --action-colour: #e33743; }
|
||||
.changelog__action--update { --action-colour: #297b8a; }
|
||||
.changelog__action--fix { --action-colour: #2d5e96; }
|
||||
.changelog__action--import { --action-colour: #2b9678; }
|
||||
.changelog__action--revert { --action-colour: #e38245; }
|
||||
|
||||
.changelog__entry__datetime {
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.changelog__entry__user {
|
||||
min-width: 100px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.changelog__entry__action {
|
||||
border-radius: 2px;
|
||||
min-width: 5px;
|
||||
}
|
||||
.changelog__entry__action__text {
|
||||
text-align: right;
|
||||
min-width: 80px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.changelog__entry__log {
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.changelog__entry__log--link {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
.changelog__entry__log--link:hover {
|
||||
text-decoration: underline solid;
|
||||
}
|
||||
|
||||
.changelog__entry__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.changelog__entry__tag {
|
||||
border: 1px solid var(--accent-colour);
|
||||
margin-right: 1px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.changelog__entry__tag:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.changelog__entry { flex-wrap: wrap; }
|
||||
.changelog__entry__user { flex-grow: 1; }
|
||||
.changelog__entry__action { margin-right: 0; }
|
||||
.changelog__entry__log { width: 100%; }
|
||||
}
|
||||
17
assets/css/misuzu/changelog/listing.css
Normal file
17
assets/css/misuzu/changelog/listing.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.changelog__listing__none {
|
||||
margin: 1px 4px;
|
||||
}
|
||||
.changelog__listing__date {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 1px 3px;
|
||||
color: var(--accent-colour);
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.changelog__listing__date:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.changelog__listing__date:not(:first-child) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
32
assets/css/misuzu/changelog/log.css
Normal file
32
assets/css/misuzu/changelog/log.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.changelog__log {
|
||||
--action-colour: var(--accent-colour);
|
||||
|
||||
border: 1px solid var(--action-colour);
|
||||
background-color: var(--action-colour);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex: 1 0 auto;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.changelog__log__action {
|
||||
display: block;
|
||||
padding: 6px 2px;
|
||||
background-color: var(--action-colour);
|
||||
border-right: 1px solid var(--action-colour);
|
||||
writing-mode: sideways-lr;
|
||||
text-orientation: sideways;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.changelog__log__text {
|
||||
padding: 8px 12px;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.3em;
|
||||
align-self: center;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
32
assets/css/misuzu/forum/actions.css
Normal file
32
assets/css/misuzu/forum/actions.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.forum__actions {
|
||||
margin: 2px 0;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.forum__actions__pagination {
|
||||
max-width: 500px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.forum__actions__buttons {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.forum__actions__button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.forum__actions__pagination {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
232
assets/css/misuzu/forum/categories.css
Normal file
232
assets/css/misuzu/forum/categories.css
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
.forum__categories {
|
||||
margin: 2px 0;
|
||||
box-sizing: content-box;
|
||||
overflow: auto;
|
||||
}
|
||||
.forum__categories__empty {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.forum__categories__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forum__category {
|
||||
border-radius: 2px;
|
||||
background-color: rgba(17, 17, 17, .6);
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
}
|
||||
.forum__category:nth-child(even) {
|
||||
background-color: rgba(25, 25, 25, .6);
|
||||
}
|
||||
.forum__category:hover,
|
||||
.forum__category:focus {
|
||||
background-color: #2229;
|
||||
box-shadow: 0 1px 4px #222;
|
||||
}
|
||||
.forum__category:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.forum__category__link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forum__category__container {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
min-height: 50px;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
.forum__category__icon {
|
||||
flex: 0 0 40px;
|
||||
border-radius: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 4px;
|
||||
background-color: #333;
|
||||
background-size: 80px 80px;
|
||||
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .4) 100%);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 1px; /* fixes centering */
|
||||
}
|
||||
.forum__category__icon--unread {
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.forum__category__details {
|
||||
margin: 0 4px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.forum__category__title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.forum__category__description,
|
||||
.forum__category__subforums {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.forum__category__subforums {
|
||||
display: flex;
|
||||
}
|
||||
.forum__category__subforum {
|
||||
padding: 2px;
|
||||
pointer-events: initial;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forum__category__subforum:hover,
|
||||
.forum__category__subforum:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.forum__category__subforum--unread {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.forum__category__stats,
|
||||
.forum__category__activity {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.forum__category__stats {
|
||||
text-align: center;
|
||||
min-width: 100px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.forum__category__stat {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
opacity: .7;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.forum__category__stat:first-child {
|
||||
font-size: 1.5em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.forum__category__activity {
|
||||
text-align: right;
|
||||
min-width: 270px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.forum__category__activity__none,
|
||||
.forum__category__activity__details {
|
||||
margin: 0 8px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.forum__category__activity__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.forum__category__activity__post {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
}
|
||||
.forum__category__activity__post:hover,
|
||||
.forum__category__activity__post:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.forum__category__username {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.forum__category__username:hover,
|
||||
.forum__category__username:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.forum__category__avatar {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.forum__category__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.forum__category__details {
|
||||
flex-basis: calc(100% - 100px);
|
||||
}
|
||||
.forum__category__stats {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.forum__category__stat {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.forum__category__activity {
|
||||
min-width: 100%;
|
||||
}
|
||||
.forum__category__activity--empty {
|
||||
display: none;
|
||||
}
|
||||
.forum__category__activity__none,
|
||||
.forum__category__activity__details {
|
||||
margin: 1px 4px 0;
|
||||
}
|
||||
.forum__category__activity__details {
|
||||
flex-direction: row;
|
||||
}
|
||||
.forum__category__activity__post {
|
||||
flex: 1 0 auto;
|
||||
text-align: left;
|
||||
max-width: 120px;
|
||||
}
|
||||
.forum__category__activity__info {
|
||||
width: 100%;
|
||||
}
|
||||
.forum__category__avatar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
15
assets/css/misuzu/forum/confirm.css
Normal file
15
assets/css/misuzu/forum/confirm.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.forum__confirm {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.forum__confirm__message {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.forum__confirm__buttons {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
.forum__confirm__button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
73
assets/css/misuzu/forum/header.css
Normal file
73
assets/css/misuzu/forum/header.css
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
.forum__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 8px 10px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.forum__header__title {
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.forum__header__title[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.forum__header__title--fill {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.forum__header__input {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: initial;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.forum__header__breadcrumbs {
|
||||
display: flex;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
align-items: center;
|
||||
}
|
||||
.forum__header__breadcrumb {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.forum__header__breadcrumb:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.forum__header__breadcrumb__separator {
|
||||
color: var(--accent-colour);
|
||||
margin: 0 4px;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.forum__header__actions {
|
||||
display: flex;
|
||||
}
|
||||
.forum__header__action {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color .2s;
|
||||
padding: 2px 5px;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.forum__header__action:hover,
|
||||
.forum__header__action:focus {
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
.forum__header__action:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.forum__header__action[disabled] {
|
||||
opacity: .4;
|
||||
}
|
||||
113
assets/css/misuzu/forum/leaderboard.css
Normal file
113
assets/css/misuzu/forum/leaderboard.css
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
.forum__leaderboard__categories {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 2px 0;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
.forum__leaderboard__category {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
margin: 2px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.forum__leaderboard__category:hover,
|
||||
.forum__leaderboard__category:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.forum__leaderboard__category--active,
|
||||
.forum__leaderboard__category:active {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.forum__leaderboard__markdown {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 500px;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user {
|
||||
margin: 2px 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.forum__leaderboard__user--rank-1 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
.forum__leaderboard__user--rank-2,
|
||||
.forum__leaderboard__user--rank-3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user__content {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user__rank {
|
||||
height: 40px;
|
||||
min-width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.forum__leaderboard__user__rank:before {
|
||||
content: "#";
|
||||
}
|
||||
.forum__leaderboard__user--rank-1 .forum__leaderboard__user__rank {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 2px 7px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.forum__leaderboard__user--rank-1 .forum__leaderboard__user__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user__username {
|
||||
flex: 1 1 auto;
|
||||
line-height: 30px;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
.forum__leaderboard__user--rank-1 .forum__leaderboard__user__username {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user__posts {
|
||||
flex: 0 0 auto;
|
||||
min-width: 150px;
|
||||
border-left: 1px solid rgba(255, 255, 255, .2);
|
||||
line-height: 30px;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.forum__leaderboard__user--rank-1 .forum__leaderboard__user__posts {
|
||||
line-height: 40px;
|
||||
}
|
||||
104
assets/css/misuzu/forum/poll.css
Normal file
104
assets/css/misuzu/forum/poll.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.forum__poll__container {
|
||||
margin: 2px 0;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.forum__poll__toggle,
|
||||
.forum__poll__toggle:checked ~ .forum__poll__container--poll,
|
||||
.forum__poll__toggle:not(:checked) ~ .forum__poll__container--results {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.forum__poll__options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 500px;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.forum__poll__results {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
.forum__poll__option {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.forum__poll__remaining,
|
||||
.forum__poll__expires {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.forum__poll__remaining__num,
|
||||
.forum__poll__expires__num,
|
||||
.forum__poll__remaining__datetime,
|
||||
.forum__poll__expires__datetime {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.forum__poll__buttons {
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.forum__poll__button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.forum__poll__result {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid var(--accent-colour);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.forum__poll__result__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: var(--accent-colour);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.forum__poll__result--voted .forum__poll__result__background {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.forum__poll__result__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.forum__poll__result__text {
|
||||
flex: 1 1 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.forum__poll__result--voted .forum__poll__result__text {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.forum__poll__result__votes {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.forum__poll__result__percent {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (min-width: 400px) {
|
||||
.forum__poll__options {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
254
assets/css/misuzu/forum/post.css
Normal file
254
assets/css/misuzu/forum/post.css
Normal file
|
|
@ -0,0 +1,254 @@
|
|||
.forum__post {
|
||||
display: flex;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.forum__post--deleted {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.forum__post--deleted:hover,
|
||||
.forum__post--deleted:focus,
|
||||
.forum__post--deleted:focus-within {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.forum__post__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forum__post__details {
|
||||
font-size: .9em;
|
||||
line-height: 1.7em;
|
||||
padding: 0 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.forum__post__datetime,
|
||||
.forum__post__id,
|
||||
.forum__post__mode {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.forum__post__datetime:hover,
|
||||
.forum__post__datetime:focus,
|
||||
.forum__post__id:hover,
|
||||
.forum__post__id:focus,
|
||||
.forum__post__mode:hover,
|
||||
.forum__post__mode:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.forum__post__text {
|
||||
margin: 2px;
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
.forum__post__text--edit {
|
||||
/* figure out why this is needed */
|
||||
max-width: calc(100% - 4px);
|
||||
min-width: calc(100% - 4px);
|
||||
margin: 2px 2px 0;
|
||||
min-height: 400px;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
padding: 2px 5px;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.forum__post__info__content {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.forum__post__info__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.forum__post__icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.forum__post__posts-count {
|
||||
font-size: .9em;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.forum__post__joined {
|
||||
flex: 1 1 auto;
|
||||
max-width: 170px;
|
||||
font-size: .9em;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.forum__post__avatar {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.forum__post__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.forum__post__username[href]:hover,
|
||||
.forum__post__username[href]:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.forum__post__usertitle {
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.forum__post__options {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.forum__post__settings {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.forum__post__dropdown {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.forum__post__actions {
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.forum__post__action {
|
||||
padding: 5px 10px;
|
||||
margin: 1px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: background-color .2s;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.forum__post__action:hover,
|
||||
.forum__post__action:focus {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.forum__post__signature {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
padding: 2px;
|
||||
max-height: 150px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.forum__post__signature img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.forum__post__badge {
|
||||
background-color: var(--accent-colour);
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
box-shadow: 0 2px 3px #000A;
|
||||
margin: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.forum__post__badge__desktop {
|
||||
display: block;
|
||||
}
|
||||
.forum__post__badge__mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.forum__post {
|
||||
flex-direction: column;
|
||||
}
|
||||
.forum__post__text {
|
||||
margin: 4px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
.forum__post__info {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
.forum__post__info__content {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
.forum__post__info__background {
|
||||
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
.forum__post__icons {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.forum__post__joined {
|
||||
display: none;
|
||||
}
|
||||
.forum__post__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.forum__post__username {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.forum__post__usertitle {
|
||||
display: none;
|
||||
}
|
||||
.forum__post__options {
|
||||
flex-direction: column;
|
||||
}
|
||||
.forum__post__badge {
|
||||
width: auto;
|
||||
padding: 2px 10px;
|
||||
margin: 0;
|
||||
align-self: flex-start;
|
||||
margin-left: 5px;
|
||||
font-size: .9em;
|
||||
}
|
||||
.forum__post__badge__desktop {
|
||||
display: none;
|
||||
}
|
||||
.forum__post__badge__mobile {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
37
assets/css/misuzu/forum/priority.css
Normal file
37
assets/css/misuzu/forum/priority.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
.forum__priority__votes {
|
||||
text-align: center;
|
||||
margin: 5px 16px 5px 5px;
|
||||
-webkit-touch-callout: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-khtml-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.forum__priority__vote {
|
||||
font-size: 14px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.forum__priority__star {
|
||||
margin-right: -.9em;
|
||||
opacity: .6;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
color: var(--user-colour);
|
||||
transition: text-shadow .2s;
|
||||
}
|
||||
.forum__priority__star:last-child {
|
||||
margin-right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.forum__priority__vote:hover .forum__priority__star {
|
||||
text-shadow: 0 0 1px #fff;
|
||||
}
|
||||
|
||||
.forum__priority__input {
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
38
assets/css/misuzu/forum/status.css
Normal file
38
assets/css/misuzu/forum/status.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.forum__status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.forum__status__icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.forum__status__icon__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.forum__status__text {
|
||||
margin: 0 5px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.forum__status__emphasis {
|
||||
font-weight: 700;
|
||||
}
|
||||
288
assets/css/misuzu/forum/topics.css
Normal file
288
assets/css/misuzu/forum/topics.css
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
.forum__topics {
|
||||
margin-bottom: 2px;
|
||||
box-sizing: content-box;
|
||||
overflow: auto;
|
||||
}
|
||||
.forum__topics__empty {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
.forum__topics__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forum__topic {
|
||||
border-radius: 2px;
|
||||
background-color: rgba(17, 17, 17, .6);
|
||||
transition: background-color .2s, box-shadow .2s, opacity .2s;
|
||||
}
|
||||
.forum__topic:nth-child(even) {
|
||||
background-color: rgba(25, 25, 25, .6);
|
||||
}
|
||||
.forum__topic:hover,
|
||||
.forum__topic:focus {
|
||||
background-color: rgba(34, 34, 34, .6);
|
||||
box-shadow: 0 1px 4px #222;
|
||||
}
|
||||
.forum__topic:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.forum__topic--deleted {
|
||||
opacity: .4;
|
||||
}
|
||||
.forum__topic--deleted .forum__topic:hover,
|
||||
.forum__topic--deleted .forum__topic:focus {
|
||||
opacity: .8;
|
||||
}
|
||||
.forum__topic--locked {
|
||||
opacity: .6;
|
||||
}
|
||||
.forum__topic--locked .forum__topic:hover,
|
||||
.forum__topic--locked .forum__topic:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.forum__topic__link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.forum__topic__container {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.forum__topic__icon {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 4px;
|
||||
background-color: #333;
|
||||
background-size: 60px 60px;
|
||||
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .4) 100%);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1px 1px 0 2px;
|
||||
}
|
||||
.forum__topic__icon--wide {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.forum__topic__icon--unread {
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
.forum__topic__icon--faded {
|
||||
opacity: .3;
|
||||
}
|
||||
.forum__topic__icon__participated {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 2px #111;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.forum__topic__icon__priority {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
font-size: .9em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.forum__topic__details {
|
||||
margin: 0 4px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.forum__topic__title {
|
||||
font-size: 1.3em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.forum__topic__info {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.forum__topic__stats,
|
||||
.forum__topic__activity {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.forum__topic__stats {
|
||||
text-align: center;
|
||||
min-width: 80px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.forum__topic__stat {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
opacity: .7;
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
}
|
||||
.forum__topic__stat:first-child {
|
||||
font-size: 1.4em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.forum__topic__activity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
min-width: 200px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.forum__topic__activity__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin: 0 8px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.forum__topic__activity__post {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 120px;
|
||||
}
|
||||
.forum__topic__activity__post:hover,
|
||||
.forum__topic__activity__post:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.forum__topic__username {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
}
|
||||
.forum__topic__username:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.forum__topic__avatar {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
.forum__topic__pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.forum__topic__pagination__separator {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.forum__topic__pagination__item {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
margin: 0 1px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
min-width: 25px;
|
||||
height: 25px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
box-shadow: 0 1px 1px #111;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
}
|
||||
.forum__topic__pagination__item:hover,
|
||||
.forum__topic__pagination__item:focus {
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.forum__topic__container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.forum__topic__details {
|
||||
max-width: 70%;
|
||||
}
|
||||
.forum__topic__stats {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-start;
|
||||
align-items: flex-end;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.forum__topic__stat {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.forum__topic__activity {
|
||||
min-width: 100%;
|
||||
}
|
||||
.forum__topic__activity__details {
|
||||
margin: 1px 4px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.forum__topic__avatar {
|
||||
display: none;
|
||||
}
|
||||
.forum__topic__pagination__separator {
|
||||
display: none;
|
||||
}
|
||||
.forum__topic__pagination__item {
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
line-height: 26px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
.forum__topic__pagination {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -100,9 +100,9 @@
|
|||
}
|
||||
.manage__user-item__action:hover,
|
||||
.manage__user-item__action:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
|
||||
.manage__user-item__action:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
.news__container {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.news__container {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
29
assets/css/misuzu/news/feeds.css
Normal file
29
assets/css/misuzu/news/feeds.css
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
.news__feeds {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.news__feed {
|
||||
display: flex;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
transition: background-color .2s;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.news__feed:hover,
|
||||
.news__feed:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.news__feed:active {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
.news__feed__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
24
assets/css/misuzu/news/list.css
Normal file
24
assets/css/misuzu/news/list.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.news__list {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.news__list__item {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
.news__list__item:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.news__list__item--kvp {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.news__list__name {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.news__list__value {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
104
assets/css/misuzu/news/post.css
Normal file
104
assets/css/misuzu/news/post.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
.news__post {
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.news__post__info__content {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.news__post__info__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.news__post__user {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.news__post__user__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news__post__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.news__post__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.news__post__username[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news__post__date {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.news__post__category {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.news__post__category:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news__post__text {
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.news__post { flex-direction: column-reverse; }
|
||||
.news__post__info {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
.news__post__info__content {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
}
|
||||
.news__post__info__background {
|
||||
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
.news__post__user {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.news__post__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
129
assets/css/misuzu/news/preview.css
Normal file
129
assets/css/misuzu/news/preview.css
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
.news__preview {
|
||||
display: flex;
|
||||
margin: 2px 0;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
--user-colour: var(--accent-colour);
|
||||
}
|
||||
.news__preview__info__content {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.news__preview__info__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--user-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.news__preview__listing {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.news__preview__container {
|
||||
display: flex;
|
||||
margin: 1px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news__preview__user {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.news__preview__user__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news__preview__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.news__preview__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.news__preview__username[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news__preview__date {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.news__preview__category {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
margin: 6px 0;
|
||||
}
|
||||
.news__preview__category:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.news__preview__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
.news__preview__text {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.news__preview__links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.news__preview__link {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.news__preview { flex-direction: column-reverse; }
|
||||
.news__preview__info { display: none; }
|
||||
.news__preview__info__content {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
}
|
||||
.news__preview__info__background {
|
||||
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
.news__preview__user {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.news__preview__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,8 +3,10 @@
|
|||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media (max-width: 800px) {
|
||||
.news__sidebar {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
18
assets/css/misuzu/profile/about.css
Normal file
18
assets/css/misuzu/profile/about.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.profile__about__content {
|
||||
max-height: 1000px;
|
||||
overflow: auto;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.profile__about__editor {
|
||||
padding: 5px;
|
||||
}
|
||||
.profile__about__text {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
.profile__about__select {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
42
assets/css/misuzu/profile/accounts.css
Normal file
42
assets/css/misuzu/profile/accounts.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.profile__accounts__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.profile__accounts__item {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.profile__accounts__item:not(:last-child) {
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.profile__accounts__notice {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.profile__accounts__title {
|
||||
font-size: .9em;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
.profile__accounts__value {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.2em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile__accounts__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.profile__accounts__link {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
.profile__accounts__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
13
assets/css/misuzu/profile/birthdate.css
Normal file
13
assets/css/misuzu/profile/birthdate.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.profile__birthdate__content {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.profile__birthdate__select {
|
||||
min-width: auto;
|
||||
}
|
||||
.profile__birthdate__label {
|
||||
display: inline-block;
|
||||
}
|
||||
.profile__birthdate__title {
|
||||
font-size: .9em;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
45
assets/css/misuzu/profile/guidelines.css
Normal file
45
assets/css/misuzu/profile/guidelines.css
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
.profile__guidelines {
|
||||
display: flex;
|
||||
flex-wrap: auto;
|
||||
justify-content: space-evenly;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.profile__guidelines__section {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.profile__guidelines__line {
|
||||
padding: 1px;
|
||||
}
|
||||
.profile__guidelines__line--header {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.profile__guidelines__line:not(&--header) {
|
||||
margin-left: 1.3em;
|
||||
list-style: square;
|
||||
}
|
||||
|
||||
.profile__guidelines__emphasis {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.profile__guidelines__link {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
.profile__guidelines__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.profile__guidelines {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
202
assets/css/misuzu/profile/header.css
Normal file
202
assets/css/misuzu/profile/header.css
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
.profile__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2px;
|
||||
color: #fff;
|
||||
background-color: var(--background-colour);
|
||||
|
||||
--profile-header-overlay-start: transparent;
|
||||
--profile-header-overlay-stop: var(--background-colour-translucent-9);
|
||||
}
|
||||
|
||||
.profile__header__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--accent-colour) var(--background-pattern);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.profile__header--has-header {
|
||||
--profile-header-overlay-start: var(--background-colour-translucent-3);
|
||||
}
|
||||
|
||||
.profile__header--has-header .profile__header__background {
|
||||
background: var(--user-header) center / cover no-repeat;
|
||||
background-blend-mode: unset;
|
||||
}
|
||||
|
||||
.profile__header__avatar {
|
||||
display: flex;
|
||||
}
|
||||
.profile__header__avatar__image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
z-index: 20;
|
||||
}
|
||||
.profile__header__avatar__image--edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile__header__avatar__check {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile__header__avatar__check:checked ~ .profile__header__avatar__option {
|
||||
color: #111;
|
||||
background-color: var(--accent-colour);
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.profile__header__avatar__options {
|
||||
z-index: 10;
|
||||
margin-left: 2px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.profile__header__avatar__option {
|
||||
display: inline-block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.profile__header__avatar__option--delete {
|
||||
--accent-colour: #c00;
|
||||
}
|
||||
|
||||
.profile__header__details {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 20px;
|
||||
background-image: linear-gradient(0deg, var(--profile-header-overlay-stop), var(--profile-header-overlay-start));
|
||||
}
|
||||
.profile__header__details__content {
|
||||
margin: 5px 10px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.profile__header__details__relation {
|
||||
font-variant: all-small-caps;
|
||||
background: var(--profile-header-overlay-stop);
|
||||
border-radius: 2px;
|
||||
line-height: 1.2em;
|
||||
padding: 1px 5px 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.profile__header__options {
|
||||
min-height: 62px;
|
||||
background-color: var(--profile-header-overlay-stop);
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.profile__header__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile__header__action {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.profile__header__stats {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.profile__header__stat {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 10px;
|
||||
cursor: default;
|
||||
}
|
||||
.profile__header__stat--date {
|
||||
min-width: 130px;
|
||||
}
|
||||
.profile__header__stat__name {
|
||||
font-size: .9em;
|
||||
font-variant: small-caps;
|
||||
cursor: inherit;
|
||||
}
|
||||
.profile__header__stat__value {
|
||||
font-size: 1.3em;
|
||||
text-align: right;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
.profile__header__stat--date .profile__header__stat__value {
|
||||
text-align: left;
|
||||
}
|
||||
.profile__header__stat--link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile__header__stat--link:hover,
|
||||
.profile__header__stat--link:focus,
|
||||
.profile__header__stat--link:active,
|
||||
.profile__header__stat--active {
|
||||
border-bottom: 2px solid var(--accent-colour);
|
||||
}
|
||||
|
||||
.profile__header__username {
|
||||
color: var(--user-colour);
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.profile__header__title {
|
||||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.profile__header__country {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.profile__header__country__name {
|
||||
font-size: .9em;
|
||||
margin-left: 4px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.profile__header {
|
||||
height: auto;
|
||||
background-size: 800px auto;
|
||||
background-position: center top;
|
||||
}
|
||||
.profile__header__avatar__image {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.profile__header__details {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.profile__header__details__content {
|
||||
text-align: center;
|
||||
}
|
||||
.profile__header__options {
|
||||
flex-direction: column;
|
||||
}
|
||||
.profile__header__actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
.profile__header__action {
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.profile__header__stats {
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.profile__header__stat--date .profile__header__stat__value {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
38
assets/css/misuzu/profile/profile.css
Normal file
38
assets/css/misuzu/profile/profile.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.profile__container {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.profile__content {
|
||||
display: flex;
|
||||
}
|
||||
.profile__content__main {
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
.profile__content__side {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.profile__hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile__pagination {
|
||||
margin: 2px 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.profile__background-settings__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.profile__content { flex-direction: column; }
|
||||
.profile__content__side { max-width: 100%; }
|
||||
}
|
||||
|
|
@ -2,10 +2,9 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
&__user {
|
||||
margin: 2px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.profile__relations__user {
|
||||
margin: 2px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
}
|
||||
21
assets/css/misuzu/profile/signature.css
Normal file
21
assets/css/misuzu/profile/signature.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.profile__signature__content {
|
||||
max-height: 150px;
|
||||
overflow: hidden;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.profile__signature__editor {
|
||||
padding: 5px;
|
||||
}
|
||||
.profile__signature__text {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
.profile__signature__select {
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.profile__signature img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
139
assets/css/misuzu/profile/warning.css
Normal file
139
assets/css/misuzu/profile/warning.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
.profile__warning {
|
||||
margin: 2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--accent-colour);
|
||||
}
|
||||
.profile__warning__container {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.profile__warning--warning {
|
||||
--accent-colour: #666;
|
||||
}
|
||||
|
||||
.profile__warning--silence {
|
||||
--accent-colour: #f70;
|
||||
}
|
||||
|
||||
.profile__warning--ban {
|
||||
--accent-colour: #c33;
|
||||
}
|
||||
|
||||
.profile__warning--extendo {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.profile__warning__background {
|
||||
background-color: var(--accent-colour);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.profile__warning__content {
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
.profile__warning__type,
|
||||
.profile__warning__created,
|
||||
.profile__warning__duration {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profile__warning__type {
|
||||
min-width: 80px;
|
||||
background-color: var(--accent-colour);
|
||||
border-radius: 1px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.profile__warning__created,
|
||||
.profile__warning__duration {
|
||||
min-width: 100px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.profile__warning__note {
|
||||
padding: 1px 4px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.profile__warning__private {
|
||||
border-top: 1px solid var(--accent-colour);
|
||||
margin-top: 1px;
|
||||
width: 100%;
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.profile__warning__private:hover,
|
||||
.profile__warning__private:active,
|
||||
.profile__warning__private:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.profile__warning__tools {
|
||||
display: flex;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.profile__warning__options {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile__warning__option {
|
||||
padding: 2px 5px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.profile__warning__user {
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.profile__warning__user__avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.profile__warning__user__username {
|
||||
padding: 0 5px;
|
||||
min-width: 60px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.profile__warning__user__username:hover,
|
||||
.profile__warning__user__username:focus,
|
||||
.profile__warning__user__username:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.profile__warning__user__ip {
|
||||
display: inline-flex;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.profile__warning__user__ip:before { content: "("; }
|
||||
.profile__warning__user__ip:after { content: ")"; }
|
||||
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.profile__warning__content {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.profile__warning__tools {
|
||||
flex-direction: column;
|
||||
}
|
||||
.profile__warning__options {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
38
assets/css/misuzu/search/categories.css
Normal file
38
assets/css/misuzu/search/categories.css
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
.search__categories {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search__category {
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
background-color: var(--accent-colour);
|
||||
box-shadow: 0 1px 2px #000A;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
font-size: 1.1em;
|
||||
margin: 1px 1px 1px 0;
|
||||
}
|
||||
|
||||
.search__category__background {
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.search__category:hover .search__category__background,
|
||||
.search__category:focus .search__category__background {
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
}
|
||||
.search__category:active .search__category__background {
|
||||
background-color: var(--background-colour-translucent-7);
|
||||
}
|
||||
|
||||
.search__category__content {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
48
assets/css/misuzu/search/input.css
Normal file
48
assets/css/misuzu/search/input.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
.search__input {
|
||||
background-color: var(--accent-colour);
|
||||
box-shadow: 0 1px 2px #000A;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 5px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.search__input__background {
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.search__input__container {
|
||||
display: flex;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.search__input__text {
|
||||
flex: 1 1 auto;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
padding: 5px 10px;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.search__input__button {
|
||||
flex: 0 0 auto;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.search__input__button:hover,
|
||||
.search__input__button:active,
|
||||
.search__input__button:focus {
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
21
assets/css/misuzu/search/none.css
Normal file
21
assets/css/misuzu/search/none.css
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
.search__none {
|
||||
display: flex;
|
||||
}
|
||||
.search__none__icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-size: 3em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.search__none__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.search__none__title {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
93
assets/css/misuzu/settings/account-logs.css
Normal file
93
assets/css/misuzu/settings/account-logs.css
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
.settings__account-logs__pagination {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.settings__account-log {
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.settings__account-log__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings__account-log__important {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.settings__account-log__flag {
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.settings__account-log__description {
|
||||
flex: 1 1 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.settings__account-log__actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.settings__account-log__action {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-shadow: inherit;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
}
|
||||
.settings__account-log__action:hover,
|
||||
.settings__account-log__action:focus {
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.settings__account-log__details {
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
margin-top: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.settings__account-log__detail {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
min-width: 120px;
|
||||
}
|
||||
.settings__account-log__detail__title {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.settings__account-log__detail__value {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
.settings__account-log__user {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
.settings__account-log__user__avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.settings__account-log__user__name {
|
||||
color: var(--user-colour);
|
||||
padding-left: 4px;
|
||||
}
|
||||
46
assets/css/misuzu/settings/account.css
Normal file
46
assets/css/misuzu/settings/account.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.settings__account {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.settings__account__section {
|
||||
margin: 5px;
|
||||
}
|
||||
.settings__account__section--confirm {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
.settings__account__item {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.settings__account__item:not(:last-child) {
|
||||
border-bottom: 1px solid #222;
|
||||
}
|
||||
|
||||
.settings__account__title {
|
||||
font-size: .9em;
|
||||
line-height: 1.8em;
|
||||
}
|
||||
|
||||
.settings__account__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.settings__account__buttons {
|
||||
display: flex;
|
||||
margin-top: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.settings__account__button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.settings__account {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.settings__account__section {
|
||||
grid-column: 1 / 1;
|
||||
}
|
||||
}
|
||||
11
assets/css/misuzu/settings/data.css
Normal file
11
assets/css/misuzu/settings/data.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.settings__data__content {
|
||||
padding: 5px;
|
||||
}
|
||||
.settings__data__password {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.settings__data__actions {
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
88
assets/css/misuzu/settings/login-attempts.css
Normal file
88
assets/css/misuzu/settings/login-attempts.css
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
.settings__login-attempts__pagination {
|
||||
margin: 4px;
|
||||
}
|
||||
.settings__login-attempts__none {
|
||||
padding: 2px 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.settings__login-attempt {
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.settings__login-attempt--failed {
|
||||
--accent-colour: #a00;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.settings__login-attempt--failed .settings__login-attempt__container {
|
||||
background-color: rgba(17, 17, 17, .8);
|
||||
}
|
||||
|
||||
.settings__login-attempt__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings__login-attempt__important {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.settings__login-attempt__flag {
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.settings__login-attempt__description {
|
||||
flex: 1 1 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.settings__login-attempt__actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.settings__login-attempt__action {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-shadow: inherit;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
}
|
||||
.settings__login-attempt__action:hover {
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.settings__login-attempt__details {
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
margin-top: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.settings__login-attempt__detail {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
min-width: 120px;
|
||||
}
|
||||
.settings__login-attempt__detail__title {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.settings__login-attempt__detail__value {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
64
assets/css/misuzu/settings/role.css
Normal file
64
assets/css/misuzu/settings/role.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
.settings__role {
|
||||
border: 1px solid var(--accent-colour);
|
||||
background-color: var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.settings__role__collection {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.settings__role__content {
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings__role__name {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.7em;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.settings__role__description {
|
||||
font-size: .9em;
|
||||
line-height: 1.8em;
|
||||
padding: 0 2px;
|
||||
margin: 0 2px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.settings__role__options {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
font-size: 1.5em;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.settings__role__option {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-shadow: inherit;
|
||||
transition: color .2s;
|
||||
flex: 0 0 auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.settings__role__option:not(.settings__role__option--disabled):hover {
|
||||
color: var(--accent-colour);
|
||||
cursor: pointer;
|
||||
}
|
||||
.settings__role__option--disabled {
|
||||
opacity: .2;
|
||||
}
|
||||
86
assets/css/misuzu/settings/sessions.css
Normal file
86
assets/css/misuzu/settings/sessions.css
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
.settings__sessions__all {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 10px;
|
||||
}
|
||||
.settings__sessions__pagination {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.settings__session {
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 4px;
|
||||
}
|
||||
.settings__session--current {
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
.settings__session--current .settings__session__container {
|
||||
background-color: rgba(17, 17, 17, .8);
|
||||
}
|
||||
|
||||
.settings__session__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings__session__important {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.4em;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.settings__session__flag {
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.settings__session__description {
|
||||
flex: 1 1 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.settings__session__actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.settings__session__action {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
text-shadow: inherit;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: color .2s;
|
||||
}
|
||||
.settings__session__action:hover {
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.settings__session__details {
|
||||
z-index: 1;
|
||||
margin: 10px;
|
||||
margin-top: -5px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.settings__session__detail {
|
||||
display: inline-block;
|
||||
margin-right: 2px;
|
||||
min-width: 120px;
|
||||
}
|
||||
.settings__session__detail__title {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
font-weight: 700;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.settings__session__detail__value {
|
||||
padding: 1px 5px;
|
||||
}
|
||||
65
assets/css/misuzu/settings/settings.css
Normal file
65
assets/css/misuzu/settings/settings.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
.settings__container {
|
||||
overflow: auto;
|
||||
}
|
||||
.settings__container:not(:last-child) {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.settings__description {
|
||||
font-size: .9em;
|
||||
padding: 2px 5px;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
margin: 1px 1px 2px;
|
||||
}
|
||||
|
||||
.settings__pagination {
|
||||
max-width: 400px;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
.settings__wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.settings__wrapper__sidebar {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.settings__wrapper__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.settings__wrapper__menu {
|
||||
width: 280px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.settings__wrapper__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.settings__wrapper__link:hover {
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.settings__wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
.settings__wrapper__sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
.settings__wrapper__menu {
|
||||
width: 100%;
|
||||
}
|
||||
.settings__wrapper__link {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
}
|
||||
42
assets/css/misuzu/settings/two-factor.css
Normal file
42
assets/css/misuzu/settings/two-factor.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
.settings__two-factor {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.settings__two-factor__code {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.settings__two-factor__code__image {
|
||||
vertical-align: middle;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.settings__two-factor__code__text {
|
||||
color: #000;
|
||||
flex: 0 0 auto;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
font-family: var(--font-monospace);
|
||||
}
|
||||
|
||||
.settings__two-factor__settings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.settings__two-factor__settings__status {
|
||||
font-size: 1.5em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.settings__two-factor {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import "buttons";
|
||||
@import "container";
|
||||
@import "label";
|
||||
@import "login";
|
||||
@import "logout";
|
||||
@import "register";
|
||||
@import "warning";
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.auth__buttons {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: space-between;
|
||||
|
||||
&__button {
|
||||
&--minor {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.auth__label {
|
||||
overflow: hidden;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
|
||||
&__text {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__action {
|
||||
padding: 3px 8px;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-radius: 4px;
|
||||
transition: background-color .2s;
|
||||
margin: 2px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.auth__login {
|
||||
|
||||
&--disabled {
|
||||
--accent-colour: #555;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.auth__logout {
|
||||
margin: 5px;
|
||||
|
||||
&__paragraph {
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.auth__register {
|
||||
max-width: 700px;
|
||||
width: 100%;
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__form {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__info {
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
flex: 0 1 auto;
|
||||
padding: 5px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__paragraph {
|
||||
line-height: 1.5em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.auth__warning {
|
||||
margin: 5px;
|
||||
|
||||
&--welcome {
|
||||
--start-colour: var(--accent-colour);
|
||||
--end-colour: #222;
|
||||
}
|
||||
|
||||
&__paragraph {
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.changelog__action {
|
||||
&--add {
|
||||
--action-colour: #159635;
|
||||
}
|
||||
|
||||
&--remove {
|
||||
--action-colour: #e33743;
|
||||
}
|
||||
|
||||
&--update {
|
||||
--action-colour: #297b8a;
|
||||
}
|
||||
|
||||
&--fix {
|
||||
--action-colour: #2d5e96;
|
||||
}
|
||||
|
||||
&--import {
|
||||
--action-colour: #2b9678;
|
||||
}
|
||||
|
||||
&--revert {
|
||||
--action-colour: #e38245;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
.changelog__change {
|
||||
display: flex;
|
||||
margin: 2px 0;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__info {
|
||||
|
||||
&__content {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
|
||||
&[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__userrole {
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&__tags {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin-top: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
border: 1px solid var(--accent-colour);
|
||||
background-color: var(--accent-colour);
|
||||
margin: 1px;
|
||||
border-radius: 2px;
|
||||
|
||||
&__link {
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import "change";
|
||||
@import "container";
|
||||
@import "entry";
|
||||
@import "listing";
|
||||
@import "log";
|
||||
@import "pagination";
|
||||
@import "action";
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
.changelog__entry {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__datetime,
|
||||
&__user,
|
||||
&__action {
|
||||
--action-colour: inherit;
|
||||
|
||||
background-color: var(--action-colour);
|
||||
color: var(--user-colour);
|
||||
flex: 0 0 auto;
|
||||
margin-right: 1px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__datetime {
|
||||
min-width: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__user {
|
||||
min-width: 100px;
|
||||
padding-left: 4px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__action {
|
||||
border-radius: 2px;
|
||||
min-width: 5px;
|
||||
|
||||
&__text {
|
||||
text-align: right;
|
||||
min-width: 80px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__log {
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 2px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&--link {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
&__tag {
|
||||
border: 1px solid var(--accent-colour);
|
||||
margin-right: 1px;
|
||||
border-radius: 2px;
|
||||
display: block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.changelog__listing {
|
||||
|
||||
&__none {
|
||||
margin: 1px 4px;
|
||||
}
|
||||
|
||||
&__date {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 1px 3px;
|
||||
color: var(--accent-colour);
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
.changelog__log {
|
||||
--action-colour: var(--accent-colour);
|
||||
|
||||
border: 1px solid var(--action-colour);
|
||||
background-color: var(--action-colour);
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex: 1 0 auto;
|
||||
margin: 2px 0;
|
||||
|
||||
&__action {
|
||||
display: block;
|
||||
padding: 6px 2px;
|
||||
background-color: var(--action-colour);
|
||||
border-right: 1px solid var(--action-colour);
|
||||
writing-mode: sideways-lr;
|
||||
text-orientation: sideways;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding: 8px 12px;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.3em;
|
||||
align-self: center;
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
.forum__actions {
|
||||
margin: 2px 0;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
|
||||
&__pagination {
|
||||
max-width: 500px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.forum__categories {
|
||||
margin: 2px 0;
|
||||
box-sizing: content-box;
|
||||
overflow: auto;
|
||||
|
||||
&__empty {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,225 +0,0 @@
|
|||
.forum__category {
|
||||
border-radius: 2px;
|
||||
background-color: fade(#111, 60%);
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: fade(#191919, 60%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2229;
|
||||
box-shadow: 0 1px 4px #222;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
min-height: 50px;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 40px;
|
||||
border-radius: 2px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 4px;
|
||||
background-color: #333;
|
||||
background-size: 80px 80px;
|
||||
background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 1px; // fixes centering
|
||||
|
||||
&--unread {
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
margin: 0 4px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-basis: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
&__description,
|
||||
&__subforums {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
&__subforums {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__subforum {
|
||||
padding: 2px;
|
||||
pointer-events: initial;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&--unread {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__stats,
|
||||
&__activity {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
text-align: center;
|
||||
min-width: 100px;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-start;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__stat {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
opacity: .7;
|
||||
pointer-events: auto;
|
||||
|
||||
&:first-child {
|
||||
font-size: 1.5em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__activity {
|
||||
text-align: right;
|
||||
min-width: 270px;
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
min-width: 100%;
|
||||
|
||||
&--empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__none,
|
||||
&__details {
|
||||
margin: 0 8px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin: 1px 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__post {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex: 1 0 auto;
|
||||
text-align: left;
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
pointer-events: initial;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
.forum__confirm {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
&__message {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@import "actions";
|
||||
@import "categories";
|
||||
@import "category";
|
||||
@import "confirm";
|
||||
@import "header";
|
||||
@import "post";
|
||||
@import "poll";
|
||||
@import "priority";
|
||||
@import "status";
|
||||
@import "topic";
|
||||
@import "topics";
|
||||
@import "leaderboard/leaderboard";
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
.forum__header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 8px 10px;
|
||||
margin: 2px 0;
|
||||
|
||||
&__title {
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 0 5px;
|
||||
|
||||
&[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&--fill {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-shadow: initial;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
&__breadcrumbs {
|
||||
display: flex;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__breadcrumb {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
padding: 2px 5px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
color: var(--accent-colour);
|
||||
margin: 0 4px;
|
||||
font-size: .9em;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__action {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: color .2s;
|
||||
padding: 2px 5px;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
opacity: .4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.forum__leaderboard__categories {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 2px 0;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.forum__leaderboard__category {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
margin: 2px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 4px;
|
||||
transition: background-color .2s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&--active,
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@import "categories";
|
||||
@import "category";
|
||||
@import "markdown";
|
||||
@import "user";
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.forum__leaderboard__markdown {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 500px;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
|
@ -1,83 +0,0 @@
|
|||
.forum__leaderboard__user {
|
||||
margin: 2px 0;
|
||||
font-size: 1.2em;
|
||||
|
||||
&--rank-1 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
&--rank-2,
|
||||
&--rank-3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__rank {
|
||||
height: 40px;
|
||||
min-width: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
flex: 0 0 auto;
|
||||
|
||||
&:before {
|
||||
content: "#";
|
||||
}
|
||||
}
|
||||
|
||||
&--rank-1 &__rank {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 2px 7px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&--rank-1 &__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&__username {
|
||||
flex: 1 1 auto;
|
||||
line-height: 30px;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&--rank-1 &__username {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
&__posts {
|
||||
flex: 0 0 auto;
|
||||
min-width: 150px;
|
||||
border-left: 1px solid fade(#fff, 20%);
|
||||
line-height: 30px;
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&--rank-1 &__posts {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
.forum__poll {
|
||||
|
||||
&__container {
|
||||
margin: 2px 0;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__toggle,
|
||||
&__toggle:checked ~ &__container--poll,
|
||||
&__toggle:not(:checked) ~ &__container--results {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 500px;
|
||||
min-width: 100%;
|
||||
|
||||
@media (min-width: 400px) {
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&__results {
|
||||
max-width: 800px;
|
||||
width: 100%;
|
||||
padding: 0 1px;
|
||||
}
|
||||
|
||||
&__option {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
&__remaining,
|
||||
&__expires {
|
||||
line-height: 1.5em;
|
||||
|
||||
&__num,
|
||||
&__datetime {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
&__result {
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid var(--accent-colour);
|
||||
width: 100%;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: var(--accent-colour);
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
&--voted &__background {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1 1 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&--voted &__text {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__votes {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__percent {
|
||||
flex: 0 0 auto;
|
||||
padding: 5px;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,269 +0,0 @@
|
|||
.forum__post {
|
||||
display: flex;
|
||||
margin: 2px 0;
|
||||
|
||||
&--deleted {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__details {
|
||||
font-size: .9em;
|
||||
line-height: 1.7em;
|
||||
padding: 0 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
&__datetime,
|
||||
&__id,
|
||||
&__mode {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 2px;
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin: 4px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
&--edit {
|
||||
// figure out why this is needed
|
||||
max-width: calc(100% - 4px);
|
||||
min-width: calc(100% - 4px);
|
||||
margin: 2px 2px 0;
|
||||
min-height: 400px;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
padding: 2px 5px;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
font-family: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
|
||||
&__content {
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&__posts-count {
|
||||
font-size: .9em;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&__joined {
|
||||
flex: 1 1 auto;
|
||||
max-width: 170px;
|
||||
font-size: .9em;
|
||||
justify-self: flex-end;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 2em;
|
||||
text-decoration: none;
|
||||
|
||||
&[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__usertitle {
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
&__settings {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
padding: 5px 10px;
|
||||
margin: 1px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
transition: background-color .2s;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
|
||||
&__signature {
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
padding: 2px;
|
||||
max-height: 150px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&__badge {
|
||||
background-color: var(--accent-colour);
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
padding: 2px;
|
||||
box-shadow: 0 2px 3px #000A;
|
||||
margin: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: auto;
|
||||
padding: 2px 10px;
|
||||
margin: 0;
|
||||
align-self: flex-start;
|
||||
margin-left: 5px;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
&__desktop {
|
||||
display: block;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
.forum__priority {
|
||||
|
||||
&__votes {
|
||||
text-align: center;
|
||||
margin: 5px 16px 5px 5px;
|
||||
-webkit-touch-callout: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
-khtml-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&__vote {
|
||||
font-size: 14px;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
&__star {
|
||||
margin-right: -.9em;
|
||||
opacity: .6;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
color: var(--user-colour);
|
||||
transition: text-shadow .2s;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__vote:hover &__star {
|
||||
text-shadow: 0 0 1px #fff;
|
||||
}
|
||||
|
||||
&__input {
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.forum__status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
margin: 2px 0;
|
||||
|
||||
&__icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 2em;
|
||||
padding-bottom: 1px;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin: 0 5px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__emphasis {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,287 +0,0 @@
|
|||
.forum__topic {
|
||||
border-radius: 2px;
|
||||
background-color: fade(#111, 60%);
|
||||
transition: background-color .2s, box-shadow .2s, opacity .2s;
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: fade(#191919, 60%);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: fade(#222, 60%);
|
||||
box-shadow: 0 1px 4px #222;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
&--deleted {
|
||||
opacity: .4;
|
||||
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
&--locked {
|
||||
opacity: .6;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
align-items: center;
|
||||
min-height: 40px;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
border-radius: 2px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 4px;
|
||||
background-color: #333;
|
||||
background-size: 60px 60px;
|
||||
background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1px 1px 0 2px;
|
||||
|
||||
&--wide {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
&--unread {
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&--faded {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
&__participated {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #fff;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 2px #111;
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
&__priority {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 30px;
|
||||
font-size: .9em;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__details {
|
||||
margin: 0 4px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 1.3em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__info {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
&__stats,
|
||||
&__activity {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
text-align: center;
|
||||
min-width: 80px;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-start;
|
||||
align-items: flex-end;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__stat {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
opacity: .7;
|
||||
pointer-events: auto;
|
||||
cursor: default;
|
||||
|
||||
&:first-child {
|
||||
font-size: 1.4em;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__activity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: right;
|
||||
min-width: 200px;
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin: 0 8px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin: 1px 4px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
&__post {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 120px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
pointer-events: initial;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__pagination {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
margin: 0 8px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
margin: 0 1px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
min-width: 25px;
|
||||
height: 25px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
background-color: fade(#000, 20%);
|
||||
box-shadow: 0 1px 1px #111;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#000, 40%);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.forum__topics {
|
||||
margin-bottom: 2px;
|
||||
box-sizing: content-box;
|
||||
overflow: auto;
|
||||
|
||||
&__empty {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@import "auth/auth";
|
||||
@import "profile/profile";
|
||||
|
||||
@import "changelog/changelog";
|
||||
|
||||
@import "settings/settings";
|
||||
@import "news/news";
|
||||
@import "forum/forum";
|
||||
|
||||
@import "search/search";
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
.news__feed {
|
||||
display: flex;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
transition: background-color .2s;
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.news__feeds {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.news__list {
|
||||
margin: 2px 0;
|
||||
|
||||
&__item {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&--kvp {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&__value {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import "container";
|
||||
@import "list";
|
||||
@import "preview";
|
||||
@import "sidebar";
|
||||
@import "post";
|
||||
@import "feeds";
|
||||
@import "feed";
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
.news__post {
|
||||
display: flex;
|
||||
margin-bottom: 2px;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
&__info {
|
||||
|
||||
&__content {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
|
||||
&[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
&__category {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
margin: 6px 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
.news__preview {
|
||||
display: flex;
|
||||
margin: 2px 0;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
--user-colour: var(--accent-colour);
|
||||
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
&__info {
|
||||
|
||||
&__content {
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--user-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__listing {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
margin: 1px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&__details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: inherit;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.5em;
|
||||
text-decoration: none;
|
||||
|
||||
&[href]:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
&__category {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
margin: 6px 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 1.2em;
|
||||
flex: 1 1 auto;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
margin: 2px;
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__link {
|
||||
font-size: .9em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.profile__about {
|
||||
|
||||
&__content {
|
||||
max-height: 1000px;
|
||||
overflow: auto;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
&__editor {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&__select {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue