feat: merde alors
This commit is contained in:
parent
34c5b35194
commit
927837c0a4
@ -7,7 +7,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="side-panel"></div>
|
||||
<!--<div id="side-panel"></div>-->
|
||||
|
||||
<div id="main-panel">
|
||||
|
||||
|
||||
12
sncf.json
Normal file
12
sncf.json
Normal file
@ -0,0 +1,12 @@
|
||||
|
||||
{
|
||||
"title": "SNCF billetier",
|
||||
"interactive": true,
|
||||
"characters": [
|
||||
"you",
|
||||
"SNCF billetier"
|
||||
],
|
||||
"messages":
|
||||
[
|
||||
]
|
||||
}
|
||||
91
styles.css
91
styles.css
@ -1,18 +1,13 @@
|
||||
:root {
|
||||
--dark-purple: #271f30;
|
||||
--light-red: #ff686b;
|
||||
--eggshell: #dfe2cf;
|
||||
--ucla-blue: #4d7298;
|
||||
--robin-egg-blue: #66ced6;
|
||||
|
||||
--vermilion: #ef3e36;
|
||||
--lapis-lazuli: #235789;
|
||||
--onyx: #383d3b;
|
||||
--light-cyan: #e0fbfc;
|
||||
--buff: #edb88b;
|
||||
--eeriee-black: #1d201f;
|
||||
--blanc: #fff;
|
||||
--gris: #666;
|
||||
--noir: #000;
|
||||
|
||||
--clear: #00000000;
|
||||
--bleu: #0055a4;
|
||||
--rouge: #e1000f;
|
||||
|
||||
--rose-de-l-erreur: #f0f
|
||||
}
|
||||
|
||||
html {
|
||||
@ -24,13 +19,14 @@ body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: var(--buff);
|
||||
background-color: var(--blanc);
|
||||
}
|
||||
|
||||
#side-panel {
|
||||
height: 100%;
|
||||
display: none;
|
||||
color: var(--onyx);
|
||||
color: var(--noir);
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#header button {
|
||||
@ -39,11 +35,6 @@ body {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#side-panel {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#side-panel.invisible-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
@ -51,10 +42,10 @@ body {
|
||||
/* on desktop only */
|
||||
@media only screen and (min-width: 768px) {
|
||||
#side-panel {
|
||||
display: block;
|
||||
min-width: 300px;
|
||||
width: auto;
|
||||
visibility: visible;
|
||||
border-right: 3px solid var(--onyx);
|
||||
border-right: 3px solid var(--noir);
|
||||
}
|
||||
|
||||
#side-panel.invisible-on-mobile {
|
||||
@ -80,9 +71,8 @@ body {
|
||||
#side-panel .conversation {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
border-bottom: solid var(--onyx) 3px;
|
||||
border-bottom: solid var(--noir) 3px;
|
||||
color: var(--onyx);
|
||||
padding: .5em;
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -90,8 +80,8 @@ body {
|
||||
}
|
||||
|
||||
#side-panel .conversation:hover {
|
||||
background-color: var(--vermilion);
|
||||
color: var(--light-cyan);
|
||||
background-color: var(--bleu);
|
||||
color: var(--blanc);
|
||||
}
|
||||
|
||||
#side-panel h2 {
|
||||
@ -101,7 +91,7 @@ body {
|
||||
#header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
border-bottom: solid var(--onyx) 3px;
|
||||
border-bottom: solid var(--blanc) 3px;
|
||||
}
|
||||
|
||||
#main-panel {
|
||||
@ -117,7 +107,7 @@ body {
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
color: var(--onyx);
|
||||
color: var(--noir);
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
@ -136,8 +126,8 @@ h1 {
|
||||
}
|
||||
|
||||
.message-content.theirs {
|
||||
background-color: var(--onyx);
|
||||
color: var(--light-cyan);
|
||||
background-color: var(--bleu);
|
||||
color: var(--blanc);
|
||||
|
||||
float: left;
|
||||
|
||||
@ -145,7 +135,7 @@ h1 {
|
||||
}
|
||||
|
||||
.message-content.theirs h3 {
|
||||
color: var(--buff);
|
||||
color: var(--blanc);
|
||||
margin: 0;
|
||||
margin-bottom: 3px;
|
||||
font-size: .85em;
|
||||
@ -157,20 +147,19 @@ h1 {
|
||||
}
|
||||
|
||||
.message-content.ours {
|
||||
background-color: var(--vermilion);
|
||||
background-color: var(--rouge);
|
||||
|
||||
right: 0;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.ours .message-text {
|
||||
color: var(--light-cyan);
|
||||
color: var(--blanc);
|
||||
}
|
||||
|
||||
.system-message {
|
||||
color: var(--onyx);
|
||||
color: var(--gris);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
@ -208,8 +197,11 @@ li.message {
|
||||
|
||||
z-index: 1;
|
||||
|
||||
background-color: var(--light-cyan);
|
||||
border-radius: 100vw;
|
||||
|
||||
color: var(--noir);
|
||||
background-color: var(--blanc);
|
||||
border-color: var(--gris);
|
||||
}
|
||||
|
||||
#input-panel input {
|
||||
@ -222,6 +214,7 @@ li.message {
|
||||
|
||||
z-index: 1;
|
||||
font-size: 1em;
|
||||
|
||||
}
|
||||
|
||||
#input-panel input:focus {
|
||||
@ -243,7 +236,7 @@ button:hover {
|
||||
}
|
||||
|
||||
#typing-indicator {
|
||||
color: var(--eggshell);
|
||||
color: var(--gris);
|
||||
|
||||
margin: 0;
|
||||
margin-left: 1em;
|
||||
@ -254,8 +247,30 @@ button:hover {
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background-color: var(--rouge);
|
||||
color: var(--blanc);
|
||||
|
||||
margin: 0.5em;
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
right: 0;
|
||||
font-size: 1em;
|
||||
border-width: 3px;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: var(--rouge);
|
||||
background-color: var(--blanc);
|
||||
border-color: var(--rouge);
|
||||
border-width: 3px;
|
||||
padding: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.message-status {
|
||||
color: var(--onyx);
|
||||
color: var(--gris);
|
||||
|
||||
position: absolute;
|
||||
bottom: -1.75em;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user