84 lines
1.8 KiB
CSS
84 lines
1.8 KiB
CSS
/* For smaller overall projects list */
|
|
#projectsTable {
|
|
max-width: 1222px;
|
|
}
|
|
|
|
#projectsTable ol, #projectsList>ldp-display {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
border-width: 0px 2px 2px 2px; /* no border-top, except for "ol" */
|
|
border-style: solid;
|
|
border-color: black;
|
|
}
|
|
|
|
#projectsTable ol {
|
|
border-width: 2px;
|
|
background-color: darkgrey;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
#projectsTable ol li , #projectsList>ldp-display>ldp-display-div {
|
|
display: flex;
|
|
border-right: 2px solid black;
|
|
/* border-left: 1px solid red; */
|
|
}
|
|
|
|
#projectsList .income-div {
|
|
border-right: 2px solid black;
|
|
}
|
|
|
|
#projectsList ldp-display>.income-div>ldp-display-div {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Acceptable, mais j'aimerais écrire autrement les sélecteurs. écrire en une fois les 2 "projectList..." */
|
|
#projectsTable ol li, #projectsList ldp-display>ldp-display-div, #projectsList ldp-display>.income-div {
|
|
padding-left: 0.5vw;
|
|
}
|
|
|
|
#projectsTable #categorieNumber, #projectsTable #categorieNumberAlt, #projectsList .number {
|
|
width: 10%;
|
|
}
|
|
#projectsTable #categorieTitle, #projectsList .title {
|
|
width: 40%;
|
|
}
|
|
#projectsTable #categorieAssociate, #projectsList .associate {
|
|
width: 20%;
|
|
}
|
|
#projectsTable #categorieIncome, #projectsList .income-div {
|
|
width: 15%;
|
|
}
|
|
#projectsTable #categorieState, #projectsList .state {
|
|
width: 15%;
|
|
border-right: none;
|
|
}
|
|
|
|
/* Interaction et tout */
|
|
|
|
#projectsList>ldp-display:nth-child(odd) {
|
|
background-color: aliceblue;
|
|
}
|
|
|
|
#projectsList>ldp-display:hover {
|
|
cursor: pointer;
|
|
/* background-color: #0080FF; */
|
|
background-color: #FFF700;
|
|
}
|
|
|
|
#projectsList>ldp-display {
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
#projectsTable [id*="Alt"] {
|
|
display: none;
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
#projectsTable #categorieNumber {
|
|
display: none;
|
|
}
|
|
#projectsTable #categorieNumberAlt {
|
|
display: flex;
|
|
}
|
|
}
|