refactored text css

This commit is contained in:
Didictateur 2026-02-25 14:20:57 +01:00
parent 0a584bb58a
commit 8964165e78
15 changed files with 41 additions and 108 deletions

View file

@ -38,29 +38,3 @@
white-space: nowrap; white-space: nowrap;
font-size: 1.5rem; font-size: 1.5rem;
} }
.dialog-buttons {
display: flex;
gap: 5px;
margin-left: 10px;
}
.dialog-btn {
padding: 4px 8px;
border: 1px solid #333;
background: #f0f0f0;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
transition: all 0.2s;
}
.dialog-btn:hover:not(:disabled) {
background: #333;
color: white;
}
.dialog-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}

14
frontend/css/text.css Normal file
View file

@ -0,0 +1,14 @@
h1 {
text-align: left;
margin-top: 40px;
margin-bottom: 20px;
margin-left: 40px;
color: white;
}
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Liste des Yakus - Tuto Riichi</title> <title>Liste des Yakus - Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<style> <style>
#menu { #menu {
@ -38,13 +39,6 @@
display: flex; display: flex;
} }
h1 {
text-align: center;
color: white;
margin: 40px 0 50px 0;
font-size: 2.5rem;
}
.yakus-container { .yakus-container {
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
@ -131,7 +125,7 @@
</div> </div>
<div id="mascotte"></div> <div id="mascotte"></div>
<h1>Yakus les plus courants</h1> <h1 style="text-align: center;">Yakus les plus courants</h1>
<div class="yakus-container" id="yakus-list"></div> <div class="yakus-container" id="yakus-list"></div>

View file

@ -4,19 +4,13 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Ressources - Tuto Riichi</title> <title>Ressources - Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<style> <style>
#menu { #menu {
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
h2 {
text-align: center;
color: white;
margin: 40px 0 50px 0;
font-size: 2.5rem;
}
.resources-list { .resources-list {
max-width: 700px; max-width: 700px;
margin: 40px auto; margin: 40px auto;
@ -55,7 +49,7 @@
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h2>Ressources complémentaires</h2> <h2 style="text-align: center;">Ressources complémentaires</h2>
<ul class="resources-list"> <ul class="resources-list">
<li class="resource-item"> <li class="resource-item">
<div class="resource-title">Guide PDF du Riichi Mahjong</div> <div class="resource-title">Guide PDF du Riichi Mahjong</div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<style> <style>
#menu { #menu {
@ -139,6 +140,7 @@
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 1</h1>
<div id="tile-container"></div> <div id="tile-container"></div>
<div id="tiles-display"> <div id="tiles-display">
<div class="tiles-numbers"> <div class="tiles-numbers">

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -38,17 +39,11 @@
.speech-bubble.visible { .speech-bubble.visible {
display: flex; display: flex;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 10</h1>
<div class="speech-bubble"> <div class="speech-bubble">
<div class="speech-text" id="speech-text"></div> <div class="speech-text" id="speech-text"></div>
</div> </div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -38,17 +39,11 @@
.speech-bubble.visible { .speech-bubble.visible {
display: flex; display: flex;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 11</h1>
<div class="speech-bubble"> <div class="speech-bubble">
<div class="speech-text" id="speech-text"></div> <div class="speech-text" id="speech-text"></div>
</div> </div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -124,6 +125,7 @@
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 2</h1>
<div id="tile-container"></div> <div id="tile-container"></div>
<div id="tiles-display"></div> <div id="tiles-display"></div>
<div class="speech-bubble"> <div class="speech-bubble">

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -54,17 +55,11 @@
gap: 60px; gap: 60px;
padding: 20px; padding: 20px;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 3</h1>
<h2>Combinaisons valides</h2> <h2>Combinaisons valides</h2>
<div id="tiles-container"> <div id="tiles-container">
<div id="tiles-display"></div> <div id="tiles-display"></div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -54,17 +55,11 @@
gap: 10px; gap: 10px;
padding: 20px; padding: 20px;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 4</h1>
<h2>Mains bien formées</h2> <h2>Mains bien formées</h2>
<div id="tiles-container"> <div id="tiles-container">
<div id="tiles-display"></div> <div id="tiles-display"></div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -38,17 +39,11 @@
.speech-bubble.visible { .speech-bubble.visible {
display: flex; display: flex;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 5</h1>
<div class="speech-bubble"> <div class="speech-bubble">
<div class="speech-text" id="speech-text"></div> <div class="speech-text" id="speech-text"></div>
</div> </div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -38,17 +39,11 @@
.speech-bubble.visible { .speech-bubble.visible {
display: flex; display: flex;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 6</h1>
<div class="speech-bubble"> <div class="speech-bubble">
<div class="speech-text" id="speech-text"></div> <div class="speech-text" id="speech-text"></div>
</div> </div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -39,15 +40,6 @@
display: flex; display: flex;
} }
h2 {
position: absolute;
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
pointer-events: none;
}
#winds-box { #winds-box {
position: absolute; position: absolute;
pointer-events: none; pointer-events: none;
@ -114,6 +106,7 @@
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 7</h1>
<div class="speech-bubble"> <div class="speech-bubble">
<div class="speech-text" id="speech-text"></div> <div class="speech-text" id="speech-text"></div>
</div> </div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -54,17 +55,11 @@
gap: 10px; gap: 10px;
padding: 20px; padding: 20px;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 8</h1>
<h2>Brelan de valeur (dragons, Est ou vent du joueur)</h2> <h2>Brelan de valeur (dragons, Est ou vent du joueur)</h2>
<div id="tiles-display"></div> <div id="tiles-display"></div>

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tuto Riichi</title> <title>Tuto Riichi</title>
<link rel="stylesheet" href="/frontend/css/style.css"> <link rel="stylesheet" href="/frontend/css/style.css">
<link rel="stylesheet" href="/frontend/css/text.css">
<link rel="stylesheet" href="/frontend/css/speech-bubble.css"> <link rel="stylesheet" href="/frontend/css/speech-bubble.css">
<link rel="stylesheet" href="/frontend/css/hand.css"> <link rel="stylesheet" href="/frontend/css/hand.css">
<style> <style>
@ -38,17 +39,11 @@
.speech-bubble.visible { .speech-bubble.visible {
display: flex; display: flex;
} }
h2 {
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
color: white;
}
</style> </style>
</head> </head>
<body> <body>
<div id="menu"></div> <div id="menu"></div>
<h1>Chapitre 9</h1>
<div class="speech-bubble"> <div class="speech-bubble">
<div class="speech-text" id="speech-text"></div> <div class="speech-text" id="speech-text"></div>
</div> </div>