simulation.wikibac.fr/res/style.css

228 lines
3.2 KiB
CSS
Executable File

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
a:link, a:visited {
color: #444;
}
h1 {
margin: 10px 0;
text-align: center;
}
p {
margin-bottom: 1em;
}
header {
margin: 10px;
}
#logo {
margin: 20px 0;
text-align: center;
}
#logo a {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 10px;
color: black;
text-decoration: none;
}
#logo img {
width: 3em;
height: 3em;
}
#logo span {
font-size: 2em;
}
.invite {
margin: 50px 0;
text-align: center;
}
.choix-appli-wrapper {
margin: 40px 0;
display: flex;
align-items: stretch;
justify-content: center;
gap: 10px;
}
.choix-appli-wrapper a:link, .choix-appli-wrapper a:visited {
text-decoration: none;
color: black;
max-width: 200px;
}
div.content {
width: clamp(400px, 70%, 1200px);
margin: 30px auto;
}
#resultat {
background-color: #ffffff;
position: sticky;
top: 0;
padding: 15px;
display: flex;
box-shadow: 0 5px 5px #ddd;
justify-content: center;
gap: 15px;
}
#resultat .decision {
width: 100%;
}
#resultat div, .choix-appli-wrapper div {
padding: 15px;
border: 1px solid #ddd;
text-align: center;
min-width: 15%;
}
.choix-appli-wrapper div {
height: 100%;
}
.choix-appli-wrapper div {
transition: background-color 200ms;
}
.choix-appli-wrapper div:hover {
background-color: #fafafa;
}
.choix-appli-wrapper div:active {
background-color: #eeeeee;
}
#resultat div span, .choix-appli-wrapper span {
font-size: 2em;
}
#resultat div p, .choix-appli-wrapper p {
margin-top: 15px;
margin-bottom: 0;
}
@media screen and (max-width: 1000px) {
div.content {
width: 100vw;
}
#resultat, .choix-appli-wrapper {
position: static;
flex-direction: column;
align-items: center;
}
.choix-appli-wrapper a {
width: clamp(300px, 60%, 700px);
}
#resultat div {
width: 100%;
}
div.table_wrapper {
width: calc(100vw - 50px);
}
fieldset {
width: calc(100vw - 40px);
}
}
.info {
padding: 10px;
background-color: lightyellow;
margin: 10px 10px;
border: 1px solid #ddd;
}
form {
margin: 10px;
}
fieldset {
padding: 10px;
margin: 20px 0;
overflow: auto;
}
div.table_wrapper {
overflow-x: auto;
white-space: nowrap;
}
table {
border-collapse: collapse;
}
td, th {
padding: 5px;
}
th, tr.total td {
border: 2px solid black;
}
td {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
border-left: 2px solid black;
border-right: 2px solid black;
}
td.null {
background-color: #bbb
}
tr.total {
font-weight: bold;
text-align: center;
}
tr:hover {
background-color: #ffffdd;
}
.note {
width: 60px;
padding: 5px;
border: none;
background-color: #eee;
font: large monospace;
}
.note:invalid, .note[value=""] {
background-color: #ffdddd;
}
label {
display: none;
}
footer {
margin-top: 20px;
padding: 10px;
text-align: center;
}
del {
color: #888;
}