New List en

Installations 13 Likes 4

A New list layout with the picture imbedded in to the bar.
Elements now work like button is you don't have to hit the text to open.

This is designed to work with "Skylarks Theme" and shares its variables.
:root {
--sky-table-radius: 5px;
--sky-text-color-link: #3c8dbc;
--sky-page-color: #FFFFFF;
--sky-page-color-2nd: #F9F9F9;
--sky-page-color-3rd: #FFFFFF;
}

Latest version 2.1 View content

Released 3 years ago

Tweaked to work with Skylarks Theme

Plugin CSS for 2.1


/* Set vars */
:root {
    --sky-table-radius: 5px;
    
    --sky-text-color-link: #3c8dbc;

    --sky-page-color: #FFFFFF;
    --sky-page-color-2nd: #F9F9F9;
    --sky-page-color-3rd: #FFFFFF;
}


/******* COLORS ********/

form .table-striped > tbody > tr > td > a[class=name] {
    color: var(--sky-text-color-link);
}
/* hide background in front of table */
form .table-striped td:nth-child(-n+2) {
    background-color: var(--sky-page-color);
}

/* odd rows background color */
form .table-striped > tbody > tr:nth-of-type(odd) > td:nth-child(n+3),
form .table-striped > tbody > tr:nth-of-type(odd) > td > a[class=name] {
    background-color: var(--sky-page-color-2nd);
}
.table-striped > tbody > tr:nth-of-type(odd) > td .entity-image {
    box-shadow: 0px 0px 1px 1px var(--sky-page-color-2nd) inset, -3px 0px 4px 1px var(--sky-page-color-2nd) inset;
}

/* even rows background color */
form .table-striped > tbody > tr:nth-of-type(even) > td:nth-child(n+3),
form .table-striped > tbody > tr:nth-of-type(even) > td > a[class=name] {
    background-color: var(--sky-page-color-3rd);
}
.table-striped > tbody > tr:nth-of-type(even) > td .entity-image {
    box-shadow: 0px 0px 1px 1px var(--sky-page-color-3rd) inset, -3px 0px 4px 1px var(--sky-page-color-3rd) inset;
}


/**** TABLE ****/
/*table spaceing adjustments*/
form .table-striped > tbody > tr > td, form .table-striped > tbody > tr > th,
form .table-striped > tfoot > tr > td, form .table-striped > tfoot > tr > th,
form .table-striped > thead > tr > td, form .table-striped > thead > tr > th {
    padding: 0px 0px 0px 2px;
    border: none;
}
/*clear the front row so it look like it not part of the table*/
form .table-striped th:nth-child(1),
form .table-striped td:nth-child(1) {
    width: 16px;
    padding: 7px 0 4px 7px;
}
/* center number coumns */
#locations.table-striped > thead > tr > th:nth-child(5),
#locations.table-striped > thead > tr > th:nth-child(7),
#locations.table-striped > tbody > tr > td:nth-child(5),
#locations.table-striped > tbody > tr > td:nth-child(7),
#organisations.table-striped > thead > tr > th:nth-child(5),
#organisations.table-striped > thead > tr > th:nth-child(7),
#organisations.table-striped > tbody > tr > td:nth-child(5),
#organisations.table-striped > tbody > tr > td:nth-child(7),
#families.table-striped > thead > tr > th:nth-child(5),
#families.table-striped > thead > tr > th:nth-child(7),
#families.table-striped > tbody > tr > td:nth-child(5),
#families.table-striped > tbody > tr > td:nth-child(7),
#timelines.table-striped > thead > tr > th:nth-child(6),
#timelines.table-striped > thead > tr > th:nth-child(7),
#timelines.table-striped > tbody > tr > td:nth-child(6),
#timelines.table-striped > tbody > tr > td:nth-child(7),
#maps.table-striped > thead > tr > th:nth-child(6),
#maps.table-striped > tbody > tr > td:nth-child(6) {
    text-align: center;
}
/* move edit tag further right */
.table-striped > tbody > tr > td:last-child {
    text-align: right;
    padding-right: 10px;
}
/*curve to table when text gets wraped*/
form .table-striped > tbody > tr > td:nth-child(3) {
    border-radius: 100% 0% 0% 100%;
}


/**** TILES ****/

/* shape the picture tiles*/
.table-striped .entity-image {
    float: right;
    border-radius: var(--sky-table-radius) 0% 0% var(--sky-table-radius);
    width: 40px;
    height: 40px;
    filter: saturate(1.2) contrast(0.8) brightness(1.01);
}

/* shape the link tiles*/
form .table-striped > tbody > tr > td > a[class=name] {
    position: relative;
    left: -2px;
    padding: 0 4px 0 2px;
    display: block;
    line-height: 40px;
    border-radius: 0% var(--sky-table-radius) var(--sky-table-radius) 0%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    filter: saturate(1.2) contrast(0.8) brightness(1.01);
}
form #races.table-striped > tbody > tr > td:nth-child(n+4) > a[class=name],
form #events.table-striped > tbody > tr > td:nth-child(n+4) > a[class=name],
form #characters.table-striped > tbody > tr > td:nth-child(n+4) > a[class=name] {
    border-radius: var(--sky-table-radius) var(--sky-table-radius) var(--sky-table-radius) var(--sky-table-radius);
}