less (#97): first shot to Less

Quick switch, still may need some refacto and delete unused code
This commit is contained in:
Darks 2021-07-14 16:30:45 +02:00
parent 1112decbd0
commit 87d795959f
Signed by untrusted user: Darks
GPG Key ID: 7515644268BE1433
31 changed files with 2158 additions and 1119 deletions

View File

@ -1,59 +0,0 @@
.form .avatar {
width: 128px; height: 128px;
}
.form .avatar + input[type="file"] {
margin: 16px 0 0 0;
vertical-align: middle;
}
.form form > div:not(:last-child) {
margin-bottom: 15px;
}
.form form label {
display: inline-block;
margin-bottom: 5px;
}
.form input {
cursor: pointer; /* don't know why it is not a cursor by default */
}
.form input[type='text'],
.form input[type='email'],
.form input[type='date'],
.form input[type='password'],
.form input[type='search'],
.form textarea {
display: block;
width: 100%; padding: 6px 8px;
border: 1px solid #c8c8c8;
/* Transitions when resizing with the mouse produces apparent lag */
transition: all .15s ease, width 0s, height 0s;
}
.form input[type='text']:focus,
.form input[type='email']:focus,
.form input[type='date']:focus,
.form input[type='password']:focus,
.form input[type='search']:focus,
.form textarea:focus {
border-color: #91bfef;
box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.4);
}
.form textarea {
max-width: 100%;
resize: vertical;
}
.form input[type="submit"] {
/*width: 20%;*/
}
.form form .msgerror {
color: red;
font-weight: 400;
margin-top: 5px;
}

View File

@ -1,47 +1,30 @@
.container {
margin-left: 110px;
}
/* Currently 3 screen sizes supported :
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
.container {
margin-left: 110px;
}
@media screen and (max-width: 849px) {
.container {
margin-left: 0;
}
}
section {
width: 80%;
margin: 20px auto 0 auto;
margin: 20px auto 0 auto;
}
@media screen and (max-width: 1399px) {
section {
width: 90%;
}
@media screen and (max-width: 1449px) {
section {
width: 90%;
}
}
@media screen and (max-width: 1199px) {
section {
width: 95%;
}
}
section .avatar {
display: block;
width: 128px; height: 128px;
}
/* Some grid */
.flex-grid {
display: flex;
flex-flow: row wrap;
}
.flex-grid > * {
min-width: 250px;
flex: auto;
}
/* Two columns */
.flex-grid.fg2 > * {
width: 50%;
}
/* Three columns */
.flex-grid.fg3 > * {
width: 33%;
}
/* Four columns */
.flex-grid.fg4 > * {
width: 25%;
section {
width: 95%;
}
}

View File

@ -1,22 +0,0 @@
.editor div {
display: flex; flex-direction: row;
flex-wrap: wrap; align-items: center;
margin-bottom: 5px;
}
.editor button {
height: 25px; margin: 0 0px; padding: 0 3px;
border: var(--border); border-radius: 2px;
cursor: pointer;
background: var(--background);
}
.editor button > img {
opacity: .7;
}
.editor button:hover,
.editor button:focus {
border: var(--border-focused);
}
.editor button:hover > img,
.editor button:focus > img {
opacity: 1;
}

View File

@ -1,33 +1,32 @@
/*
flash overlay
flash overlay
*/
.flash {
margin: 5px auto;
display: flex;
align-items: center;
width: 80%;
font-size: 14px;
border-bottom: 5px solid var(--info);
border-radius: 1px;
box-shadow: var(--shadow);
margin: 5px auto;
display: flex;
align-items: center;
width: 80%;
font-size: 14px;
border-bottom: 5px solid var(--info);
border-radius: 1px;
box-shadow: var(--shadow);
}
.flash.info {
border-color: var(--info);
border-color: var(--info);
}
.flash.ok {
border-color: var(--ok);
border-color: var(--ok);
}
.flash.warning {
border-color: var(--warn);
border-color: var(--warn);
}
.flash.error {
border-color: var(--error);
border-color: var(--error);
}
.flash span {
flex-grow: 1;
margin: 15px 10px 10px 0;
flex-grow: 1;
margin: 15px 10px 10px 0;
}
.flash svg {
margin: 15px 20px 10px 30px;
margin: 15px 20px 10px 30px;
}

View File

@ -1,13 +1,16 @@
/*
Footer
Footer
*/
footer {
margin: 20px 0 0 0; padding: 10px 10%;
text-align: center; font-size: 11px; font-style: italic;
background: var(--background); color: var(--text);
border-top: var(--border);
margin: 20px 0 0 0;
padding: 10px 10%;
text-align: center;
font-size: 11px;
font-style: italic;
background: var(--background);
color: var(--text);
border-top: var(--border);
}
footer p {
margin: 3px 0;
margin: 3px 0;
}

View File

@ -1,159 +1,122 @@
.form .avatar {
width: 128px; height: 128px;
/* Full-page forms */
.form {
/* anti-bots field */
}
.form .avatar + input[type="file"] {
margin: 16px 0 0 0;
vertical-align: middle;
}
.form form > div:not(:last-child):not(.editor-toolbar) {
margin-bottom: 16px;
margin-bottom: 16px;
}
.form form label,
.trophies-panel p {
display: inline-block;
margin-bottom: 4px;
.form form label {
display: inline-block;
margin: 0 5px 4px 0;
}
.form label + .desc {
margin: 0 0 4px 0;
.form form label + .desc {
margin: 0 0 4px 0;
font-size: 80%;
opacity: 0.75;
}
.form form .avatar {
width: 128px;
height: 128px;
}
.form form .avatar + input[type="file"] {
margin: 16px 0 0 0;
vertical-align: middle;
}
.form input[type='text'],
.form input[type='email'],
.form input[type='date'],
.form input[type='password'],
.form input[type='search'],
.form textarea,
.form select,
.trophies-panel > div {
display: block;
width: 100%; padding: 6px 8px;
background: var(--background); color: var(--text);
border: var(--border);
/* Transitions when resizing with the mouse produces apparent lag */
transition: all .15s ease, width 0s, height 0s;
.form select {
display: block;
width: 100%;
padding: 6px 8px;
background: var(--background);
color: var(--text);
border: var(--border);
/* Transitions when resizing with the mouse produces apparent lag */
transition: all 0.15s ease, width 0s, height 0s;
}
.form input[type='text']:focus,
.form input[type='email']:focus,
.form input[type='date']:focus,
.form input[type='password']:focus,
.form input[type='search']:focus,
.form textarea:focus {
border-color: var(--border-focused);
box-shadow: 0 0 0 3px var(--shadow-focused);
.form textarea:focus,
.form select:focus {
border-color: var(--border-focused);
box-shadow: 0 0 0 3px var(--shadow-focused);
}
.form input[type='text']:focus-within,
.form input[type='email']:focus-within,
.form input[type='date']:focus-within,
.form input[type='password']:focus-within,
.form input[type='search']:focus-within,
.form textarea:focus {
/* Override an annoying Firefox default */
outline: none;
.form textarea:focus-within,
.form select:focus-within {
/* Override an annoying Firefox default */
outline: none;
}
.form input[type='checkbox'],
.form input[type='radio'] {
display: inline;
vertical-align: middle;
margin: 0 4px 0 0;
}
.form textarea {
max-width: 100%;
resize: vertical;
max-width: 100%;
resize: vertical;
}
.form select {
width: auto;
width: auto;
}
.form progress.entropy {
display: none; /* display with Js enabled */
width: 100%; margin-top: 5px;
background: var(--background);
border: var(--border);
}
.form progress.entropy.low::-moz-progress-bar {
background: var(--error);
display: none;
/* Display with Js enabled */
width: 100%;
margin-top: 5px;
background: var(--background);
border: var(--border);
}
.form progress.entropy.low::-moz-progress-bar,
.form progress.entropy.low::-webkit-progress-bar {
background: var(--error);
}
.form progress.entropy.medium::-moz-progress-bar {
background: var(--warn);
background: var(--error);
}
.form progress.entropy.medium::-moz-progress-bar,
.form progress.entropy.medium::-webkit-progress-bar {
background: var(--warn);
}
.form progress.entropy.high::-moz-progress-bar {
background: var(--ok);
background: var(--warn);
}
.form progress.entropy.high::-moz-progress-bar,
.form progress.entropy.high::-webkit-progress-bar {
background: var(--ok);
background: var(--ok);
}
.form input[type="checkbox"],
.form input[type="radio"] {
display: inline;
vertical-align: middle;
}
.form input[type="submit"] {
/*width: 20%;*/
}
.form input.abfield {
display: none;
}
.form form .msgerror {
color: var(--error);
font-weight: 400;
margin-top: 5px;
}
.form .desc {
font-size: 80%;
opacity: .75;
}
.form hr {
height: 3px;
border: var(--hr-border);
border-width: 1px 0;
margin: 24px 0;
height: 3px;
border: var(--hr-border);
border-width: 1px 0;
margin: 24px 0;
}
.trophies-panel label {
margin-right: 5px;
.form .msgerror {
color: var(--error);
font-weight: 400;
margin-top: 5px;
}
.trophies-panel p:first-child {
margin-top: 0;
.form .abfield {
display: none;
}
.trophies-panel p label {
margin: 0;
}
/* Editor */
.editor textarea {
font-family: monospace;
height: 192px;
}
/* Interactive filter forms */
.form.filter {
margin-bottom: 16px;
}
.form.filter > p:first-child {
font-size: 80%;
color: gray;
margin-bottom: 2px;
}
.form.filter {
margin-bottom: 16px;
}
.form.filter input {
font-family: monospace;
}
.form.filter .syntax-explanation {
font-size: 80%;
color: gray;
@ -166,10 +129,8 @@
line-height: 20px;
margin-top: 2px;
}
.form.filter .syntax-explanation li {
}
.form.filter .syntax-explanation code {
background: rgba(0,0,0,.05);
background: rgba(0, 0, 0, 0.05);
padding: 1px 2px;
border-radius: 2px;
}

View File

@ -1,143 +1,138 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
/* Fonts */
@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); font-display: swap; }
@font-face { font-family: Twemoji; src: url(../fonts/TwitterColorEmoji.ttf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: normal; src: url(../fonts/Cantarell-Regular.otf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: bold; src: url(../fonts/Cantarell-Bold.otf); font-display: swap; }
@font-face {
font-family: NotoSans;
src: url(../fonts/noto_sans.ttf);
font-display: swap;
}
@font-face {
font-family: Twemoji;
src: url(../fonts/TwitterColorEmoji.ttf);
font-display: swap;
}
@font-face {
font-family: Cantarell;
font-weight: normal;
src: url(../fonts/Cantarell-Regular.otf);
font-display: swap;
}
@font-face {
font-family: Cantarell;
font-weight: bold;
src: url(../fonts/Cantarell-Bold.otf);
font-display: swap;
}
/* Whole page */
* {
box-sizing: border-box;
/* This transition value is replicated everywhere transitions are customized,
make sure to track them when editing */
transition: .15s ease;
box-sizing: border-box;
/* This transition value is replicated everywhere transitions are customized,
make sure to track them when editing */
transition: 0.15s ease;
}
body {
margin: 0;
background: var(--background); color: var(--text);
font-family: 'DejaVu Sans', sans-serif;
margin: 0;
background: var(--background);
color: var(--text);
font-family: 'DejaVu Sans', sans-serif;
font-size: 13px;
}
@media screen and (min-width: 1449px) {
body {
font-size: 14px;
}
}
/* General */
a {
text-decoration: none;
color: var(--links);
}
a:hover {
text-decoration: underline;
text-decoration: none;
color: var(--links);
}
a:hover,
a:focus {
outline: none;
text-decoration: underline;
outline: none;
}
section p {
line-height: 20px;
word-wrap: anywhere;
line-height: 20px;
word-wrap: anywhere;
}
section ul {
line-height: 24px;
line-height: 24px;
}
section h1 {
margin-top: 0;
border-bottom: var(--hr-border);
font-family: Cantarell; font-weight: bold;
font-size: 26px;
color: var(--text-light);
margin-top: 0;
border-bottom: var(--hr-border);
font-family: Cantarell;
font-weight: bold;
font-size: 26px;
color: var(--text-light);
}
section h2 {
margin: 24px 0 16px 0;
border-bottom: var(--hr-border);
font-family: Cantarell; font-weight: bold;
font-size: 18px;
color: var(--text-light);
margin: 24px 0 16px 0;
border-bottom: var(--hr-border);
font-family: Cantarell;
font-weight: bold;
font-size: 18px;
color: var(--text-light);
padding-bottom: 2px;
}
/* Buttons */
.button,
input[type="button"],
input[type="submit"] {
padding: 6px 10px; border-radius: 2px;
cursor: pointer;
font-family: 'DejaVu Sans', sans-serif; font-weight: 400;
border: 0;
padding: 6px 10px;
border-radius: 2px;
cursor: pointer;
font-family: 'DejaVu Sans', sans-serif;
font-weight: 400;
border: 0;
}
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover {
text-decoration: none;
.button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
text-decoration: none;
}
@media screen and (max-width: 1499px) {
.profile-avatar {
width: 96px;
height: 96px;
}
.profile-xp {
height: 8px;
min-width: 64px;
}
.profile-xp div {
height: 8px;
}
}
@media screen and (max-width: 1199px) {
.profile-points {
display: none;
}
.profile-points-small {
display: unset;
}
}
/*
Bootstrap-style rules
*/
/* Bootstrap-style rules */
.flex {
display: flex;
display: flex;
}
.bg-ok,
.bg-ok {
background: var(--ok);
color: var(--ok-text);
background: var(--ok);
color: var(--ok-text);
}
.bg-ok:hover,
.bg-ok:focus,
.bg-ok:active {
background: var(--ok-active);
background: var(--ok-active);
}
.bg-error,
.bg-error {
background: var(--error);
color: var(--error-text);
background: var(--error);
color: var(--error-text);
}
.bg-error:hover,
.bg-error:focus,
.bg-error:active {
background: var(--error-active);
background: var(--error-active);
}
.bg-warn {
background: var(--warn);
color: var(--warn-text);
background: var(--warn);
color: var(--warn-text);
}
.bg-warn:hover,
.bg-warn:focus,
.bg-warn:active {
background: var(--warn-active);
background: var(--warn-active);
}
.skip-to-content-link {
height: 30px;
left: 50%;
@ -149,7 +144,6 @@ input[type="submit"]:hover,
color: var(--warn-text);
border-radius: 1px;
}
.skip-to-content-link:focus {
transform: translateY(0%);
}

View File

@ -1,99 +1,107 @@
/*
header
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
header {
height: 50px; margin: 0; padding: 0 16px;
background: var(--background); border-bottom: var(--border);
display: flex; align-items: center; justify-content: space-between;
flex-flow: row wrap;
/* When the search field occupies the rightmost position, the calculated
position of the svg icon (on the right) might overflow from the header and
induce horizontal scrolling. */
overflow: hidden;
margin: 0;
padding: 8px 16px;
background: var(--background);
border-bottom: var(--border);
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: row wrap;
overflow: hidden;
}
@media screen and (max-width: 1199px) {
#spotlight {
display: none;
}
header input[type="search"] {
width: 200px;
}
header .title {
margin: 4px 0;
}
@media screen and (max-width: 849px) {
header .form {
display: none;
}
}
header .title a {
color: inherit;
color: inherit;
}
header .title h1 {
font-family: Cantarell; font-weight: bold; font-size: 18px;
display: inline;
font-family: Cantarell;
font-weight: bold;
font-size: 18px;
display: inline;
}
header .spacer {
flex: 1 0 auto;
flex: 1 0 auto;
}
header .links {
margin-left: 16px;
margin-left: 16px;
}
header svg {
width: 24px; height: 24px; vertical-align: middle;
transition: .15s ease;
}
header a:hover > svg, header a:focus > svg {
fill: var(--text);
}
header a {
fill: #363636;
cursor: pointer;
}
header .form {
/* The search icon is draws inside the input field but its space is allocated
on the right. Apply a negative margin to compensate this:
-24px for the search icon
-2px for the spacing between the search icon and the field */
margin-right: -26px;
margin-right: -26px;
}
@media screen and (max-width: 849px) {
header .form {
display: none;
}
}
header .form input[type="search"] {
display: inline-block; width: 250px;
padding: 5px 35px 5px 10px;
display: inline-block;
width: 250px;
padding: 5px 35px 5px 10px;
}
@media screen and (max-width: 1199px) {
header .form input[type="search"] {
width: 200px;
}
}
@media screen and (min-width: 1449px) {
header .form input[type="search"] {
font-size: 14px;
}
}
header .form input[type="search"]:focus ~ a {
opacity: 1;
}
header .form input[type="search"] ~ a {
position: relative; left: -33px;
opacity: .7;
position: relative;
left: -33px;
opacity: 0.7;
}
header .form input[type="search"] ~ a > svg > path {
fill: var(--text);
fill: var(--text);
}
header .form input[type="search"] ~ a:hover,
header .form input[type="search"]:focus ~ a {
opacity: 1;
header .form a {
fill: #363636;
cursor: pointer;
}
#spotlight {
margin-left: 16px;
header .form a:hover > svg,
header .form a:focus > svg {
fill: var(--text);
}
#spotlight a {
display: block;
header .form svg {
width: 24px;
height: 24px;
vertical-align: middle;
transition: 0.15s ease;
}
header #spotlight {
margin-left: 16px;
}
@media screen and (max-width: 1199px) {
header #spotlight {
display: none;
}
}
header #spotlight a {
display: block;
}
#server-speed-warning {
background: var(--warn);
color: var(--warn-text);
text-align: center;
border-radius: 2px;
padding: 4px;
margin: 0 8px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
background: var(--warn);
color: var(--warn-text);
text-align: center;
border-radius: 2px;
padding: 4px;
margin: 0 8px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

View File

@ -1,134 +1,144 @@
/*
home-title
home-title
*/
.home-title {
margin: 20px 0; padding: 10px 5%;
background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
border-top: 10px solid #ab170c;
margin: 20px 0;
padding: 10px 5%;
background: #bf1c11;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
border-top: 10px solid #ab170c;
}
.home-title h1 {
margin-top: 0;
color: #ffffff; border-color: #ffffff;
.home-title h1 {
margin-top: 0;
color: #ffffff;
border-color: #ffffff;
}
.home-title p {
margin-bottom: 0; text-align: justify;
color: #ffffff;
margin-bottom: 0;
text-align: justify;
color: #ffffff;
}
.home-title a {
color: inherit; text-decoration: underline;
color: inherit;
text-decoration: underline;
}
/*
pinned-content
pinned-content
*/
.home-pinned-content > div {
display: flex; justify-content: space-between;
display: flex;
justify-content: space-between;
}
.home-pinned-content article {
flex-grow: 1; margin: 0 1px; padding: 0;
position: relative;
max-width: 250px; overflow: hidden;
}
.home-pinned-content a {
display: block;
}
.home-pinned-content img {
width: 100%; filter: blur(0px);
}
.home-pinned-content article div {
position: absolute; bottom: 0; z-index: 3;
width: 90%; margin: 0;
padding: 30px 5% 10px 5%;
color: #ffffff; text-shadow: 1px 1px 0 rgba(0,0,0,.6);
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8));
}
.home-pinned-content h2 {
display: block; margin: 5px 0;
font-size: 18px; font-family: NotoSans; font-weight: 200;
line-height: 20px;
display: block;
margin: 5px 0;
font-size: 18px;
font-family: NotoSans;
font-weight: 200;
line-height: 20px;
}
/*
home-articles
*/
.home-articles {
display: flex; justify-content: space-between;
.home-pinned-content a {
display: block;
}
.home-articles > div {
flex-grow: 1; max-width: 48%;
}
.home-articles h1 {
display: flex; justify-content: space-between; align-items: center;
}
.home-articles h1 a {
padding: 0;
font-family: NotoSans; font-size: 16px;
font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f;
}
.home-articles article {
padding: 10px; margin: 10px 0; display: flex; align-items: center;
background: #ffffff; border: 1px solid rgba(0, 0, 0, .2);
}
.home-articles article > img {
float: left; margin-right: 10px; flex-shrink: 0;
}
.home-articles article > img.screeshot {
width: 128px; height: 64px;
}
.home-articles article > div {
flex-shrink: 1;
}
.home-articles article h3 {
margin: 0;
color: #424242; font-weight: normal;
}
.home-articles p {
margin: 5px 0;
text-align: justify;
color: #808080;
}
.home-articles .metadata {
margin: 0;
color: #22292c;
}
.home-articles .metadata a {
color: #22292c; font-weight: 400; font-style: italic;
}
/*
hover rules
*/
.home-pinned-content a:hover img,
.home-pinned-content a:focus img {
filter: blur(3px);
filter: blur(3px);
}
.home-pinned-content a:hover div,
.home-pinned-content a:focus div {
padding: 200px 5% 10px 5%;
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8));
padding: 200px 5% 10px 5%;
background-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.8));
}
.home-pinned-content img {
width: 100%;
filter: blur(0px);
}
.home-pinned-content article {
flex-grow: 1;
margin: 0 1px;
padding: 0;
position: relative;
max-width: 250px;
overflow: hidden;
}
.home-pinned-content article div {
position: absolute;
bottom: 0;
z-index: 3;
width: 90%;
margin: 0;
padding: 30px 5% 10px 5%;
color: #ffffff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
background-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.7) 40px, rgba(0, 0, 0, 0.8));
}
/*
home-articles
*/
.home-articles {
display: flex;
justify-content: space-between;
}
.home-articles > div {
flex-grow: 1;
max-width: 48%;
}
.home-articles h1 {
display: flex;
justify-content: space-between;
align-items: center;
}
.home-articles h1 a {
padding: 0;
font-family: NotoSans;
font-size: 16px;
font-weight: 400;
color: #234d5f;
}
.home-articles h1 a:hover,
.home-articles h1 a:focus {
padding-right: 10px;
padding-right: 10px;
}
.home-articles p {
margin: 5px 0;
text-align: justify;
color: #808080;
}
.home-articles article {
padding: 10px;
margin: 10px 0;
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.home-articles article > img {
float: left;
margin-right: 10px;
flex-shrink: 0;
}
.home-articles article > img.screeshot {
width: 128px;
height: 64px;
}
.home-articles article > div {
flex-shrink: 1;
}
.home-articles article h3 {
margin: 0;
color: #424242;
font-weight: normal;
}
.home-articles article a:hover,
.home-articles article a:focus {
text-decoration: underline;
text-decoration: underline;
}
.home-articles .metadata {
margin: 0;
color: #22292c;
}
.home-articles .metadata a {
color: #22292c;
font-weight: 400;
font-style: italic;
}

View File

@ -1,223 +0,0 @@
/* Whole page */
.light-hidden {
display: none;
}
.container {
margin-left: 0;
}
/* Menu */
#light-menu {
position: unset;
display: flex; flex-direction: row; align-items: center;
width: 100%; height: 60px;
overflow-x: auto; overflow-y: hidden;
}
#logo {
width: auto; height: 100%; margin-bottom: 0;
}
#logo img {
width: 60px; height: inherit;
margin-bottom: -4.5px;
}
#light-menu li {
display: flex; flex-direction: column;
align-items: center; flex-grow: 1;
height: 100%;
padding: 0 2px;
}
#light-menu li > a {
cursor: pointer; margin: 0;
}
#light-menu li > a:hover {
text-decoration: none;
}
#light-menu li > a > svg {
width: 20px;
}
#light-menu li > a > div {
display: block;
font-size: 12px;
}
#light-menu li:not(.opened) > a:hover::after,
#light-menu li:not(.opened) > a:focus::after {
display: none;
}
#light-menu li span[notifications]:not([notifications="0"])::before {
content: attr(notifications);
display: inline-block; margin-right: 6px;
vertical-align: middle;
padding: 0 5px 0 4px; border-radius: 5px;
font-family: NotoSans;
background: #ffffff; color: #000000;
}
#menu {
width: 100%; height: 0; overflow-x: hidden;
font-family: NotoSans; font-size: 12px;
transition: .1s ease;
position: unset;
left: unset;
}
#menu.opened {
height: 100%;
overflow-y: auto;
left: unset;
}
#menu > div {
width: 100%;
}
#menu h2 {
font-size: 15px;
}
#menu h2 > svg {
width: 24px;
}
#menu span {
display: block;
color: #b8b8b8;
font-size: 10px;
}
#menu span > a {
display: inline;
margin: 0; font-style: normal;
font-size: 12px;
}
#menu ul {
list-style: none;
margin: 10px 0; padding: 0;
line-height: 20px;
color: #b8b8b8;
}
#menu li {
margin: 5px 0;
}
@media screen and (max-width: 499px) {
#light-menu, #spacer-menu {
height: 40px;
}
#logo img {
width: 40px;
}
#light-menu li > a > div {
display: none;
}
}
#menu form input {
display: block;
margin: 5px 15px; padding: 5px 10px;
font-size: 14px;
transition: .15s ease;
}
#menu form label {
float: left; margin-right: 10px;
}
#menu form input:first-child {
margin-bottom: 0; border-bottom: none;
border-top-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-top-right-radius: 5px;
}
#menu form input:nth-child(2) {
margin-top: 0; border-top: 1px solid #dddddd;
border-bottom-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-bottom-right-radius: 5px;
}
#menu form a {
display: block; margin-left: 15px;
}
/* Header */
header {
padding: 0 8px;
}
/* Homepage */
#shoutbox {
display: none;
}
section {
width: unset;
margin: 12px;
}
.home-title {
padding: 10px;
}
.home-title p {
font-size: 14px;
}
.home-pinned-content {
margin-top: 30px;
}
.home-pinned-content article {
margin: 5px 0;
}
.home-pinned-content article > a {
width: 100%;
display: flex; align-items: center;
text-decoration: none;
}
.home-pinned-content img {
flex-shrink: 0;
width: 100px; height: 100px;
}
.home-pinned-content article div {
flex-grow: 1; margin-left: 10px;
}
.home-pinned-content h2 {
margin: 0; color: #242424;
text-decoration: underline;
}
.home-pinned-content span {
color: #000000; font-size: 14px;
}
.home-articles > div {
margin-top: 30px;
}
.home-articles article {
margin-bottom: 15px;
}
.home-articles article > img {
flex-shrink: 0; width: 128px; height: 64px;
}
.home-articles article > div {
margin-left: 5px;
}
.home-articles h1 > a {
font-size: 13px; color: #666666;
}
.home-articles p {
font-size: 14px;
}
/* Notifications */
.alert {
display: none;
}

View File

@ -1,183 +1,326 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
nav a {
opacity: .8;
cursor: pointer;
opacity: 0.8;
cursor: pointer;
}
nav a:hover,
nav a:focus {
opacity: 1;
opacity: 1;
}
/* Menu */
#light-menu {
position: fixed; z-index: 10;
list-style: none;
width: 110px;
height: 100%; overflow-y: auto;
margin: 0; padding: 0;
text-indent: 0;
background: var(--background); box-shadow: var(--shadow);
}
#logo {
position: relative; display: block;
width: 100%;
margin-bottom: 10px;
opacity: 1;
background: var(--logo-bg);
transition: .15s ease;
position: relative;
display: block;
width: 100%;
margin-bottom: 10px;
opacity: 1;
background: var(--logo-bg);
transition: 0.15s ease;
}
#logo img {
display: block; height: 65px;
margin: 0 auto; padding: 0;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
transition: filter .15s ease;
@media screen and (max-width: 849px) {
#logo {
width: auto;
height: 100%;
margin-bottom: 0;
}
}
#logo:hover,
#logo:focus {
background: var(--logo-active);
background: var(--logo-active);
}
#logo:hover img,
#logo:focus img {
filter: drop-shadow(var(--logo-shadow));
filter: drop-shadow(var(--logo-shadow));
}
#logo img {
display: block;
height: 65px;
margin: 0 auto;
padding: 0;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0));
transition: filter 0.15s ease;
}
@media screen and (max-width: 1199px) {
#logo img {
width: 60px;
height: inherit;
margin-bottom: -4.5px;
}
}
@media screen and (max-width: 499px) {
#logo img {
width: 50px;
}
}
#light-menu {
position: fixed;
z-index: 10;
list-style: none;
width: 110px;
height: 100%;
overflow-y: auto;
margin: 0;
padding: 0;
text-indent: 0;
font-size: 13px;
background: var(--background);
box-shadow: var(--shadow);
}
@media screen and (max-width: 849px) {
#light-menu {
position: unset;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 60px;
overflow-x: auto;
overflow-y: hidden;
}
}
@media screen and (max-width: 499px) {
#light-menu {
height: 50px;
}
}
#light-menu li {
width: 100%;
color: var(--text);
width: 100%;
color: var(--text);
}
@media screen and (max-width: 849px) {
#light-menu li {
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
padding: 0 2px;
font-size: 12px;
}
}
#light-menu li > a {
display: flex; flex-direction: column; flex-grow: 0;
align-items: center; justify-content: center;
width: 100%; height: 100%;
margin: 20px 0;
color: var(--text);
transition: opacity .15s ease; /* because Chrome sucks */
display: flex;
flex-direction: column;
flex-grow: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
margin: 20px 0;
color: var(--text);
transition: opacity 0.15s ease;
/* because Chrome sucks */
/* Avatar */
}
#light-menu li > a > img {
display: block; width: 60px; flex-shrink: 0; flex-grow: 0;
margin: 0 7px 5px 7px;
border-radius: 10%;
display: block;
width: 60px;
flex-shrink: 0;
flex-grow: 0;
margin: 0 7px 5px 7px;
border-radius: 10%;
}
@media screen and (max-width: 849px) {
#light-menu li > a > img {
width: 45px;
margin: 0;
}
#light-menu li > a > img ~ div {
display: none;
}
}
@media screen and (max-width: 499px) {
#light-menu li > a > img {
width: 40px;
}
}
#light-menu li > a > svg {
display: block; width: 25px; flex-shrink: 0; flex-grow: 0;
margin: 0 7px;
display: block;
width: 25px;
flex-shrink: 0;
flex-grow: 0;
margin: 0 7px;
}
#light-menu li > a > svg > path {
fill: var(--icons);
fill: var(--icons);
}
#light-menu li div {
/*flex-grow: 1;*/
@media screen and (max-width: 499px) {
#light-menu li > a > div {
display: none;
}
}
/* Overlay */
#menu {
position: fixed; z-index: 5;
left: -190px; width: 300px; /* default: left-to-right animation */
height: 100%; overflow-x: hidden; overflow-y: auto;
background: var(--background); color: var(--text);
box-shadow: var(--shadow);
transition: .15s ease;
position: fixed;
z-index: 5;
left: -190px;
width: 300px;
/* default: left-to-right animation */
height: 100%;
overflow-x: hidden;
overflow-y: auto;
font-size: 13px;
background: var(--background);
color: var(--text);
box-shadow: var(--shadow);
transition: 0.15s ease;
/* Set class="scroll-animation" to menu to apply scroll animation */
/* Login form */
}
@media screen and (max-width: 849px) {
#menu {
width: 100%;
height: 0;
overflow-x: hidden;
font-family: NotoSans;
transition: 0.1s ease;
position: unset;
left: unset;
}
}
#menu.opened {
left: 110px;
left: 110px;
}
@media screen and (max-width: 849px) {
#menu.opened {
height: 100%;
overflow-y: auto;
left: unset;
}
}
/* Just apply class="scroll-animation" to menu to change to scroll animation */
#menu.scroll-animation {
left: 110px; width: 0;
left: 110px;
width: 0;
}
#menu.scroll-animation.opened {
width: 300px;
width: 300px;
}
#menu > div {
width: 300px;
padding: 16px;
display: none;
width: 300px;
padding: 16px;
display: none;
}
@media screen and (max-width: 849px) {
#menu > div {
width: 100%;
padding-bottom: 2px;
}
}
#menu > div.opened {
display: block;
display: block;
}
#menu h2 {
margin: 0 0 20px 0;
font-family: Cantarell; font-weight: bold; font-size: 18px;
color: var(--text);
display: flex; align-items: center;
margin: 0 0 20px 0;
font-family: Cantarell;
font-weight: bold;
font-size: 18px;
color: var(--text);
display: flex;
align-items: center;
}
@media screen and (max-width: 499px) {
#menu h2 {
font-size: 15px;
}
}
#menu h2 a {
margin: 0;
font-size: inherit; opacity: inherit;
}
#menu h2 > svg {
width: 32px; vertical-align: middle; margin-right: 8px;
}
#menu h2 img {
height: 48px; vertical-align: middle; margin-right: 10px;
margin: 0;
font-size: inherit;
opacity: inherit;
}
#menu h2 a:hover,
#menu h2 a:focus {
text-decoration: underline;
text-decoration: underline;
}
#menu h2 > svg {
width: 32px;
vertical-align: middle;
margin-right: 8px;
}
@media screen and (max-width: 499px) {
#menu h2 > svg {
width: 24px;
}
}
#menu h2 img {
height: 48px;
vertical-align: middle;
margin-right: 10px;
}
#menu h3 {
margin: 16px 0;
font-family: Cantarell; font-weight: bold; font-size: 15px;
color: var(--text);
margin: 16px 0;
font-family: Cantarell;
font-weight: bold;
font-size: 15px;
color: var(--text);
}
#menu hr {
margin: 15px 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin: 15px 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#menu ul {
margin: 0; padding: 0; list-style: none;
margin: 0;
padding: 0;
list-style: none;
}
#menu a,
#menu li {
display: block; margin: 10px 0;
color: var(--text);
transition: opacity .15s ease;
display: block;
margin: 10px 0;
color: var(--text);
transition: opacity 0.15s ease;
}
#menu li > a {
display: inline;
margin: 0; font-style: normal;
font-size: 13px;
display: inline;
margin: 0;
font-style: normal;
font-size: 13px;
}
#menu a > img {
vertical-align: middle;
margin-right: 15px;
vertical-align: middle;
margin-right: 15px;
}
#menu a > svg {
width: 20px; height: 20px; vertical-align: middle;
margin-right: 10px;
width: 20px;
height: 20px;
vertical-align: middle;
margin-right: 10px;
}
#menu form {
padding: 0 8%;
padding: 0 8%;
}
@media screen and (max-width: 849px) {
#menu form {
padding: 0;
}
}
#menu form input[type="text"],
#menu form input[type="password"] {
margin: 8px 0; padding: 5px 2%;
font-size: 14px; color: inherit;
border: var(--input-border);
background: var(--input-bg); color: var(--input-text); opacity: .8;
margin: 8px 0;
padding: 5px 2%;
font-size: 14px;
border: var(--input-border);
background: var(--input-bg);
color: var(--input-text);
opacity: 0.8;
}
#menu form input[type="text"]:focus,
#menu form input[type="password"]:focus {
opacity: 1;
opacity: 1;
}
#menu form input[type="submit"] {
width: 100%;
margin: 8px 0 5px 0;
width: 100%;
margin: 8px 0 5px 0;
}
#menu form label {
font-size: 13px; opacity: .8;
font-size: 13px;
opacity: 0.8;
}

View File

@ -1,42 +0,0 @@
@media all and (max-width: 1399px) {
body, input {
font-size: 13px;
}
header input[type="search"] {
font-size: 14px;
}
#menu li {
font-size: 10px;
}
#menu a {
font-size: 13px;
}
}
@media all and (min-width: 1400px) {
body, input {
font-size: 13px;
}
header input[type="search"] {
font-size: 14px;
}
#menu li {
font-size: 11px;
}
}
@media screen and (max-width: 1199px) {
.home-pinned-content article:nth-child(5) {
display: none;
}
}
@media screen and (max-width: 849px) {
.home-pinned-content article:nth-child(4) {
display: none;
}
}

View File

@ -1,34 +1,34 @@
#shoutbox {
margin: 20px 5% 10px 5%;
/*box-shadow: 0 0 2px rgba(0, 0, 0, .4);*/
background: #ffffff;
/*border: 1px solid #999999;*/
margin: 20px 5% 10px 5%;
background: #ffffff;
}
#shoutbox > div {
margin: 0; padding: 0; height: 125px; width: 100%;
overflow-y: scroll; border-bottom: 1px solid #999999;
border-radius: 5px 5px 0 0;
border: 1px solid #999999;
margin: 0;
padding: 0;
height: 125px;
width: 100%;
overflow-y: scroll;
border-bottom: 1px solid var(--border);
border-radius: 5px 5px 0 0;
}
#shoutbox > input {
width: 100%; padding: 5px 0;
border-radius: 0 0 5px 5px;
border: 1px solid #999999;
}
#shoutbox > input:focus {
border-color: #a12222;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6);
}
#shoutbox > div > div {
padding: 2px 10px;
border-bottom: 1px solid rgba(0, 0, 0, .3);
font-size: 11px;
}
#shoutbox > div > div:last-child {
border-bottom: none;
padding: 2px 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
font-size: 11px;
}
#shoutbox > div > div:hover {
background: #e0e0e0;
}
background: var(--background);
}
#shoutbox > div > div:last-child {
border-bottom: none;
}
#shoutbox > input {
width: 100%;
padding: 5px 0;
border-radius: 0 0 5px 5px;
border: 1px solid var(--border);
}
#shoutbox > input:focus {
border-color: var(--border-focus);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6);
}

View File

@ -3,6 +3,11 @@ table {
border-color: var(--border);
border-style: solid;
border-width: 0 0 1px 0;
/* Code fragments */
/* Forum and sub-forum listings */
/* Topic table */
/* Thread table */
/* Tables with filters */
}
table tr:nth-child(even) {
background: var(--background);
@ -18,18 +23,15 @@ table th {
padding: 2px 6px;
}
table:not(.codehilitetable) td {
padding: 4px 6px;
padding: 4px 6px;
}
/* Code fragments */
table.codehilitetable {
border: none;
width: 100%;
/* This seems to be the only way to prevent the automatic table size
algorithm from assigning extreme widths when content overflows.
Fortunately the structure of the table is very simple, so we can afford to
set a fixed width on line numbers and move on */
algorithm from assigning extreme widths when content overflows.
Fortunately the structure of the table is very simple, so we can afford to
set a fixed width on line numbers and move on */
table-layout: fixed;
}
table.codehilitetable tr:nth-child(even),
@ -54,34 +56,24 @@ table.codehilitetable pre {
table.codehilitetable pre {
overflow-x: auto;
}
/* Forum and sub-forum listings */
table.forumlist {
border-collapse: separate;
border-spacing: 0;
margin: 16px 0;
width: 100%;
}
/* table.forumlist th {
background: #d05950;
border-color: #b04940;
color: white;
} */
table.forumlist tr {
background: unset;
}
table.forumlist tr > td:last-child,
table.forumlist tr > th:last-child {
width: 20%;
text-align: center;
}
table.forumlist tr:nth-child(4n+2),
table.forumlist tr:nth-child(4n+3) {
background: rgba(0, 0, 0, .05);
background: rgba(0, 0, 0, 0.05);
}
/* Topic table */
table.topiclist {
width: 100%;
margin: auto;
@ -90,18 +82,11 @@ table.topiclist tr > *:nth-child(n+2) {
/* This matches all children except the first column */
text-align: center;
}
table.forumlist th > td:last-child,
table.forumlist tr > td:last-child,
table.topiclist th > td:last-child,
table.topiclist tr > td:last-child {
width: 20%; text-align: center;
table.topiclist tr > td:last-child,
table.topiclist tr > th:last-child {
width: 20%;
text-align: center;
}
/* Thread table */
table.thread {
width: 100%;
border-width: 1px 0;
@ -109,40 +94,50 @@ table.thread {
table.thread.topcomment {
border: none;
}
table.thread td.author {
width: 256px;
table.thread.topcomment td.message {
padding-top: 0;
}
table.thread.topcomment div.info {
padding-bottom: 4px;
}
table.thread td {
vertical-align: top;
}
table.thread td.author {
width: 256px;
}
@media screen and (max-width: 1199px) {
table.thread td.author {
/* Includes padding */
width: 136px;
overflow-wrap: anywhere;
}
}
@media screen and (max-width: 849px) {
table.thread td.author {
width: 104px;
}
}
table.thread td.message {
padding-top: 8px;
}
table.thread.topcomment td.message {
padding-top: 0;
}
table.thread td.message > *:nth-child(2) {
margin-top: 0;
}
table.thread td.message img {
max-width: 100%;
}
table.thread .topcomment-placeholder div {
font-style: italic;
opacity: 0.5;
padding: 8px 0;
table.thread:not(.topcomment) div.info {
float: right;
}
table.thread div.info {
text-align: right;
position: relative;
}
table.thread.topcomment div.info {
padding-bottom: 4px;
}
table.thread:not(.topcomment) div.info {
float: right;
@media screen and (max-width: 1199px) {
table.thread div.info {
float: none;
}
}
table.thread div.info > * {
display: inline-block;
@ -153,7 +148,11 @@ table.thread div.info summary {
cursor: pointer;
user-select: none;
}
table.thread .topcomment-placeholder div {
font-style: italic;
opacity: 0.5;
padding: 8px 0;
}
table.thread .context-menu {
position: absolute;
right: 0;
@ -163,7 +162,6 @@ table.thread .context-menu {
box-shadow: var(--shadow);
border-radius: 4px;
transition: none;
background: var(--background);
z-index: 2;
border: 1px solid var(--border);
@ -178,25 +176,6 @@ table.thread .context-menu a:hover {
background: var(--background-light);
text-decoration: none;
}
@media screen and (max-width: 1199px) {
table.thread div.info {
float: none;
}
table.thread td.author {
/* Includes padding */
width: 136px;
overflow-wrap: anywhere;
}
}
@media screen and (max-width: 849px) {
table.thread td.author {
width: 104px;
}
}
/* Tables with filters */
table.filter-target th:after {
content: attr(data-filter);
display: block;

9
app/static/css/vars.css Normal file
View File

@ -0,0 +1,9 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/

View File

@ -1,158 +1,140 @@
/* Currently 3 screen sizes supported :
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
/* Profile summaries */
.profile {
display: flex;
align-items: center;
width: 265px;
display: flex;
align-items: center;
width: 265px;
}
.profile-avatar {
width: 128px;
height: 128px;
margin-right: 16px;
width: 128px;
height: 128px;
margin-right: 16px;
}
.profile-name {
font-weight: bold;
font-weight: bold;
}
.profile-title {
margin-bottom: 8px;
margin-bottom: 8px;
}
.profile-points {
font-size: 11px;
font-size: 11px;
}
.profile-points span {
color: gray;
color: gray;
}
.profile-points-small {
display: none;
display: none;
}
.profile-xp {
height: 10px;
min-width: 96px;
max-width: 96px;
background: var(--background);
border: var(--border);
height: 10px;
min-width: 96px;
max-width: 96px;
background: var(--background);
border: var(--border);
}
.profile-xp-100 {
background: var(--background-xp);
border: var(--border-xp);
background: var(--background-xp);
border: var(--border-xp);
}
.profile-xp div {
height: 10px;
background: var(--background-xp);
border: var(--border-xp);
margin: -1px;
height: 10px;
background: var(--background-xp);
border: var(--border-xp);
margin: -1px;
}
.profile-xp-100 div {
background: var(--background-xp-100);
background: var(--background-xp-100);
}
.profile.guest {
flex-direction: column;
width: 100%;
padding-top: 12px;
text-align: center;
flex-direction: column;
width: 100%;
padding-top: 12px;
text-align: center;
}
.profile.guest em {
display: block;
font-weight: bold;
font-style: normal;
margin-bottom: 8px;
display: block;
font-weight: bold;
font-style: normal;
margin-bottom: 8px;
}
@media screen and (max-width: 1199px) {
table.thread .profile {
flex-direction: column;
width: 96px;
text-align: center;
}
table.thread .profile-avatar {
order: 1;
margin-right: 0;
margin-top: 4px;
width: 96px;
height: 96px;
}
table.thread .profile-title,
table.thread .profile-points,
table.thread .profile-xp {
display: none;
}
table.thread .profile-points-small {
display: inline;
}
@media (max-width: 1199px) {
table.thread .profile {
flex-direction: column;
width: 96px;
text-align: center;
}
table.thread .profile-avatar {
order: 1;
margin-right: 0;
margin-top: 4px;
width: 96px;
height: 96px;
}
table.thread .profile-title,
table.thread .profile-points,
table.thread .profile-xp {
display: none;
}
table.thread .profile-points-small {
display: inline;
}
}
@media screen and (max-width: 849px) {
table.thread .profile {
width: 96px;
}
table.thread .profile-avatar {
width: 64px;
height: 64px;
}
@media (max-width: 849px) {
table.thread .profile {
width: 96px;
}
table.thread .profile-avatar {
width: 64px;
height: 64px;
}
}
/* Trophies */
.trophies {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.trophy {
display: flex;
align-items: center;
width: 260px;
margin: 5px;
padding: 5px;
border: 1px solid #c5c5c5;
border-left: 5px solid var(--links);
border-radius: 2px;
display: flex;
align-items: center;
width: 260px;
margin: 5px;
padding: 5px;
border: 1px solid #c5c5c5;
border-left: 5px solid var(--links);
border-radius: 2px;
}
.trophy img {
height: 48px;
margin-right: 8px;
}
.trophy div > * {
display: block;
}
.trophy em {
font-style: normal;
font-weight: bold;
margin-bottom: 3px;
}
.trophy span {
font-size: 80%;
}
.trophy.disabled {
filter: grayscale(100%);
opacity: .5;
border-left: 1px solid #c5c5c5;
filter: grayscale(100%);
opacity: 0.5;
border-left: 1px solid #c5c5c5;
}
.trophy.form-disabled {
border-left: 1px solid #c5c5c5;
flex-grow: 1;
border-left: 1px solid #c5c5c5;
flex-grow: 1;
}
.trophy img {
height: 48px;
margin-right: 8px;
}
.trophy div > * {
display: block;
}
.trophy em {
font-style: normal;
font-weight: bold;
margin-bottom: 3px;
}
.trophy span {
font-size: 80%;
}
hr.signature {
opacity: 0.2;
opacity: 0.2;
}

View File

@ -0,0 +1,21 @@
@import "vars";
.container {
margin-left: 110px;
@media screen and (max-width: @tiny) {
margin-left: 0;
}
}
section {
width: 80%;
margin: 20px auto 0 auto;
@media screen and (max-width: @normal) {
width: 90%;
}
@media screen and (max-width: @small) {
width: 95%;
}
}

View File

@ -0,0 +1,39 @@
/*
flash overlay
*/
.flash {
margin: 5px auto;
display: flex;
align-items: center;
width: 80%;
font-size: 14px;
border-bottom: 5px solid var(--info);
border-radius: 1px;
box-shadow: var(--shadow);
&.info {
border-color: var(--info);
}
&.ok {
border-color: var(--ok);
}
&.warning {
border-color: var(--warn);
}
&.error {
border-color: var(--error);
}
span {
flex-grow: 1;
margin: 15px 10px 10px 0;
}
svg {
margin: 15px 20px 10px 30px;
}
}

View File

@ -0,0 +1,14 @@
/*
Footer
*/
footer {
margin: 20px 0 0 0; padding: 10px 10%;
text-align: center; font-size: 11px; font-style: italic;
background: var(--background); color: var(--text);
border-top: var(--border);
p {
margin: 3px 0;
}
}

152
app/static/less/form.less Normal file
View File

@ -0,0 +1,152 @@
/* Full-page forms */
.form {
form {
& > div:not(:last-child):not(.editor-toolbar) {
margin-bottom: 16px;
}
label {
display: inline-block;
margin: 0 5px 4px 0;
& + .desc {
margin: 0 0 4px 0;
font-size: 80%;
opacity: .75;
}
}
.avatar {
width: 128px; height: 128px;
& + input[type="file"] {
margin: 16px 0 0 0;
vertical-align: middle;
}
}
}
input[type='text'],
input[type='email'],
input[type='date'],
input[type='password'],
input[type='search'],
textarea,
select {
display: block;
width: 100%; padding: 6px 8px;
background: var(--background); color: var(--text);
border: var(--border);
/* Transitions when resizing with the mouse produces apparent lag */
transition: all .15s ease, width 0s, height 0s;
&:focus {
border-color: var(--border-focused);
box-shadow: 0 0 0 3px var(--shadow-focused);
}
&:focus-within {
/* Override an annoying Firefox default */
outline: none;
}
}
input[type='checkbox'],
input[type='radio'] {
display: inline;
vertical-align: middle;
margin: 0 4px 0 0;
}
textarea {
max-width: 100%;
resize: vertical;
}
select {
width: auto;
}
progress.entropy {
display: none; /* Display with Js enabled */
width: 100%; margin-top: 5px;
background: var(--background);
border: var(--border);
&.low {
&::-moz-progress-bar,
&::-webkit-progress-bar {
background: var(--error);
}
}
&.medium {
&::-moz-progress-bar,
&::-webkit-progress-bar {
background: var(--warn);
}
}
&.high {
&::-moz-progress-bar,
&::-webkit-progress-bar {
background: var(--ok);
}
}
}
hr {
height: 3px;
border: var(--hr-border);
border-width: 1px 0;
margin: 24px 0;
}
.msgerror {
color: var(--error);
font-weight: 400;
margin-top: 5px;
}
/* anti-bots field */
.abfield {
display: none;
}
}
/* Interactive filter forms */
.form.filter {
margin-bottom: 16px;
& > p:first-child {
font-size: 80%;
color: gray;
margin-bottom: 2px;
}
input {
font-family: monospace;
}
.syntax-explanation {
font-size: 80%;
color: gray;
margin-top: 8px;
ul {
font-size: inherit;
color: inherit;
padding-left: 16px;
line-height: 20px;
margin-top: 2px;
}
code {
background: rgba(0,0,0,.05);
padding: 1px 2px;
border-radius: 2px;
}
}
}

131
app/static/less/global.less Normal file
View File

@ -0,0 +1,131 @@
@import "vars";
/* Fonts */
@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); font-display: swap; }
@font-face { font-family: Twemoji; src: url(../fonts/TwitterColorEmoji.ttf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: normal; src: url(../fonts/Cantarell-Regular.otf); font-display: swap; }
@font-face { font-family: Cantarell; font-weight: bold; src: url(../fonts/Cantarell-Bold.otf); font-display: swap; }
/* Whole page */
* {
box-sizing: border-box;
/* This transition value is replicated everywhere transitions are customized,
make sure to track them when editing */
transition: .15s ease;
}
body {
margin: 0;
background: var(--background);
color: var(--text);
font-family: 'DejaVu Sans', sans-serif;
font-size: 13px;
@media screen and (min-width: @normal) {
font-size: 14px;
}
}
/* General */
a {
text-decoration: none;
color: var(--links);
&:hover, &:focus {
text-decoration: underline;
outline: none;
}
}
section {
p {
line-height: 20px;
word-wrap: anywhere;
}
ul {
line-height: 24px;
}
h1 {
margin-top: 0;
border-bottom: var(--hr-border);
font-family: Cantarell; font-weight: bold;
font-size: 26px;
color: var(--text-light);
}
h2 {
margin: 24px 0 16px 0;
border-bottom: var(--hr-border);
font-family: Cantarell; font-weight: bold;
font-size: 18px;
color: var(--text-light);
padding-bottom: 2px;
}
}
/* Buttons */
.button, input[type="button"], input[type="submit"] {
padding: 6px 10px; border-radius: 2px;
cursor: pointer;
font-family: 'DejaVu Sans', sans-serif; font-weight: 400;
border: 0;
&:hover, &:focus {
text-decoration: none;
}
}
/* Bootstrap-style rules */
.flex {
display: flex;
}
.bg-ok {
background: var(--ok);
color: var(--ok-text);
&:hover, &:focus, &:active {
background: var(--ok-active);
}
}
.bg-error {
background: var(--error);
color: var(--error-text);
&:hover, &:focus, &:active {
background: var(--error-active);
}
}
.bg-warn {
background: var(--warn);
color: var(--warn-text);
&:hover, &:focus, &:active {
background: var(--warn-active);
}
}
.skip-to-content-link {
height: 30px;
left: 50%;
padding: 8px;
position: absolute;
transform: translateY(-100%);
transition: transform 0.3s;
background: var(--links);
color: var(--warn-text);
border-radius: 1px;
&:focus {
transform: translateY(0%);
}
}

105
app/static/less/header.less Normal file
View File

@ -0,0 +1,105 @@
@import "vars";
header {
margin: 0; padding: 8px 16px;
background: var(--background); border-bottom: var(--border);
display: flex; align-items: center; justify-content: space-between;
flex-flow: row wrap;
overflow: hidden;
.title {
margin: 4px 0;
a {
color: inherit;
}
h1 {
font-family: Cantarell; font-weight: bold; font-size: 18px;
display: inline;
}
}
.spacer {
flex: 1 0 auto;
}
.links {
margin-left: 16px;
}
.form {
margin-right: -26px;
@media screen and (max-width: @tiny) {
display: none;
}
input[type="search"] {
display: inline-block; width: 250px;
padding: 5px 35px 5px 10px;
@media screen and (max-width: @small) {
width: 200px;
}
@media screen and (min-width: @normal) {
font-size: 14px;
}
&:focus {
& ~ a {
opacity: 1;
}
}
& ~ a {
position: relative; left: -33px;
opacity: .7;
& > svg > path {
fill: var(--text);
}
}
}
a {
fill: #363636;
cursor: pointer;
&:hover, &:focus {
& > svg {
fill: var(--text);
}
}
}
svg {
width: 24px; height: 24px; vertical-align: middle;
transition: .15s ease;
}
}
#spotlight {
margin-left: 16px;
@media screen and (max-width: @small) {
display: none;
}
a {
display: block;
}
}
}
#server-speed-warning {
background: var(--warn);
color: var(--warn-text);
text-align: center;
border-radius: 2px;
padding: 4px;
margin: 0 8px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(0,0,0,.5);
}

View File

@ -0,0 +1,140 @@
/*
home-title
*/
.home-title {
margin: 20px 0; padding: 10px 5%;
background: #bf1c11; box-shadow: 0 2px 2px rgba(0, 0, 0, .3);
border-top: 10px solid #ab170c;
h1 {
margin-top: 0;
color: #ffffff; border-color: #ffffff;
}
p {
margin-bottom: 0; text-align: justify;
color: #ffffff;
}
a {
color: inherit; text-decoration: underline;
}
}
/*
pinned-content
*/
.home-pinned-content {
& > div {
display: flex; justify-content: space-between;
}
h2 {
display: block; margin: 5px 0;
font-size: 18px; font-family: NotoSans; font-weight: 200;
line-height: 20px;
}
a {
display: block;
&:hover, &:focus {
img {
filter: blur(3px);
}
div {
padding: 200px 5% 10px 5%;
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8));
}
}
}
img {
width: 100%; filter: blur(0px);
}
article {
flex-grow: 1; margin: 0 1px; padding: 0;
position: relative;
max-width: 250px; overflow: hidden;
div {
position: absolute; bottom: 0; z-index: 3;
width: 90%; margin: 0;
padding: 30px 5% 10px 5%;
color: #ffffff; text-shadow: 1px 1px 0 rgba(0,0,0,.6);
background-image: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 40px,rgba(0,0,0,.8));
}
}
}
/*
home-articles
*/
.home-articles {
display: flex; justify-content: space-between;
& > div {
flex-grow: 1; max-width: 48%;
}
h1 {
display: flex; justify-content: space-between; align-items: center;
a {
padding: 0;
font-family: NotoSans; font-size: 16px;
font-weight: 400; color: /*#015078*/ /*#bf1c11*/ #234d5f;
&:hover, &:focus {
padding-right: 10px;
}
}
}
p {
margin: 5px 0;
text-align: justify;
color: #808080;
}
article {
padding: 10px; margin: 10px 0; display: flex; align-items: center;
background: #ffffff; border: 1px solid rgba(0, 0, 0, .2);
& > img {
float: left; margin-right: 10px; flex-shrink: 0;
&.screeshot {
width: 128px; height: 64px;
}
}
& > div {
flex-shrink: 1;
}
h3 {
margin: 0;
color: #424242; font-weight: normal;
}
a:hover, a:focus {
text-decoration: underline;
}
}
.metadata {
margin: 0;
color: #22292c;
a {
color: #22292c; font-weight: 400; font-style: italic;
}
}
}

279
app/static/less/navbar.less Normal file
View File

@ -0,0 +1,279 @@
@import "vars";
nav a {
opacity: .8;
cursor: pointer;
&:hover, &:focus {
opacity: 1;
}
}
/* Menu */
#logo {
position: relative; display: block;
width: 100%;
margin-bottom: 10px;
opacity: 1;
background: var(--logo-bg);
transition: .15s ease;
@media screen and (max-width: @tiny) {
width: auto; height: 100%; margin-bottom: 0;
}
&:hover, &:focus {
background: var(--logo-active);
img {
filter: drop-shadow(var(--logo-shadow));
}
}
img {
display: block; height: 65px;
margin: 0 auto; padding: 0;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, .0));
transition: filter .15s ease;
@media screen and (max-width: @small) {
width: 60px; height: inherit;
margin-bottom: -4.5px;
}
@media screen and (max-width: @micro) {
width: 50px;
}
}
}
#light-menu {
position: fixed; z-index: 10;
list-style: none;
width: 110px;
height: 100%; overflow-y: auto;
margin: 0; padding: 0;
text-indent: 0; font-size: 13px;
background: var(--background); box-shadow: var(--shadow);
@media screen and (max-width: @tiny) {
position: unset;
display: flex; flex-direction: row; align-items: center;
width: 100%; height: 60px;
overflow-x: auto; overflow-y: hidden;
}
@media screen and (max-width: @micro) {
height: 50px;
}
li {
width: 100%;
color: var(--text);
@media screen and (max-width: @tiny) {
display: flex; flex-direction: column;
align-items: center; flex-grow: 1;
padding: 0 2px; font-size: 12px;
}
& > a {
display: flex; flex-direction: column; flex-grow: 0;
align-items: center; justify-content: center;
width: 100%; height: 100%;
margin: 20px 0;
color: var(--text);
transition: opacity .15s ease; /* because Chrome sucks */
/* Avatar */
& > img {
display: block; width: 60px; flex-shrink: 0; flex-grow: 0;
margin: 0 7px 5px 7px;
border-radius: 10%;
@media screen and (max-width: @tiny) {
width: 45px;
margin: 0;
& ~ div {
display: none;
}
}
@media screen and (max-width: @micro) {
width: 40px;
}
}
& > svg {
display: block; width: 25px; flex-shrink: 0; flex-grow: 0;
margin: 0 7px;
& > path {
fill: var(--icons);
}
}
& > div {
@media screen and (max-width: @micro) {
display: none;
}
}
}
}
}
/* Overlay */
#menu {
position: fixed; z-index: 5;
left: -190px; width: 300px; /* default: left-to-right animation */
height: 100%; overflow-x: hidden; overflow-y: auto;
font-size: 13px;
background: var(--background); color: var(--text);
box-shadow: var(--shadow);
transition: .15s ease;
@media screen and (max-width: @tiny) {
width: 100%; height: 0; overflow-x: hidden;
font-family: NotoSans;
transition: .1s ease;
position: unset;
left: unset;
}
&.opened {
left: 110px;
@media screen and (max-width: @tiny) {
height: 100%;
overflow-y: auto;
left: unset;
}
}
/* Set class="scroll-animation" to menu to apply scroll animation */
&.scroll-animation {
left: 110px; width: 0;
&.opened {
width: 300px;
}
}
& > div {
width: 300px;
padding: 16px;
display: none;
@media screen and (max-width: @tiny) {
width: 100%;
padding-bottom: 2px;
}
&.opened {
display: block;
}
}
h2 {
margin: 0 0 20px 0;
font-family: Cantarell; font-weight: bold; font-size: 18px;
color: var(--text);
display: flex; align-items: center;
@media screen and (max-width: @micro) {
font-size: 15px;
}
a {
margin: 0;
font-size: inherit; opacity: inherit;
&:hover, &:focus {
text-decoration: underline;
}
}
& > svg {
width: 32px; vertical-align: middle; margin-right: 8px;
@media screen and (max-width: @micro) {
width: 24px;
}
}
img {
height: 48px; vertical-align: middle; margin-right: 10px;
}
}
h3 {
margin: 16px 0;
font-family: Cantarell; font-weight: bold; font-size: 15px;
color: var(--text);
}
hr {
margin: 15px 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
ul {
margin: 0; padding: 0; list-style: none;
}
a, li {
display: block; margin: 10px 0;
color: var(--text);
transition: opacity .15s ease;
}
li > a {
display: inline;
margin: 0; font-style: normal;
font-size: 13px;
}
a > img {
vertical-align: middle;
margin-right: 15px;
}
a > svg {
width: 20px; height: 20px; vertical-align: middle;
margin-right: 10px;
}
/* Login form */
form {
padding: 0 8%;
@media screen and (max-width: @tiny) {
padding: 0;
}
input[type="text"],
input[type="password"] {
margin: 8px 0; padding: 5px 2%;
font-size: 14px;
border: var(--input-border);
background: var(--input-bg);
color: var(--input-text);
opacity: .8;
&:focus {
opacity: 1;
}
}
input[type="submit"] {
width: 100%;
margin: 8px 0 5px 0;
}
label {
font-size: 13px; opacity: .8;
}
}
}

View File

@ -0,0 +1,4 @@
.pagination {
text-align: center;
margin: 5px 0;
}

View File

@ -0,0 +1,35 @@
#shoutbox {
margin: 20px 5% 10px 5%;
background: #ffffff;
& > div {
margin: 0; padding: 0; height: 125px; width: 100%;
overflow-y: scroll; border-bottom: 1px solid var(--border);
border-radius: 5px 5px 0 0;
& > div {
padding: 2px 10px;
border-bottom: 1px solid rgba(0, 0, 0, .3);
font-size: 11px;
&:hover {
background: var(--background);
}
&:last-child {
border-bottom: none;
}
}
}
& > input {
width: 100%; padding: 5px 0;
border-radius: 0 0 5px 5px;
border: 1px solid var(--border);
&:focus {
border-color: var(--border-focus);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(161, 34, 34, 0.6);
}
}
}

220
app/static/less/table.less Normal file
View File

@ -0,0 +1,220 @@
@import "vars";
table {
border-collapse: collapse;
border-color: var(--border);
border-style: solid;
border-width: 0 0 1px 0;
tr {
&:nth-child(even) {
background: var(--background);
}
&:nth-child(odd) {
background: var(--background);
}
}
th {
background: var(--background);
border-color: var(--border);
border-style: solid;
border-width: 1px 0;
padding: 2px 6px;
}
&:not(.codehilitetable) td {
padding: 4px 6px;
}
/* Code fragments */
&.codehilitetable {
border: none;
width: 100%;
/* This seems to be the only way to prevent the automatic table size
algorithm from assigning extreme widths when content overflows.
Fortunately the structure of the table is very simple, so we can afford to
set a fixed width on line numbers and move on */
table-layout: fixed;
tr:nth-child(even),
tr:nth-child(odd) {
background: none;
}
td {
padding: 0;
&.linenos {
width: 40px;
text-align: right;
span {
padding-right: 8px;
}
}
}
td.code,
pre {
margin: 0;
width: 100%;
}
pre {
overflow-x: auto;
}
}
/* Forum and sub-forum listings */
&.forumlist {
border-collapse: separate;
border-spacing: 0;
margin: 16px 0;
width: 100%;
tr {
background: unset;
& > td:last-child,
& > th:last-child {
width: 20%; text-align: center;
}
&:nth-child(4n+2),
&:nth-child(4n+3) {
background: rgba(0, 0, 0, .05);
}
}
}
/* Topic table */
&.topiclist {
width: 100%;
margin: auto;
tr {
& > *:nth-child(n+2) {
/* This matches all children except the first column */
text-align: center;
}
& > td:last-child,
& > th:last-child {
width: 20%; text-align: center;
}
}
}
/* Thread table */
&.thread {
width: 100%;
border-width: 1px 0;
&.topcomment {
border: none;
td.message {
padding-top: 0;
}
div.info {
padding-bottom: 4px;
}
}
td {
vertical-align: top;
&.author {
width: 256px;
@media screen and (max-width: @small) {
/* Includes padding */
width: 136px;
overflow-wrap: anywhere;
}
@media screen and (max-width: @tiny) {
width: 104px;
}
}
&.message {
padding-top: 8px;
& > *:nth-child(2) {
margin-top: 0;
}
img {
max-width: 100%;
}
}
}
&:not(.topcomment) div.info {
float: right;
}
div.info {
text-align: right;
position: relative;
@media screen and (max-width: @small) {
float: none;
}
& > * {
display: inline-block;
vertical-align: top;
}
summary {
list-style: none;
cursor: pointer;
user-select: none;
}
}
.topcomment-placeholder div {
font-style: italic;
opacity: 0.5;
padding: 8px 0;
}
.context-menu {
position: absolute;
right: 0;
top: 100%;
margin: 0;
padding: 4px 0;
box-shadow: var(--shadow);
border-radius: 4px;
transition: none;
background: var(--background);
z-index: 2;
border: 1px solid var(--border);
a {
display: block;
padding: 4px 8px;
text-align: center;
color: inherit;
&:hover {
background: var(--background-light);
text-decoration: none;
}
}
}
}
/* Tables with filters */
&.filter-target th:after {
content: attr(data-filter);
display: block;
font-size: 80%;
font-family: monospace;
font-weight: normal;
}
}

14
app/static/less/vars.less Normal file
View File

@ -0,0 +1,14 @@
/* Currently 3 screen sizes supported :
- micro: < 500px
- tiny: < 850px
- small: < 1200px
- normal: >= 1200px
Ex:
@media screen and (max-width: @var)
*/
@micro: 499px;
@tiny: 849px;
@small: 1199px;
@normal: 1449px;

View File

@ -0,0 +1,162 @@
@import "vars";
/* Profile summaries */
.profile {
display: flex;
align-items: center;
width: 265px;
}
.profile-avatar {
width: 128px;
height: 128px;
margin-right: 16px;
}
.profile-name {
font-weight: bold;
}
.profile-title {
margin-bottom: 8px;
}
.profile-points {
font-size: 11px;
}
.profile-points span {
color: gray;
}
.profile-points-small {
display: none;
}
.profile-xp {
height: 10px;
min-width: 96px;
max-width: 96px;
background: var(--background);
border: var(--border);
}
.profile-xp-100 {
background: var(--background-xp);
border: var(--border-xp);
}
.profile-xp div {
height: 10px;
background: var(--background-xp);
border: var(--border-xp);
margin: -1px;
}
.profile-xp-100 div {
background: var(--background-xp-100);
}
.profile.guest {
flex-direction: column;
width: 100%;
padding-top: 12px;
text-align: center;
}
.profile.guest em {
display: block;
font-weight: bold;
font-style: normal;
margin-bottom: 8px;
}
@media (max-width: @small) {
table.thread {
.profile {
flex-direction: column;
width: 96px;
text-align: center;
}
.profile-avatar {
order: 1;
margin-right: 0;
margin-top: 4px;
width: 96px;
height: 96px;
}
.profile-title,
.profile-points,
.profile-xp {
display: none;
}
.profile-points-small {
display: inline;
}
}
}
@media (max-width: @tiny) {
table.thread .profile {
width: 96px;
}
table.thread .profile-avatar {
width: 64px;
height: 64px;
}
}
/* Trophies */
.trophies {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.trophy {
display: flex;
align-items: center;
width: 260px;
margin: 5px;
padding: 5px;
border: 1px solid #c5c5c5;
border-left: 5px solid var(--links);
border-radius: 2px;
&.disabled {
filter: grayscale(100%);
opacity: .5;
border-left: 1px solid #c5c5c5;
}
&.form-disabled {
border-left: 1px solid #c5c5c5;
flex-grow: 1;
}
img {
height: 48px;
margin-right: 8px;
}
div > * {
display: block;
}
em {
font-style: normal;
font-weight: bold;
margin-bottom: 3px;
}
span {
font-size: 80%;
}
}
hr.signature {
opacity: 0.2;
}

View File

@ -9,5 +9,4 @@
{% for s in styles %}
<link rel="stylesheet" type="text/css" href={{url_for('static', filename = s)}}>
{% endfor %}
<link rel="stylesheet" media="all and (max-width: 699px)" type="text/css" href={{url_for('static', filename = 'css/light.css')}}>
</head>
</head>

View File

@ -16,7 +16,6 @@ def render(*args, styles=[], scripts=[], **kwargs):
'css/flash.css',
'css/table.css',
'css/pagination.css',
'css/responsive.css',
'css/simplemde.min.css',
'css/simplemde-override.css',
]