First Commit
This commit is contained in:
commit
ce0758fbbb
496 changed files with 52062 additions and 0 deletions
26
static/themes/rpg/animations.css
Normal file
26
static/themes/rpg/animations.css
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
@keyframes textFlicker {
|
||||
0% { text-shadow: 2px 2px var(--border-dark); }
|
||||
50% { text-shadow: 2px 2px var(--highlight); }
|
||||
100% { text-shadow: 2px 2px var(--border-dark); }
|
||||
}
|
||||
|
||||
@keyframes menuHover {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(5px); }
|
||||
}
|
||||
|
||||
.menu h2, .container h2 {
|
||||
animation: textFlicker 2s infinite;
|
||||
}
|
||||
|
||||
.menu-horizontal ul li a:hover {
|
||||
animation: menuHover 0.3s forwards;
|
||||
}
|
||||
|
||||
.notification ul li {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.notification ul li:hover {
|
||||
transform: translateX(10px);
|
||||
}
|
||||
179
static/themes/rpg/banner.css
Executable file
179
static/themes/rpg/banner.css
Executable file
|
|
@ -0,0 +1,179 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');
|
||||
|
||||
.rpg-banner {
|
||||
background: #000;
|
||||
padding: 20px;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rpg-frame {
|
||||
border: 8px solid #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
background: linear-gradient(135deg, #574a08, #0f2027);
|
||||
box-shadow: 0 0 10px rgba(255,255,255,0.5);
|
||||
animation: border-glow 2s infinite alternate;
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rpg-text-box {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border: 4px solid #fff;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
font-family: 'Press Start 2P', monospace;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.rpg-title {
|
||||
font-family: 'IM Fell English SC', serif;
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
color: #FFD700;
|
||||
text-shadow: 3px 3px 0 #8B4513,
|
||||
-1px -1px 0 #000,
|
||||
1px -1px 0 #000,
|
||||
-1px 1px 0 #000,
|
||||
1px 1px 0 #000;
|
||||
margin-bottom: 20px;
|
||||
letter-spacing: 2px;
|
||||
transform: scale(1, 1.2);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.rpg-message {
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
animation: textSequence 10s infinite;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes textSequence {
|
||||
0% {
|
||||
width: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
30% {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Supprimez ou commentez l'ancienne animation typing-animation */
|
||||
/* .typing-animation {
|
||||
animation: typing 3s steps(40, end);
|
||||
} */
|
||||
|
||||
/* Supprimez ou commentez l'ancien @keyframes typing */
|
||||
/* @keyframes typing {
|
||||
from { width: 0 }
|
||||
to { width: 100% }
|
||||
} */
|
||||
|
||||
/* Animation de scintillement pour la bordure */
|
||||
@keyframes border-glow {
|
||||
from {
|
||||
box-shadow: 0 0 5px #fff,
|
||||
0 0 10px #fff,
|
||||
0 0 15px rgb(155, 108, 39);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 10px #fff,
|
||||
0 0 20px #fff,
|
||||
0 0 30px rgb(155, 108, 39);
|
||||
}
|
||||
}
|
||||
|
||||
.rpg-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
background: linear-gradient(to bottom, #1a0f2e 0%, #2a1f3e 100%);
|
||||
}
|
||||
|
||||
.rpg-cloud {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 20px;
|
||||
height: 20px;
|
||||
animation: float 15s infinite linear;
|
||||
}
|
||||
|
||||
.rpg-cloud:nth-child(1) {
|
||||
width: 100px;
|
||||
top: 20%;
|
||||
left: -100px;
|
||||
}
|
||||
|
||||
.rpg-cloud:nth-child(2) {
|
||||
width: 60px;
|
||||
top: 40%;
|
||||
left: -60px;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
.rpg-tree {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 60px;
|
||||
background: linear-gradient(to bottom, #1a472a 50%, #2d3319 100%);
|
||||
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
}
|
||||
|
||||
.rpg-tree:nth-child(3) {
|
||||
left: 10%;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.rpg-tree:nth-child(4) {
|
||||
left: 80%;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.rpg-pointer {
|
||||
text-align: center;
|
||||
color: #FFD700;
|
||||
animation: bounce 1s infinite;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(1000px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
78
static/themes/rpg/bbcode.css
Normal file
78
static/themes/rpg/bbcode.css
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
|
||||
.bbcode-bar, .bbcode-bar ul {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bbcode-bar {
|
||||
flex-direction: column;
|
||||
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 3px 3px 3px;
|
||||
}
|
||||
|
||||
.bbcode-bar button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.draggable .header {
|
||||
position: fixed;
|
||||
width: 596px;
|
||||
padding: 5px;
|
||||
cursor: move;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.draggable .close-button {
|
||||
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-size: 1.8rem;
|
||||
}
|
||||
|
||||
h2.h2-bbcode {
|
||||
font-size: 1.5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
h3.h3-bbcode {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
fieldset.quote-bbcode {
|
||||
padding: 10px;
|
||||
}
|
||||
69
static/themes/rpg/decorations.css
Normal file
69
static/themes/rpg/decorations.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/* RPG Window corners */
|
||||
.container::before,
|
||||
.menu::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
.container::before {
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
background-image: url('../img/corner-tl.png');
|
||||
}
|
||||
|
||||
/* RPG Menu icons */
|
||||
.menu-item::before {
|
||||
content: '►';
|
||||
color: var(--rpg-gold);
|
||||
margin-right: 8px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/* RPG Window borders */
|
||||
.rpg-border {
|
||||
border-style: solid;
|
||||
border-width: 4px;
|
||||
border-image-slice: 3 3 3 3;
|
||||
border-image-width: 3px;
|
||||
border-image-outset: 1px;
|
||||
border-image-repeat: stretch;
|
||||
border-image-source: url('../img/border-pattern.png');
|
||||
}
|
||||
|
||||
/* RPG Pixelated background pattern */
|
||||
.pixel-bg {
|
||||
background-image: url('../img/bg-pattern.png');
|
||||
background-repeat: repeat;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
/* Health/MP bars style */
|
||||
.stat-bar {
|
||||
height: 20px;
|
||||
background: var(--rpg-blue);
|
||||
border: 2px solid var(--border-light);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-bar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
animation: shine 2s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
from { transform: translateX(-100%); }
|
||||
to { transform: translateX(100%); }
|
||||
}
|
||||
39
static/themes/rpg/forms.css
Normal file
39
static/themes/rpg/forms.css
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.btn, input[type="submit"], button {
|
||||
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/rpg/gallery.css
Normal file
13
static/themes/rpg/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;
|
||||
}
|
||||
310
static/themes/rpg/games.css
Normal file
310
static/themes/rpg/games.css
Normal file
|
|
@ -0,0 +1,310 @@
|
|||
.card-game {
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
.card-game .header {
|
||||
padding: 10px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-game .body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.card-game .footer {
|
||||
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;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* PETIT BAC */
|
||||
.game-bac-letter {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 60px;
|
||||
margin: auto;
|
||||
padding: 10px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
table.bac {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.bac th, table.bac td {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* QUIZ */
|
||||
|
||||
table.quiz {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
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;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.quiz-item h3 {
|
||||
padding-bottom: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.quiz-item p {
|
||||
margin: 8px 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Quiz Styles */
|
||||
.quiz-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.quiz-title {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2rem;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.quiz-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.quiz-question {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.question-header {
|
||||
padding: 10px 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.question-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.question-content h3 {
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.choices-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.choice-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 8px 8px 25px;
|
||||
}
|
||||
|
||||
.choice-item input[type="radio"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.choice-item label {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.submit-container {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
margin: 10px auto;
|
||||
padding: 12px 30px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Quiz Results Styles */
|
||||
.quiz-result-container {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.quiz-result-card {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.score-number {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.score-message {
|
||||
font-size: 18px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.quiz-score {
|
||||
float: right;
|
||||
font-size: 0.9rem;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
.percentage-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.progress-circle-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.progress-circle {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Responsive table styles */
|
||||
.responsive-table {
|
||||
width: 100%;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.responsive-table input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Mobile first styles */
|
||||
@media screen and (max-width: 600px) {
|
||||
.responsive-table thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.responsive-table tr {
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.responsive-table td {
|
||||
display: block;
|
||||
text-align: left;
|
||||
border: none;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
.responsive-table td:before {
|
||||
content: attr(data-label);
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.game-bac-letter {
|
||||
position: static;
|
||||
text-align: center;
|
||||
margin: 1em auto;
|
||||
width: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop styles */
|
||||
@media screen and (min-width: 601px) {
|
||||
.responsive-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.responsive-table thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
.responsive-table tbody {
|
||||
display: table-row-group;
|
||||
}
|
||||
|
||||
.responsive-table tr {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.responsive-table td,
|
||||
.responsive-table th {
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.responsive-table td:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.responsive-table input[type="text"] {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
59
static/themes/rpg/grid.css
Executable file
59
static/themes/rpg/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 */
|
||||
}
|
||||
}
|
||||
27
static/themes/rpg/pm.css
Normal file
27
static/themes/rpg/pm.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
margin: 0 auto 10px auto;
|
||||
}
|
||||
|
||||
.table .header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
font-weight: 800;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.table .body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.new-message {
|
||||
display: inline-block;
|
||||
font-size: 0.5rem;
|
||||
margin-right: 10px;
|
||||
padding: 3px;
|
||||
}
|
||||
30
static/themes/rpg/post.css
Normal file
30
static/themes/rpg/post.css
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
.postmenu {
|
||||
width: 300px;
|
||||
margin: 10px;
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.postmenu .header {
|
||||
padding: 5px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.postmenu .body {
|
||||
padding: 10px;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.postmenu .body ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.postmenu .body ul li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
list-style-type: none;
|
||||
padding: 5px 0;
|
||||
}
|
||||
228
static/themes/rpg/profile.css
Normal file
228
static/themes/rpg/profile.css
Normal file
|
|
@ -0,0 +1,228 @@
|
|||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-username {
|
||||
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;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
line-height: 1.6;
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.profile-contact {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.contact-button {
|
||||
padding: 0.8rem 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.profile-main {
|
||||
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;
|
||||
padding: 0.5rem;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.level-number {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.profile-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.joined-date {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.profile-bio {
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.bio-content {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Colonne de droite */
|
||||
.profile-stats {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.stats-card, .achievements-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.9rem;
|
||||
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;
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.inventory {
|
||||
padding: 1.5rem;
|
||||
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;
|
||||
margin: 15px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.item-quantity {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.profile-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
69
static/themes/rpg/shop.css
Normal file
69
static/themes/rpg/shop.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.shop {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
.card-shop {
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
width: 250px;
|
||||
min-height: 380px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
margin-right: 15px;
|
||||
vertical-align: top;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-shop img {
|
||||
max-width: 220px;
|
||||
margin-bottom: 10px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.card-shop .card-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-shop .card-text {
|
||||
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;
|
||||
}
|
||||
|
||||
a.btn-shop {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-shop-primary {
|
||||
padding: 5px 15px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.btn-shop-secondary {
|
||||
padding: 5px 15px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.btn-shop-large {
|
||||
padding: 10px 20px;
|
||||
height: 65px;
|
||||
}
|
||||
455
static/themes/rpg/structure.css
Executable file
455
static/themes/rpg/structure.css
Executable file
|
|
@ -0,0 +1,455 @@
|
|||
/* 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 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.notification ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.notification ul li {
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.container, .menu {
|
||||
padding: 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu h2 {
|
||||
padding: 10px;
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container h2 {
|
||||
padding: 10px;
|
||||
margin: 0 0 20px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/* Menu horizontal */
|
||||
.menu-horizontal {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menu-horizontal ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.menu-horizontal ul li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-horizontal ul li a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu-horizontal .dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
min-width: 200px;
|
||||
z-index: 1000;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.menu-horizontal li:hover .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-horizontal .dropdown li {
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.menu-horizontal .dropdown a {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* Style du menu burger */
|
||||
.burger-menu {
|
||||
display: none;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.burger-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.burger-icon span {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
body {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.menu-horizontal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50px; /* Hauteur du burger menu */
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.menu-horizontal.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-horizontal ul {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-horizontal ul li {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.menu-horizontal ul li a {
|
||||
padding: 15px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Style des sous-menus sur mobile */
|
||||
.menu-horizontal ul ul {
|
||||
position: static;
|
||||
display: none;
|
||||
width: 100%;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.menu-horizontal li.active > ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-horizontal .dropdown {
|
||||
position: static;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu-horizontal .dropdown li {
|
||||
padding-left: 20px; /* Indentation pour les sous-menus */
|
||||
}
|
||||
|
||||
.menu-horizontal li:hover .dropdown {
|
||||
display: none; /* Désactive l'affichage au hover sur mobile */
|
||||
}
|
||||
|
||||
.menu-horizontal li.active .dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Animation du burger quand actif */
|
||||
.burger-menu.active .burger-icon span:first-child {
|
||||
transform: rotate(45deg) translate(8px, 6px);
|
||||
}
|
||||
|
||||
.burger-menu.active .burger-icon span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.burger-menu.active .burger-icon span:last-child {
|
||||
transform: rotate(-45deg) translate(8px, -6px);
|
||||
}
|
||||
|
||||
/* Styles des sous-menus sur mobile */
|
||||
.menu-horizontal .dropdown {
|
||||
position: static;
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
.menu-horizontal li:hover .dropdown {
|
||||
display: none; /* Désactive l'affichage au hover sur mobile */
|
||||
}
|
||||
|
||||
.menu-horizontal li.active .dropdown {
|
||||
display: block; /* Affiche uniquement quand .active est présent */
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
.burger-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-horizontal {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.news-header, .post-card-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.contrib {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.contrib a {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
span.post-offline {
|
||||
font-weight:bold;
|
||||
margin:5px;
|
||||
background-image: url('../../img/icons/shield-red-cross.png');
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
span.post-online {
|
||||
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: 1rem;
|
||||
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;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 2px;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* Ajout d'un compteur de visiteurs style années 2000 */
|
||||
.visitor-counter {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.warning-announce-not-mobile-compatible {
|
||||
display: block;
|
||||
position: absolute;
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
border: 1px solid orange;
|
||||
background-color: rgb(255, 215, 140);
|
||||
color: rgb(152, 120, 60);
|
||||
text-shadow: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
1362
static/themes/rpg/styles.css
Normal file
1362
static/themes/rpg/styles.css
Normal file
File diff suppressed because it is too large
Load diff
46
static/themes/rpg/typo.css
Executable file
46
static/themes/rpg/typo.css
Executable file
|
|
@ -0,0 +1,46 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Tahoma:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Verdana:wght@400;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Trebuchet+MS:wght@400;700&display=swap');
|
||||
|
||||
body {
|
||||
font-family: 'Verdana', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1, h2, h3, .breadcrumbs, .btn, input, select, textarea, button, .notification, .page-link, .guestbook p {
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Tahoma', sans-serif;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.btn, button {
|
||||
font-family: 'Trebuchet MS', sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.menu h2 {
|
||||
font-family: 'Verdana', sans-serif;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
font-family: 'Verdana', sans-serif;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue