First Commit
258
static/themes/80s/banner.css
Executable file
|
|
@ -0,0 +1,258 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
min-width: 1000px;
|
||||
height: 300px;
|
||||
background: linear-gradient(180deg, #000033 0%, #330066 100%);
|
||||
border-top: 3px solid #ff00ff;
|
||||
border-bottom: 3px solid #00ffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Soleil rétro */
|
||||
.sun {
|
||||
position: absolute;
|
||||
top: 12%; /* Ajusté pour mieux positionner le soleil plus grand */
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 400px; /* Doublé la largeur */
|
||||
height: 200px; /* Doublé la hauteur */
|
||||
background: linear-gradient(to top, #ff6b6b, #ffd93d);
|
||||
border-radius: 200px 200px 0 0; /* Ajusté pour maintenir la forme en demi-cercle */
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Barres horizontales du soleil */
|
||||
.sun::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
transparent 10%,
|
||||
rgba(0, 0, 0, 0.2) 10%,
|
||||
rgba(0, 0, 0, 0.2) 20%
|
||||
);
|
||||
mask: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
black 50%
|
||||
);
|
||||
-webkit-mask: linear-gradient(
|
||||
to bottom,
|
||||
transparent,
|
||||
black 50%
|
||||
);
|
||||
}
|
||||
|
||||
/* Grille au sol */
|
||||
.grid {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 150px;
|
||||
background:
|
||||
linear-gradient(to top,
|
||||
rgba(255, 0, 255, 1) 0%,
|
||||
rgba(255, 0, 255, 0) 100%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgb(255, 255, 255) 1px,
|
||||
transparent 1px
|
||||
) 0 0,
|
||||
linear-gradient(
|
||||
rgb(255, 255, 255) 1px,
|
||||
transparent 1px
|
||||
) 0 0;
|
||||
background-size: 100% 100%, 40px 40px, 40px 40px;
|
||||
transform: perspective(500px) rotateX(60deg);
|
||||
transform-origin: bottom;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Arrière-plan galaxie */
|
||||
.galaxy-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:
|
||||
linear-gradient(90deg,
|
||||
rgba(255, 0, 255, 0.1) 0%,
|
||||
rgba(0, 255, 255, 0.1) 100%
|
||||
),
|
||||
linear-gradient(0deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Texte principal */
|
||||
.banner-text {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
word-spacing: 10px;
|
||||
font-size: 60px;
|
||||
color: #ff00ff;
|
||||
text-shadow:
|
||||
3px 3px 0 #00ffff,
|
||||
-3px -3px 0 #ff00ff,
|
||||
0 0 10px rgba(255, 0, 255, 0.8),
|
||||
0 0 20px rgba(0, 255, 255, 0.8);
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
animation: text-flicker 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes text-flicker {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
/* Slogan */
|
||||
.slogan {
|
||||
color: #00ffff;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
font-size: 14px;
|
||||
text-shadow:
|
||||
2px 2px 0 #ff00ff,
|
||||
0 0 5px rgba(0, 255, 255, 0.8);
|
||||
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%); }
|
||||
}
|
||||
|
||||
/* Vaisseau spatial */
|
||||
.spaceship {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
z-index: 3;
|
||||
animation: fly 15s linear infinite;
|
||||
}
|
||||
|
||||
/* Corps principal du vaisseau */
|
||||
.spaceship::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, #ff00ff 0%, #00ffff 100%);
|
||||
clip-path: polygon(
|
||||
100% 50%, /* Point droit */
|
||||
80% 20%, /* Haut droit */
|
||||
60% 20%, /* Haut milieu arrière */
|
||||
40% 0%, /* Pointe avant */
|
||||
20% 20%, /* Haut milieu avant */
|
||||
0% 30%, /* Haut avant */
|
||||
0% 70%, /* Bas avant */
|
||||
20% 80%, /* Bas milieu avant */
|
||||
40% 100%, /* Pointe arrière */
|
||||
60% 80%, /* Bas milieu arrière */
|
||||
80% 80% /* Bas droit */
|
||||
);
|
||||
filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.8));
|
||||
}
|
||||
|
||||
/* Cockpit */
|
||||
.spaceship::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
right: 40%;
|
||||
left: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: rgba(0, 255, 255, 0.8);
|
||||
border-radius: 50%;
|
||||
box-shadow:
|
||||
0 0 10px #00ffff,
|
||||
inset 0 0 5px #ffffff;
|
||||
}
|
||||
|
||||
/* Réacteur */
|
||||
.spaceship .engine {
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.spaceship .engine::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(-90deg, #ff6b6b, #ffd93d); /* Direction inversée */
|
||||
animation: thrust 0.2s linear infinite;
|
||||
clip-path: polygon(
|
||||
0 0,
|
||||
100% 50%,
|
||||
0 100%
|
||||
);
|
||||
transform: rotate(180deg); /* Rotation complète au lieu du scaleX */
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
@keyframes thrust {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: rotate(180deg) scaleX(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: rotate(180deg) scaleX(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fly {
|
||||
0% {
|
||||
right: -100px;
|
||||
top: 30%;
|
||||
transform: rotate(175deg);
|
||||
}
|
||||
25% {
|
||||
right: 25%;
|
||||
top: 20%;
|
||||
transform: rotate(185deg);
|
||||
}
|
||||
50% {
|
||||
right: 50%;
|
||||
top: 15%;
|
||||
transform: rotate(175deg);
|
||||
}
|
||||
75% {
|
||||
right: 75%;
|
||||
top: 25%;
|
||||
transform: rotate(185deg);
|
||||
}
|
||||
100% {
|
||||
right: 100%;
|
||||
top: 30%;
|
||||
transform: rotate(175deg);
|
||||
}
|
||||
}
|
||||
98
static/themes/80s/bbcode.css
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
|
||||
.bbcode-bar, .bbcode-bar ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bbcode-bar {
|
||||
flex-direction: column;
|
||||
background-color: black;
|
||||
border: 1px solid #fff;
|
||||
margin: 0 -5px -5px 5px;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
fieldset.quote-bbcode legend {
|
||||
border: 1px solid #fff;
|
||||
padding: 5px;
|
||||
background-color: black;
|
||||
}
|
||||
326
static/themes/80s/colors.css
Executable file
|
|
@ -0,0 +1,326 @@
|
|||
html, body {
|
||||
background: #000000;
|
||||
background-image: linear-gradient(to right, #ff00ff 1px, transparent 1px),
|
||||
linear-gradient(to bottom, #ff00ff 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.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: #000033;
|
||||
border-color: #ff00ff;
|
||||
box-shadow: 0 0 15px #ff00ff;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: url('/static/themes/default/img/bg_container.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: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.menu ul.guestbook {
|
||||
background-color: rgba(0, 0, 0, 0.58);
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.menu ul.guestbook li {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.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: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
-webkit-background-clip: text;
|
||||
color: transparent;
|
||||
text-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.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: #00ffff;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #ff00ff;
|
||||
text-shadow: 0 0 10px #ff00ff;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.forum-description {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* FORMULAIRES */
|
||||
|
||||
button, .btn-default {
|
||||
background: linear-gradient(45deg, #ff00ff, #00ffff);
|
||||
border: 2px solid #ffffff;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
button:hover, .btn-default:hover {
|
||||
background: linear-gradient(45deg, #00ffff, #ff00ff);
|
||||
box-shadow: 0 0 15px #ff00ff;
|
||||
}
|
||||
|
||||
.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/80s/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: 100%;
|
||||
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/80s/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;
|
||||
}
|
||||
415
static/themes/80s/games.css
Normal file
|
|
@ -0,0 +1,415 @@
|
|||
.card-game {
|
||||
border: 2px solid #ff00ff;
|
||||
box-shadow: 0 0 15px #ff00ff;
|
||||
background: rgba(0, 0, 51, 0.8);
|
||||
margin: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-game:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 25px #00ffff;
|
||||
}
|
||||
|
||||
.card-game .header {
|
||||
border-bottom: 1px solid #fff;
|
||||
padding: 10px;
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
color: #ffffff;
|
||||
text-shadow: 2px 2px 0px #000000;
|
||||
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: 3px solid #00ffff;
|
||||
background: #000033;
|
||||
box-shadow: 0 0 20px #00ffff;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
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;
|
||||
border: 2px solid #ff00ff;
|
||||
background: rgba(0, 0, 51, 0.8);
|
||||
}
|
||||
|
||||
table.bac th {
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
color: #ffffff;
|
||||
text-shadow: 2px 2px 0px #000000;
|
||||
}
|
||||
|
||||
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 #cccccc;
|
||||
}
|
||||
|
||||
table.quiz {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
table.quiz th {
|
||||
background: #e0e0e0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
table.quiz th, table.quiz td {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* QUIZ */
|
||||
.quizes {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.quiz-item {
|
||||
flex: 1 1 300px;
|
||||
border: 1px solid #cccccc;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
background: #f9f9f9;
|
||||
padding: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.quiz-item:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.quiz-item h3 {
|
||||
border-bottom: 1px solid #cccccc;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 0;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.quiz-item h3 a {
|
||||
color: #0066cc;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.quiz-item h3 a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.quiz-item p {
|
||||
color: #333333;
|
||||
margin: 8px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.quiz-item p:last-child {
|
||||
font-weight: bold;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* Quiz Styles */
|
||||
.quiz-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
font-family: 'Press Start 2P', 'Courier New', monospace;
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
.quiz-title {
|
||||
color: #ff00ff;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 2px solid #00ffff;
|
||||
text-shadow: 3px 3px #000;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.quiz-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.quiz-question {
|
||||
background: rgba(0, 0, 51, 0.8);
|
||||
border: 2px solid #ff00ff;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 15px #ff00ff;
|
||||
}
|
||||
|
||||
.question-header {
|
||||
background: linear-gradient(90deg, #ff00ff, #00ffff);
|
||||
padding: 10px 15px;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px #000;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.question-content {
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 51, 0.9);
|
||||
}
|
||||
|
||||
.question-content h3 {
|
||||
color: #00ffff;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2rem;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
}
|
||||
|
||||
.choices-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.choice-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border: 1px solid #00ffff;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.choice-item:hover {
|
||||
background: rgba(0, 255, 255, 0.2);
|
||||
box-shadow: 0 0 10px #00ffff;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.choice-item input[type="radio"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.choice-item label {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
text-shadow: 0 0 5px #00ffff;
|
||||
}
|
||||
|
||||
.submit-container {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background: linear-gradient(45deg, #ff00ff, #00ffff);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 15px 30px;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
text-shadow: 2px 2px #000;
|
||||
box-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Quiz Results Styles */
|
||||
.quiz-result-container {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 51, 0.8);
|
||||
border: 2px solid #ff00ff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 20px #ff00ff;
|
||||
}
|
||||
|
||||
.quiz-result-card {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
color: #0066cc;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
text-shadow: 0 0 10px currentColor;
|
||||
}
|
||||
|
||||
.score-number.high {
|
||||
color: #00ff00;
|
||||
text-shadow: 0 0 15px #00ff00;
|
||||
}
|
||||
.score-number.medium {
|
||||
color: #ffff00;
|
||||
text-shadow: 0 0 15px #ffff00;
|
||||
}
|
||||
.score-number.low {
|
||||
color: #ff0000;
|
||||
text-shadow: 0 0 15px #ff0000;
|
||||
}
|
||||
|
||||
.score-message {
|
||||
color: #00ffff;
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
text-shadow: 2px 2px #000;
|
||||
}
|
||||
|
||||
.quiz-score {
|
||||
float: right;
|
||||
background: #e0e0e0;
|
||||
color: #333333;
|
||||
font-size: 0.9rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.circular-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg); /* Fait démarrer la progression à midi */
|
||||
}
|
||||
|
||||
.progress-path {
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dasharray 0.5s ease;
|
||||
}
|
||||
|
||||
/* Couleurs pour les différents niveaux */
|
||||
.progress-path.high {
|
||||
stroke: #00ff00;
|
||||
filter: drop-shadow(0 0 5px #00ff00);
|
||||
}
|
||||
|
||||
.progress-path.medium {
|
||||
stroke: #ffff00;
|
||||
filter: drop-shadow(0 0 5px #ffff00);
|
||||
}
|
||||
|
||||
.progress-path.low {
|
||||
stroke: #ff0000;
|
||||
filter: drop-shadow(0 0 5px #ff0000);
|
||||
}
|
||||
|
||||
.percentage-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
color: #00ffff;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
text-shadow: 0 0 10px #00ffff;
|
||||
}
|
||||
|
||||
.progress-circle-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-path {
|
||||
transition: stroke-dasharray 0.3s ease;
|
||||
}
|
||||
|
||||
.high {
|
||||
stroke: #4caf50; /* Green */
|
||||
}
|
||||
|
||||
.medium {
|
||||
stroke: #ffeb3b; /* Yellow */
|
||||
}
|
||||
|
||||
.low {
|
||||
stroke: #f44336; /* Red */
|
||||
}
|
||||
59
static/themes/80s/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/80s/img/archer_sprite.png
Executable file
|
After Width: | Height: | Size: 75 KiB |
BIN
static/themes/80s/img/bg.png
Executable file
|
After Width: | Height: | Size: 123 B |
BIN
static/themes/80s/img/bg2.png
Executable file
|
After Width: | Height: | Size: 154 B |
BIN
static/themes/80s/img/bg3.png
Executable file
|
After Width: | Height: | Size: 161 B |
BIN
static/themes/80s/img/bg_container.png
Executable file
|
After Width: | Height: | Size: 101 B |
BIN
static/themes/80s/img/bg_galactique.png
Executable file
|
After Width: | Height: | Size: 34 KiB |
BIN
static/themes/80s/img/bg_galactique2.png
Executable file
|
After Width: | Height: | Size: 436 KiB |
BIN
static/themes/80s/img/computer.png
Executable file
|
After Width: | Height: | Size: 53 KiB |
BIN
static/themes/80s/img/gamepad.png
Executable file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/themes/80s/img/gamepad2.png
Executable file
|
After Width: | Height: | Size: 131 KiB |
BIN
static/themes/80s/img/mage_sprite.png
Executable file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
static/themes/80s/img/music.png
Executable file
|
After Width: | Height: | Size: 18 KiB |
BIN
static/themes/80s/img/news_contrib.png
Executable file
|
After Width: | Height: | Size: 197 KiB |
BIN
static/themes/80s/img/television.png
Executable file
|
After Width: | Height: | Size: 282 KiB |
65
static/themes/80s/pm.css
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
@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;
|
||||
background: rgba(0, 0, 51, 0.7);
|
||||
border: 2px solid #ff00ff;
|
||||
box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
|
||||
padding: 10px;
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
}
|
||||
|
||||
.table .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
border-bottom: 2px solid #00ffff;
|
||||
font-weight: 800;
|
||||
font-size: 0.8rem;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 255, 0.8);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.table .body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
border-bottom: 1px solid rgba(0, 255, 255, 0.3);
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
||||
padding: 8px 0;
|
||||
transition: background-color 0.3s ease;
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.table .body:hover {
|
||||
background: rgba(255, 0, 255, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.new-message {
|
||||
display: inline-block;
|
||||
color: #000000;
|
||||
background-color: #ff00ff;
|
||||
border: 1px solid #ff00ff;
|
||||
font-size: 0.5rem;
|
||||
margin-right: 10px;
|
||||
padding: 3px 6px;
|
||||
border-radius: 2px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 0 5px rgba(255, 0, 255, 0.8);
|
||||
animation: glow 1s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@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/80s/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;
|
||||
}
|
||||
329
static/themes/80s/profile.css
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
:root {
|
||||
--neon-pink: #ff71ce;
|
||||
--neon-blue: #01cdfe;
|
||||
--neon-green: #05ffa1;
|
||||
--neon-purple: #b967ff;
|
||||
--dark-bg: #1a1a1a;
|
||||
}
|
||||
|
||||
.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 var(--neon-pink);
|
||||
transition: transform 0.3s ease;
|
||||
box-shadow: 0 0 15px var(--neon-pink);
|
||||
}
|
||||
|
||||
.profile-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--neon-pink);
|
||||
text-shadow: 0 0 5px var(--neon-pink);
|
||||
animation: neonPulse 2s infinite;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
color: var(--neon-blue);
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 0 3px var(--neon-blue);
|
||||
}
|
||||
|
||||
.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;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid var(--neon-green);
|
||||
box-shadow: 0 0 10px var(--neon-green);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--neon-green);
|
||||
display: block;
|
||||
text-shadow: 0 0 5px var(--neon-green);
|
||||
animation: neonPulse 2s infinite;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--neon-blue);
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
line-height: 1.6;
|
||||
color: #ffffff;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
border-left: 4px solid var(--neon-purple);
|
||||
}
|
||||
|
||||
.profile-contact {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
padding: 0.8rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: var(--neon-pink);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
box-shadow: 0 0 10px var(--neon-pink);
|
||||
}
|
||||
|
||||
.contact-button:hover {
|
||||
background: var(--neon-purple);
|
||||
box-shadow: 0 0 15px var(--neon-purple);
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
background: linear-gradient(45deg, rgba(1, 205, 254, 0.1), rgba(255, 113, 206, 0.1));
|
||||
border: 2px solid var(--neon-blue);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 15px var(--neon-blue);
|
||||
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: var(--neon-green);
|
||||
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 0 10px var(--neon-green);
|
||||
animation: neonPulse 2s infinite;
|
||||
}
|
||||
|
||||
.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: #336699;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.bio-content {
|
||||
line-height: 1.6;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
/* Colonne de droite */
|
||||
.profile-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.stats-card, .achievements-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
border: 2px solid var(--neon-blue);
|
||||
box-shadow: 0 0 15px rgba(1, 205, 254, 0.3);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--neon-green);
|
||||
box-shadow: 0 0 10px var(--neon-green);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: var(--neon-green);
|
||||
display: block;
|
||||
text-shadow: 0 0 5px var(--neon-green);
|
||||
animation: neonPulse 2s infinite;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--neon-blue);
|
||||
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: var(--neon-pink);
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--neon-pink);
|
||||
color: white;
|
||||
box-shadow: 0 0 10px var(--neon-pink);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--neon-blue);
|
||||
color: #003366;
|
||||
box-shadow: 0 0 10px var(--neon-blue);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.profile-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Ajout d'une animation de pulsation pour les éléments néon */
|
||||
@keyframes neonPulse {
|
||||
0% { opacity: 0.8; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.8; }
|
||||
}
|
||||
|
||||
.profile-name, .stat-value, .level-badge {
|
||||
animation: neonPulse 2s infinite;
|
||||
}
|
||||
|
||||
139
static/themes/80s/shop.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.shop {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
background: linear-gradient(0deg, #000 0%, #1a1a1a 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.shop::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(transparent 0%, rgba(255,0,255,0.1) 100%);
|
||||
background-size: 100% 2px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-shop {
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #ff00ff;
|
||||
border-radius: 0;
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 10px #ff00ff, inset 0 0 5px #ff00ff;
|
||||
transition: all 0.3s ease;
|
||||
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);
|
||||
box-shadow: 0 0 20px #ff00ff, inset 0 0 10px #ff00ff;
|
||||
}
|
||||
|
||||
.card-shop img {
|
||||
max-width: 220px;
|
||||
margin-bottom: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card-shop .card-title {
|
||||
font-family: "Press Start 2P", cursive;
|
||||
color: #00ffff;
|
||||
text-shadow: 0 0 5px #00ffff;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.card-shop .card-text {
|
||||
font-family: "VT323", monospace;
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.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 right, #ff00ff, #00ffff);
|
||||
border: 2px solid #fff;
|
||||
border-radius: 0;
|
||||
padding: 8px 15px;
|
||||
color: #fff;
|
||||
font-family: "Press Start 2P", cursive;
|
||||
font-size: 0.8em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
text-shadow: 0 0 5px rgba(255,255,255,0.5);
|
||||
box-shadow: 0 0 10px rgba(255,0,255,0.5);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-shop-primary:hover {
|
||||
background: linear-gradient(to bottom right, #00ffff, #ff00ff);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 20px rgba(255,0,255,0.8);
|
||||
}
|
||||
|
||||
.btn-shop-secondary {
|
||||
background: linear-gradient(to bottom right, #ff0099, #ff6600);
|
||||
border: 2px solid #fff;
|
||||
border-radius: 0;
|
||||
padding: 8px 15px;
|
||||
color: #fff;
|
||||
font-family: "Press Start 2P", cursive;
|
||||
font-size: 0.8em;
|
||||
text-shadow: 0 0 5px rgba(255,255,255,0.5);
|
||||
box-shadow: 0 0 10px rgba(255,102,0,0.5);
|
||||
}
|
||||
|
||||
.btn-shop-secondary:hover {
|
||||
background: linear-gradient(to bottom right, #ff6600, #ff0099);
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 20px rgba(255,102,0,0.8);
|
||||
}
|
||||
|
||||
.btn-shop-large {
|
||||
padding: 10px 20px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.fa-coins {
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 5px #ffd700;
|
||||
}
|
||||
317
static/themes/80s/structure.css
Executable file
|
|
@ -0,0 +1,317 @@
|
|||
/* 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 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu h2 {
|
||||
border-bottom: 2px solid;
|
||||
padding: 10px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.warning-announce-not-mobile-compatible {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border: 1px solid orange;
|
||||
background-color: rgb(255, 215, 140);
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
color: rgb(152, 120, 60);
|
||||
text-shadow: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
42
static/themes/80s/typo.css
Executable file
|
|
@ -0,0 +1,42 @@
|
|||
@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');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'VT323', monospace;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
text-shadow: 2px 2px 0px #ff00ff;
|
||||
}
|
||||
|
||||
h1, h2, .breadcrumbs, .btn, input, select, button, .notification, .page-link, .guestbook p {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn, button {
|
||||
font-family: 'Press Start 2P', cursive;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.menu h2 {
|
||||
font-family: 'VT323', cursive;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-family: "Chakra Petch", sans-serif;
|
||||
}
|
||||
|
||||
.menu ul.guestbook li {
|
||||
font-size: 1rem;
|
||||
}
|
||||