Discogs Wide Display by Victor333Huesca

/* ==UserStyle==
@name           Discogs Wide Display
@namespace      github.com/openstyles/stylus
@version        0.0.1
@description    Discog classic interface on wide screens
@author         Victor Huesca <https://github.com/Victor333Huesca>
@preprocessor   stylus

@var            range    release-img-width    "Imgage"      [100, 0,  500, 25, 'px']
@var            range    release-title-width  "Title"       [250, 0, 1000, 25, 'px']
@var            range    price-low-width      "Price Low"   [ 50, 0,  250,  5, 'px']
@var            range    price-avg-width      "Price Avg"   [ 50, 0,  250,  5, 'px']
@var            range    price-high-width     "Price High"  [ 50, 0,  250,  5, 'px']
@var            range    date-added-witdh     "Date Added"  [ 30, 0,  150,  5, 'px']
@var            range    folder-width         "Folder"      [ 30, 0,  150,  5, 'px']
@var            range    rating-width         "Rating"      [ 80, 0,  250, 10, 'px']
@var            range    column-3-width       "Notes"       [120, 0, 1000, 10, 'px']
@var            range    column-4-width       "Infos Achat" [120, 0, 1000, 10, 'px']
@var            range    column-5-width       "Record"      [120, 0, 1000, 10, 'px']
@var            range    column-6-width       "Version"     [ 70, 0, 1000, 10, 'px']
@var            range    column-7-width       "Style"       [100, 0, 1000, 10, 'px']
@var            range    column-8-width       "Num Achat"   [130, 0, 1000, 10, 'px']

@var            checkbox release-img-show     "Imgage"      1
@var            checkbox release-title-show   "Title"       1
@var            checkbox price-low-show       "Price Low"   0
@var            checkbox price-avg-show       "Price Avg"   1
@var            checkbox price-high-show      "Price High"  0
@var            checkbox date-added-show      "Date Added"  0
@var            checkbox folder-show          "Folder"      0
@var            checkbox rating-show          "Rating"      1
@var            checkbox column-3-show        "Notes"       1
@var            checkbox column-4-show        "Infos Achat" 1
@var            checkbox column-5-show        "Record"      1
@var            checkbox column-6-show        "Version"     1
@var            checkbox column-8-show        "Num Achat"   1
@var            checkbox column-7-show        "Style"       1

@var            select release-img-select     "Imgage"      ['Min', 'Fixed', 'Max']
@var            select release-title-select   "Title"       ['Min', 'Fixed', 'Max']
@var            select price-low-select       "Price Low"   ['Fixed', 'Min', 'Max']
@var            select price-avg-select       "Price Avg"   ['Fixed', 'Min', 'Max']
@var            select price-high-select      "Price High"  ['Fixed', 'Min', 'Max']
@var            select date-added-select      "Date Added"  ['Fixed', 'Min', 'Max']
@var            select folder-select          "Folder"      ['Fixed', 'Min', 'Max']
@var            select rating-select          "Rating"      ['Fixed', 'Min', 'Max']
@var            select column-3-select        "Notes"       ['Min', 'Fixed', 'Max']
@var            select column-4-select        "Infos Achat" ['Min', 'Fixed', 'Max']
@var            select column-5-select        "Record"      ['Min', 'Fixed', 'Max']
@var            select column-6-select        "Version"     ['Min', 'Fixed', 'Max']
@var            select column-8-select        "Num Achat"   ['Min', 'Fixed', 'Max']
@var            select column-7-select        "Style"       ['Min', 'Fixed', 'Max']

@var            checkbox debug                "Debug mode"  0
==/UserStyle== */

@-moz-document regexp("https://www.discogs.com/(.+/)?user/.+/collection(/.+)?") {


/* Debug */
:root {
  --release-img-color:       orangered;
  --release-title-color:     yellow;
  --price-low-color:         blue;
  --price-avg-color:         purple;
  --price-high-color:        pink;
  --date-added-color:        green;
  --folder-color:            yellow;
  --rating-color:            brown;
  --column-1-color:          cyan;
  --column-2-color:          blue;
  --column-3-color:          yellow;
  --column-4-color:          green;
  --column-5-color:          purple;
  --column-6-color:          pink;
  --column-7-color:          orangered;
  --column-8-color:          orange;
}


/* Main page */
div#page {
  max-width: 100%;
}


/* Column style */
named-column(name) {
  if lookup('' + name + '-select') == 'Fixed' {
    width:      lookup('' + name + '-width');
    min-width: auto !important;
  } else if lookup('' + name + '-select') == 'Min' {
    min-width:  lookup('' + name + '-width') !important;
  } else {
    max-width:  lookup('' + name + '-width') !important;
  }
  display:         (lookup('' + name + '-show') ? table-cell : none);
  background:  var(convert('--' + name + '-color')) if debug;
}

named-column-img(name) {
  & a
  & a span.thumbnail_center
  & a span.thumbnail_center img {
    min-width:   85px !important;
    min-height:  85px !important;
    max-width:  775px !important;
    max-height: 775px !important;
    height:           lookup('' + name + '-width') !important;
    width:            lookup('' + name + '-width') !important;
  }
  & a span.thumbnail_border {
/*     display: none; */
  }
  & a span.thumbnail_center {
    position:    auto !important;
    margin-left: auto !important;
    margin-top:  auto !important;
    line-height: inherit !important; /* thumbnail_orientation_portrait */
    top: auto !important;
    left: auto !important;
  }
  width:              lookup('' + name + '-width');
  display:           (lookup('' + name + '-show') ? table-cell : none);
  background:  var(convert('--' + name + '-color')) if debug;
}


/* Header, drop nowrap */
tr > th > a.sortable-link {
  white-space: wrap;
}

th.first,
td.as_table_cell.mobile_status {
  width: 0px;
  max-width: 5px;
  background: red if debug;
}

/* Special debug for this compound columns colspan=3 */
th.collection-release-column {
  background: linear-gradient(to right, var(--release-img-color), var(--release-title-color)) if debug;
}

/* Cover Title etc. */

tr.collection-row > td.collection-release-title-cell {
  named-column(release-title);
}

tr.collection-row > td.image {
  named-column-img(release-img);
}


/* Prices */

th:nth-child(1 of .collection-value-column),
td:nth-child(1 of .collection-value-column) {
  named-column(price-low);
}

th:nth-child(2 of .collection-value-column),
td:nth-child(2 of .collection-value-column) {
  named-column(price-avg);
}

th:nth-child(3 of .collection-value-column),
td:nth-child(3 of .collection-value-column) {
  named-column(price-high);
}


/* Date added / Folder / Note */

th.collection-date-added-column,
td.collection-date-added-column {
  named-column(date-added);
}

th.collection-folder-column,
td.new-collection-folder-column {
  named-column(folder);
}

th.grouped-custom-fields-column,
td.grouped-custom-fields-column {
  named-column(rating);
  min-width: 130px !important;
}


/* Each custom columns */
for num in (1..9) {
  th.custom-fields-column-{num},
  td.old-custom-fields-column-{num} {
    named-column(convert('column-' + num));
  }
}

}