Moving away from LESS and TypeScript part 1 of ?.
This commit is contained in:
parent
c735bbbd45
commit
69b105cddd
120 changed files with 2571 additions and 3203 deletions
96
assets/css/misuzu/_msz.css
Normal file
96
assets/css/misuzu/_msz.css
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
.hidden {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-size: 12px;
|
||||
--line-height: 20px;
|
||||
--font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
--font-monospace: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
|
||||
--site-max-width: 1200px;
|
||||
--site-mobile-width: 800px;
|
||||
--site-logo: url('/images/logos/imouto-default.png');
|
||||
|
||||
--header-height-desktop: 70px;
|
||||
--header-height-mobile: 50px;
|
||||
|
||||
--background-image: initial;
|
||||
--background-colour: #111;
|
||||
--background-colour-translucent-1: rgba(17, 17, 17, 0.1);
|
||||
--background-colour-translucent-2: rgba(17, 17, 17, 0.2);
|
||||
--background-colour-translucent-3: rgba(17, 17, 17, 0.3);
|
||||
--background-colour-translucent-4: rgba(17, 17, 17, 0.4);
|
||||
--background-colour-translucent-5: rgba(17, 17, 17, 0.5);
|
||||
--background-colour-translucent-6: rgba(17, 17, 17, 0.6);
|
||||
--background-colour-translucent-7: rgba(17, 17, 17, 0.7);
|
||||
--background-colour-translucent-8: rgba(17, 17, 17, 0.8);
|
||||
--background-colour-translucent-9: rgba(17, 17, 17, 0.9);
|
||||
--background-pattern: url('/images/clouds.png') fixed;
|
||||
|
||||
--container-colour: #161616;
|
||||
|
||||
--text-colour: #fff;
|
||||
--text-colour-inverted: #000;
|
||||
|
||||
--user-colour: inherit;
|
||||
--user-header: url('/images/pixel.png');
|
||||
--accent-colour: #8559a5;
|
||||
--header-accent-colour: var(--accent-colour);
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: var(--accent-colour) var(--background-colour);
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: var(--background-image);
|
||||
background-color: var(--background-colour);
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
font-family: var(--font-regular);
|
||||
color: var(--text-colour);
|
||||
background-attachment: fixed;
|
||||
background-position: center center;
|
||||
}
|
||||
.main__wrapper {
|
||||
max-width: var(--site-max-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.main--bg-blend {
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
.main--bg-slide { animation: background-slide infinite linear 2s; }
|
||||
.main--bg-cover { background-size: cover; }
|
||||
.main--bg-contain { background-size: contain; }
|
||||
.main--bg-stretch { background-size: 100% 100%; }
|
||||
.main--bg-tile { background-size: auto; }
|
||||
|
||||
.link {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.link:hover, .link:focus { text-decoration: underline; }
|
||||
|
||||
4
assets/css/misuzu/animations.css
Normal file
4
assets/css/misuzu/animations.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@keyframes background-slide {
|
||||
0% { background-position: 0 0; }
|
||||
100% { background-position: var(--background-width) var(--background-height); }
|
||||
}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
.avatar {
|
||||
flex-shrink: 0;
|
||||
background-color: @background-colour;
|
||||
background-color: var(--background-colour);
|
||||
display: block;
|
||||
border: 0;
|
||||
159
assets/css/misuzu/comments/comment.css
Normal file
159
assets/css/misuzu/comments/comment.css
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
.comment {
|
||||
margin: 10px;
|
||||
}
|
||||
.comment__reply-toggle {
|
||||
display: none;
|
||||
}
|
||||
.comment__reply-toggle:checked ~ .comment--reply {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.comment--reply {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment--deleted > .comment__container {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.comment--deleted > .comment__container:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
.comment__container {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.comment__mention {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.comment__mention:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment__actions {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
font-size: .9em;
|
||||
align-items: center;
|
||||
}
|
||||
.comment__action {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.comment__action:not(:last-child) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.comment__action--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment__action--post {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.comment__action--button {
|
||||
cursor: pointer;
|
||||
font: 12px/20px var(--font-regular);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.comment__action--hide {
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
.comment__action--voted {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.comment__action__checkbox {
|
||||
vertical-align: text-top;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.comment__replies .comment--indent-1,
|
||||
.comment__replies .comment--indent-2,
|
||||
.comment__replies .comment--indent-3,
|
||||
.comment__replies .comment--indent-4,
|
||||
.comment__replies .comment--indent-5 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.comment__avatar {
|
||||
flex: 0 0 auto;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.comment__replies .comment__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.comment__content {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.comment__content:hover .comment__action--hide {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.comment__info {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.comment__text {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.comment__text--input {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 50px;
|
||||
font: 12px/20px var(--font-regular);
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.comment__user {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.comment__user--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.comment__date,
|
||||
.comment__pin {
|
||||
color: #666;
|
||||
font-size: .9em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.comment__link {
|
||||
color: #666;
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__pin {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.comment__pin:before {
|
||||
content: "-";
|
||||
padding-right: 4px;
|
||||
}
|
||||
36
assets/css/misuzu/comments/comments.css
Normal file
36
assets/css/misuzu/comments/comments.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.comments {
|
||||
--comments-max-height: 600px;
|
||||
margin: 1px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.comments__listing {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.comments__listing--limit {
|
||||
max-height: var(--comments-max-height);
|
||||
}
|
||||
|
||||
/*.comments__input,*/
|
||||
.comments__javascript,
|
||||
.comments__notice--staff {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding-bottom: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.comments__none,
|
||||
.comments__javascript,
|
||||
.comments__notice {
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.comments__notice__link {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.comments__notice__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
11
assets/css/misuzu/confirm.css
Normal file
11
assets/css/misuzu/confirm.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.confirm {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.confirm__buttons {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
.confirm__message { padding: 2px 5px; }
|
||||
.confirm__button { margin-right: 5px; }
|
||||
43
assets/css/misuzu/container.css
Normal file
43
assets/css/misuzu/container.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
.container {
|
||||
background-color: var(--container-colour);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 0 1px 4px #000;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.container--lazy { /* don't use this */
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.container__title {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container__title__text {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
padding: 8px 10px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.container__title__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.container__title__link:hover { color: var(--accent-colour); }
|
||||
.container__title__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.container__content { /* only use this for text going forward, just throw your child directly after __title */
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
305
assets/css/misuzu/flags.css
Normal file
305
assets/css/misuzu/flags.css
Normal file
|
|
@ -0,0 +1,305 @@
|
|||
.flag {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 11px;
|
||||
background-image: url('/images/flag-sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
font-size: 0;
|
||||
background-position: top -276px left -368px;
|
||||
}
|
||||
.flag__container {
|
||||
min-width: 16px;
|
||||
min-height: 11px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Ax */
|
||||
.flag--ad { background-position: top 0 left -48px; }
|
||||
.flag--ae { background-position: top 0 left -64px; }
|
||||
.flag--af { background-position: top 0 left -80px; }
|
||||
.flag--ag { background-position: top 0 left -96px; }
|
||||
.flag--ai { background-position: top 0 left -128px; }
|
||||
.flag--al { background-position: top 0 left -176px; }
|
||||
.flag--am { background-position: top 0 left -192px; }
|
||||
.flag--an { background-position: top 0 left -208px; }
|
||||
.flag--ao { background-position: top 0 left -224px; }
|
||||
.flag--ar { background-position: top 0 left -272px; }
|
||||
.flag--as { background-position: top 0 left -288px; }
|
||||
.flag--at { background-position: top 0 left -304px; }
|
||||
.flag--au { background-position: top 0 left -320px; }
|
||||
.flag--aw { background-position: top 0 left -352px; }
|
||||
.flag--ax { background-position: top 0 left -368px; }
|
||||
.flag--az { background-position: top 0 left -400px; }
|
||||
|
||||
/* Bx */
|
||||
.flag--ba { background-position: top -12px left 0; }
|
||||
.flag--bb { background-position: top -12px left -16px; }
|
||||
.flag--bd { background-position: top -12px left -48px; }
|
||||
.flag--be { background-position: top -12px left -64px; }
|
||||
.flag--bf { background-position: top -12px left -80px; }
|
||||
.flag--bg { background-position: top -12px left -96px; }
|
||||
.flag--bh { background-position: top -12px left -112px; }
|
||||
.flag--bi { background-position: top -12px left -128px; }
|
||||
.flag--bj { background-position: top -12px left -144px; }
|
||||
.flag--bm { background-position: top -12px left -192px; }
|
||||
.flag--bn { background-position: top -12px left -208px; }
|
||||
.flag--bo { background-position: top -12px left -224px; }
|
||||
.flag--br { background-position: top -12px left -272px; }
|
||||
.flag--bs { background-position: top -12px left -288px; }
|
||||
.flag--bt { background-position: top -12px left -304px; }
|
||||
.flag--bv { background-position: top -12px left -336px; }
|
||||
.flag--bw { background-position: top -12px left -352px; }
|
||||
.flag--by { background-position: top -12px left -384px; }
|
||||
.flag--bz { background-position: top -12px left -400px; }
|
||||
|
||||
/* Cx */
|
||||
.flag--ca { background-position: top -24px left 0; }
|
||||
.flag--cc { background-position: top -24px left -32px; }
|
||||
.flag--cd { background-position: top -24px left -48px; }
|
||||
.flag--cf { background-position: top -24px left -80px; }
|
||||
.flag--cg { background-position: top -24px left -96px; }
|
||||
.flag--ch { background-position: top -24px left -112px; width: 11px; }
|
||||
.flag--ci { background-position: top -24px left -128px; }
|
||||
.flag--ck { background-position: top -24px left -160px; }
|
||||
.flag--cl { background-position: top -24px left -176px; }
|
||||
.flag--cm { background-position: top -24px left -192px; }
|
||||
.flag--cn { background-position: top -24px left -208px; }
|
||||
.flag--co { background-position: top -24px left -224px; }
|
||||
.flag--cr { background-position: top -24px left -272px; }
|
||||
.flag--cs { background-position: top -24px left -288px; }
|
||||
.flag--cu { background-position: top -24px left -320px; }
|
||||
.flag--cv { background-position: top -24px left -336px; }
|
||||
.flag--cx { background-position: top -24px left -368px; }
|
||||
.flag--cy { background-position: top -24px left -384px; }
|
||||
.flag--cz { background-position: top -24px left -400px; }
|
||||
|
||||
/* Dx */
|
||||
.flag--de { background-position: top -36px left -64px; }
|
||||
.flag--dj { background-position: top -36px left -144px; }
|
||||
.flag--dk { background-position: top -36px left -160px; }
|
||||
.flag--dm { background-position: top -36px left -192px; }
|
||||
.flag--do { background-position: top -36px left -224px; }
|
||||
.flag--dz { background-position: top -36px left -400px; }
|
||||
|
||||
/* Ex */
|
||||
.flag--ec { background-position: top -48px left -32px; }
|
||||
.flag--ee { background-position: top -48px left -64px; }
|
||||
.flag--eg { background-position: top -48px left -96px; }
|
||||
.flag--eh { background-position: top -48px left -112px; }
|
||||
.flag--er { background-position: top -48px left -272px; }
|
||||
.flag--es { background-position: top -48px left -288px; }
|
||||
.flag--et { background-position: top -48px left -304px; }
|
||||
|
||||
/* Fx */
|
||||
.flag--fi { background-position: top -60px left -128px; }
|
||||
.flag--fj { background-position: top -60px left -144px; }
|
||||
.flag--fk { background-position: top -60px left -160px; }
|
||||
.flag--fm { background-position: top -60px left -192px; }
|
||||
.flag--fo { background-position: top -60px left -224px; }
|
||||
.flag--fr { background-position: top -60px left -272px; }
|
||||
|
||||
/* Gx */
|
||||
.flag--ga { background-position: top -72px left 0; }
|
||||
.flag--gb { background-position: top -72px left -16px; }
|
||||
.flag--gd { background-position: top -72px left -48px; }
|
||||
.flag--ge { background-position: top -72px left -64px; }
|
||||
.flag--gf { background-position: top -72px left -80px; }
|
||||
.flag--gh { background-position: top -72px left -112px; }
|
||||
.flag--gi { background-position: top -72px left -128px; }
|
||||
.flag--gl { background-position: top -72px left -176px; }
|
||||
.flag--gm { background-position: top -72px left -192px; }
|
||||
.flag--gn { background-position: top -72px left -208px; }
|
||||
.flag--gp { background-position: top -72px left -240px; }
|
||||
.flag--gq { background-position: top -72px left -256px; }
|
||||
.flag--gr { background-position: top -72px left -272px; }
|
||||
.flag--gs { background-position: top -72px left -288px; }
|
||||
.flag--gt { background-position: top -72px left -304px; }
|
||||
.flag--gu { background-position: top -72px left -320px; }
|
||||
.flag--gw { background-position: top -72px left -352px; }
|
||||
.flag--gy { background-position: top -72px left -384px; }
|
||||
|
||||
/* Hx */
|
||||
.flag--hk { background-position: top -84px left -160px; }
|
||||
.flag--hm { background-position: top -84px left -192px; }
|
||||
.flag--hn { background-position: top -84px left -208px; }
|
||||
.flag--hr { background-position: top -84px left -272px; }
|
||||
.flag--ht { background-position: top -84px left -304px; }
|
||||
.flag--hu { background-position: top -84px left -320px; }
|
||||
|
||||
/* Ix */
|
||||
.flag--id { background-position: top -96px left -48px; }
|
||||
.flag--ie { background-position: top -96px left -64px; }
|
||||
.flag--il { background-position: top -96px left -176px; }
|
||||
.flag--in { background-position: top -96px left -208px; }
|
||||
.flag--io { background-position: top -96px left -224px; }
|
||||
.flag--iq { background-position: top -96px left -256px; }
|
||||
.flag--ir { background-position: top -96px left -272px; }
|
||||
.flag--is { background-position: top -96px left -288px; }
|
||||
.flag--it { background-position: top -96px left -304px; }
|
||||
|
||||
/* Jx */
|
||||
.flag--jm { background-position: top -108px left -192px; }
|
||||
.flag--jo { background-position: top -108px left -224px; }
|
||||
.flag--jp { background-position: top -108px left -240px; }
|
||||
|
||||
/* Kx */
|
||||
.flag--ke { background-position: top -120px left -64px; }
|
||||
.flag--kg { background-position: top -120px left -96px; }
|
||||
.flag--kh { background-position: top -120px left -112px; }
|
||||
.flag--ki { background-position: top -120px left -128px; }
|
||||
.flag--km { background-position: top -120px left -192px; }
|
||||
.flag--kn { background-position: top -120px left -208px; }
|
||||
.flag--kp { background-position: top -120px left -240px; }
|
||||
.flag--kr { background-position: top -120px left -272px; }
|
||||
.flag--kw { background-position: top -120px left -352px; }
|
||||
.flag--ky { background-position: top -120px left -384px; }
|
||||
.flag--kz { background-position: top -120px left -400px; }
|
||||
|
||||
/* Lx */
|
||||
.flag--la { background-position: top -132px left 0; }
|
||||
.flag--lb { background-position: top -132px left -16px; }
|
||||
.flag--lc { background-position: top -132px left -32px; }
|
||||
.flag--li { background-position: top -132px left -128px; }
|
||||
.flag--lk { background-position: top -132px left -160px; }
|
||||
.flag--lr { background-position: top -132px left -272px; }
|
||||
.flag--ls { background-position: top -132px left -288px; }
|
||||
.flag--lt { background-position: top -132px left -304px; }
|
||||
.flag--lu { background-position: top -132px left -320px; }
|
||||
.flag--lv { background-position: top -132px left -336px; }
|
||||
.flag--ly { background-position: top -132px left -384px; }
|
||||
|
||||
/* Mx */
|
||||
.flag--ma { background-position: top -144px left 0; }
|
||||
.flag--mc { background-position: top -144px left -32px; }
|
||||
.flag--md { background-position: top -144px left -48px; }
|
||||
.flag--me { background-position: top -144px left -64px; height: 12px; }
|
||||
.flag--mg { background-position: top -144px left -96px; }
|
||||
.flag--mh { background-position: top -144px left -112px; }
|
||||
.flag--mk { background-position: top -144px left -160px; }
|
||||
.flag--ml { background-position: top -144px left -176px; }
|
||||
.flag--mm { background-position: top -144px left -192px; }
|
||||
.flag--mn { background-position: top -144px left -208px; }
|
||||
.flag--mo { background-position: top -144px left -224px; }
|
||||
.flag--mp { background-position: top -144px left -240px; }
|
||||
.flag--mq { background-position: top -144px left -256px; }
|
||||
.flag--mr { background-position: top -144px left -272px; }
|
||||
.flag--ms { background-position: top -144px left -288px; }
|
||||
.flag--mt { background-position: top -144px left -304px; }
|
||||
.flag--mu { background-position: top -144px left -320px; }
|
||||
.flag--mv { background-position: top -144px left -336px; }
|
||||
.flag--mw { background-position: top -144px left -352px; }
|
||||
.flag--mx { background-position: top -144px left -368px; }
|
||||
.flag--my { background-position: top -144px left -384px; }
|
||||
.flag--mz { background-position: top -144px left -400px; }
|
||||
|
||||
/* Nx */
|
||||
.flag--na { background-position: top -156px left 0; }
|
||||
.flag--nc { background-position: top -156px left -32px; }
|
||||
.flag--ne { background-position: top -156px left -64px; }
|
||||
.flag--nf { background-position: top -156px left -80px; }
|
||||
.flag--ng { background-position: top -156px left -96px; }
|
||||
.flag--ni { background-position: top -156px left -128px; }
|
||||
.flag--nl { background-position: top -156px left -176px; }
|
||||
.flag--no { background-position: top -156px left -224px; }
|
||||
.flag--np { background-position: top -156px left -240px; width: 9px; }
|
||||
.flag--nr { background-position: top -156px left -272px; }
|
||||
.flag--nu { background-position: top -156px left -320px; }
|
||||
.flag--nz { background-position: top -156px left -400px; }
|
||||
|
||||
/* Ox */
|
||||
.flag--ok { background-position: top -168px left -160px; }
|
||||
|
||||
/* Px */
|
||||
.flag--pa { background-position: top -180px left 0; }
|
||||
.flag--pe { background-position: top -180px left -64px; }
|
||||
.flag--pf { background-position: top -180px left -80px; }
|
||||
.flag--pg { background-position: top -180px left -96px; }
|
||||
.flag--ph { background-position: top -180px left -112px; }
|
||||
.flag--pk { background-position: top -180px left -160px; }
|
||||
.flag--pl { background-position: top -180px left -176px; }
|
||||
.flag--pm { background-position: top -180px left -192px; }
|
||||
.flag--pn { background-position: top -180px left -208px; }
|
||||
.flag--pr { background-position: top -180px left -272px; }
|
||||
.flag--ps { background-position: top -180px left -288px; }
|
||||
.flag--pt { background-position: top -180px left -304px; }
|
||||
.flag--pw { background-position: top -180px left -352px; }
|
||||
.flag--py { background-position: top -180px left -384px; }
|
||||
|
||||
/* Qx */
|
||||
.flag--qa { background-position: top -192px left 0; }
|
||||
|
||||
/* Rx */
|
||||
.flag--re { background-position: top -204px left -64px; }
|
||||
.flag--ro { background-position: top -204px left -224px; }
|
||||
.flag--rs { background-position: top -204px left -288px; }
|
||||
.flag--ru { background-position: top -204px left -320px; }
|
||||
.flag--rw { background-position: top -204px left -352px; }
|
||||
|
||||
/* Sx */
|
||||
.flag--sa { background-position: top -216px left 0; }
|
||||
.flag--sb { background-position: top -216px left -16px; }
|
||||
.flag--sc { background-position: top -216px left -32px; }
|
||||
.flag--sd { background-position: top -216px left -48px; }
|
||||
.flag--se { background-position: top -216px left -64px; }
|
||||
.flag--sg { background-position: top -216px left -96px; }
|
||||
.flag--sh { background-position: top -216px left -112px; }
|
||||
.flag--si { background-position: top -216px left -128px; }
|
||||
.flag--sj { background-position: top -216px left -144px; }
|
||||
.flag--sk { background-position: top -216px left -160px; }
|
||||
.flag--sl { background-position: top -216px left -176px; }
|
||||
.flag--sm { background-position: top -216px left -192px; }
|
||||
.flag--sn { background-position: top -216px left -208px; }
|
||||
.flag--so { background-position: top -216px left -224px; }
|
||||
.flag--sr { background-position: top -216px left -272px; }
|
||||
.flag--st { background-position: top -216px left -304px; }
|
||||
.flag--sv { background-position: top -216px left -336px; }
|
||||
.flag--sy { background-position: top -216px left -384px; }
|
||||
.flag--sz { background-position: top -216px left -400px; }
|
||||
|
||||
/* Tx */
|
||||
.flag--tc { background-position: top -228px left -32px; }
|
||||
.flag--td { background-position: top -228px left -48px; }
|
||||
.flag--tf { background-position: top -228px left -80px; }
|
||||
.flag--tg { background-position: top -228px left -96px; }
|
||||
.flag--th { background-position: top -228px left -112px; }
|
||||
.flag--tj { background-position: top -228px left -144px; }
|
||||
.flag--tk { background-position: top -228px left -160px; }
|
||||
.flag--tl { background-position: top -228px left -176px; }
|
||||
.flag--tm { background-position: top -228px left -192px; }
|
||||
.flag--tn { background-position: top -228px left -208px; }
|
||||
.flag--to { background-position: top -228px left -224px; }
|
||||
.flag--tr { background-position: top -228px left -272px; }
|
||||
.flag--tt { background-position: top -228px left -304px; }
|
||||
.flag--tv { background-position: top -228px left -336px; }
|
||||
.flag--tw { background-position: top -228px left -352px; }
|
||||
.flag--tz { background-position: top -228px left -400px; }
|
||||
|
||||
/* Ux */
|
||||
.flag--ua { background-position: top -240px left 0; }
|
||||
.flag--ug { background-position: top -240px left -96px; }
|
||||
.flag--um { background-position: top -240px left -192px; }
|
||||
.flag--us { background-position: top -240px left -288px; }
|
||||
.flag--uy { background-position: top -240px left -384px; }
|
||||
.flag--uz { background-position: top -240px left -400px; }
|
||||
|
||||
/* Vx */
|
||||
.flag--va { background-position: top -252px left 0; }
|
||||
.flag--vc { background-position: top -252px left -32px; }
|
||||
.flag--ve { background-position: top -252px left -64px; }
|
||||
.flag--vg { background-position: top -252px left -96px; }
|
||||
.flag--vi { background-position: top -252px left -128px; }
|
||||
.flag--vn { background-position: top -252px left -208px; }
|
||||
.flag--vu { background-position: top -252px left -320px; }
|
||||
|
||||
/* Wx */
|
||||
.flag--wf { background-position: top -264px left -80px; }
|
||||
.flag--ws { background-position: top -264px left -288px; }
|
||||
|
||||
/* Yx */
|
||||
.flag--ye { background-position: top -288px left -64px; }
|
||||
.flag--yt { background-position: top -288px left -304px; }
|
||||
|
||||
/* Zx */
|
||||
.flag--za { background-position: top -300px left 0; }
|
||||
.flag--zm { background-position: top -300px left -192px; }
|
||||
.flag--zw { background-position: top -300px left -352px; }
|
||||
30
assets/css/misuzu/footer.css
Normal file
30
assets/css/misuzu/footer.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.footer {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.footer__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
.footer__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.footer__wrapper {
|
||||
max-width: var(--site-max-width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.footer__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--header-accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
287
assets/css/misuzu/header.css
Normal file
287
assets/css/misuzu/header.css
Normal file
|
|
@ -0,0 +1,287 @@
|
|||
.header {
|
||||
--header-image-px: 60px;
|
||||
--header-link-margin: 14px;
|
||||
--header-background-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
|
||||
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.header__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--header-accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
mask-image: var(--header-background-mask-image);
|
||||
-webkit-mask-image: var(--header-background-mask-image); /* fuck chrome */
|
||||
}
|
||||
|
||||
/** DESKTOP HEADER **/
|
||||
.header__desktop {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 4px;
|
||||
max-width: var(--site-max-width);
|
||||
height: var(--header-height-desktop);
|
||||
}
|
||||
.header__desktop__logo {
|
||||
flex: 0 0 auto;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background: no-repeat center / cover;
|
||||
background-image: var(--site-logo);
|
||||
width: var(--header-image-px);
|
||||
height: var(--header-image-px);
|
||||
font-size: 0;
|
||||
transition: width .1s, height .1s;
|
||||
}
|
||||
|
||||
.header__desktop__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
padding: 4px 10px;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.header__desktop__link:hover,
|
||||
.header__desktop__link:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
|
||||
.header__desktop__link:active {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.header__desktop__menus {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 100%;
|
||||
}
|
||||
.header__desktop__menu {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.header__desktop__menu__link {
|
||||
margin: var(--header-link-margin) 0;
|
||||
font-size: 1.2em;
|
||||
padding: 6px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header__desktop__submenu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height .2s;
|
||||
left: -5px;
|
||||
top: 50px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.header__desktop__submenu__link {
|
||||
margin: 5px;
|
||||
}
|
||||
.header__desktop__submenu__background {
|
||||
background: var(--header-accent-colour);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.header__desktop__submenu__content {
|
||||
background: var(--background-colour-translucent-9);
|
||||
overflow: hidden;
|
||||
}
|
||||
.header__desktop__menu:hover .header__desktop__submenu,
|
||||
.header__desktop__menu:focus .header__desktop__submenu,
|
||||
.header__desktop__menu:focus-within .header__desktop__submenu,
|
||||
.header__desktop__menu:active .header__desktop__submenu {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.header__desktop__user {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
.header__desktop__user__avatar {
|
||||
width: var(--header-image-px);
|
||||
height: var(--header-image-px);
|
||||
margin-left: 5px;
|
||||
transition: width .1s, height .1s;
|
||||
box-shadow: 0 0 4px #111;
|
||||
}
|
||||
.header__desktop__user__avatar:hover,
|
||||
.header__desktop__user__avatar:focus,
|
||||
.header__desktop__user__avatar:active {
|
||||
box-shadow: inset 0 0 0 1px var(--user-colour), 0 0 4px #111;
|
||||
}
|
||||
.header__desktop__user__button {
|
||||
margin: 2px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
line-height: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transition: background-color .2s;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.header__desktop__user__button:hover,
|
||||
.header__desktop__user__button:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.header__desktop__user__button:active {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
.header__desktop__user__button__count {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
right: 1px;
|
||||
font-size: 10px;
|
||||
background-color: var(--header-accent-colour);
|
||||
opacity: .9;
|
||||
border-radius: 4px;
|
||||
line-height: 12px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/** MOBILE HEADER **/
|
||||
.header__mobile {
|
||||
--header-icon-px: 40px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.header__mobile__icons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: var(--header-height-mobile);
|
||||
padding: 5px;
|
||||
z-index: 100;
|
||||
|
||||
-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;
|
||||
}
|
||||
|
||||
.header__mobile__icon {
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
font-size: 32px;
|
||||
width: var(--header-icon-px);
|
||||
height: var(--header-icon-px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
-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;
|
||||
}
|
||||
|
||||
.header__mobile__logo {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
background: no-repeat center / cover;
|
||||
background-image: var(--site-logo);
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.header__mobile__avatar {
|
||||
transition: box-shadow .2s;
|
||||
box-shadow: 0 0 4px #111;
|
||||
}
|
||||
|
||||
.header__mobile__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header__mobile__menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--header-accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
transition: max-height .2s;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 0 1px 4px #000;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.header__mobile__menu__spacer {
|
||||
height: var(--header-height-mobile);
|
||||
}
|
||||
|
||||
.header__mobile__toggle:checked ~ .header__mobile__menu {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.header__mobile__user {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 5px 5px 3px; /* extra 2px is provided by the buttons */
|
||||
}
|
||||
|
||||
.header__mobile__navigation {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.header__mobile__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
padding-left: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, margin .1s, opacity .1s;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.header__mobile__link:not(:last-child) {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.header__mobile__link--primary {
|
||||
font-size: 1.5em;
|
||||
padding: 10px;
|
||||
}
|
||||
.header__mobile__link--user {
|
||||
margin: 2px;
|
||||
font-size: 1.5em;
|
||||
padding: 10px;
|
||||
}
|
||||
.header__mobile__link:hover,
|
||||
.header__mobile__link:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.header__mobile__link:active {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.header__desktop { display: none; }
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.header__mobile { display: none; }
|
||||
}
|
||||
34
assets/css/misuzu/input/button.css
Normal file
34
assets/css/misuzu/input/button.css
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
.input__button {
|
||||
background-color: var(--background-colour);
|
||||
font-family: var(--font-regular);
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
padding: 5px 10px;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color .2s, background-color .2s, opacity .2s, border-color .2s;
|
||||
color: var(--accent-colour);
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
.input__button:hover, .input__button:active,
|
||||
.input__button:focus, .input__button:checked,
|
||||
.input__button--active, .input__button--checked {
|
||||
color: #111;
|
||||
background-color: var(--accent-colour);
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
.input__button[disabled],
|
||||
.input__button--busy {
|
||||
opacity: .4;
|
||||
}
|
||||
.input__button--autosize { min-width: auto; }
|
||||
.input__button--disabled { --accent-colour: #333; }
|
||||
.input__button--destroy { --accent-colour: #c00; }
|
||||
.input__button--save { --accent-colour: #080; }
|
||||
.input__button--blue { --accent-colour: #09f; }
|
||||
55
assets/css/misuzu/input/checkbox.css
Normal file
55
assets/css/misuzu/input/checkbox.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
.input__checkbox {
|
||||
display: inline-flex;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.input__checkbox:not(.input__checkbox--disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.input__checkbox--radio .input__checkbox__display,
|
||||
.input__checkbox--radio .input__checkbox__display__icon {
|
||||
border-radius: 100%;
|
||||
}
|
||||
.input__checkbox__input {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
top: -100%;
|
||||
}
|
||||
.input__checkbox__display {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #222;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.input__checkbox__display__icon {
|
||||
background-color: var(--accent-colour);
|
||||
background-size: 28px 28px;
|
||||
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .4) 100%);
|
||||
box-shadow: 0 0 2px #111;
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.input__checkbox__input:checked ~ .input__checkbox__display .input__checkbox__display__icon {
|
||||
opacity: 1;
|
||||
}
|
||||
.input__checkbox:not(.input__checkbox--disabled):hover .input__checkbox__display,
|
||||
.input__checkbox:not(.input__checkbox--disabled) .input__checkbox__input:focus ~ .input__checkbox__display {
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
.input__checkbox__text {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.input__checkbox--disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
35
assets/css/misuzu/input/colour.css
Normal file
35
assets/css/misuzu/input/colour.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.input__colour {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #222;
|
||||
background: #222;
|
||||
border-radius: 2px;
|
||||
transition: border-color .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.input__colour:hover,
|
||||
.input__colour:focus,
|
||||
.input__colour:focus-within {
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
.input__colour__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .4) 100%);
|
||||
background-size: 80px 40px;
|
||||
}
|
||||
.input__colour__control {
|
||||
border-width: 0;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
@ -8,9 +8,7 @@
|
|||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
|
||||
&:focus {
|
||||
border-color: @accent-colour;
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
.input__select:focus {
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
14
assets/css/misuzu/input/text.css
Normal file
14
assets/css/misuzu/input/text.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.input__text {
|
||||
font-size: 1.2em;
|
||||
border: 1px solid #222;
|
||||
padding: 5px 10px;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.input__text:focus { border-color: var(--accent-colour); }
|
||||
.input__text--readonly { color: #888; }
|
||||
.input__text--monospace { font-family: var(--font-monospace); }
|
||||
.input__text--centre { text-align: center; }
|
||||
|
|
@ -5,13 +5,9 @@
|
|||
vertical-align: bottom;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
font-family: @mio-font-mono;
|
||||
font-family: var(--font-monospace);
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
|
||||
&:focus {
|
||||
border-color: @accent-colour;
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
.input__textarea:focus { border-color: var(--accent-colour); }
|
||||
28
assets/css/misuzu/input/upload.css
Normal file
28
assets/css/misuzu/input/upload.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.input__upload {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin: 1px 0;
|
||||
}
|
||||
.input__upload__input {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
}
|
||||
.input__upload__selection {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
border: 1px solid #222;
|
||||
padding: 5px 10px;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.input__upload:focus-within .input__upload__selection,
|
||||
.input__upload__input:focus ~ .input__upload__selection,
|
||||
.input__upload__input:active ~ .input__upload__selection {
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
111
assets/css/misuzu/landing.css
Normal file
111
assets/css/misuzu/landing.css
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
.landing {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.landing__container {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.landing__sidebar {
|
||||
width: 300px;
|
||||
margin-right: 2px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.landing__main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.landing__stats__emphasis {
|
||||
font-weight: 700;
|
||||
}
|
||||
.landing__stats__link {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.landing__stats__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.landing__online {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
margin: 6px;
|
||||
}
|
||||
.landing__online__user {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
font-size: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 2px;
|
||||
transition: box-shadow .2s;
|
||||
}
|
||||
.landing__online__user:hover {
|
||||
box-shadow: 0 0 2px var(--user-colour);
|
||||
}
|
||||
|
||||
.landing__statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.landing__statistic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 45%;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.landing__statistic__name {
|
||||
font-size: 1.3em;
|
||||
line-height: 2em;
|
||||
}
|
||||
.landing__statistic__value {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.landing__latest {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
}
|
||||
.landing__latest:focus,
|
||||
.landing__latest:hover {
|
||||
background-color: rgba(34, 34, 34, .6);
|
||||
box-shadow: 0 1px 4px #222;
|
||||
}
|
||||
.landing__latest__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.landing__latest__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 8px;
|
||||
}
|
||||
.landing__latest__username {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.4em;
|
||||
color: var(--user-colour);
|
||||
}
|
||||
.landing__latest__joined {
|
||||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.landing {
|
||||
flex-direction: column;
|
||||
}
|
||||
.landing__sidebar {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
25
assets/css/misuzu/manage/_manage.css
Normal file
25
assets/css/misuzu/manage/_manage.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
.manage {
|
||||
display: flex;
|
||||
}
|
||||
.manage__sidebar {
|
||||
flex: 0 0 auto;
|
||||
width: 280px;
|
||||
}
|
||||
.manage__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.manage__description {
|
||||
font-size: .9em;
|
||||
margin: 1px 2px;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.manage {
|
||||
flex-direction: column;
|
||||
}
|
||||
.manage__sidebar {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
28
assets/css/misuzu/manage/blacklist.css
Normal file
28
assets/css/misuzu/manage/blacklist.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
.manage__blacklist {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.manage__blacklist__form {
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.manage__blacklist__select,
|
||||
.manage__blacklist__textarea {
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
.manage__blacklist__button { margin-top: 1px; }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.manage__blacklist {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
39
assets/css/misuzu/manage/changelog-actions-tags.css
Normal file
39
assets/css/misuzu/manage/changelog-actions-tags.css
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
.changelog-actions-tags {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.changelog-actions-tags__panel--actions {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.changelog-actions-tags__panel--tags {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.changelog-actions-tags__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.changelog-actions-tags__entry {
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
width: 200px;
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.changelog-actions-tags__entry:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.changelog-actions-tags {
|
||||
flex-direction: column;
|
||||
}
|
||||
.changelog-actions-tags__panel--actions {
|
||||
margin-left: 2px;
|
||||
width: 210px;
|
||||
}
|
||||
}
|
||||
17
assets/css/misuzu/manage/emote.css
Normal file
17
assets/css/misuzu/manage/emote.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.manage__emote__field {
|
||||
display: flex;
|
||||
margin: 2px;
|
||||
align-items: center;
|
||||
}
|
||||
.manage__emote__field__name {
|
||||
min-width: 100px;
|
||||
padding: 5px;
|
||||
}
|
||||
.manage__emote__field__value {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.manage__emote__actions {
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
50
assets/css/misuzu/manage/emotes.css
Normal file
50
assets/css/misuzu/manage/emotes.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
.manage__emotes__actions {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.manage__emotes__emoticon {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
.manage__emotes__list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.manage__emotes__entry {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.manage__emotes__entry--header {
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.manage__emotes__entry__id,
|
||||
.manage__emotes__entry__order,
|
||||
.manage__emotes__entry__hierarchy {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.manage__emotes__entry__string {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.manage__emotes__entry__image {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.manage__emotes__entry__actions {
|
||||
min-width: 170px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.manage__emotes__entry__actions .input__button {
|
||||
margin: 1px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
17
assets/css/misuzu/manage/navigation.css
Normal file
17
assets/css/misuzu/manage/navigation.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.manage__navigation {
|
||||
margin: 0 2px 2px;
|
||||
}
|
||||
.manage__navigation__links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.manage__navigation__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 2px 5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.manage__navigation__link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
125
assets/css/misuzu/manage/role-item.css
Normal file
125
assets/css/misuzu/manage/role-item.css
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
.manage__role-item {
|
||||
display: flex;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
box-shadow: 0 1px 4px #000A;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.manage__role-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.manage__role-item__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.manage__role-item__container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 5px;
|
||||
pointer-events: none;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.manage__role-item:hover .manage__role-item__container,
|
||||
.manage__role-item:focus .manage__role-item__container,
|
||||
.manage__role-item:focus-within .manage__role-item__container {
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
}
|
||||
|
||||
.manage__role-item__icon {
|
||||
border-radius: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
box-shadow: 0 1px 4px #111;
|
||||
margin: 10px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.manage__role-item__icon__content {
|
||||
background-color: var(--background-colour-translucent-6);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5em;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.manage__role-item__icon__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.manage__role-item:hover .manage__role-item__icon__content,
|
||||
.manage__role-item:focus .manage__role-item__icon__content,
|
||||
.manage__role-item:focus-within .manage__role-item__icon__content {
|
||||
background-color: var(--background-colour-translucent-4);
|
||||
}
|
||||
|
||||
.manage__role-item__info {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.manage__role-item__name {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.manage__role-item__details {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.manage__role-item__users {
|
||||
border-radius: 10px;
|
||||
background-color: var(--accent-colour);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.manage__role-item__title {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.manage__role-item__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
.manage__role-item__action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 1.5em;
|
||||
border-radius: 2px;
|
||||
margin: 5px;
|
||||
margin-right: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
pointer-events: initial;
|
||||
transition: background-color .2s;
|
||||
text-align: center;
|
||||
}
|
||||
.manage__role-item__action:hover,
|
||||
.manage__role-item__action:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
}
|
||||
.manage__role-item__action:active {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
4
assets/css/misuzu/manage/roles.css
Normal file
4
assets/css/misuzu/manage/roles.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.manage__roles__collection,
|
||||
.manage__roles__pagination {
|
||||
padding: 5px;
|
||||
}
|
||||
14
assets/css/misuzu/manage/statistic.css
Normal file
14
assets/css/misuzu/manage/statistic.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.manage__statistic {
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.manage__statistic__name {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.manage__statistic__value {
|
||||
text-align: right;
|
||||
font-size: 1.5em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
|
@ -3,12 +3,14 @@
|
|||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: 5px;
|
||||
grid-gap: 5px;
|
||||
|
||||
@media (max-width: 900px) {
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.manage__statistics {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.manage__statistics {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
33
assets/css/misuzu/manage/tag.css
Normal file
33
assets/css/misuzu/manage/tag.css
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.manage__tag {
|
||||
border-radius: 2px;
|
||||
border: 1px solid var(--accent-colour);
|
||||
background-color: var(--accent-colour);
|
||||
display: inline-block;
|
||||
}
|
||||
.manage__tag__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.manage__tag:hover .manage__tag__background,
|
||||
.manage__tag:focus .manage__tag__background,
|
||||
.manage__tag:focus-within .manage__tag__background {
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
}
|
||||
.manage__tag__content {
|
||||
margin: 4px;
|
||||
display: flex;
|
||||
}
|
||||
.manage__tag__checkbox {
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.manage__tag__title {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 4px;
|
||||
}
|
||||
18
assets/css/misuzu/manage/tags.css
Normal file
18
assets/css/misuzu/manage/tags.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.manage__tags--fixed {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-flow: row dense;
|
||||
grid-gap: 4px;
|
||||
}
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
.manage__tags--fixed {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media(max-width: 500px) {
|
||||
.manage__tags--fixed {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
108
assets/css/misuzu/manage/user-item.css
Normal file
108
assets/css/misuzu/manage/user-item.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
.manage__user-item {
|
||||
display: flex;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
box-shadow: 0 1px 4px #000A;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.manage__user-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.manage__user-item--deleted {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.manage__user-item--deleted:hover,
|
||||
.manage__user-item--deleted:focus,
|
||||
.manage__user-item--deleted:focus-within {
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.manage__user-item__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.manage__user-item__container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 5px;
|
||||
pointer-events: none;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
.manage__user-item:hover .manage__user-item__container,
|
||||
.manage__user-item:focus .manage__user-item__container,
|
||||
.manage__user-item:focus-within .manage__user-item__container {
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
}
|
||||
|
||||
.manage__user-item__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.manage__user-item__info {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.manage__user-item__name {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.manage__user-item__details {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.manage__user-item__detail {
|
||||
border-radius: 10px;
|
||||
background-color: var(--accent-colour);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
padding: 3px 8px;
|
||||
pointer-events: initial;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.manage__user-item__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.manage__user-item__action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 1.5em;
|
||||
border-radius: 2px;
|
||||
margin: 5px;
|
||||
margin-right: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
pointer-events: initial;
|
||||
transition: background-color .2s;
|
||||
text-align: center;
|
||||
}
|
||||
.manage__user-item__action:hover,
|
||||
.manage__user-item__action:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
.manage__user-item__action:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
17
assets/css/misuzu/manage/user.css
Normal file
17
assets/css/misuzu/manage/user.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
.manage__user__container {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.manage__user__buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.manage__user__button {
|
||||
margin: 5px 2px;
|
||||
}
|
||||
.manage__user__details {
|
||||
margin: 5px;
|
||||
}
|
||||
.manage__user__input {
|
||||
width: 100%;
|
||||
}
|
||||
4
assets/css/misuzu/manage/users.css
Normal file
4
assets/css/misuzu/manage/users.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.manage__users__collection,
|
||||
.manage__users__pagination {
|
||||
padding: 5px;
|
||||
}
|
||||
185
assets/css/misuzu/markdown.css
Normal file
185
assets/css/misuzu/markdown.css
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
.markdown {
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
.markdown a {
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.markdown a:hover { text-decoration: underline; }
|
||||
.markdown a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown p, .markdown blockquote,
|
||||
.markdown ul, .markdown ol,
|
||||
.markdown dl, .markdown table,
|
||||
.markdown pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--font-size);
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 2px;
|
||||
padding: 0;
|
||||
margin: var(--font-size) 0;
|
||||
background-color: var(--accent-colour);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
padding: 0 1em;
|
||||
color: var(--accent-colour);
|
||||
border-left: 0.25em solid var(--accent-colour);
|
||||
}
|
||||
.markdown blockquote > :first-child { margin-top: 0; }
|
||||
.markdown blockquote > :last-child { margin-bottom: 0; }
|
||||
|
||||
.markdown kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #777;
|
||||
vertical-align: middle;
|
||||
background-color: #000;
|
||||
border: solid 1px darken(#333, 4%);
|
||||
border-bottom-color: #444;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #444;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
padding: .2em .4em;
|
||||
margin: 0;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.markdown del code { text-decoration: inherit; }
|
||||
|
||||
.markdown pre code {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
line-height: inherit;
|
||||
word-wrap: break-word;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
word-wrap: normal;
|
||||
}
|
||||
.markdown pre > code {
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.markdown h1, .markdown h2,
|
||||
.markdown h3, .markdown h4,
|
||||
.markdown h5, .markdown h6 {
|
||||
margin-top: calc(var(--font-size) * 1.2);
|
||||
margin-bottom: var(--font-size);
|
||||
font-weight: 700;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.markdown h1 tt, .markdown h2 tt,
|
||||
.markdown h3 tt, .markdown h4 tt,
|
||||
.markdown h5 tt, .markdown h6 tt,
|
||||
.markdown h1 code, .markdown h2 code,
|
||||
.markdown h3 code, .markdown h4 code,
|
||||
.markdown h5 code, .markdown h6 code {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
}
|
||||
.markdown h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
}
|
||||
.markdown h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.markdown h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
.markdown h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
.markdown h6 {
|
||||
font-size: 0.85em;
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
box-sizing: content-box;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
.markdown img[align=right] { padding-left: 20px; }
|
||||
.markdown img[align=left] { padding-right: 20px; }
|
||||
|
||||
.markdown ul, .markdown ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.markdown ul ul,
|
||||
.markdown ul ol,
|
||||
.markdown ol ol,
|
||||
.markdown ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown li { word-wrap: break-all; }
|
||||
.markdown li > p { margin-top: var(--font-size); }
|
||||
.markdown li + li { margin-top: .25em; }
|
||||
|
||||
.markdown dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown dl dt {
|
||||
padding: 0;
|
||||
margin-top: var(--font-size);
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.markdown dl dd {
|
||||
padding: 0 var(--font-size);
|
||||
margin-bottom: var(--font-size);
|
||||
}
|
||||
|
||||
.markdown table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
.markdown table th {
|
||||
font-weight: 700;
|
||||
}
|
||||
.markdown table th,
|
||||
.markdown table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid var(--accent-colour);
|
||||
}
|
||||
.markdown table tr {
|
||||
background-color: var(--background-colour);
|
||||
border-top: 1px solid var(--accent-colour);
|
||||
}
|
||||
.markdown table tr:nth-child(2n) {
|
||||
background-image: linear-gradient(0deg, var(--background-colour-translucent-9), var(--background-colour-translucent-9));
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
.markdown table img {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -7,17 +7,14 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: @background-colour-translucent-8;
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
z-index: 9000;
|
||||
|
||||
&__container {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.messagebox__container {
|
||||
min-width: 300px;
|
||||
}
|
||||
.messagebox__buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
}
|
||||
85
assets/css/misuzu/navigation.css
Normal file
85
assets/css/misuzu/navigation.css
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
.navigation {
|
||||
margin: 2px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-width: 0;
|
||||
border-color: var(--text-colour);
|
||||
border-style: solid;
|
||||
border-top-width: 1px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.navigation--top {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.navigation--top .navigation__option {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.navigation__option {
|
||||
list-style: none;
|
||||
background-color: #c9bbcc;
|
||||
border: 1px solid var(--text-colour);
|
||||
border-top-width: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.navigation__option:not(:first-child) { border-left-width: 0; }
|
||||
.navigation__option--selected {
|
||||
background-color: var(--accent-colour);
|
||||
top: -1px;
|
||||
}
|
||||
.navigation__option--selected:not(:first-child) {
|
||||
margin-left: -1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.navigation__link {
|
||||
display: block;
|
||||
padding: 2px 1em;
|
||||
color: var(--text-colour);
|
||||
text-decoration: none;
|
||||
}
|
||||
.navigation__link:hover, .navigation__link:focus { color: #609; }
|
||||
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.navigation {
|
||||
border: none;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.navigation--left {
|
||||
justify-content: left;
|
||||
padding-left: 25px;
|
||||
}
|
||||
.navigation--right {
|
||||
justify-content: right;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.navigation--top .navigation__option--selected { top: 1px; }
|
||||
|
||||
.navigation__link {
|
||||
padding: 10px 15px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.navigation__option {
|
||||
background-color: var(--accent-colour);
|
||||
width: 100%;
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.navigation__option--selected {
|
||||
background-color: #a586c3;
|
||||
top: 0;
|
||||
}
|
||||
.navigation__option--selected .navigation__link {
|
||||
padding: 3px 1em;
|
||||
}
|
||||
}
|
||||
57
assets/css/misuzu/pagination.css
Normal file
57
assets/css/misuzu/pagination.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination__section {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: auto;
|
||||
flex: 0 0 auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-colour) var(--background-colour);
|
||||
}
|
||||
.pagination__section--pages {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.pagination__section:not(:last-child) {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.pagination__link {
|
||||
display: flex;
|
||||
min-width: 40px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
padding: 3px 10px 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: var(--background-colour);
|
||||
color: var(--accent-colour);
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, color .2s;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
.pagination__link:not(:last-child) { margin-right: 1px; }
|
||||
.pagination__link--disabled { --accent-colour: #555; }
|
||||
.pagination__link--first, .pagination__link--last,
|
||||
.pagination__link--next, .pagination__link--prev {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pagination__link--current,
|
||||
.pagination__link:not(.pagination__link--disabled):hover,
|
||||
.pagination__link:not(.pagination__link--disabled):active,
|
||||
.pagination__link:not(.pagination__link--disabled):focus {
|
||||
background-color: var(--accent-colour);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.pagination__section--pages { display: none; }
|
||||
}
|
||||
61
assets/css/misuzu/permissions.css
Normal file
61
assets/css/misuzu/permissions.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
.permissions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.permissions__line {
|
||||
display: flex;
|
||||
font-size: .9em;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
.permissions__line--header {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
padding-bottom: 1px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.permissions__line--header:not(:first-child) { margin-top: 4px; }
|
||||
|
||||
.permissions__title {
|
||||
flex: 1 1 auto;
|
||||
padding: 4px;
|
||||
}
|
||||
.permissions__line:not(.permissions__line--header) .permissions__title {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.permissions__choice {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
}
|
||||
.permissions__choice--radio { justify-content: center; }
|
||||
.permissions__choice--yes { --accent-colour: #0a0; }
|
||||
.permissions__choice--no { --accent-colour: #a00; }
|
||||
.permissions__choice--never { --accent-colour: #400; }
|
||||
|
||||
.permissions__choice__wrapper {
|
||||
border-left: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.permissions__line {
|
||||
flex-wrap: wrap;
|
||||
justify-content: right;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.permissions__line:not(.permissions__line--header) .permissions__title {
|
||||
width: 100%;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.permissions__choice {
|
||||
border-left-width: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.permissions__choice--yes { border-left-width: 0; }
|
||||
}
|
||||
170
assets/css/misuzu/user/usercard.css
Normal file
170
assets/css/misuzu/user/usercard.css
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
.usercard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow .5s;
|
||||
z-index: 1;
|
||||
color: #fff;
|
||||
background-color: var(--background-colour);
|
||||
box-shadow: 0 1px 2px #000A;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
overflow: hidden;
|
||||
flex: 1 1 auto;
|
||||
|
||||
--usercard-header-overlay-start: transparent;
|
||||
--usercard-header-overlay-stop: var(--background-colour-translucent-9);
|
||||
}
|
||||
.usercard:hover {
|
||||
box-shadow: 0 1px 4px #000;
|
||||
z-index: 2;
|
||||
}
|
||||
.usercard__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--accent-colour) var(--background-pattern);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.usercard__header {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.usercard__header__link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.usercard__header__avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.usercard__header__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-image: linear-gradient(0deg, var(--usercard-header-overlay-stop), var(--usercard-header-overlay-start));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.usercard__header__details {
|
||||
margin: 0 10px;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.usercard__header__relation {
|
||||
font-variant: all-small-caps;
|
||||
background: var(--usercard-header-overlay-stop);
|
||||
border-radius: 2px;
|
||||
line-height: 1.2em;
|
||||
padding: 1px 5px 4px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.usercard__header__username {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
.usercard__header__title {
|
||||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.usercard__header__country {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.usercard__header__country__name {
|
||||
font-size: .9em;
|
||||
margin-left: 4px;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.usercard__container {
|
||||
flex: 1 1 auto;
|
||||
background-color: var(--usercard-header-overlay-stop);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.usercard__dates {
|
||||
font-size: .9em;
|
||||
line-height: 1em;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.usercard__date {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.usercard__stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-end;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.usercard__stat {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 5px 10px;
|
||||
cursor: default;
|
||||
flex: 0 0 auto;
|
||||
text-align: right;
|
||||
}
|
||||
.usercard__stat[href] {
|
||||
cursor: pointer;
|
||||
}
|
||||
.usercard__stat[href]:hover,
|
||||
.usercard__stat[href]:focus {
|
||||
border-bottom: 2px solid var(--accent-colour);
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.usercard__stat__name {
|
||||
font-size: .9em;
|
||||
font-variant: small-caps;
|
||||
cursor: inherit;
|
||||
}
|
||||
.usercard__stat__value {
|
||||
font-size: 1.3em;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.usercard__actions {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
height: 38px;
|
||||
}
|
||||
.usercard__action {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
transition: background-color .2s;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.usercard__action:hover,
|
||||
.usercard__action:focus { background-color: rgba(255, 255, 255, .2); }
|
||||
.usercard__action:active { background-color: rgba(255, 255, 255, .1); }
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.usercard__header__details {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
66
assets/css/misuzu/user/userlist.css
Normal file
66
assets/css/misuzu/user/userlist.css
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
.userlist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 2px;
|
||||
}
|
||||
.userlist__item {
|
||||
margin: 2px;
|
||||
width: 300px;
|
||||
display: flex;
|
||||
}
|
||||
.userlist__empty {
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
margin: 1em;
|
||||
}
|
||||
.userlist__container {
|
||||
padding: 5px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.userlist__navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
}
|
||||
.userlist__pagination {
|
||||
max-width: 500px;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.userlist__sorting {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.userlist__select {
|
||||
margin: 0 2px;
|
||||
background: inherit;
|
||||
box-shadow: initial;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
background: var(--background-colour-translucent-9);
|
||||
color: var(--text-colour);
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.userlist__navigation {
|
||||
flex-direction: column;
|
||||
}
|
||||
.userlist__pagination {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.userlist__sorting {
|
||||
flex-direction: column;
|
||||
}
|
||||
.userlist__select:not(:first-child) {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
24
assets/css/misuzu/warning.css
Normal file
24
assets/css/misuzu/warning.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
.warning {
|
||||
--start-colour: yellow;
|
||||
--end-colour: black;
|
||||
|
||||
background-image: repeating-linear-gradient(-45deg, var(--start-colour), var(--start-colour) 10px, var(--end-colour) 10px, var(--end-colour) 20px);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
margin: 2px 0;
|
||||
padding: 2px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.warning__content {
|
||||
background-color: rgba(17, 17, 17, .9);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
.warning__link {
|
||||
color: inherit;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
.warning__link:hover,
|
||||
.warning__link:active,
|
||||
.warning__link:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
0
assets/js/misuzu/_msz.js
Normal file
0
assets/js/misuzu/_msz.js
Normal file
|
|
@ -1,10 +0,0 @@
|
|||
@keyframes background-slide {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 100% 100%;
|
||||
background-position: var(--background-width) var(--background-height);
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
&__container {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
flex: 0 1 auto;
|
||||
padding: 5px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
.changelog-actions-tags {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__panel {
|
||||
|
||||
&--actions {
|
||||
flex: 0 0 auto;
|
||||
|
||||
@media (min-width: @site-mobile-width) {
|
||||
margin-left: 2px;
|
||||
width: 210px;
|
||||
}
|
||||
}
|
||||
|
||||
&--tags {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
width: 200px;
|
||||
border: 1px solid @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
padding: 0 2px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
margin: 2px 0;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
|
@ -31,23 +31,19 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, @background-colour 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: @background-pattern;
|
||||
background-color: @accent-colour;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
|
||||
@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: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
|
|
@ -65,7 +61,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -76,7 +72,7 @@
|
|||
height: 60px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
|
@ -103,7 +99,7 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -134,22 +130,19 @@
|
|||
margin-top: 10px;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin-top: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tag {
|
||||
border: 1px solid @accent-colour;
|
||||
background-color: @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
background-color: var(--accent-colour);
|
||||
margin: 1px;
|
||||
border-radius: 2px;
|
||||
|
||||
&__link {
|
||||
background-color: @background-colour-translucent-9;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
display: flex;
|
||||
margin: 5px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
|
|
@ -15,8 +15,6 @@
|
|||
&__action {
|
||||
--action-colour: inherit;
|
||||
|
||||
background-color: @accent-colour;
|
||||
color: @user-colour;
|
||||
background-color: var(--action-colour);
|
||||
color: var(--user-colour);
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -43,7 +41,7 @@
|
|||
min-width: 100px;
|
||||
padding-left: 4px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +56,7 @@
|
|||
padding-right: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -69,7 +67,7 @@
|
|||
flex: 1 1 auto;
|
||||
margin-left: 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +89,6 @@
|
|||
}
|
||||
|
||||
&__tag {
|
||||
border: 1px solid @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
margin-right: 1px;
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 1px 3px;
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
.changelog__log {
|
||||
--action-colour: var(--accent-colour);
|
||||
|
||||
border: 1px solid @accent-colour;
|
||||
background-color: @accent-colour;
|
||||
border: 1px solid var(--action-colour);
|
||||
background-color: var(--action-colour);
|
||||
display: flex;
|
||||
|
|
@ -13,8 +11,6 @@
|
|||
&__action {
|
||||
display: block;
|
||||
padding: 6px 2px;
|
||||
background-color: @accent-colour;
|
||||
border-right: 1px solid @accent-colour;
|
||||
background-color: var(--action-colour);
|
||||
border-right: 1px solid var(--action-colour);
|
||||
writing-mode: sideways-lr;
|
||||
|
|
|
|||
|
|
@ -1,173 +0,0 @@
|
|||
.comment {
|
||||
margin: 10px;
|
||||
|
||||
&__reply-toggle {
|
||||
display: none;
|
||||
|
||||
&:checked ~ .comment--reply {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--reply {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--deleted > &__container {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
&__mention {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
font-size: .9em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__action {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
&--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&--post {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&--button {
|
||||
cursor: pointer;
|
||||
font: 12px/20px @mio-font-regular;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&--hide {
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
&--voted {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
vertical-align: text-top;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__replies {
|
||||
&--indent {
|
||||
&-1, &-2, &-3, &-4, &-5 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.comment__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
flex: 0 0 auto;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
padding-left: 5px;
|
||||
|
||||
&:hover {
|
||||
.comment__action--hide {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
&__text {
|
||||
margin-right: 2px;
|
||||
|
||||
&--input {
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 50px;
|
||||
font: 12px/20px @mio-font-regular;
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__user {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
|
||||
&--link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__date,
|
||||
&__pin {
|
||||
color: #666;
|
||||
font-size: .9em;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: #666;
|
||||
display: inline-flex;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__pin {
|
||||
&:before {
|
||||
content: "-";
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.comments {
|
||||
margin: 1px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
|
||||
&__listing {
|
||||
overflow-y: auto;
|
||||
|
||||
&--limit {
|
||||
--comments-max-height: 600px;
|
||||
max-height: 600px;
|
||||
max-height: var(--comments-max-height);
|
||||
}
|
||||
}
|
||||
|
||||
//&__input,
|
||||
&__javascript,
|
||||
&__notice--staff {
|
||||
border-bottom: 1px solid @accent-colour;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding-bottom: 1px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
&__none,
|
||||
&__javascript,
|
||||
&__notice {
|
||||
padding: 10px;
|
||||
font-size: 1.2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__notice__link {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
.confirm {
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
&__message {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
padding: 5px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
.container {
|
||||
background-color: @container-colour;
|
||||
background-color: var(--container-colour);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 0 1px 4px #000;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
|
||||
&--lazy {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
&__text {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
padding: 8px 10px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
|
||||
-webkit-mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
|
||||
mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: @background-pattern;
|
||||
background: var(--background-pattern);
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
||||
&__content { // only use this for text going forward, just throw your child container in directly after __title
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,288 +0,0 @@
|
|||
@flag-width: 16px;
|
||||
@flag-height: 11px;
|
||||
|
||||
.flag-position(@x, @y) {
|
||||
background-position: top -((@flag-height + 1) * @x) left -(@flag-width * @y);
|
||||
}
|
||||
|
||||
.flag {
|
||||
display: inline-block;
|
||||
width: @flag-width;
|
||||
height: @flag-height;
|
||||
background-image: url('/images/flag-sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
font-size: 0;
|
||||
.flag-position(23, 23); // xx
|
||||
|
||||
&__container {
|
||||
min-width: @flag-width;
|
||||
min-height: @flag-height;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&--ad {.flag-position(0, 3);}
|
||||
&--ae {.flag-position(0, 4);}
|
||||
&--af {.flag-position(0, 5);}
|
||||
&--ag {.flag-position(0, 6);}
|
||||
&--ai {.flag-position(0, 8);}
|
||||
&--al {.flag-position(0, 11);}
|
||||
&--am {.flag-position(0, 12);}
|
||||
&--an {.flag-position(0, 13);}
|
||||
&--ao {.flag-position(0, 14);}
|
||||
&--ar {.flag-position(0, 17);}
|
||||
&--as {.flag-position(0, 18);}
|
||||
&--at {.flag-position(0, 19);}
|
||||
&--au {.flag-position(0, 20);}
|
||||
&--aw {.flag-position(0, 22);}
|
||||
&--ax {.flag-position(0, 23);}
|
||||
&--az {.flag-position(0, 25);}
|
||||
|
||||
&--ba {.flag-position(1, 0);}
|
||||
&--bb {.flag-position(1, 1);}
|
||||
&--bd {.flag-position(1, 3);}
|
||||
&--be {.flag-position(1, 4);}
|
||||
&--bf {.flag-position(1, 5);}
|
||||
&--bg {.flag-position(1, 6);}
|
||||
&--bh {.flag-position(1, 7);}
|
||||
&--bi {.flag-position(1, 8);}
|
||||
&--bj {.flag-position(1, 9);}
|
||||
&--bm {.flag-position(1, 12);}
|
||||
&--bn {.flag-position(1, 13);}
|
||||
&--bo {.flag-position(1, 14);}
|
||||
&--br {.flag-position(1, 17);}
|
||||
&--bs {.flag-position(1, 18);}
|
||||
&--bt {.flag-position(1, 19);}
|
||||
&--bv {.flag-position(1, 21);}
|
||||
&--bw {.flag-position(1, 22);}
|
||||
&--by {.flag-position(1, 24);}
|
||||
&--bz {.flag-position(1, 25);}
|
||||
|
||||
&--ca {.flag-position(2, 0);}
|
||||
&--cc {.flag-position(2, 2);}
|
||||
&--cd {.flag-position(2, 3);}
|
||||
&--cf {.flag-position(2, 5);}
|
||||
&--cg {.flag-position(2, 6);}
|
||||
&--ch {.flag-position(2, 7); width: 11px;}
|
||||
&--ci {.flag-position(2, 8);}
|
||||
&--ck {.flag-position(2, 10);}
|
||||
&--cl {.flag-position(2, 11);}
|
||||
&--cm {.flag-position(2, 12);}
|
||||
&--cn {.flag-position(2, 13);}
|
||||
&--co {.flag-position(2, 14);}
|
||||
&--cr {.flag-position(2, 17);}
|
||||
&--cs {.flag-position(2, 18);}
|
||||
&--cu {.flag-position(2, 20);}
|
||||
&--cv {.flag-position(2, 21);}
|
||||
&--cx {.flag-position(2, 23);}
|
||||
&--cy {.flag-position(2, 24);}
|
||||
&--cz {.flag-position(2, 25);}
|
||||
|
||||
&--de {.flag-position(3, 4);}
|
||||
&--dj {.flag-position(3, 9);}
|
||||
&--dk {.flag-position(3, 10);}
|
||||
&--dm {.flag-position(3, 12);}
|
||||
&--do {.flag-position(3, 14);}
|
||||
&--dz {.flag-position(3, 25);}
|
||||
|
||||
&--ec {.flag-position(4, 2);}
|
||||
&--ee {.flag-position(4, 4);}
|
||||
&--eg {.flag-position(4, 6);}
|
||||
&--eh {.flag-position(4, 7);}
|
||||
&--er {.flag-position(4, 17);}
|
||||
&--es {.flag-position(4, 18);}
|
||||
&--et {.flag-position(4, 19);}
|
||||
|
||||
&--fi {.flag-position(5, 8);}
|
||||
&--fj {.flag-position(5, 9);}
|
||||
&--fk {.flag-position(5, 10);}
|
||||
&--fm {.flag-position(5, 12);}
|
||||
&--fo {.flag-position(5, 14);}
|
||||
&--fr {.flag-position(5, 17);}
|
||||
|
||||
&--ga {.flag-position(6, 0);}
|
||||
&--gb {.flag-position(6, 1);}
|
||||
&--gd {.flag-position(6, 3);}
|
||||
&--ge {.flag-position(6, 4);}
|
||||
&--gf {.flag-position(6, 5);}
|
||||
&--gh {.flag-position(6, 7);}
|
||||
&--gi {.flag-position(6, 8);}
|
||||
&--gl {.flag-position(6, 11);}
|
||||
&--gm {.flag-position(6, 12);}
|
||||
&--gn {.flag-position(6, 13);}
|
||||
&--gp {.flag-position(6, 15);}
|
||||
&--gq {.flag-position(6, 16);}
|
||||
&--gr {.flag-position(6, 17);}
|
||||
&--gs {.flag-position(6, 18);}
|
||||
&--gt {.flag-position(6, 19);}
|
||||
&--gu {.flag-position(6, 20);}
|
||||
&--gw {.flag-position(6, 22);}
|
||||
&--gy {.flag-position(6, 24);}
|
||||
|
||||
&--hk {.flag-position(7, 10);}
|
||||
&--hm {.flag-position(7, 12);}
|
||||
&--hn {.flag-position(7, 13);}
|
||||
&--hr {.flag-position(7, 17);}
|
||||
&--ht {.flag-position(7, 19);}
|
||||
&--hu {.flag-position(7, 20);}
|
||||
|
||||
&--id {.flag-position(8, 3);}
|
||||
&--ie {.flag-position(8, 4);}
|
||||
&--il {.flag-position(8, 11);}
|
||||
&--in {.flag-position(8, 13);}
|
||||
&--io {.flag-position(8, 14);}
|
||||
&--iq {.flag-position(8, 16);}
|
||||
&--ir {.flag-position(8, 17);}
|
||||
&--is {.flag-position(8, 18);}
|
||||
&--it {.flag-position(8, 19);}
|
||||
|
||||
&--jm {.flag-position(9, 12);}
|
||||
&--jo {.flag-position(9, 14);}
|
||||
&--jp {.flag-position(9, 15);}
|
||||
|
||||
&--ke {.flag-position(10, 4);}
|
||||
&--kg {.flag-position(10, 6);}
|
||||
&--kh {.flag-position(10, 7);}
|
||||
&--ki {.flag-position(10, 8);}
|
||||
&--km {.flag-position(10, 12);}
|
||||
&--kn {.flag-position(10, 13);}
|
||||
&--kp {.flag-position(10, 15);}
|
||||
&--kr {.flag-position(10, 17);}
|
||||
&--kw {.flag-position(10, 22);}
|
||||
&--ky {.flag-position(10, 24);}
|
||||
&--kz {.flag-position(10, 25);}
|
||||
|
||||
&--la {.flag-position(11, 0);}
|
||||
&--lb {.flag-position(11, 1);}
|
||||
&--lc {.flag-position(11, 2);}
|
||||
&--li {.flag-position(11, 8);}
|
||||
&--lk {.flag-position(11, 10);}
|
||||
&--lr {.flag-position(11, 17);}
|
||||
&--ls {.flag-position(11, 18);}
|
||||
&--lt {.flag-position(11, 19);}
|
||||
&--lu {.flag-position(11, 20);}
|
||||
&--lv {.flag-position(11, 21);}
|
||||
&--ly {.flag-position(11, 24);}
|
||||
|
||||
&--ma {.flag-position(12, 0);}
|
||||
&--mc {.flag-position(12, 2);}
|
||||
&--md {.flag-position(12, 3);}
|
||||
&--me {.flag-position(12, 4); height: 12px;}
|
||||
&--mg {.flag-position(12, 6);}
|
||||
&--mh {.flag-position(12, 7);}
|
||||
&--mk {.flag-position(12, 10);}
|
||||
&--ml {.flag-position(12, 11);}
|
||||
&--mm {.flag-position(12, 12);}
|
||||
&--mn {.flag-position(12, 13);}
|
||||
&--mo {.flag-position(12, 14);}
|
||||
&--mp {.flag-position(12, 15);}
|
||||
&--mq {.flag-position(12, 16);}
|
||||
&--mr {.flag-position(12, 17);}
|
||||
&--ms {.flag-position(12, 18);}
|
||||
&--mt {.flag-position(12, 19);}
|
||||
&--mu {.flag-position(12, 20);}
|
||||
&--mv {.flag-position(12, 21);}
|
||||
&--mw {.flag-position(12, 22);}
|
||||
&--mx {.flag-position(12, 23);}
|
||||
&--my {.flag-position(12, 24);}
|
||||
&--mz {.flag-position(12, 25);}
|
||||
|
||||
&--na {.flag-position(13, 0);}
|
||||
&--nc {.flag-position(13, 2);}
|
||||
&--ne {.flag-position(13, 4);}
|
||||
&--nf {.flag-position(13, 5);}
|
||||
&--ng {.flag-position(13, 6);}
|
||||
&--ni {.flag-position(13, 8);}
|
||||
&--nl {.flag-position(13, 11);}
|
||||
&--no {.flag-position(13, 14);}
|
||||
&--np {.flag-position(13, 15); width: 9px;}
|
||||
&--nr {.flag-position(13, 17);}
|
||||
&--nu {.flag-position(13, 20);}
|
||||
&--nz {.flag-position(13, 25);}
|
||||
|
||||
&--ok {.flag-position(14, 10);}
|
||||
|
||||
&--pa {.flag-position(15, 0);}
|
||||
&--pe {.flag-position(15, 4);}
|
||||
&--pf {.flag-position(15, 5);}
|
||||
&--pg {.flag-position(15, 6);}
|
||||
&--ph {.flag-position(15, 7);}
|
||||
&--pk {.flag-position(15, 10);}
|
||||
&--pl {.flag-position(15, 11);}
|
||||
&--pm {.flag-position(15, 12);}
|
||||
&--pn {.flag-position(15, 13);}
|
||||
&--pr {.flag-position(15, 17);}
|
||||
&--ps {.flag-position(15, 18);}
|
||||
&--pt {.flag-position(15, 19);}
|
||||
&--pw {.flag-position(15, 22);}
|
||||
&--py {.flag-position(15, 24);}
|
||||
|
||||
&--qa {.flag-position(16, 0);}
|
||||
|
||||
&--re {.flag-position(17, 4);}
|
||||
&--ro {.flag-position(17, 14);}
|
||||
&--rs {.flag-position(17, 18);}
|
||||
&--ru {.flag-position(17, 20);}
|
||||
&--rw {.flag-position(17, 22);}
|
||||
|
||||
&--sa {.flag-position(18, 0);}
|
||||
&--sb {.flag-position(18, 1);}
|
||||
&--sc {.flag-position(18, 2);}
|
||||
&--sd {.flag-position(18, 3);}
|
||||
&--se {.flag-position(18, 4);}
|
||||
&--sg {.flag-position(18, 6);}
|
||||
&--sh {.flag-position(18, 7);}
|
||||
&--si {.flag-position(18, 8);}
|
||||
&--sj {.flag-position(18, 9);}
|
||||
&--sk {.flag-position(18, 10);}
|
||||
&--sl {.flag-position(18, 11);}
|
||||
&--sm {.flag-position(18, 12);}
|
||||
&--sn {.flag-position(18, 13);}
|
||||
&--so {.flag-position(18, 14);}
|
||||
&--sr {.flag-position(18, 17);}
|
||||
&--st {.flag-position(18, 19);}
|
||||
&--sv {.flag-position(18, 21);}
|
||||
&--sy {.flag-position(18, 24);}
|
||||
&--sz {.flag-position(18, 25);}
|
||||
|
||||
&--tc {.flag-position(19, 2);}
|
||||
&--td {.flag-position(19, 3);}
|
||||
&--tf {.flag-position(19, 5);}
|
||||
&--tg {.flag-position(19, 6);}
|
||||
&--th {.flag-position(19, 7);}
|
||||
&--tj {.flag-position(19, 9);}
|
||||
&--tk {.flag-position(19, 10);}
|
||||
&--tl {.flag-position(19, 11);}
|
||||
&--tm {.flag-position(19, 12);}
|
||||
&--tn {.flag-position(19, 13);}
|
||||
&--to {.flag-position(19, 14);}
|
||||
&--tr {.flag-position(19, 17);}
|
||||
&--tt {.flag-position(19, 19);}
|
||||
&--tv {.flag-position(19, 21);}
|
||||
&--tw {.flag-position(19, 22);}
|
||||
&--tz {.flag-position(19, 25);}
|
||||
|
||||
&--ua {.flag-position(20, 0);}
|
||||
&--ug {.flag-position(20, 6);}
|
||||
&--um {.flag-position(20, 12);}
|
||||
&--us {.flag-position(20, 18);}
|
||||
&--uy {.flag-position(20, 24);}
|
||||
&--uz {.flag-position(20, 25);}
|
||||
|
||||
&--va {.flag-position(21, 0);}
|
||||
&--vc {.flag-position(21, 2);}
|
||||
&--ve {.flag-position(21, 4);}
|
||||
&--vg {.flag-position(21, 6);}
|
||||
&--vi {.flag-position(21, 8);}
|
||||
&--vn {.flag-position(21, 13);}
|
||||
&--vu {.flag-position(21, 20);}
|
||||
|
||||
&--wf {.flag-position(22, 5);}
|
||||
&--ws {.flag-position(22, 18);}
|
||||
|
||||
&--ye {.flag-position(24, 4);}
|
||||
&--yt {.flag-position(24, 19);}
|
||||
|
||||
&--za {.flag-position(25, 0);}
|
||||
&--zm {.flag-position(25, 12);}
|
||||
&--zw {.flag-position(25, 22);}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.footer {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
max-width: @site-max-width;
|
||||
max-width: var(--site-max-width);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: .9em;
|
||||
line-height: 1.5em;
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
|
||||
mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg, transparent 10%, var(--background-colour) 100%);
|
||||
background: @background-pattern;
|
||||
background: var(--background-pattern);
|
||||
background-color: @header-accent-colour;
|
||||
background-color: var(--header-accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
max-width: 100%;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
min-height: 50px;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +58,6 @@
|
|||
padding-bottom: 1px; // fixes centering
|
||||
|
||||
&--unread {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
|
@ -71,7 +70,7 @@
|
|||
flex-direction: column;
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-basis: calc(100% - 100px);
|
||||
}
|
||||
}
|
||||
|
|
@ -92,7 +91,6 @@
|
|||
&__subforum {
|
||||
padding: 2px;
|
||||
pointer-events: initial;
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -116,7 +114,7 @@
|
|||
min-width: 100px;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-start;
|
||||
|
|
@ -135,7 +133,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
|
@ -146,7 +144,7 @@
|
|||
min-width: 270px;
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
min-width: 100%;
|
||||
|
||||
&--empty {
|
||||
|
|
@ -159,7 +157,7 @@
|
|||
margin: 0 8px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin: 1px 4px 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -169,13 +167,12 @@
|
|||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
&__post {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
|
|
@ -188,7 +185,7 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex: 1 0 auto;
|
||||
text-align: left;
|
||||
max-width: 120px;
|
||||
|
|
@ -196,14 +193,13 @@
|
|||
}
|
||||
|
||||
&__info {
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
|
|
@ -222,7 +218,7 @@
|
|||
height: 40px;
|
||||
pointer-events: initial;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@
|
|||
}
|
||||
|
||||
&__breadcrumb {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
padding: 2px 5px;
|
||||
|
|
@ -50,7 +49,6 @@
|
|||
}
|
||||
|
||||
&__separator {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
margin: 0 4px;
|
||||
font-size: .9em;
|
||||
|
|
@ -70,7 +68,6 @@
|
|||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
margin: 4px 0;
|
||||
border: 1px solid @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
width: 100%;
|
||||
|
||||
|
|
@ -67,7 +66,6 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: @accent-colour;
|
||||
background: var(--accent-colour);
|
||||
opacity: .2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin: 4px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.3em;
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
|
|
@ -97,23 +97,19 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, @background-colour 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: @background-pattern;
|
||||
background-color: @accent-colour;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
mask-image: linear-gradient(0deg, transparent 10%, @background-colour 100%);
|
||||
@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: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
|
|
@ -124,7 +120,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
|
@ -141,7 +137,7 @@
|
|||
font-size: .9em;
|
||||
justify-self: flex-end;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -152,7 +148,7 @@
|
|||
width: 120px;
|
||||
height: 120px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 4px;
|
||||
|
|
@ -169,7 +165,7 @@
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex: 1 1 auto;
|
||||
text-align: left;
|
||||
margin: 0 4px;
|
||||
|
|
@ -181,7 +177,7 @@
|
|||
line-height: 1.5em;
|
||||
margin-bottom: 4px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -192,7 +188,7 @@
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -237,7 +233,6 @@
|
|||
}
|
||||
|
||||
&__badge {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
|
|
@ -246,7 +241,7 @@
|
|||
margin: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: auto;
|
||||
padding: 2px 10px;
|
||||
margin: 0;
|
||||
|
|
@ -258,7 +253,7 @@
|
|||
&__desktop {
|
||||
display: block;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -266,7 +261,7 @@
|
|||
&__mobile {
|
||||
display: none;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
margin-right: -.9em;
|
||||
opacity: .6;
|
||||
text-shadow: 0 1px 1px #000;
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
transition: text-shadow .2s;
|
||||
|
||||
|
|
|
|||
|
|
@ -20,11 +20,8 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(270deg, transparent 10%, @background-colour 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: @background-pattern;
|
||||
background-color: @accent-colour;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
min-height: 40px;
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -78,7 +78,6 @@
|
|||
}
|
||||
|
||||
&--unread {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
|
|
@ -119,7 +118,7 @@
|
|||
line-height: 1.5em;
|
||||
overflow: hidden;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
|
@ -146,7 +145,7 @@
|
|||
min-width: 80px;
|
||||
flex-direction: column;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
min-width: initial;
|
||||
border-left-width: 0;
|
||||
align-self: flex-start;
|
||||
|
|
@ -167,7 +166,7 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
font-size: 1em;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
|
@ -180,7 +179,7 @@
|
|||
min-width: 200px;
|
||||
line-height: 1.5em;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -191,7 +190,7 @@
|
|||
margin: 0 8px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin: 1px 4px 0;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
|
@ -199,7 +198,6 @@
|
|||
}
|
||||
|
||||
&__post {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
|
|
@ -215,7 +213,6 @@
|
|||
}
|
||||
|
||||
&__username {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
pointer-events: initial;
|
||||
|
|
@ -234,7 +231,7 @@
|
|||
height: 30px;
|
||||
pointer-events: initial;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -245,7 +242,7 @@
|
|||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
|
||||
@media (min-width: @site-mobile-width) {
|
||||
@media (min-width: 800px) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -253,7 +250,7 @@
|
|||
&__separator {
|
||||
margin: 0 8px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -274,7 +271,7 @@
|
|||
border-radius: 2px;
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
min-width: 30px;
|
||||
height: 30px;
|
||||
font-size: 1.2em;
|
||||
|
|
|
|||
|
|
@ -1,331 +0,0 @@
|
|||
@header-image-px: 60px;
|
||||
@header-link-margin: 14px;
|
||||
@header-icon-px: 40px;
|
||||
|
||||
.header {
|
||||
--header-image-px: @header-image-px;
|
||||
--header-link-margin: @header-link-margin;
|
||||
--header-background-mask-image: linear-gradient(180deg, @background-colour 0, transparent 100%);
|
||||
--header-background-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @background-pattern;
|
||||
background-color: @header-accent-colour;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--header-accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
mask-image: var(--header-background-mask-image);
|
||||
-webkit-mask-image: var(--header-background-mask-image); // fuck chrome
|
||||
}
|
||||
|
||||
&__desktop {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 4px;
|
||||
max-width: @site-max-width;
|
||||
height: @header-height-desktop;
|
||||
max-width: var(--site-max-width);
|
||||
height: var(--header-height-desktop);
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
flex: 0 0 auto;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background: no-repeat center / cover;
|
||||
background-image: @site-logo;
|
||||
width: @header-image-px;
|
||||
height: @header-image-px;
|
||||
background-image: var(--site-logo);
|
||||
width: var(--header-image-px);
|
||||
height: var(--header-image-px);
|
||||
font-size: 0;
|
||||
transition: width .1s, height .1s;
|
||||
}
|
||||
|
||||
&__menus {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
min-width: 100px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
padding: 4px 10px;
|
||||
transition: background-color .2s;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&__menu {
|
||||
margin: 0 5px;
|
||||
|
||||
&__link {
|
||||
margin: @header-link-margin 0;
|
||||
margin: var(--header-link-margin) 0;
|
||||
font-size: 1.2em;
|
||||
padding: 6px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__submenu {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
transition: max-height .2s;
|
||||
left: -5px;
|
||||
top: 50px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
|
||||
&__link {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
&__background {
|
||||
background: @header-accent-colour;
|
||||
background: var(--header-accent-colour);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&__content {
|
||||
background: @background-colour-translucent-9;
|
||||
background: var(--background-colour-translucent-9);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__menu:hover &__submenu,
|
||||
&__menu:focus &__submenu,
|
||||
&__menu:focus-within &__submenu,
|
||||
&__menu:active &__submenu {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
&__user {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
&__avatar {
|
||||
width: @header-image-px;
|
||||
height: @header-image-px;
|
||||
width: var(--header-image-px);
|
||||
height: var(--header-image-px);
|
||||
margin-left: 5px;
|
||||
transition: width .1s, height .1s;
|
||||
box-shadow: 0 0 4px #111;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: inset 0 0 0 1px @user-colour, 0 0 4px #111;
|
||||
box-shadow: inset 0 0 0 1px var(--user-colour), 0 0 4px #111;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin: 2px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: 1.5em;
|
||||
line-height: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transition: background-color .2s;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
|
||||
&__count {
|
||||
position: absolute;
|
||||
bottom: 1px;
|
||||
right: 1px;
|
||||
font-size: 10px;
|
||||
background-color: @header-accent-colour;
|
||||
background-color: var(--header-accent-colour);
|
||||
opacity: .9;
|
||||
border-radius: 4px;
|
||||
line-height: 12px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__mobile {
|
||||
--header-icon-px: @header-icon-px;
|
||||
display: block;
|
||||
|
||||
@media (min-width: @site-mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__icons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: @header-height-mobile;
|
||||
height: var(--header-height-mobile);
|
||||
padding: 5px;
|
||||
z-index: 100;
|
||||
|
||||
-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;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
flex: 0 0 auto;
|
||||
cursor: pointer;
|
||||
font-size: 32px;
|
||||
width: @header-icon-px;
|
||||
height: @header-icon-px;
|
||||
width: var(--header-icon-px);
|
||||
height: var(--header-icon-px);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
-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;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
background: no-repeat center / cover;
|
||||
background-image: @site-logo;
|
||||
background-image: var(--site-logo);
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
transition: box-shadow .2s;
|
||||
box-shadow: 0 0 4px #111;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
background: @background-pattern;
|
||||
background-color: @header-accent-colour;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--header-accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
transition: max-height .2s;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
|
||||
text-shadow: 0 1px 4px #000;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&__spacer {
|
||||
height: @header-height-mobile;
|
||||
height: var(--header-height-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
&__toggle:checked ~ &__menu {
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 5px 5px 3px; // extra 2px is provided by the buttons
|
||||
}
|
||||
|
||||
&__navigation {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 8px;
|
||||
padding-left: 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, margin .1s, opacity .1s;
|
||||
font-size: 1.2em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
font-size: 1.5em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&--user {
|
||||
margin: 2px;
|
||||
font-size: 1.5em;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.home {
|
||||
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
.input__button {
|
||||
background-color: @background-colour;
|
||||
background-color: var(--background-colour);
|
||||
font-family: @mio-font-regular;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
padding: 5px 10px;
|
||||
min-width: 80px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color .2s, background-color .2s, opacity .2s, border-color .2s;
|
||||
color: var(--accent-colour);
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&--active,
|
||||
&:focus,
|
||||
&:checked,
|
||||
&--checked {
|
||||
color: #111;
|
||||
background-color: @accent-colour;
|
||||
border-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&--autosize {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
&--busy {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
--accent-colour: #333;
|
||||
}
|
||||
|
||||
&--destroy {
|
||||
--accent-colour: #c00;
|
||||
}
|
||||
|
||||
&--save {
|
||||
--accent-colour: #080;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
--accent-colour: #09f;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.input__checkbox {
|
||||
display: inline-flex;
|
||||
margin: 1px 0;
|
||||
overflow: hidden;
|
||||
|
||||
&:not(&--disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&--radio &__display,
|
||||
&--radio &__display__icon {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&__input {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
top: -100%;
|
||||
}
|
||||
|
||||
&__display {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #222;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
|
||||
&__icon {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
background-size: 28px 28px;
|
||||
background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
|
||||
box-shadow: 0 0 2px #111;
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
}
|
||||
|
||||
&__input:checked ~ &__display &__display__icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:not(&--disabled):hover &__display,
|
||||
&:not(&--disabled) &__input:focus ~ &__display {
|
||||
border-color: @accent-colour;
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&__text {
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.input__colour {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #222;
|
||||
background: #222;
|
||||
border-radius: 2px;
|
||||
transition: border-color .2s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
border-color: @accent-colour;
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
background-image: radial-gradient(ellipse at center, fade(#fff, 20%) 0%, fade(#000, 40%) 100%);
|
||||
background-size: 80px 40px;
|
||||
}
|
||||
|
||||
&__control {
|
||||
border-width: 0;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@import "button";
|
||||
@import "checkbox";
|
||||
@import "colour";
|
||||
@import "select";
|
||||
@import "text";
|
||||
@import "textarea";
|
||||
@import "upload";
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
.input__text {
|
||||
font-size: 1.2em;
|
||||
border: 1px solid #222;
|
||||
padding: 5px 10px;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
|
||||
&:focus {
|
||||
border-color: @accent-colour;
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&--readonly {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
&--monospace {
|
||||
font-family: @mio-font-mono;
|
||||
}
|
||||
|
||||
&--centre {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
.input__upload {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin: 1px 0;
|
||||
|
||||
&__input {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
}
|
||||
|
||||
&__selection {
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
border: 1px solid #222;
|
||||
padding: 5px 10px;
|
||||
background: #222;
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 4px #111;
|
||||
transition: border-color .2s;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
&:focus-within &__selection,
|
||||
&__input:focus ~ &__selection,
|
||||
&__input:active ~ &__selection {
|
||||
border-color: @accent-colour;
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
.landing {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__container {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
width: 300px;
|
||||
margin-right: 2px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__stats {
|
||||
&__emphasis {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__online {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
margin: 6px;
|
||||
|
||||
&__user {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
text-decoration: none;
|
||||
font-size: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin: 2px;
|
||||
transition: box-shadow .2s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 2px @user-colour;
|
||||
box-shadow: 0 0 2px var(--user-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__statistics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__statistic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 45%;
|
||||
padding: 4px 0;
|
||||
|
||||
&__name {
|
||||
font-size: 1.3em;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
&__value {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&__latest {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
margin: 4px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, box-shadow .2s;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: fade(#222, 60%);
|
||||
box-shadow: 0 1px 4px #222;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
&__username {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.4em;
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
}
|
||||
|
||||
&__joined {
|
||||
font-size: .9em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
.link {
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,185 +1,10 @@
|
|||
@mio-font-regular: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
|
||||
@mio-font-mono: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
|
||||
@site-mobile-width: 800px;
|
||||
@font-size: 12px;
|
||||
@line-height: 20px;
|
||||
|
||||
@site-max-width: 1200px;
|
||||
@site-logo: url('/images/logos/imouto-default.png');
|
||||
|
||||
@header-height-desktop: 70px;
|
||||
@header-height-mobile: 50px;
|
||||
|
||||
@background-image: initial;
|
||||
@background-colour: #111;
|
||||
@background-colour-translucent-1: fade(@background-colour, 10%);
|
||||
@background-colour-translucent-2: fade(@background-colour, 20%);
|
||||
@background-colour-translucent-3: fade(@background-colour, 30%);
|
||||
@background-colour-translucent-4: fade(@background-colour, 40%);
|
||||
@background-colour-translucent-5: fade(@background-colour, 50%);
|
||||
@background-colour-translucent-6: fade(@background-colour, 60%);
|
||||
@background-colour-translucent-7: fade(@background-colour, 70%);
|
||||
@background-colour-translucent-8: fade(@background-colour, 80%);
|
||||
@background-colour-translucent-9: fade(@background-colour, 90%);
|
||||
@background-pattern: url('/images/clouds.png') fixed;
|
||||
|
||||
@container-colour: #161616;
|
||||
|
||||
@text-colour: #fff;
|
||||
@text-colour-inverted: #000;
|
||||
|
||||
@user-colour: inherit;
|
||||
@user-header: url('/images/pixel.png');
|
||||
@accent-colour: #8559a5;
|
||||
@header-accent-colour: #8559a5;
|
||||
|
||||
:root {
|
||||
--site-max-width: @site-max-width;
|
||||
--site-logo: @site-logo;
|
||||
|
||||
--header-height-desktop: @header-height-desktop;
|
||||
--header-height-mobile: @header-height-mobile;
|
||||
|
||||
--background-image: @background-image;
|
||||
--background-colour: @background-colour;
|
||||
--background-colour-translucent-1: @background-colour-translucent-1;
|
||||
--background-colour-translucent-2: @background-colour-translucent-2;
|
||||
--background-colour-translucent-3: @background-colour-translucent-3;
|
||||
--background-colour-translucent-4: @background-colour-translucent-4;
|
||||
--background-colour-translucent-5: @background-colour-translucent-5;
|
||||
--background-colour-translucent-6: @background-colour-translucent-6;
|
||||
--background-colour-translucent-7: @background-colour-translucent-7;
|
||||
--background-colour-translucent-8: @background-colour-translucent-8;
|
||||
--background-colour-translucent-9: @background-colour-translucent-9;
|
||||
--background-pattern: @background-pattern;
|
||||
|
||||
--container-colour: @container-colour;
|
||||
|
||||
--text-colour: @text-colour;
|
||||
--text-colour-inverted: @text-colour-inverted;
|
||||
|
||||
--user-colour: @user-colour;
|
||||
--user-header: @user-header;
|
||||
--accent-colour: @accent-colour;
|
||||
--header-accent-colour: var(--accent-colour);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
outline-style: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-color: @accent-colour @background-colour;
|
||||
scrollbar-color: var(--accent-colour) var(--background-colour);
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-image: @background-image;
|
||||
background-image: var(--background-image);
|
||||
background-color: @background-colour;
|
||||
background-color: var(--background-colour);
|
||||
font: @font-size/@line-height @mio-font-regular;
|
||||
color: @text-colour;
|
||||
color: var(--text-colour);
|
||||
background-attachment: fixed;
|
||||
background-position: center center;
|
||||
|
||||
&__wrapper {
|
||||
max-width: @site-max-width;
|
||||
max-width: var(--site-max-width);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
&--bg-blend {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
||||
&--bg-slide {
|
||||
animation: background-slide infinite linear 2s;
|
||||
}
|
||||
|
||||
&--bg-cover {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&--bg-contain {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&--bg-stretch {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
&--bg-tile {
|
||||
background-size: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Just in case.
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
// Misc
|
||||
@import "animations";
|
||||
@import "link";
|
||||
@import "markdown";
|
||||
|
||||
// Input elements
|
||||
@import "input/input";
|
||||
|
||||
// Base styles
|
||||
@import "avatar";
|
||||
@import "container";
|
||||
@import "emoticon";
|
||||
@import "flag";
|
||||
@import "navigation";
|
||||
@import "pagination";
|
||||
@import "warning";
|
||||
@import "messagebox";
|
||||
|
||||
// Specific styles
|
||||
@import "header";
|
||||
@import "footer";
|
||||
@import "permissions";
|
||||
@import "confirm";
|
||||
|
||||
// Main page styling
|
||||
@import "home";
|
||||
@import "landing";
|
||||
|
||||
@import "auth/auth";
|
||||
@import "manage/manage";
|
||||
@import "profile/profile";
|
||||
|
||||
@import "changelog/changelog";
|
||||
@import "changelog-actions-tags"; // move this into something in the manage dir
|
||||
|
||||
@import "settings/settings";
|
||||
@import "news/news";
|
||||
@import "forum/forum";
|
||||
|
||||
@import "usercard";
|
||||
@import "userlist";
|
||||
|
||||
@import "comment"; // entries
|
||||
@import "comments"; // listing
|
||||
|
||||
@import "search/search";
|
||||
|
|
|
|||
|
|
@ -1,31 +0,0 @@
|
|||
.manage__blacklist {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__form {
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__select,
|
||||
&__textarea {
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
font-family: monospace;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.manage__emote {
|
||||
|
||||
&__field {
|
||||
display: flex;
|
||||
margin: 2px;
|
||||
align-items: center;
|
||||
|
||||
&__name {
|
||||
min-width: 100px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
&__value {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__actions {
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
.manage__emotes {
|
||||
|
||||
&__actions {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&__emoticon {
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
&__list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__entry {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 2px;
|
||||
text-align: center;
|
||||
|
||||
&--header {
|
||||
border-bottom: 1px solid @accent-colour;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
&__id,
|
||||
&__order,
|
||||
&__hierarchy {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
&__string {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
&__image {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
min-width: 170px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.input__button {
|
||||
margin: 1px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.manage {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&__sidebar {
|
||||
flex: 0 0 auto;
|
||||
width: 280px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__description {
|
||||
font-size: .9em;
|
||||
margin: 1px 2px;
|
||||
border-bottom: 1px solid @accent-colour;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding: 2px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@import "blacklist";
|
||||
@import "emote";
|
||||
@import "emotes";
|
||||
@import "navigation";
|
||||
@import "role-item";
|
||||
@import "roles";
|
||||
@import "tag";
|
||||
@import "tags";
|
||||
@import "user-item";
|
||||
@import "user";
|
||||
@import "users";
|
||||
@import "statistic";
|
||||
@import "statistics";
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
.manage__navigation {
|
||||
margin: 0 2px 2px;
|
||||
|
||||
&__links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
&__link {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
padding: 2px 5px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
.manage__role-item {
|
||||
display: flex;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
box-shadow: 0 1px 4px #000A;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background-color: @background-colour-translucent-9;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 5px;
|
||||
pointer-events: none;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
&:hover &__container,
|
||||
&:focus &__container,
|
||||
&:focus-within &__container {
|
||||
background-color: @background-colour-translucent-8;
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
border-radius: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
box-shadow: 0 1px 4px #111;
|
||||
margin: 10px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
&__content {
|
||||
background-color: @background-colour-translucent-6;
|
||||
background-color: var(--background-colour-translucent-6);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 1.5em;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &__icon__content,
|
||||
&:focus &__icon__content,
|
||||
&:focus-within &__icon__content {
|
||||
background-color: @background-colour-translucent-4;
|
||||
background-color: var(--background-colour-translucent-4);
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
&__details {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
&__users {
|
||||
border-radius: 10px;
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 1.5em;
|
||||
border-radius: 2px;
|
||||
margin: 5px;
|
||||
margin-right: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
pointer-events: initial;
|
||||
transition: background-color .2s;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.manage__roles {
|
||||
|
||||
&__collection,
|
||||
&__pagination {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.manage__statistic {
|
||||
border: 1px solid @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
padding: 2px 5px;
|
||||
|
||||
&__name {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
&__value {
|
||||
text-align: right;
|
||||
font-size: 1.5em;
|
||||
line-height: 2em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.manage__tag {
|
||||
border-radius: 2px;
|
||||
border: 1px solid @accent-colour;
|
||||
background-color: @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
background-color: var(--accent-colour);
|
||||
display: inline-block;
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @background-colour-translucent-9;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
&:hover &__background,
|
||||
&:focus &__background,
|
||||
&:focus-within &__background {
|
||||
background-color: @background-colour-translucent-8;
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin: 4px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&__checkbox {
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
.manage__tags {
|
||||
|
||||
&--fixed {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-auto-flow: row dense;
|
||||
grid-gap: 4px;
|
||||
|
||||
@media(max-width: 1000px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
.manage__user-item {
|
||||
display: flex;
|
||||
text-shadow: 0 1px 4px #000;
|
||||
box-shadow: 0 1px 4px #000A;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&--deleted {
|
||||
opacity: .5;
|
||||
transition: opacity .2s;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
&__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
background-color: @background-colour-translucent-9;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: 5px;
|
||||
pointer-events: none;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
|
||||
&:hover &__container,
|
||||
&:focus &__container,
|
||||
&:focus-within &__container {
|
||||
background-color: @background-colour-translucent-8;
|
||||
background-color: var(--background-colour-translucent-8);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&__info {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-size: 1.4em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
&__details {
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__detail {
|
||||
border-radius: 10px;
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
box-shadow: 0 1px 4px #111;
|
||||
padding: 3px 8px;
|
||||
pointer-events: initial;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
&__action {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 1.5em;
|
||||
border-radius: 2px;
|
||||
margin: 5px;
|
||||
margin-right: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
pointer-events: initial;
|
||||
transition: background-color .2s;
|
||||
text-align: center;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: fade(#fff, 20%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
.manage__user {
|
||||
|
||||
&__container {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
&__buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin: 5px 2px;
|
||||
}
|
||||
|
||||
&__details {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
.manage__users {
|
||||
|
||||
&__collection,
|
||||
&__pagination {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,232 +0,0 @@
|
|||
.markdown {
|
||||
line-height: 1.7em;
|
||||
|
||||
a {
|
||||
.link();
|
||||
}
|
||||
|
||||
a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p,
|
||||
blockquote,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
table,
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: @font-size;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
padding: 0;
|
||||
margin: @font-size 0;
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding: 0 1em;
|
||||
color: var(--accent-colour);
|
||||
border-left: 0.25em solid @accent-colour;
|
||||
border-left: 0.25em solid var(--accent-colour);
|
||||
|
||||
> :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #777;
|
||||
vertical-align: middle;
|
||||
background-color: #000;
|
||||
border: solid 1px darken(#333, 4%);
|
||||
border-bottom-color: #444;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #444;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: .2em .4em;
|
||||
margin: 0;
|
||||
background-color: fade(#000, 67%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
del code {
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
line-height: inherit;
|
||||
word-wrap: break-word;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
word-wrap: normal;
|
||||
|
||||
> code {
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: @font-size * 1.2;
|
||||
margin-bottom: @font-size;
|
||||
font-weight: 700;
|
||||
line-height: 1em;
|
||||
|
||||
tt,
|
||||
code {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid @accent-colour;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid @accent-colour;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 0.85em;
|
||||
color: @accent-colour;
|
||||
color: var(--accent-colour);
|
||||
}
|
||||
|
||||
img {
|
||||
box-sizing: content-box;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
&[align=right] {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&[align=left] {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ul ul,
|
||||
ul ol,
|
||||
ol ol,
|
||||
ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
word-wrap: break-all;
|
||||
}
|
||||
|
||||
li > p {
|
||||
margin-top: @font-size;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-top: .25em;
|
||||
}
|
||||
|
||||
dl {
|
||||
padding: 0;
|
||||
|
||||
dt {
|
||||
padding: 0;
|
||||
margin-top: @font-size;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
dd {
|
||||
padding: 0 @font-size;
|
||||
margin-bottom: @font-size;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
|
||||
th {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: @background-colour;
|
||||
border-top: 1px solid @accent-colour;
|
||||
background-color: var(--background-colour);
|
||||
border-top: 1px solid var(--accent-colour);
|
||||
|
||||
&:nth-child(2n) {
|
||||
background-image: linear-gradient(0deg, @background-colour-translucent-9, @background-colour-translucent-9);
|
||||
background-color: @accent-colour;
|
||||
background-image: linear-gradient(0deg, var(--background-colour-translucent-9), var(--background-colour-translucent-9));
|
||||
background-color: var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
@mio-navigation-mobile: 1000px;
|
||||
|
||||
.navigation {
|
||||
margin: 2px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
border-width: 0;
|
||||
border-color: @text-colour;
|
||||
border-color: var(--text-colour);
|
||||
border-style: solid;
|
||||
border-top-width: 1px;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: @mio-navigation-mobile) {
|
||||
border: none;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (min-width: @mio-navigation-mobile) {
|
||||
&--left {
|
||||
justify-content: left;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
justify-content: right;
|
||||
padding-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&--top {
|
||||
border-top-width: 0;
|
||||
border-bottom-width: 1px;
|
||||
align-items: flex-end;
|
||||
|
||||
.navigation__option {
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
|
||||
@media (min-width: @mio-navigation-mobile) {
|
||||
&--selected {
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__option {
|
||||
list-style: none;
|
||||
background-color: #c9bbcc;
|
||||
border: 1px solid @text-colour;
|
||||
border: 1px solid var(--text-colour);
|
||||
border-top-width: 0;
|
||||
flex-grow: 0;
|
||||
|
||||
@media (max-width: @mio-navigation-mobile) {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
width: 100%;
|
||||
border: none;
|
||||
flex-grow: 1;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
top: -1px;
|
||||
|
||||
@media (max-width: @mio-navigation-mobile) {
|
||||
background-color: #a586c3;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-left: -1px;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
@media (min-width: @mio-navigation-mobile) {
|
||||
.navigation__link {
|
||||
padding: 3px 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: block;
|
||||
padding: 2px 1em;
|
||||
color: @text-colour;
|
||||
color: var(--text-colour);
|
||||
text-decoration: none;
|
||||
|
||||
@media (max-width: @mio-navigation-mobile) {
|
||||
padding: 10px 15px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #609;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
.news__container {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
margin-bottom: 2px;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
|
|
@ -31,23 +31,19 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(90deg, transparent 10%, @background-colour 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: @background-pattern;
|
||||
background-color: @accent-colour;
|
||||
background: var(--background-pattern);
|
||||
background-color: var(--accent-colour);
|
||||
background-blend-mode: multiply;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
|
||||
@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: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
|
|
@ -65,7 +61,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -76,7 +72,7 @@
|
|||
height: 60px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
--user-colour: var(--accent-colour);
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
flex: 0 0 auto;
|
||||
margin-right: 4px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
text-align: left;
|
||||
|
|
@ -33,21 +33,19 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
mask-image: linear-gradient(90deg, transparent 10%, @background-colour 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: @site-mobile-width) {
|
||||
mask-image: linear-gradient(180deg, transparent 10%, @background-colour 100%);
|
||||
@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: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -74,7 +72,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
@ -85,7 +83,7 @@
|
|||
height: 60px;
|
||||
margin-right: 10px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
flex-shrink: 0;
|
||||
margin-left: 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
|
|
|
|||
|
|
@ -1,75 +0,0 @@
|
|||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
|
||||
&__section {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
overflow: auto;
|
||||
flex: 0 0 auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: @accent-colour @background-colour;
|
||||
scrollbar-color: var(--accent-colour) var(--background-colour);
|
||||
|
||||
&--pages {
|
||||
flex-shrink: 1;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__link {
|
||||
display: flex;
|
||||
min-width: 40px;
|
||||
font-size: 1.2em;
|
||||
line-height: 1.5em;
|
||||
padding: 3px 10px 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @background-colour;
|
||||
color: @accent-colour;
|
||||
border: 1px solid @accent-colour;
|
||||
background-color: var(--background-colour);
|
||||
color: var(--accent-colour);
|
||||
border: 1px solid var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
transition: background-color .2s, color .2s;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1 0 auto;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
--accent-colour: #555;
|
||||
}
|
||||
|
||||
&--first,
|
||||
&--last,
|
||||
&--next,
|
||||
&--prev {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
&--current,
|
||||
&:not(&--disabled):hover,
|
||||
&:not(&--disabled):active,
|
||||
&:not(&--disabled):focus {
|
||||
background-color: @accent-colour;
|
||||
color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
color: var(--background-colour);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
.permissions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 4px;
|
||||
|
||||
&__line {
|
||||
display: flex;
|
||||
font-size: .9em;
|
||||
line-height: 1.7em;
|
||||
|
||||
&--header {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4em;
|
||||
border-bottom: 1px solid fade(#fff, 10%);
|
||||
padding-bottom: 1px;
|
||||
font-weight: 700;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: right;
|
||||
border-bottom: 1px solid fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1 1 auto;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&__line:not(&__line--header) &__title {
|
||||
border-bottom: 1px solid fade(#fff, 10%);
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
width: 100%;
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__choice {
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
padding: 4px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
border-left-width: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&--radio {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&--yes {
|
||||
--accent-colour: #0a0;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--no {
|
||||
--accent-colour: #a00;
|
||||
}
|
||||
|
||||
&--never {
|
||||
--accent-colour: #400;
|
||||
}
|
||||
|
||||
&__wrapper {
|
||||
border-left: 1px solid fade(#fff, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
justify-content: space-evenly;
|
||||
padding: 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
|
@ -21,7 +21,6 @@
|
|||
line-height: 1.5em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 1px solid @accent-colour;
|
||||
border-bottom: 1px solid var(--accent-colour);
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,17 +3,14 @@
|
|||
flex-direction: column;
|
||||
margin-bottom: 2px;
|
||||
color: #fff;
|
||||
background-color: @background-colour;
|
||||
background-color: var(--background-colour);
|
||||
|
||||
@profile-header-overlay-start: transparent;
|
||||
--profile-header-overlay-start: @profile-header-overlay-start;
|
||||
@profile-header-overlay-stop: @background-colour-translucent-9;
|
||||
--profile-header-overlay-start: transparent;
|
||||
--profile-header-overlay-stop: var(--background-colour-translucent-9);
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
height: auto;
|
||||
background-size: @site-mobile-width auto;
|
||||
background-size: 800px auto;
|
||||
background-position: center top;
|
||||
}
|
||||
|
||||
|
|
@ -23,7 +20,6 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @accent-colour @background-pattern;
|
||||
background: var(--accent-colour) var(--background-pattern);
|
||||
background-blend-mode: multiply;
|
||||
}
|
||||
|
|
@ -33,7 +29,6 @@
|
|||
}
|
||||
|
||||
&--has-header &__background {
|
||||
background: @user-header center / cover no-repeat;
|
||||
background: var(--user-header) center / cover no-repeat;
|
||||
background-blend-mode: unset;
|
||||
}
|
||||
|
|
@ -50,7 +45,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
|
@ -62,8 +57,6 @@
|
|||
|
||||
&__check:checked ~ &__option {
|
||||
color: #111;
|
||||
background-color: @accent-colour;
|
||||
border-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
border-color: var(--accent-colour);
|
||||
}
|
||||
|
|
@ -91,21 +84,19 @@
|
|||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 20px;
|
||||
background-image: linear-gradient(0deg, @profile-header-overlay-stop, @profile-header-overlay-start);
|
||||
background-image: linear-gradient(0deg, var(--profile-header-overlay-stop), var(--profile-header-overlay-start));
|
||||
|
||||
&__content {
|
||||
margin: 5px 10px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
&__relation {
|
||||
font-variant: all-small-caps;
|
||||
background: @profile-header-overlay-stop;
|
||||
background: var(--profile-header-overlay-stop);
|
||||
border-radius: 2px;
|
||||
line-height: 1.2em;
|
||||
|
|
@ -113,7 +104,7 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
|
@ -121,13 +112,12 @@
|
|||
|
||||
&__options {
|
||||
min-height: 62px;
|
||||
background-color: @profile-header-overlay-stop;
|
||||
background-color: var(--profile-header-overlay-stop);
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -136,7 +126,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -144,7 +134,7 @@
|
|||
&__action {
|
||||
margin-right: 5px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
|
|
@ -154,7 +144,7 @@
|
|||
&__stats {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -192,7 +182,7 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
&--date &__value {
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -202,13 +192,11 @@
|
|||
&--link:focus,
|
||||
&--link:active,
|
||||
&--active {
|
||||
border-bottom: 2px solid @accent-colour;
|
||||
border-bottom: 2px solid var(--accent-colour);
|
||||
}
|
||||
}
|
||||
|
||||
&__username {
|
||||
color: @user-colour;
|
||||
color: var(--user-colour);
|
||||
font-size: 2em;
|
||||
line-height: 1.5em;
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@
|
|||
max-width: 300px;
|
||||
margin-right: 2px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.profile__warning {
|
||||
margin: 2px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid @accent-colour;
|
||||
border: 1px solid var(--accent-colour);
|
||||
|
||||
&__container {
|
||||
|
|
@ -25,7 +24,6 @@
|
|||
}
|
||||
|
||||
&__background {
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -35,12 +33,11 @@
|
|||
}
|
||||
|
||||
&__content {
|
||||
background-color: @background-colour-translucent-9;
|
||||
background-color: var(--background-colour-translucent-9);
|
||||
display: flex;
|
||||
padding: 1px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
|
@ -55,7 +52,6 @@
|
|||
|
||||
&__type {
|
||||
min-width: 80px;
|
||||
background-color: @accent-colour;
|
||||
background-color: var(--accent-colour);
|
||||
border-radius: 1px;
|
||||
padding: 0 4px;
|
||||
|
|
@ -73,7 +69,6 @@
|
|||
}
|
||||
|
||||
&__private {
|
||||
border-top: 1px solid @accent-colour;
|
||||
border-top: 1px solid var(--accent-colour);
|
||||
margin-top: 1px;
|
||||
width: 100%;
|
||||
|
|
@ -91,7 +86,7 @@
|
|||
display: flex;
|
||||
padding-bottom: 1px;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
@ -102,7 +97,7 @@
|
|||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: @site-mobile-width) {
|
||||
@media (max-width: 800px) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue