Hello, j'ai modifié le CSS un peu à la barbare mais ça donne ce que je voulais.
Il faudrait nettoyer tout ça, mais vu que ça fonctionne, je ne sais pas si je vais le faire:
/* Cacher le footer */
#footer-container {
display: none;
}
/* cacher la zone permettant de se logger */
.user-login .settings__fields{
display:none;
}
/* Fond noir du body et empécher l'ascenceur vertical */
body{
background-color:black;
overflow-x: hidden;
}
header a, header a:hover, header a:visited {
text-decoration: none;
color: #000;
}
.loginBloc {
background-color: rgba(202,70,70,0);
}
.loginBloc span {
color: rgb(0,0,0);
}
.loginButton {
background-color: rgb(181,181,181);
}
.wrapper{
background: rgb(208,255,229);
background: -moz-linear-gradient(90deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 49%, rgba(113,204,228,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 49%, rgba(113,204,228,1) 100%);
background: linear-gradient(90deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 49%, rgba(113,204,228,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0ffe5",endColorstr="#71cce4",GradientType=1);
}
.sidebar{
flex: 0 0 5px;
opacity:0;
transition-duration: 500ms;
transition-property: flex opacity;
background: rgb(16,33,74);
background: -moz-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
background: linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10214a",endColorstr="#376052",GradientType=1);
}
.sidebar:hover{
flex: 0 0 384px;
opacity:1;
transition-duration: 500ms;
transition-property: flex opacity;
background: rgb(16,33,74);
background: -moz-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
background: linear-gradient(90deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 50%, rgba(55,96,82,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10214a",endColorstr="#376052",GradientType=1);
}
.event {
border-bottom: 0.1em solid #3A6E8C;
padding: 0em 0em 0em 1em;
}
.article__header:hover{
}
.article__description:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 16em;
background-image: -webkit-gradient(linear, right top, left top, color-stop(48%, rgba(255,255,255,0)), to(rgba(255, 255, 255, 0)));
background-image: -o-linear-gradient(right, rgba(255,255,255,0) 48%, rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to left, rgba(255,255,255,0) 48%, rgba(255, 255, 255, 0) 100%);
}
.event:hover .article__description:after,
.event--focused .article__description:after {
background-image: -webkit-gradient(linear, right top, left top, color-stop(6em, rgba(221,221,221,0)), to(rgba(221, 221, 221, 0)));
background-image: -o-linear-gradient(right, rgba(221,221,221,0) 6em, rgba(221, 221, 221, 0) 100%);
background-image: linear-gradient(to left, rgba(221,221,221,0) 6em, rgba(221, 221, 221, 0) 100%);
}
.event:not(.event--focus):hover, .event--focused:not(.event--focus) {
background: rgb(208,255,229);
background: -moz-linear-gradient(270deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 15%, rgba(113,204,228,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 15%, rgba(113,204,228,1) 100%);
background: linear-gradient(270deg, rgba(208,255,229,1) 0%, rgba(135,228,254,1) 15%, rgba(113,204,228,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d0ffe5",endColorstr="#71cce4",GradientType=1);
}
.feed {
background-color: #ffffff00;
}
.folder__item:hover, .folder__item:active,
.feed__item:hover,
.feed__item:active {
background: rgb(16,33,74);
background: -moz-linear-gradient(270deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 20%, rgba(55,96,82,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 20%, rgba(55,96,82,1) 100%);
background: linear-gradient(270deg, rgba(16,33,74,1) 0%, rgba(41,78,88,1) 20%, rgba(55,96,82,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#10214a",endColorstr="#376052",GradientType=1);
}
.settings {
position: relative;
padding: 13px 10px;
min-height: 34px;
background-color: rgba(0,0,0,0.28);
z-index: 1000;}
[class~="event--read"] .article__title a {
color: #868686;
font-style: italic;
font-weight: normal ;
text-align: center;
}
.logo .versionBloc {
color: #000;
}
/* ------------------------------------------------ */
#header-container, #footer-container, #main aside {
background: rgba(0,0,0,0);
box-shadow: 0 0px 0px #ffffff00;
}
.wrapper {
width: 100%;
padding: 5px 0px 0px 0px;
}
#header-container {
border-bottom: 1px solid rgb(0,0,0);
}
nav a {
display: block;
margin-bottom: 10px;
background: rgba(187,78,47,0)00;
color: #000000;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 30px;
transition: background 0.5s ease-in-out ;
transition-duration: 200ms;
transition-property: font-size margin-bottom;
}
nav a:hover {
display: block;
margin-bottom: 0px;
background: rgba(0,0,0,0)00;
color: #000000;
text-align: center;
text-decoration: none;
font-weight: bold;
font-size: 40px;
transition: background 0.5s ease-in-out;
transition-duration: 200ms;
transition-property: font-size margin-bottom;
}
nav {
float: right;
width: 17%;
margin-right: 0px;
}
#main aside{
color: #000000;
padding: 0px 1% 10px;
margin-bottom: 10px;
border-top: 1px solid rgba(255,255,255,0);
box-shadow: 0 0px 0px rgba(170,170,170,0);
text-align: right;
margin-right: 20px;
}
#main aside .toggle {
color:rgb(0,0,0);
font-size: 12px;
}
#main aside .pointer {
color:rgb(0,0,0);
font-size: 12px;
}
#main aside .toggle:hover {
color:rgb(0,0,0);
font-weight: bold;
}
#main aside .pointer:hover {
color:rgb(0,0,0);
font-weight: bold;
}
#main.settings aside a {
font-size: 12px;
}
#main aside{
color: #000000;
box-shadow: inset 0 0 20px 0 #0b0b0b;
border-top: 0px solid rgba(241,102,41,0);
border-left: 0px solid rgba(241,102,41,0);
text-align: right;
margin-right: 10px;
}
#menuBar aside h3 {
margin: 0px;
}
#main #menuBar aside {
padding: 0px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
}
textarea {
width: 99%;
height: 100%;
font-size: 12px;
font-family: Monospace;
}
#main article section.eventSelected, .settings article section {
box-shadow: inset 0 0 10px 0 #0b0b0b;
border-top: 0px solid rgba(241,102,41,0);
border-left: 10px solid rgba(241,102,41,0);
}
.settings .feedListItem {
clear: right;
border-bottom: 1px solid #3A6E8C;
}
.settings .feedVerbose {
min-width: 1em;
float: left;
}
.settings .feedsList {
margin: 0;
padding: 0;
list-style: none;
}
#main article section a.underlink, #main article a.underlink, .underlink {
font-size:12px;
margin-bottom: 0px;
margin-top: 0px;
margin-left:12px;
background-image: url(https://cdn-icons-png.flaticon.com/512/56/56992.png);
background-size: 10px;
background-repeat: no-repeat;
display: inline-block;
width: 24px;
text-indent: -999px;
}
/* Modifie la case à cocher afin de l'aligner verticalement */
.feedAction, .feedButtons {
display: inline-flex;
vertical-align: middle;
}
/* Modification du menu de présentation des flux (suite) */
#main button, .loginButton, .button, .readUnreadButton {
background-color: rgba(13,102,124,0.27);
border: 0px;
color: #000;
text-decoration: none;
padding: 0.4em 0.8em;
margin-left: 8px;
font-size: 10px;
font-weight: bold;
min-width: 35px;
text-align: center;
vertical-align: middle;
border-radius: 4px;
}
#main button:hover, .loginButton:hover, .button:hover, .readUnreadButton:hover {
background-color: rgb(13,102,124);
border: 0px;
color: rgba(255,255,255,0.78);
text-decoration: none;
padding: 0.4em 0.8em;
margin-left: 8px;
font-size: 10px;
font-weight: bold;
min-width: 35px;
text-align: center;
vertical-align: middle;
border-radius: 4px;
}
#main article section a, #main article a {
color: #0d667c;
font-size:12px;
font-weight: bold;
}
/* Virer la barre "dashed" dans la gestion des flux */
#main article section {
border-bottom: 3px solid rgba(255,255,255,0);
padding-left: 20px;
overflow: hidden;
}
h2{
font-size: 16px;
}
h3{
font-size: 14px;
}
p {
font-size:12px;
}
form {
font-size:12px;
}
span {
font-size:12px;
}
h1 span {
font-size: 16px;
}
.logo{
background: url(data:image/png;base64,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) 12px center no-repeat;
font-size: 2.4em;
height: 50px;
margin: 0;
padding-left: 58px;
padding-top: 5px;
}
input[type="checkbox"]{
accent-color: #34495e;
}
select {
font-size: 12px;
background-color: rgba(255,255,255,0.48);
position: relative;
}
input[type="text"]{
background-color: rgba(255,255,255,0.53);
}
.feedVerbose {
accent-color: #34495e;
}
.addBloc {
margin-left: 0px;
margin-right: 24px;
}
button, input {
line-height: normal;
accent-color: #34495e;
}
Hello, j'ai modifié le CSS un peu à la barbare mais ça donne ce que je voulais.
Il faudrait nettoyer tout ça, mais vu que ça fonctionne, je ne sais pas si je vais le faire:
/