First Commit
127
static/themes/default/banner.css
Executable file
|
|
@ -0,0 +1,127 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Piedra&family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
height: 140px;
|
||||
background: linear-gradient(to right,
|
||||
#000000 0%,
|
||||
#000000 5%,
|
||||
transparent 5%,
|
||||
transparent 95%,
|
||||
#000000 95%,
|
||||
#000000 100%
|
||||
);
|
||||
border-top: 3px solid #fff;
|
||||
border-bottom: 3px solid #fff;
|
||||
/* box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2); */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
}
|
||||
.galaxy-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5%;
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right,
|
||||
rgba(0, 0, 0, 1) 0%,
|
||||
rgba(0, 0, 0, 0.7) 10%,
|
||||
rgba(0, 0, 0, 0) 20%,
|
||||
rgba(0, 0, 0, 0) 80%,
|
||||
rgba(0, 0, 0, 0.7) 90%,
|
||||
rgba(0, 0, 0, 1) 100%
|
||||
), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><rect width="100%" height="100%" fill="rgba(0,0,30,0.8)"/><g fill="white"><circle cx="20" cy="30" r="1"/><circle cx="40" cy="70" r="1"/><circle cx="50" cy="160" r="1"/><circle cx="90" cy="40" r="1"/><circle cx="130" cy="80" r="1"/><circle cx="160" cy="120" r="1"/></g></svg>');
|
||||
background-repeat: repeat;
|
||||
background-size: 100% 100%, 200px 200px;
|
||||
animation: galaxy-animation 60s linear infinite;
|
||||
}
|
||||
|
||||
.big-shooting-star {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: white;
|
||||
box-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
animation: big-shooting-star linear infinite;
|
||||
}
|
||||
|
||||
@keyframes big-shooting-star {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(var(--endX), var(--endY));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes galaxy-animation {
|
||||
from {
|
||||
background-position: 0 0, 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 0, 0 -200px;
|
||||
}
|
||||
}
|
||||
.banner-text {
|
||||
font-family: 'Piedra', cursive;
|
||||
word-spacing: 10px;
|
||||
font-size: 80px;
|
||||
color: #c0c0c0;
|
||||
text-shadow:
|
||||
2px 2px 4px rgba(255, 255, 255, 0.5),
|
||||
-2px -2px 4px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.banner-text span {
|
||||
animation: twinkle 3s ease-in-out infinite;
|
||||
animation-delay: calc(var(--char-index) * 0.1s);
|
||||
}
|
||||
@keyframes twinkle {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
text-shadow:
|
||||
2px 2px 4px rgba(255, 255, 255, 0.5),
|
||||
-2px -2px 4px rgba(0, 0, 0, 0.5),
|
||||
0 0 10px rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
text-shadow:
|
||||
1px 1px 2px rgba(255, 255, 255, 0.3),
|
||||
-1px -1px 2px rgba(0, 0, 0, 0.3),
|
||||
0 0 5px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.slogan {
|
||||
color: #2cdf26;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
animation: slide 30s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes slide {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
100
static/themes/default/bbcode.css
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
|
||||
.bbcode-bar, .bbcode-bar ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bbcode-bar {
|
||||
flex-direction: column;
|
||||
background-color: black;
|
||||
border: 1px solid #fff;
|
||||
margin: 0 -5px -5px 5px;
|
||||
width: 99%;
|
||||
}
|
||||
|
||||
.bbcode-bar ul {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.bbcode-bar li {
|
||||
margin: 0 10px 5px 10px;
|
||||
font-family: 'Press Start 2P';
|
||||
}
|
||||
|
||||
.bbcode-bar button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background-color: rgba(0,0,0, 0.8);
|
||||
border: 2px solid #ccc;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.draggable .header {
|
||||
position: fixed;
|
||||
width: 596px;
|
||||
background-color: #082039;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
cursor: move;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.draggable .close-button {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.draggable .content {
|
||||
padding: 15px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
ul.bbcode-list {
|
||||
margin-left: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1.h1-bbcode {
|
||||
font-family: "Roboto";
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
h2.h2-bbcode {
|
||||
font-family: "Roboto";
|
||||
font-size: 1.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.0);
|
||||
border: none;
|
||||
}
|
||||
|
||||
h3.h3-bbcode {
|
||||
font-family: "Roboto";
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
fieldset.quote-bbcode {
|
||||
padding: 10px;
|
||||
border: 1px solid #fff;
|
||||
background-color: rgba(0,0,0, 0.4);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
fieldset.quote-bbcode legend {
|
||||
border: 1px solid #fff;
|
||||
padding: 5px;
|
||||
background-color: black;
|
||||
}
|
||||
312
static/themes/default/colors.css
Executable file
|
|
@ -0,0 +1,312 @@
|
|||
html, body {
|
||||
background: url('/static/themes/default/img/bg_galactique2.png');
|
||||
}
|
||||
|
||||
.notification li.success {
|
||||
border-color: #ffffff;
|
||||
color: #086123;
|
||||
background-color: #00fc45;
|
||||
box-shadow: #00ff00 0 0 15px;
|
||||
}
|
||||
|
||||
.notification li.error {
|
||||
border-color: #ffffff;
|
||||
color: #4b0c0c;
|
||||
background-color: #e00e0e;
|
||||
box-shadow: #ff0000 0 0 15px;
|
||||
}
|
||||
|
||||
.container, .menu {
|
||||
background-color: #262d6d;
|
||||
color: #e4e4dc;
|
||||
border-color: #787e2f;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: url('/static/themes/default/img/bg2.png');
|
||||
}
|
||||
|
||||
.menu {
|
||||
background: url('/static/themes/default/img/archer_sprite.png') bottom right;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 45%;
|
||||
background-color: #4750a3;
|
||||
}
|
||||
|
||||
.menu h2 {
|
||||
background-image: url('/static/themes/default/img/mage_sprite.png');
|
||||
background-repeat: no-repeat;
|
||||
background-color: #341f32;
|
||||
}
|
||||
|
||||
.menu ul.guestbook {
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.menu ul.guestbook li span.date {
|
||||
color: #64886a;
|
||||
}
|
||||
|
||||
.menu ul.guestbook li span.author {
|
||||
color: #816488;
|
||||
}
|
||||
|
||||
.new-item-menu::after {
|
||||
color: rgb(255, 255, 255);
|
||||
border-color: red;
|
||||
background-color: rgb(233, 72, 72);
|
||||
box-shadow: red 0 0 15px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: red;
|
||||
border-color: rgb(155, 14, 14);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.container h2 {
|
||||
/* background-image: url('/static/themes/default/img/mage_sprite.png'); */
|
||||
background-repeat: no-repeat;
|
||||
background-color: #1f2034;
|
||||
}
|
||||
|
||||
.guestbook p span.author {
|
||||
color: #ae00ff;
|
||||
}
|
||||
|
||||
.post-card, .news, .guestbook p {
|
||||
background-color: #000000;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.post-card-header, .news-header {
|
||||
border-color: #ffffff;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.post-card-header, .news-header h3 {
|
||||
text-shadow: #00ffff 0 0 10px;
|
||||
}
|
||||
|
||||
/* Contribution Page */
|
||||
|
||||
.games {
|
||||
background: url('/static/themes/default/img/gamepad2.png') right;
|
||||
background-position: calc(100% + 100px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 30%;
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
transition: background-position 0.8s;
|
||||
}
|
||||
|
||||
.games:hover {
|
||||
background-position: calc(100% - 20px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.movies {
|
||||
background: url('/static/themes/default/img/television.png') right;
|
||||
background-position: calc(100% + 100px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
transition: background-position 0.8s;
|
||||
}
|
||||
|
||||
.movies:hover {
|
||||
background-position: calc(100% - 20px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.musics {
|
||||
background: url('/static/themes/default/img/music.png') right;
|
||||
background-position: calc(100% + 100px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
transition: background-position 0.8s;
|
||||
}
|
||||
|
||||
.musics:hover {
|
||||
background-position: calc(100% - 20px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.tech {
|
||||
background: url('/static/themes/default/img/computer.png') right;
|
||||
background-position: calc(100% + 100px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
transition: background-position 0.8s;
|
||||
}
|
||||
|
||||
.tech:hover {
|
||||
background-position: calc(100% - 20px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.category {
|
||||
background: url('') right;
|
||||
background-position: calc(100% + 100px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
transition: background-position 0.8s;
|
||||
}
|
||||
|
||||
.category:hover {
|
||||
background-position: calc(100% - 20px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.news_contrib {
|
||||
background: url('/static/themes/default/img/news_contrib.png') right;
|
||||
background-position: calc(100% + 100px);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20%;
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
transition: background-position 0.8s;
|
||||
}
|
||||
|
||||
.news_contrib:hover {
|
||||
background-position: calc(100% - 20px);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00d9ff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #df73df;
|
||||
text-shadow: #00ff00 0 0 10px;
|
||||
}
|
||||
|
||||
a.danger {
|
||||
color: #ce6666;
|
||||
}
|
||||
|
||||
.text-admin {
|
||||
color: #cf3c3c;
|
||||
}
|
||||
|
||||
.text-sadmin {
|
||||
color: #ff0000;
|
||||
text-shadow: #f700ff 0 0 15px;
|
||||
}
|
||||
|
||||
/* Forum */
|
||||
|
||||
.forum h3 {
|
||||
color: #9cdda7;
|
||||
text-shadow: #ff0000 0 0 10px;
|
||||
}
|
||||
|
||||
.forum .category-name {
|
||||
background-color: #111641;
|
||||
}
|
||||
|
||||
.forum .forum-row {
|
||||
background-color: #1e234e;
|
||||
}
|
||||
|
||||
.forum .forum-header {
|
||||
background-color: #262d6d;
|
||||
}
|
||||
|
||||
.stats_forum ul {
|
||||
background-color: #000000;
|
||||
color: #fff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
span.unread-badge {
|
||||
color: #00fc45;
|
||||
text-shadow: #00ff00 0 0 15px;
|
||||
}
|
||||
|
||||
/* FORMULAIRES */
|
||||
|
||||
button, .btn-default {
|
||||
background-color: #002d33;
|
||||
color: #fff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
button:hover, .btn-default:hover {
|
||||
background-color: #00cfcf;
|
||||
color: #fff;
|
||||
box-shadow: #00cfcf 0 0 15px;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background-color: #003311;
|
||||
color: #fff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #00cf45;
|
||||
color: #fff;
|
||||
box-shadow: #00ff00 0 0 15px;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: #330000;
|
||||
color: #fff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: #ff0000;
|
||||
color: #fff;
|
||||
box-shadow: #ff0000 0 0 15px;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: #333300;
|
||||
color: #fff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background-color: #ffae00;
|
||||
color: #9b3201;
|
||||
box-shadow: #ffa600 0 0 15px;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="email"], select, textarea {
|
||||
background-color: #000000;
|
||||
color: #fff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.page-link {
|
||||
background-color: #000000;
|
||||
color: #fff;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
li.active span {
|
||||
box-shadow: #00ff00 0 0 15px;
|
||||
}
|
||||
|
||||
li.disabled span {
|
||||
background-color: #494949;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
color: #ffffff;
|
||||
text-shadow: #ff0000 0 0 10px;
|
||||
}
|
||||
42
static/themes/default/forms.css
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn, input[type="submit"], button {
|
||||
border: 2px solid;
|
||||
padding: 5px 10px;
|
||||
margin: 5px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
max-width: max-content;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
font-size: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="email"], select, textarea {
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
width: 99%;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="email"], select {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
13
static/themes/default/gallery.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.gallery {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 200px;
|
||||
}
|
||||
338
static/themes/default/games.css
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
.card-game {
|
||||
border: 1px solid #fff;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.card-game .header {
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 10px;
|
||||
background-color: rgba(0, 153, 255, 0.71);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-game .header a {
|
||||
color: #d89de2;
|
||||
}
|
||||
|
||||
.card-game .body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-game .footer {
|
||||
border-top: 1px solid #fff;
|
||||
background-color: rgba(0, 153, 255, 0.71);
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
ul.inline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
ul.inline li {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 20px;
|
||||
color: red;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* PETIT BAC */
|
||||
.game-bac-letter {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 60px;
|
||||
border: 1px solid rgb(0, 204, 255);
|
||||
background-color: rgba(0, 153, 255, 0.71);
|
||||
box-shadow: 0 0 35px orangered;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
table.bac, table.bac th, table.bac tr, table.bac td {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
table.bac {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.bac th {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
table.bac th, table.bac td {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
table.bac td input[type="text"]{
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
table.bac td input:focus {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
table.quiz, table.quiz th, table.quiz tr, table.quiz td {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
table.quiz {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
table.quiz th {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
table.quiz th, table.quiz td {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
table.quiz td ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
position: relative;
|
||||
}
|
||||
.circular-chart {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
.circular-chart path:nth-child(2) {
|
||||
transition: stroke-dasharray 1s ease-in-out;
|
||||
}
|
||||
.score-details {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
margin-bottom: 4;
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Quiz Results Styles */
|
||||
.quiz-result-container {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.quiz-result-card {
|
||||
background-color: rgba(0, 153, 255, 0.1);
|
||||
border: 1px solid #fff;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.quiz-title {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.progress-circle-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.circular-chart {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.progress-path {
|
||||
transition: stroke-dasharray 1s ease-in-out;
|
||||
}
|
||||
|
||||
.progress-path.high { stroke: #00ff00; }
|
||||
.progress-path.medium { stroke: #ffff00; }
|
||||
.progress-path.low { stroke: #ff0000; }
|
||||
|
||||
.percentage-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.score-details {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.score-details h3 {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.score-number.high { color: #00ff00; }
|
||||
.score-number.medium { color: #ffff00; }
|
||||
.score-number.low { color: #ff0000; }
|
||||
|
||||
.score-message {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.score-details {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
|
||||
.quiz-score {
|
||||
float: right;
|
||||
color: #d89de2;
|
||||
font-size: 0.9rem;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
/* Nouveaux styles pour la page quiz */
|
||||
.quiz-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.quiz-title {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.quiz-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.quiz-question {
|
||||
background: rgba(0, 153, 255, 0.1);
|
||||
border: 1px solid #fff;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.question-header {
|
||||
background: rgba(0, 153, 255, 0.71);
|
||||
padding: 10px 15px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.question-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.question-content h3 {
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.choices-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.choice-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.choice-item:hover {
|
||||
background: rgba(0, 153, 255, 0.2);
|
||||
}
|
||||
|
||||
.choice-item input[type="radio"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.choice-item label {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.submit-container {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background: rgba(0, 153, 255, 0.71);
|
||||
color: white;
|
||||
border: 1px solid #fff;
|
||||
padding: 12px 30px;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background: rgba(0, 153, 255, 0.9);
|
||||
box-shadow: 0 0 15px rgba(0, 153, 255, 0.5);
|
||||
}
|
||||
59
static/themes/default/grid.css
Executable file
|
|
@ -0,0 +1,59 @@
|
|||
/* Système de grille utilisant les flexbox */
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.row-xs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.col {
|
||||
flex: 1;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
/* classes pour les largeurs des colonnes */
|
||||
|
||||
.col-1 { flex: 0 0 8.33%; }
|
||||
.col-2 { flex: 0 0 16.667%; }
|
||||
.col-3 { flex: 0 0 25%; }
|
||||
.col-4 { flex: 0 0 33.33%; }
|
||||
.col-5 { flex: 0 0 46.66%; }
|
||||
.col-6 { flex: 0 0 50%; }
|
||||
.col-7 { flex: 0 0 58.33%; }
|
||||
.col-8 { flex: 0 0 66.66%; }
|
||||
.col-9 { flex: 0 0 75%; }
|
||||
.col-10 { flex: 0 0 83.33%; }
|
||||
.col-11 { flex: 0 0 91.66%; }
|
||||
.col-12 { flex: 0 0 100%; }
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.col {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.menu ul.guestbook li span.date {
|
||||
color: #646788;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
order: 2; /* Placer après .col-7 */
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
order: 1; /* Placer avant .col-1 */
|
||||
}
|
||||
}
|
||||
BIN
static/themes/default/img/archer_sprite.png
Executable file
|
After Width: | Height: | Size: 75 KiB |
BIN
static/themes/default/img/bg.png
Executable file
|
After Width: | Height: | Size: 123 B |
BIN
static/themes/default/img/bg2.png
Executable file
|
After Width: | Height: | Size: 154 B |
BIN
static/themes/default/img/bg3.png
Executable file
|
After Width: | Height: | Size: 161 B |
BIN
static/themes/default/img/bg_container.png
Executable file
|
After Width: | Height: | Size: 101 B |
BIN
static/themes/default/img/bg_galactique.png
Executable file
|
After Width: | Height: | Size: 34 KiB |
BIN
static/themes/default/img/bg_galactique2.png
Executable file
|
After Width: | Height: | Size: 436 KiB |
BIN
static/themes/default/img/computer.png
Executable file
|
After Width: | Height: | Size: 53 KiB |
BIN
static/themes/default/img/gamepad.png
Executable file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/themes/default/img/gamepad2.png
Executable file
|
After Width: | Height: | Size: 131 KiB |
BIN
static/themes/default/img/mage_sprite.png
Executable file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
static/themes/default/img/music.png
Executable file
|
After Width: | Height: | Size: 18 KiB |
BIN
static/themes/default/img/news_contrib.png
Executable file
|
After Width: | Height: | Size: 197 KiB |
BIN
static/themes/default/img/television.png
Executable file
|
After Width: | Height: | Size: 282 KiB |
60
static/themes/default/pm.css
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
|
||||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
margin: 0 auto 10px auto;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.table .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
border-bottom: 2px solid #16396a;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: #dbdbdb;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.table .body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
color: #666666;
|
||||
padding: 12px 0;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.table .body:hover {
|
||||
background: #111d4e53;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.new-message {
|
||||
display: inline-block;
|
||||
color: #ffffff;
|
||||
background-color: #4CAF50;
|
||||
border: none;
|
||||
font-size: 0.75rem;
|
||||
margin-right: 10px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
from {
|
||||
box-shadow: 0 0 5px rgba(255, 0, 255, 0.8);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 10px rgba(255, 0, 255, 1);
|
||||
}
|
||||
}
|
||||
35
static/themes/default/post.css
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
.postmenu {
|
||||
border: 1px solid #fff;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
width: 300px;
|
||||
margin: 10px;
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.postmenu .header {
|
||||
background-color: rgb(28, 42, 78);
|
||||
padding: 5px;
|
||||
font-size: 1.2rem;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.postmenu .body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.postmenu .body ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.postmenu .body ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.postmenu .body ul li:hover {
|
||||
margin-left: 10px;
|
||||
}
|
||||
285
static/themes/default/profile.css
Normal file
|
|
@ -0,0 +1,285 @@
|
|||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 3px solid #6699cc;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.profile-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #003366;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
color: #336699;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.profile-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #003366;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #336699;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
line-height: 1.6;
|
||||
color: #333333;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
border-left: 4px solid #6699cc;
|
||||
}
|
||||
|
||||
.profile-contact {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
padding: 0.8rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #6699cc;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-button:hover {
|
||||
background: #003366;
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
background: #f0f0f04d;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.level-badge {
|
||||
position: absolute;
|
||||
background: #078356;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.level-number {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #003366;
|
||||
}
|
||||
|
||||
.joined-date {
|
||||
color: #9fcfff;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.bio-content {
|
||||
line-height: 1.6;
|
||||
color: #d3d3d3;
|
||||
}
|
||||
|
||||
/* Colonne de droite */
|
||||
.profile-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.stats-card, .achievements-card {
|
||||
background: #f0f0f04d;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: #ffffff78;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #444;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.achievements-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.badge-item {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.badge-item img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.badge-name {
|
||||
font-size: 0.8rem;
|
||||
color: #336699;
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #6699cc;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #99ccff;
|
||||
color: #003366;
|
||||
}
|
||||
|
||||
.inventory {
|
||||
background: #f0f0f04d;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
width: 98%;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.inventory-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.inventory-item {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: #ffffff78;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.item-quantity {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: #003366;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.profile-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
108
static/themes/default/shop.css
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
a.shop {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a.shop:hover {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.shop {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
.card-shop {
|
||||
background: #fff;
|
||||
border: 2px solid #000;
|
||||
border-radius: 8px;
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
box-shadow: 3px 3px 0px #000;
|
||||
transition: transform 0.2s;
|
||||
width: 250px;
|
||||
min-height: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
vertical-align: top;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-shop:hover {
|
||||
transform: translateY(-5px);
|
||||
background: #f0f7ff;
|
||||
}
|
||||
|
||||
.card-shop img {
|
||||
max-width: 220px;
|
||||
margin-bottom: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card-shop .card-title {
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
color: #0066cc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-shop .card-text {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-shop .card-content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-shop .button-container {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.btn-shop-primary {
|
||||
background: linear-gradient(to bottom, #0099ff, #0066cc);
|
||||
border: 2px solid #000;
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.btn-shop-primary:hover {
|
||||
background: linear-gradient(to bottom, #00bbff, #0099ff);
|
||||
}
|
||||
|
||||
.btn-shop-secondary {
|
||||
background: linear-gradient(to bottom, #ffcc00, #ff9900);
|
||||
border: 2px solid #000;
|
||||
border-radius: 5px;
|
||||
padding: 5px 15px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.btn-shop-large {
|
||||
padding: 10px 20px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.fa-coins {
|
||||
color: #ffd700;
|
||||
}
|
||||
305
static/themes/default/structure.css
Executable file
|
|
@ -0,0 +1,305 @@
|
|||
/* Marges, paddings, dimensions, flexbox */
|
||||
*, html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
/* margin: 20px 0 20px 0; */
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
p, ul {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
p.date {
|
||||
font-size: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.notification {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.notification ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.notification ul li {
|
||||
padding: 10px;
|
||||
border: 2px solid;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.container, .menu {
|
||||
padding: 0;
|
||||
border: 2px solid;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 2px 2px 10px 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu h2 {
|
||||
border-bottom: 2px solid;
|
||||
padding: 10px;
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.container h2 {
|
||||
border-bottom: 2px solid;
|
||||
padding: 10px;
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.menu ul li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.menu ul.guestbook {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 5px;
|
||||
border: 1px solid;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.new-item-menu::after {
|
||||
margin-left: 10px;
|
||||
padding: 2px;
|
||||
font-size: 0.6rem;
|
||||
border: 1px solid;
|
||||
content: "nouveau !";
|
||||
}
|
||||
|
||||
.badge {
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
form.incol {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
justify-items: auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.container .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.news, .post-card {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.guestbook p {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 2px solid;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.news-header, .post-card-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid;
|
||||
margin: 10px 10px -10px 10px;
|
||||
}
|
||||
|
||||
.contrib {
|
||||
border: 1px solid;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.contrib a {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
span.post-offline {
|
||||
color:red;
|
||||
font-weight:bold;
|
||||
margin:5px;
|
||||
background-image: url('../../img/icons/shield-red-cross.png');
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
span.post-online {
|
||||
color:green;
|
||||
font-weight:bold;
|
||||
margin:5px;
|
||||
background-image: url('../../img/icons/shield-green-v.png');
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
/* forum */
|
||||
.forum {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.forum .row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.forum h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.forum-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px 1px 0 1px solid;
|
||||
margin: 10px 10px -10px 10px;
|
||||
}
|
||||
|
||||
.forum-column, .forum-column-detail {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
border: 1px solid;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.forum-column:nth-child(1) {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.forum-column:nth-child(2), .forum-column:nth-child(3) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.forum-column-detail:nth-child(1) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.forum-column-detail:nth-child(2) {
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
.forum-column-detail ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.forum-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 0 1px 1px 1px solid;
|
||||
margin: 10px 10px -10px 10px;
|
||||
}
|
||||
|
||||
.forum-body img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.forum-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 0 1px 0 1px solid;
|
||||
}
|
||||
|
||||
.stats_forum {
|
||||
margin: 20px 0 10px 0;
|
||||
border-top: 2px solid
|
||||
}
|
||||
|
||||
.stats_forum ul {
|
||||
list-style-type: none;
|
||||
border: 1px solid;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.stats_forum ul li {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
ul.breadcrumbs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: 0.6rem;
|
||||
list-style-type: none;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
ul.breadcrumbs li {
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
ul.breadcrumbs li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
ul.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
list-style-type: none;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
ul.pagination li.page-item {
|
||||
margin: 0 5px 0 5px;
|
||||
}
|
||||
|
||||
ul.pagination li.page-item a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.page-link {
|
||||
padding: 5px 10px;
|
||||
border: 2px solid;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
max-width: max-content;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li.disabled {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.warning-announce-not-mobile-compatible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
20
static/themes/default/typo.css
Executable file
|
|
@ -0,0 +1,20 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=VT323&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, .breadcrumbs, .btn, input, select, button, .notification, .page-link, .guestbook p {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
}
|
||||
|
||||
.menu h2 {
|
||||
font-family: 'VT323', cursive;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-family: "Chakra Petch", sans-serif;
|
||||
}
|
||||