diff --git a/assets/css/misuzu/_msz.css b/assets/css/misuzu/_msz.css new file mode 100644 index 00000000..1c753248 --- /dev/null +++ b/assets/css/misuzu/_msz.css @@ -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; } + diff --git a/assets/css/misuzu/animations.css b/assets/css/misuzu/animations.css new file mode 100644 index 00000000..a40481fd --- /dev/null +++ b/assets/css/misuzu/animations.css @@ -0,0 +1,4 @@ +@keyframes background-slide { + 0% { background-position: 0 0; } + 100% { background-position: var(--background-width) var(--background-height); } +} diff --git a/assets/less/avatar.less b/assets/css/misuzu/avatar.css similarity index 87% rename from assets/less/avatar.less rename to assets/css/misuzu/avatar.css index 1fa7ba61..0813d080 100644 --- a/assets/less/avatar.less +++ b/assets/css/misuzu/avatar.css @@ -1,6 +1,5 @@ .avatar { flex-shrink: 0; - background-color: @background-colour; background-color: var(--background-colour); display: block; border: 0; diff --git a/assets/css/misuzu/comments/comment.css b/assets/css/misuzu/comments/comment.css new file mode 100644 index 00000000..671b5d34 --- /dev/null +++ b/assets/css/misuzu/comments/comment.css @@ -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; +} diff --git a/assets/css/misuzu/comments/comments.css b/assets/css/misuzu/comments/comments.css new file mode 100644 index 00000000..8b381303 --- /dev/null +++ b/assets/css/misuzu/comments/comments.css @@ -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; +} diff --git a/assets/css/misuzu/confirm.css b/assets/css/misuzu/confirm.css new file mode 100644 index 00000000..543edca8 --- /dev/null +++ b/assets/css/misuzu/confirm.css @@ -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; } diff --git a/assets/css/misuzu/container.css b/assets/css/misuzu/container.css new file mode 100644 index 00000000..c1a47326 --- /dev/null +++ b/assets/css/misuzu/container.css @@ -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; +} diff --git a/assets/less/emoticon.less b/assets/css/misuzu/emoticon.css similarity index 100% rename from assets/less/emoticon.less rename to assets/css/misuzu/emoticon.css diff --git a/assets/css/misuzu/flags.css b/assets/css/misuzu/flags.css new file mode 100644 index 00000000..4a741be5 --- /dev/null +++ b/assets/css/misuzu/flags.css @@ -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; } diff --git a/assets/css/misuzu/footer.css b/assets/css/misuzu/footer.css new file mode 100644 index 00000000..6c4d1548 --- /dev/null +++ b/assets/css/misuzu/footer.css @@ -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; +} diff --git a/assets/css/misuzu/header.css b/assets/css/misuzu/header.css new file mode 100644 index 00000000..d96878f2 --- /dev/null +++ b/assets/css/misuzu/header.css @@ -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; } +} diff --git a/assets/css/misuzu/input/button.css b/assets/css/misuzu/input/button.css new file mode 100644 index 00000000..510ed076 --- /dev/null +++ b/assets/css/misuzu/input/button.css @@ -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; } diff --git a/assets/css/misuzu/input/checkbox.css b/assets/css/misuzu/input/checkbox.css new file mode 100644 index 00000000..57bf77b1 --- /dev/null +++ b/assets/css/misuzu/input/checkbox.css @@ -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; +} diff --git a/assets/css/misuzu/input/colour.css b/assets/css/misuzu/input/colour.css new file mode 100644 index 00000000..07500c46 --- /dev/null +++ b/assets/css/misuzu/input/colour.css @@ -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; +} diff --git a/assets/less/input/select.less b/assets/css/misuzu/input/select.css similarity index 70% rename from assets/less/input/select.less rename to assets/css/misuzu/input/select.css index 3832d4b1..2aa1d7bd 100644 --- a/assets/less/input/select.less +++ b/assets/css/misuzu/input/select.css @@ -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); } diff --git a/assets/css/misuzu/input/text.css b/assets/css/misuzu/input/text.css new file mode 100644 index 00000000..7f642a97 --- /dev/null +++ b/assets/css/misuzu/input/text.css @@ -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; } diff --git a/assets/less/input/textarea.less b/assets/css/misuzu/input/textarea.css similarity index 65% rename from assets/less/input/textarea.less rename to assets/css/misuzu/input/textarea.css index 190ec4a8..bc3efe6c 100644 --- a/assets/less/input/textarea.less +++ b/assets/css/misuzu/input/textarea.css @@ -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); } diff --git a/assets/css/misuzu/input/upload.css b/assets/css/misuzu/input/upload.css new file mode 100644 index 00000000..95876845 --- /dev/null +++ b/assets/css/misuzu/input/upload.css @@ -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); +} diff --git a/assets/css/misuzu/landing.css b/assets/css/misuzu/landing.css new file mode 100644 index 00000000..49db2b96 --- /dev/null +++ b/assets/css/misuzu/landing.css @@ -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; + } +} diff --git a/assets/css/misuzu/manage/_manage.css b/assets/css/misuzu/manage/_manage.css new file mode 100644 index 00000000..f97f4645 --- /dev/null +++ b/assets/css/misuzu/manage/_manage.css @@ -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%; + } +} diff --git a/assets/css/misuzu/manage/blacklist.css b/assets/css/misuzu/manage/blacklist.css new file mode 100644 index 00000000..de5b0e4b --- /dev/null +++ b/assets/css/misuzu/manage/blacklist.css @@ -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; + } +} diff --git a/assets/css/misuzu/manage/changelog-actions-tags.css b/assets/css/misuzu/manage/changelog-actions-tags.css new file mode 100644 index 00000000..6d9a7ef2 --- /dev/null +++ b/assets/css/misuzu/manage/changelog-actions-tags.css @@ -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; + } +} \ No newline at end of file diff --git a/assets/css/misuzu/manage/emote.css b/assets/css/misuzu/manage/emote.css new file mode 100644 index 00000000..485291b4 --- /dev/null +++ b/assets/css/misuzu/manage/emote.css @@ -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; +} diff --git a/assets/css/misuzu/manage/emotes.css b/assets/css/misuzu/manage/emotes.css new file mode 100644 index 00000000..c4f9b7fa --- /dev/null +++ b/assets/css/misuzu/manage/emotes.css @@ -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; +} + diff --git a/assets/css/misuzu/manage/navigation.css b/assets/css/misuzu/manage/navigation.css new file mode 100644 index 00000000..fc43de44 --- /dev/null +++ b/assets/css/misuzu/manage/navigation.css @@ -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; +} diff --git a/assets/css/misuzu/manage/role-item.css b/assets/css/misuzu/manage/role-item.css new file mode 100644 index 00000000..d91d4601 --- /dev/null +++ b/assets/css/misuzu/manage/role-item.css @@ -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); +} diff --git a/assets/css/misuzu/manage/roles.css b/assets/css/misuzu/manage/roles.css new file mode 100644 index 00000000..a975d887 --- /dev/null +++ b/assets/css/misuzu/manage/roles.css @@ -0,0 +1,4 @@ +.manage__roles__collection, +.manage__roles__pagination { + padding: 5px; +} diff --git a/assets/css/misuzu/manage/statistic.css b/assets/css/misuzu/manage/statistic.css new file mode 100644 index 00000000..2825a21a --- /dev/null +++ b/assets/css/misuzu/manage/statistic.css @@ -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; +} diff --git a/assets/less/manage/statistics.less b/assets/css/misuzu/manage/statistics.css similarity index 65% rename from assets/less/manage/statistics.less rename to assets/css/misuzu/manage/statistics.css index 54fbd878..1fe27774 100644 --- a/assets/less/manage/statistics.less +++ b/assets/css/misuzu/manage/statistics.css @@ -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; } } diff --git a/assets/css/misuzu/manage/tag.css b/assets/css/misuzu/manage/tag.css new file mode 100644 index 00000000..ffb521df --- /dev/null +++ b/assets/css/misuzu/manage/tag.css @@ -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; +} diff --git a/assets/css/misuzu/manage/tags.css b/assets/css/misuzu/manage/tags.css new file mode 100644 index 00000000..e8a1d58f --- /dev/null +++ b/assets/css/misuzu/manage/tags.css @@ -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; + } +} + diff --git a/assets/css/misuzu/manage/user-item.css b/assets/css/misuzu/manage/user-item.css new file mode 100644 index 00000000..36794ece --- /dev/null +++ b/assets/css/misuzu/manage/user-item.css @@ -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%); +} diff --git a/assets/css/misuzu/manage/user.css b/assets/css/misuzu/manage/user.css new file mode 100644 index 00000000..07826551 --- /dev/null +++ b/assets/css/misuzu/manage/user.css @@ -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%; +} diff --git a/assets/css/misuzu/manage/users.css b/assets/css/misuzu/manage/users.css new file mode 100644 index 00000000..c4a8d2b8 --- /dev/null +++ b/assets/css/misuzu/manage/users.css @@ -0,0 +1,4 @@ +.manage__users__collection, +.manage__users__pagination { + padding: 5px; +} diff --git a/assets/css/misuzu/markdown.css b/assets/css/misuzu/markdown.css new file mode 100644 index 00000000..a6fdd1e3 --- /dev/null +++ b/assets/css/misuzu/markdown.css @@ -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; +} diff --git a/assets/less/messagebox.less b/assets/css/misuzu/messagebox.css similarity index 54% rename from assets/less/messagebox.less rename to assets/css/misuzu/messagebox.css index c35c4b5f..46dcd24b 100644 --- a/assets/less/messagebox.less +++ b/assets/css/misuzu/messagebox.css @@ -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; } diff --git a/assets/css/misuzu/navigation.css b/assets/css/misuzu/navigation.css new file mode 100644 index 00000000..2dcaf7c1 --- /dev/null +++ b/assets/css/misuzu/navigation.css @@ -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; + } +} diff --git a/assets/css/misuzu/pagination.css b/assets/css/misuzu/pagination.css new file mode 100644 index 00000000..87aca5b7 --- /dev/null +++ b/assets/css/misuzu/pagination.css @@ -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; } +} diff --git a/assets/css/misuzu/permissions.css b/assets/css/misuzu/permissions.css new file mode 100644 index 00000000..3705f76f --- /dev/null +++ b/assets/css/misuzu/permissions.css @@ -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; } +} diff --git a/assets/css/misuzu/user/usercard.css b/assets/css/misuzu/user/usercard.css new file mode 100644 index 00000000..2041dcf2 --- /dev/null +++ b/assets/css/misuzu/user/usercard.css @@ -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; + } +} diff --git a/assets/css/misuzu/user/userlist.css b/assets/css/misuzu/user/userlist.css new file mode 100644 index 00000000..cc7be947 --- /dev/null +++ b/assets/css/misuzu/user/userlist.css @@ -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; + } +} \ No newline at end of file diff --git a/assets/css/misuzu/warning.css b/assets/css/misuzu/warning.css new file mode 100644 index 00000000..470cfbc4 --- /dev/null +++ b/assets/css/misuzu/warning.css @@ -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; +} diff --git a/assets/js/misuzu/_msz.js b/assets/js/misuzu/_msz.js new file mode 100644 index 00000000..e69de29b diff --git a/assets/less/animations.less b/assets/less/animations.less deleted file mode 100644 index 9039faee..00000000 --- a/assets/less/animations.less +++ /dev/null @@ -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); - } -} diff --git a/assets/less/auth/register.less b/assets/less/auth/register.less index 714d7293..7235630c 100644 --- a/assets/less/auth/register.less +++ b/assets/less/auth/register.less @@ -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%; } } diff --git a/assets/less/changelog-actions-tags.less b/assets/less/changelog-actions-tags.less deleted file mode 100644 index 78753d1b..00000000 --- a/assets/less/changelog-actions-tags.less +++ /dev/null @@ -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; - } - } -} diff --git a/assets/less/changelog/change.less b/assets/less/changelog/change.less index e7ffc880..590e5408 100644 --- a/assets/less/changelog/change.less +++ b/assets/less/changelog/change.less @@ -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%; diff --git a/assets/less/changelog/entry.less b/assets/less/changelog/entry.less index 13689f4f..1f9a50df 100644 --- a/assets/less/changelog/entry.less +++ b/assets/less/changelog/entry.less @@ -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; diff --git a/assets/less/changelog/listing.less b/assets/less/changelog/listing.less index 6cda262b..bc600647 100644 --- a/assets/less/changelog/listing.less +++ b/assets/less/changelog/listing.less @@ -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; diff --git a/assets/less/changelog/log.less b/assets/less/changelog/log.less index 86490178..253a804a 100644 --- a/assets/less/changelog/log.less +++ b/assets/less/changelog/log.less @@ -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; diff --git a/assets/less/comment.less b/assets/less/comment.less deleted file mode 100644 index 3fa81058..00000000 --- a/assets/less/comment.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/comments.less b/assets/less/comments.less deleted file mode 100644 index d4c34380..00000000 --- a/assets/less/comments.less +++ /dev/null @@ -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; - } - } -} diff --git a/assets/less/confirm.less b/assets/less/confirm.less deleted file mode 100644 index 4a30ca44..00000000 --- a/assets/less/confirm.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/container.less b/assets/less/container.less deleted file mode 100644 index f39c3144..00000000 --- a/assets/less/container.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/flag.less b/assets/less/flag.less deleted file mode 100644 index f4e787ea..00000000 --- a/assets/less/flag.less +++ /dev/null @@ -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);} -} diff --git a/assets/less/footer.less b/assets/less/footer.less deleted file mode 100644 index 917e8911..00000000 --- a/assets/less/footer.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/forum/actions.less b/assets/less/forum/actions.less index dbace11f..cdc0e3d8 100644 --- a/assets/less/forum/actions.less +++ b/assets/less/forum/actions.less @@ -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; } diff --git a/assets/less/forum/category.less b/assets/less/forum/category.less index 73d7fd9c..be9ab852 100644 --- a/assets/less/forum/category.less +++ b/assets/less/forum/category.less @@ -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; } } diff --git a/assets/less/forum/header.less b/assets/less/forum/header.less index ea42af22..cc45298b 100644 --- a/assets/less/forum/header.less +++ b/assets/less/forum/header.less @@ -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); } diff --git a/assets/less/forum/poll.less b/assets/less/forum/poll.less index 72811397..880f85ac 100644 --- a/assets/less/forum/poll.less +++ b/assets/less/forum/poll.less @@ -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; } diff --git a/assets/less/forum/post.less b/assets/less/forum/post.less index f56480a6..00e539ba 100644 --- a/assets/less/forum/post.less +++ b/assets/less/forum/post.less @@ -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; } } diff --git a/assets/less/forum/priority.less b/assets/less/forum/priority.less index 06ee608c..628d636a 100644 --- a/assets/less/forum/priority.less +++ b/assets/less/forum/priority.less @@ -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; diff --git a/assets/less/forum/status.less b/assets/less/forum/status.less index 12d5200e..3e175373 100644 --- a/assets/less/forum/status.less +++ b/assets/less/forum/status.less @@ -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; diff --git a/assets/less/forum/topic.less b/assets/less/forum/topic.less index efe06914..787f6e3a 100644 --- a/assets/less/forum/topic.less +++ b/assets/less/forum/topic.less @@ -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; diff --git a/assets/less/header.less b/assets/less/header.less deleted file mode 100644 index 98ce05f8..00000000 --- a/assets/less/header.less +++ /dev/null @@ -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%); - } - } - } -} diff --git a/assets/less/home.less b/assets/less/home.less deleted file mode 100644 index 2e79cb89..00000000 --- a/assets/less/home.less +++ /dev/null @@ -1,3 +0,0 @@ -.home { - -} diff --git a/assets/less/input/button.less b/assets/less/input/button.less deleted file mode 100644 index 27b4c5b1..00000000 --- a/assets/less/input/button.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/input/checkbox.less b/assets/less/input/checkbox.less deleted file mode 100644 index 54b9202f..00000000 --- a/assets/less/input/checkbox.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/input/colour.less b/assets/less/input/colour.less deleted file mode 100644 index 9b5a47ae..00000000 --- a/assets/less/input/colour.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/input/input.less b/assets/less/input/input.less deleted file mode 100644 index 19bca6a1..00000000 --- a/assets/less/input/input.less +++ /dev/null @@ -1,7 +0,0 @@ -@import "button"; -@import "checkbox"; -@import "colour"; -@import "select"; -@import "text"; -@import "textarea"; -@import "upload"; diff --git a/assets/less/input/text.less b/assets/less/input/text.less deleted file mode 100644 index a278e79c..00000000 --- a/assets/less/input/text.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/input/upload.less b/assets/less/input/upload.less deleted file mode 100644 index 26e52851..00000000 --- a/assets/less/input/upload.less +++ /dev/null @@ -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); - } -} diff --git a/assets/less/landing.less b/assets/less/landing.less deleted file mode 100644 index 87ed051a..00000000 --- a/assets/less/landing.less +++ /dev/null @@ -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; - } - } -} diff --git a/assets/less/link.less b/assets/less/link.less deleted file mode 100644 index 7e6f245f..00000000 --- a/assets/less/link.less +++ /dev/null @@ -1,9 +0,0 @@ -.link { - color: @accent-colour; - color: var(--accent-colour); - text-decoration: none; - - &:hover { - text-decoration: underline; - } -} diff --git a/assets/less/main.less b/assets/less/main.less index cd214d11..30e82219 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -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"; diff --git a/assets/less/manage/blacklist.less b/assets/less/manage/blacklist.less deleted file mode 100644 index 5abc012f..00000000 --- a/assets/less/manage/blacklist.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/manage/emote.less b/assets/less/manage/emote.less deleted file mode 100644 index d2ee6e85..00000000 --- a/assets/less/manage/emote.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/manage/emotes.less b/assets/less/manage/emotes.less deleted file mode 100644 index eaef8e0a..00000000 --- a/assets/less/manage/emotes.less +++ /dev/null @@ -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; - } - } - } -} diff --git a/assets/less/manage/manage.less b/assets/less/manage/manage.less deleted file mode 100644 index 91e9dd4f..00000000 --- a/assets/less/manage/manage.less +++ /dev/null @@ -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"; diff --git a/assets/less/manage/navigation.less b/assets/less/manage/navigation.less deleted file mode 100644 index db7254a2..00000000 --- a/assets/less/manage/navigation.less +++ /dev/null @@ -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; - } - } -} diff --git a/assets/less/manage/role-item.less b/assets/less/manage/role-item.less deleted file mode 100644 index 4059d7c1..00000000 --- a/assets/less/manage/role-item.less +++ /dev/null @@ -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%); - } - } -} diff --git a/assets/less/manage/roles.less b/assets/less/manage/roles.less deleted file mode 100644 index a05933ab..00000000 --- a/assets/less/manage/roles.less +++ /dev/null @@ -1,7 +0,0 @@ -.manage__roles { - - &__collection, - &__pagination { - padding: 5px; - } -} diff --git a/assets/less/manage/statistic.less b/assets/less/manage/statistic.less deleted file mode 100644 index 63d13f08..00000000 --- a/assets/less/manage/statistic.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/manage/tag.less b/assets/less/manage/tag.less deleted file mode 100644 index 73209b6c..00000000 --- a/assets/less/manage/tag.less +++ /dev/null @@ -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; - } -} diff --git a/assets/less/manage/tags.less b/assets/less/manage/tags.less deleted file mode 100644 index 51e1cd82..00000000 --- a/assets/less/manage/tags.less +++ /dev/null @@ -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; - } - } -} diff --git a/assets/less/manage/user-item.less b/assets/less/manage/user-item.less deleted file mode 100644 index 4abcc79c..00000000 --- a/assets/less/manage/user-item.less +++ /dev/null @@ -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%); - } - } -} diff --git a/assets/less/manage/user.less b/assets/less/manage/user.less deleted file mode 100644 index 2866428f..00000000 --- a/assets/less/manage/user.less +++ /dev/null @@ -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%; - } -} diff --git a/assets/less/manage/users.less b/assets/less/manage/users.less deleted file mode 100644 index c952b2a9..00000000 --- a/assets/less/manage/users.less +++ /dev/null @@ -1,7 +0,0 @@ -.manage__users { - - &__collection, - &__pagination { - padding: 5px; - } -} diff --git a/assets/less/markdown.less b/assets/less/markdown.less deleted file mode 100644 index da06519c..00000000 --- a/assets/less/markdown.less +++ /dev/null @@ -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; - } - } -} diff --git a/assets/less/navigation.less b/assets/less/navigation.less deleted file mode 100644 index 28a10e0b..00000000 --- a/assets/less/navigation.less +++ /dev/null @@ -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; - } - } -} diff --git a/assets/less/news/container.less b/assets/less/news/container.less index 83f04d09..d2751499 100644 --- a/assets/less/news/container.less +++ b/assets/less/news/container.less @@ -1,7 +1,7 @@ .news__container { display: flex; - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { flex-direction: column; } } diff --git a/assets/less/news/post.less b/assets/less/news/post.less index 2f848a78..bb555663 100644 --- a/assets/less/news/post.less +++ b/assets/less/news/post.less @@ -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; } diff --git a/assets/less/news/preview.less b/assets/less/news/preview.less index eae593c6..f9174183 100644 --- a/assets/less/news/preview.less +++ b/assets/less/news/preview.less @@ -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; } diff --git a/assets/less/news/sidebar.less b/assets/less/news/sidebar.less index 0dd77d9f..ed31ced8 100644 --- a/assets/less/news/sidebar.less +++ b/assets/less/news/sidebar.less @@ -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; diff --git a/assets/less/pagination.less b/assets/less/pagination.less deleted file mode 100644 index c23eda6e..00000000 --- a/assets/less/pagination.less +++ /dev/null @@ -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); - } - } -} diff --git a/assets/less/permissions.less b/assets/less/permissions.less deleted file mode 100644 index 8c35c652..00000000 --- a/assets/less/permissions.less +++ /dev/null @@ -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%); - } - } -} diff --git a/assets/less/profile/guidelines.less b/assets/less/profile/guidelines.less index 335c6fe5..79b0017a 100644 --- a/assets/less/profile/guidelines.less +++ b/assets/less/profile/guidelines.less @@ -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; } diff --git a/assets/less/profile/header.less b/assets/less/profile/header.less index e52e1c0f..a1625013 100644 --- a/assets/less/profile/header.less +++ b/assets/less/profile/header.less @@ -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; diff --git a/assets/less/profile/profile.less b/assets/less/profile/profile.less index 93bfd9b6..bf3cfa7a 100644 --- a/assets/less/profile/profile.less +++ b/assets/less/profile/profile.less @@ -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; } } diff --git a/assets/less/profile/warning.less b/assets/less/profile/warning.less index f76c0427..d443eca3 100644 --- a/assets/less/profile/warning.less +++ b/assets/less/profile/warning.less @@ -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; } } diff --git a/assets/less/search/category.less b/assets/less/search/category.less index 36efa2e2..4825e22e 100644 --- a/assets/less/search/category.less +++ b/assets/less/search/category.less @@ -2,7 +2,6 @@ display: block; color: inherit; text-decoration: none; - background-color: @accent-colour; background-color: var(--accent-colour); box-shadow: 0 1px 2px #000A; text-shadow: 0 1px 4px #000; @@ -13,7 +12,6 @@ margin: 1px 1px 1px 0; &__background { - background-color: @background-colour-translucent-9; background-color: var(--background-colour-translucent-9); position: absolute; top: 0; @@ -25,12 +23,10 @@ &:hover &__background, &:focus &__background { - background-color: @background-colour-translucent-8; background-color: var(--background-colour-translucent-8); } &:active &__background { - background-color: @background-colour-translucent-7; background-color: var(--background-colour-translucent-7); } diff --git a/assets/less/search/header.less b/assets/less/search/header.less index e474e72d..1b0aa8e8 100644 --- a/assets/less/search/header.less +++ b/assets/less/search/header.less @@ -3,6 +3,5 @@ position: sticky; top: 0; z-index: 50; - background-color: @background-colour; background-color: var(--background-colour); } diff --git a/assets/less/search/input.less b/assets/less/search/input.less index f8674e63..3adb957d 100644 --- a/assets/less/search/input.less +++ b/assets/less/search/input.less @@ -1,5 +1,4 @@ .search__input { - background-color: @accent-colour; background-color: var(--accent-colour); box-shadow: 0 1px 2px #000A; text-shadow: 0 1px 4px #000; @@ -9,7 +8,6 @@ font-size: 1.5em; &__background { - background-color: @background-colour-translucent-9; background-color: var(--background-colour-translucent-9); position: absolute; top: 0; @@ -47,7 +45,6 @@ &:hover, &:active, &:focus { - background-color: @accent-colour; background-color: var(--accent-colour); } } diff --git a/assets/less/settings/account-log.less b/assets/less/settings/account-log.less index 74bc9f87..4914d3ec 100644 --- a/assets/less/settings/account-log.less +++ b/assets/less/settings/account-log.less @@ -1,5 +1,4 @@ .settings__account-log { - border: 1px solid @accent-colour; border: 1px solid var(--accent-colour); border-radius: 2px; overflow: hidden; @@ -45,7 +44,6 @@ transition: color .2s; &:hover { - color: @accent-colour; color: var(--accent-colour); } } @@ -64,7 +62,6 @@ min-width: 120px; &__title { - border-bottom: 1px solid @accent-colour; border-bottom: 1px solid var(--accent-colour); font-weight: 700; padding: 1px 5px; @@ -80,7 +77,6 @@ text-decoration: none; display: flex; padding: 4px; - border-bottom: 1px solid @accent-colour; border-bottom: 1px solid var(--accent-colour); margin-bottom: -2px; @@ -90,7 +86,6 @@ } &__name { - color: @user-colour; color: var(--user-colour); padding-left: 4px; } diff --git a/assets/less/settings/account.less b/assets/less/settings/account.less index 4d8ea35a..b02b0dc1 100644 --- a/assets/less/settings/account.less +++ b/assets/less/settings/account.less @@ -2,7 +2,7 @@ display: grid; grid-template-columns: 1fr 1fr; - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { grid-template-columns: 1fr; } @@ -13,7 +13,7 @@ grid-column: 1 / span 2; } - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { grid-column: 1 / 1; } } diff --git a/assets/less/settings/description.less b/assets/less/settings/description.less index 21fd1918..b611a5e3 100644 --- a/assets/less/settings/description.less +++ b/assets/less/settings/description.less @@ -1,7 +1,6 @@ .settings__description { font-size: .9em; padding: 2px 5px; - border-bottom: 1px solid @accent-colour; border-bottom: 1px solid var(--accent-colour); margin: 1px 1px 2px; } diff --git a/assets/less/settings/login-attempt.less b/assets/less/settings/login-attempt.less index d793d1d4..2810e51d 100644 --- a/assets/less/settings/login-attempt.less +++ b/assets/less/settings/login-attempt.less @@ -1,5 +1,4 @@ .settings__login-attempt { - border: 1px solid @accent-colour; border: 1px solid var(--accent-colour); border-radius: 2px; overflow: hidden; @@ -7,7 +6,6 @@ &--failed { --accent-colour: #a00; - background-color: @accent-colour; background-color: var(--accent-colour); } @@ -55,7 +53,6 @@ transition: color .2s; &:hover { - color: @accent-colour; color: var(--accent-colour); } } @@ -74,7 +71,6 @@ min-width: 120px; &__title { - border-bottom: 1px solid @accent-colour; border-bottom: 1px solid var(--accent-colour); font-weight: 700; padding: 1px 5px; diff --git a/assets/less/settings/role.less b/assets/less/settings/role.less index 0871a0be..7088a078 100644 --- a/assets/less/settings/role.less +++ b/assets/less/settings/role.less @@ -1,6 +1,4 @@ .settings__role { - border: 1px solid @accent-colour; - background-color: @accent-colour; border: 1px solid var(--accent-colour); background-color: var(--accent-colour); border-radius: 2px; @@ -16,7 +14,6 @@ } &__content { - background-color: @background-colour-translucent-9; background-color: var(--background-colour-translucent-9); width: 100%; height: 100%; @@ -27,7 +24,6 @@ &__name { font-size: 1.2em; line-height: 1.7em; - border-bottom: 1px solid @accent-colour; border-bottom: 1px solid var(--accent-colour); padding: 0 5px; } @@ -59,7 +55,6 @@ height: 40px; &:not(&--disabled):hover { - color: @accent-colour; color: var(--accent-colour); cursor: pointer; } diff --git a/assets/less/settings/session.less b/assets/less/settings/session.less index 2d0c781c..48f272af 100644 --- a/assets/less/settings/session.less +++ b/assets/less/settings/session.less @@ -1,12 +1,10 @@ .settings__session { - border: 1px solid @accent-colour; border: 1px solid var(--accent-colour); border-radius: 2px; overflow: hidden; margin: 4px; &--current { - background-color: @accent-colour; background-color: var(--accent-colour); } @@ -54,7 +52,6 @@ transition: color .2s; &:hover { - color: @accent-colour; color: var(--accent-colour); } } @@ -73,7 +70,6 @@ min-width: 120px; &__title { - border-bottom: 1px solid @accent-colour; border-bottom: 1px solid var(--accent-colour); font-weight: 700; padding: 1px 5px; diff --git a/assets/less/settings/two-factor.less b/assets/less/settings/two-factor.less index ae256f0c..64847b06 100644 --- a/assets/less/settings/two-factor.less +++ b/assets/less/settings/two-factor.less @@ -2,7 +2,7 @@ display: flex; margin: 5px; - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { flex-direction: column; align-items: center; } @@ -24,7 +24,7 @@ flex: 0 0 auto; font-size: 1.2em; line-height: 1.5em; - font-family: @mio-font-mono; + font-family: var(--font-monospace); } } diff --git a/assets/less/settings/wrapper.less b/assets/less/settings/wrapper.less index 9ebfdffa..eae1d294 100644 --- a/assets/less/settings/wrapper.less +++ b/assets/less/settings/wrapper.less @@ -1,14 +1,14 @@ .settings__wrapper { display: flex; - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { flex-direction: column; } &__sidebar { flex: 0 0 auto; - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { width: 100%; } } @@ -21,7 +21,7 @@ width: 280px; margin-right: 2px; - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { width: 100%; } } @@ -38,11 +38,10 @@ transition: background-color .2s; &:hover { - background-color: @background-colour-translucent-9; background-color: var(--background-colour-translucent-9); } - @media (max-width: @site-mobile-width) { + @media (max-width: 800px) { display: inline-block; padding: 4px 10px; } diff --git a/assets/less/usercard.less b/assets/less/usercard.less deleted file mode 100644 index 3d2ddfaf..00000000 --- a/assets/less/usercard.less +++ /dev/null @@ -1,193 +0,0 @@ -.usercard { - display: flex; - flex-direction: column; - transition: box-shadow .5s; - z-index: 1; - color: #fff; - background-color: @background-colour; - 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-start: @usercard-header-overlay-start; - @usercard-header-overlay-stop: @background-colour-translucent-9; - --usercard-header-overlay-stop: var(--background-colour-translucent-9); - - &:hover { - box-shadow: 0 1px 4px #000; - z-index: 2; - } - - &__background { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: @accent-colour @background-pattern; - background: var(--accent-colour) var(--background-pattern); - background-blend-mode: multiply; - } - - &__header { - flex: 0 0 auto; - - &__link { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - &__avatar { - width: 60px; - height: 60px; - z-index: 20; - } - - &__container { - display: flex; - align-items: center; - padding: 10px; - background-image: linear-gradient(0deg, @usercard-header-overlay-stop, @usercard-header-overlay-start); - background-image: linear-gradient(0deg, var(--usercard-header-overlay-stop), var(--usercard-header-overlay-start)); - pointer-events: none; - } - - &__details { - margin: 0 10px; - flex: 1 1 auto; - - @media (max-width: @site-mobile-width) { - text-align: center; - } - } - - &__relation { - font-variant: all-small-caps; - background: @usercard-header-overlay-stop; - background: var(--usercard-header-overlay-stop); - border-radius: 2px; - line-height: 1.2em; - padding: 1px 5px 4px; - cursor: default; - } - - &__username { - font-size: 1.5em; - line-height: 1.3em; - } - - &__title { - font-size: .9em; - line-height: 1.2em; - } - - &__country { - display: inline-flex; - align-items: center; - - &__name { - font-size: .9em; - margin-left: 4px; - line-height: 1.2em; - } - } - } - - &__container { - flex: 1 1 auto; - background-color: @usercard-header-overlay-stop; - background-color: var(--usercard-header-overlay-stop); - display: flex; - flex-direction: column; - justify-content: flex-end; - } - - &__dates { - font-size: .9em; - line-height: 1em; - display: flex; - justify-content: space-evenly; - align-items: center; - flex: 0 0 auto; - margin-bottom: 4px; - } - - &__date { - padding: 4px; - } - - &__stats { - display: flex; - flex-wrap: wrap; - justify-content: flex-end; - flex: 0 0 auto; - } - - &__stat { - display: flex; - flex-direction: column-reverse; - color: inherit; - text-decoration: none; - padding: 5px 10px; - cursor: default; - flex: 0 0 auto; - text-align: right; - - &__name { - font-size: .9em; - font-variant: small-caps; - cursor: inherit; - } - - &__value { - font-size: 1.3em; - cursor: inherit; - display: block; - } - - &[href] { - cursor: pointer; - } - - &[href]:hover, - &[href]:focus { - border-bottom: 2px solid @accent-colour; - border-bottom: 2px solid var(--accent-colour); - padding-bottom: 3px; - } - } - - &__actions { - flex: 0 0 auto; - display: flex; - height: 38px; - } - - &__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; - - &:hover, - &:focus { - background-color: fade(#fff, 20%); - } - - &:active { - background-color: fade(#fff, 10%); - } - } -} diff --git a/assets/less/userlist.less b/assets/less/userlist.less deleted file mode 100644 index 2f29d846..00000000 --- a/assets/less/userlist.less +++ /dev/null @@ -1,78 +0,0 @@ -.userlist { - display: flex; - flex-wrap: wrap; - justify-content: center; - overflow: hidden; - padding: 2px; - - &__item { - margin: 2px; - width: 300px; - display: flex; - } - - &__empty { - text-align: center; - font-size: 2em; - line-height: 1.5em; - margin: 1em; - } - - &__container { - padding: 5px; - margin: 2px 0; - } - - &__navigation { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: stretch; - - @media (max-width: @site-mobile-width) { - flex-direction: column; - } - } - - &__pagination { - max-width: 500px; - flex: 1 1 auto; - display: flex; - align-items: stretch; - justify-content: space-between; - - @media (max-width: @site-mobile-width) { - max-width: 100%; - flex-grow: 0; - margin-top: 5px; - } - } - - &__sorting { - flex: 0 0 auto; - display: flex; - align-items: stretch; - - @media (max-width: @site-mobile-width) { - flex-direction: column; - } - } - - &__select { - margin: 0 2px; - background: inherit; - box-shadow: initial; - border-width: 0; - border-radius: 0; - background: @background-colour-translucent-9; - color: @text-colour; - background: var(--background-colour-translucent-9); - color: var(--text-colour); - - @media (max-width: @site-mobile-width) { - &:not(:first-child) { - margin-top: 5px; - } - } - } -} diff --git a/assets/less/warning.less b/assets/less/warning.less deleted file mode 100644 index 79bfb95e..00000000 --- a/assets/less/warning.less +++ /dev/null @@ -1,30 +0,0 @@ -.warning { - @start-colour: yellow; - @end-colour: black; - --start-colour: @start-colour; - --end-colour: @end-colour; - - background-image: repeating-linear-gradient(-45deg, @start-colour, @start-colour 10px, @end-colour 10px, @end-colour 20px); - 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; - - &__content { - background-color: rgba(17, 17, 17, .9); - padding: 2px 5px; - } - - &__link { - color: inherit; - text-decoration: underline dotted; - - &:hover, - &:active, - &:focus { - text-decoration: underline; - } - } -} diff --git a/build.php b/build.php index b989de38..c58819a1 100644 --- a/build.php +++ b/build.php @@ -3,31 +3,6 @@ * Misuzu Asset Build Script. */ -/** - * NPM module files to be imported into /js/libraries.js - */ -define('NODE_IMPORT_JS', [ - //'highlightjs/highlight.pack.min.js', - //'timeago.js/dist/timeago.min.js', - //'timeago.js/dist/timeago.locales.min.js', -]); - -/** - * NPM module files to be imported into /css/libraries.css - */ -define('NODE_IMPORT_CSS', [ - //'highlightjs/styles/default.css', - //'highlightjs/styles/tomorrow-night.css', - //'@fortawesome/fontawesome-free/css/all.min.css', -]); - -/** - * Directories to copy to the public folder - */ -define('NODE_COPY_DIRECTORY', [ - //'@fortawesome/fontawesome-free/webfonts' => 'webfonts', -]); - /** * BEYOND THIS POINT YOU WON'T HAVE TO EDIT THE CONFIG PRETTY MUCH EVER */ @@ -48,10 +23,6 @@ define('LESS_DEST', CSS_DIR . '/style.css'); define('TS_DEST', JS_DIR . '/misuzu.js'); define('TS_SRC', JS_DIR . '/misuzu'); -define('NODE_MODULES_DIR', __DIR__ . '/node_modules'); -define('NODE_DEST_CSS', CSS_DIR . '/libraries.css'); -define('NODE_DEST_JS', JS_DIR . '/libraries.js'); - define('TWIG_DIRECTORY', sys_get_temp_dir() . '/msz-tpl-cache-' . md5(__DIR__)); /** @@ -88,33 +59,6 @@ function purge_dir(string $dir, string $pattern): void { } } -function recursive_copy(string $source, string $dest): bool { - if(is_link($source)) { - return symlink(readlink($source), $dest); - } - - if(is_file($source)) { - return copy($source, $dest); - } - - if(!is_dir($dest)) { - mkdir($dest); - } - - $dir = dir($source); - - while(($entry = $dir->read()) !== false) { - if($entry === '.' || $entry === '..') { - continue; - } - - recursive_copy($source . DIRECTORY_SEPARATOR . $entry, $dest . DIRECTORY_SEPARATOR . $entry); - } - - $dir->close(); - return true; -} - $doAll = empty($argv[1]) || $argv[1] === 'all'; $doCss = $doAll || $argv[1] === 'css'; $doJs = $doAll || $argv[1] === 'js'; @@ -146,72 +90,12 @@ if($doCss) { } } -build_log(); -build_log('Importing libraries'); - -define('IMPORT_SEQ', [ - [ - 'name' => 'CSS', - 'files' => NODE_IMPORT_CSS, - 'destination' => NODE_DEST_CSS, - 'insert-semicolon' => false, - 'do' => $doCss, - ], - [ - 'name' => 'JavaScript', - 'files' => NODE_IMPORT_JS, - 'destination' => NODE_DEST_JS, - 'insert-semicolon' => true, - 'do' => $doJs, - ], -]); - -foreach(IMPORT_SEQ as $sequence) { - if(!$sequence['do']) { - continue; - } - - build_log("=> {$sequence['name']}"); - - $contents = ''; - - foreach($sequence['files'] as $file) { - $realpath = realpath(NODE_MODULES_DIR . '/' . $file); - - build_log("==> '{$file}'"); - - if(!file_exists($realpath)) { - build_log('===> File does not exist.'); - continue; - } - - $contents .= file_get_contents($realpath); - - if($sequence['insert-semicolon']) { - $contents .= ';'; - } - } - - file_put_contents($sequence['destination'], $contents); -} - if($doJs) { build_log(); build_log('Compiling TypeScript'); build_log(shell_exec('tsc --extendedDiagnostics -p tsconfig.json')); } -build_log(); -build_log('Copying data...'); - -foreach(NODE_COPY_DIRECTORY as $source => $dest) { - build_log("=> " . basename($dest)); - $source = realpath(NODE_MODULES_DIR . DIRECTORY_SEPARATOR . $source); - $dest = PUBLIC_DIR . DIRECTORY_SEPARATOR . $dest; - purge_dir($dest, '*'); - recursive_copy($source, $dest); -} - // no need to do this in debug mode, auto reload is enabled and cache is disabled if($doAll && !file_exists(__DIR__ . '/.debug')) { // Clear Twig cache diff --git a/public/index.php b/public/index.php index dbfcbae5..bc307503 100644 --- a/public/index.php +++ b/public/index.php @@ -17,6 +17,9 @@ $router->addRoutes( // Home Route::get('/', Handler::call('index@Home')), + // Assets + Route::get('/assets/([a-zA-Z0-9\-]+)\.(css|js)', true, Handler::call('view@Assets')), + // Info Route::get('/info', Handler::call('index@Info')), Route::get('/info/([A-Za-z0-9_/]+)', true, Handler::call('page@Info')), diff --git a/src/Http/Handlers/AssetsHandler.php b/src/Http/Handlers/AssetsHandler.php new file mode 100644 index 00000000..e36d1184 --- /dev/null +++ b/src/Http/Handlers/AssetsHandler.php @@ -0,0 +1,61 @@ + [ + 'root' => MSZ_ROOT . '/assets/js', + 'mime' => 'application/javascript; charset=utf-8', + ], + 'css' => [ + 'root' => MSZ_ROOT . '/assets/css', + 'mime' => 'text/css; charset=utf-8', + ], + ]; + + private static function recurse(string $dir): string { + $str = ''; + $dir = rtrim(realpath($dir), '/') . '/*'; + $dirs = []; + + foreach(glob($dir) as $path) { + if(is_dir($path)) { + $dirs[] = $path; + continue; + } + + if(MSZ_DEBUG) + $str .= "/*** {$path} ***/\n"; + $str .= trim(file_get_contents($path)); + $str .= "\n\n"; + } + + foreach($dirs as $path) + $str .= self::recurse($path); + + return $str; + } + + public static function view(Response $response, Request $request, string $name, string $type) { + $entityTag = sprintf('W/"%s.%s/%s"', $name, $type, GitInfo::hash()); + + if(!MSZ_DEBUG && $name === 'debug') + return 404; + if(!MSZ_DEBUG && filter_input(INPUT_SERVER, 'HTTP_IF_NONE_MATCH') === $entityTag) + return 304; + + if(array_key_exists($type, self::TYPES)) { + $type = self::TYPES[$type]; + $path = ($type['root'] ?? '') . '/' . $name; + + if(is_dir($path)) { + $response->setHeader('Content-Type', $type['mime'] ?? 'application/octet-stream'); + $response->setHeader('Cache-Control', MSZ_DEBUG ? 'no-cache' : 'must-revalidate'); + $response->setHeader('ETag', $entityTag); + return self::recurse($path); + } + } + } +} diff --git a/src/Http/Routing/RouterResponseMessage.php b/src/Http/Routing/RouterResponseMessage.php index af177396..4c739f5d 100644 --- a/src/Http/Routing/RouterResponseMessage.php +++ b/src/Http/Routing/RouterResponseMessage.php @@ -33,7 +33,8 @@ class RouterResponseMessage extends HttpResponseMessage { return $this; } public function setHtml(string $content, bool $html = true): self { - $this->setContentType('text/html; charset=utf-8'); + if(empty($this->getContentType())) + $this->setContentType('text/html; charset=utf-8'); $this->setText($content); return $this; } diff --git a/templates/master.twig b/templates/master.twig index 23ab2a8a..22a0ac6e 100644 --- a/templates/master.twig +++ b/templates/master.twig @@ -7,6 +7,7 @@ + {% if site_background is defined %}