ui/semantic/galette/collections/table.overrides

   1 /*******************************
   2          Galette Overrides
   3 *******************************/
   4
   5 /*----------------------
   6      Striped tables
   7 -----------------------*/
   8
   9 .ui.striped:not(.basic).table > tbody > tr,
  10 .ui.striped:not(.basic).table > tr {
  11     background-color: @evenLineBackgroundColor;
  12 }
  13
  14 .ui.striped:not(.basic).table > tbody > tr:nth-child(2n),
  15 .ui.striped:not(.basic).table > tr:nth-child(2n) {
  16     background-color: @oddLineBackgroundColor;
  17 }
  18
  19 /*----------------------
  20      Listing tables
  21 -----------------------*/
  22 table.listing td {
  23     line-height:1.5em;
  24     padding:.1em .2em;
  25 }
  26 table.listing tbody tr:hover > td {
  27     background-color: @activeLineBackgroundColor !important;
  28 }
  29 td.emptylist {
  30     background-color: @evenLineBackgroundColor;
  31     text-align: center;
  32     font-style: italic;
  33 }
  34 @media only screen and (max-width: @largestMobileScreen) {
  35     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr:hover,
  36     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr:hover > td {
  37         background: @activeLineBackgroundColor !important;
  38     }
  39 }
  40 @media only screen and (min-width: @tabletBreakpoint) {
  41     .large-table-wrapper {
  42         max-width: 100%;
  43         overflow-x: auto;
  44     }
  45 }
  46
  47 /*-------------------------
  48      Membership status
  49 --------------------------*/
  50 #legende .table th.cotis-ok,
  51 .ui.ui.table.listing tbody tr.cotis-ok > td {
  52     background-color: @cotisOkBackgroundColor;
  53 }
  54 #legende .table th.cotis-never,
  55 .ui.ui.table.listing tbody tr.cotis-never > td {
  56     background-color: @cotisNeverBackgroundColor;
  57 }
  58 #legende .table th.cotis-exempt,
  59 .ui.ui.table.listing tbody tr.cotis-exempt > td {
  60     background-color: @cotisExemptBackgroundColor;
  61 }
  62 #legende .table th.cotis-soon,
  63 .ui.ui.table.listing tbody tr.cotis-soon > td {
  64     background-color: @cotisSoonBackgroundColor;
  65 }
  66 #legende .table th.cotis-late,
  67 #legende .table th.transaction-uncomplete,
  68 .ui.ui.table.listing tbody tr.cotis-late > td,
  69 .ui.ui.table.listing tbody tr.transaction-uncomplete > td {
  70     background-color: @cotisLateBackgroundColor;
  71 }
  72 #legende .table th.cotis-lastday,
  73 .ui.ui.table.listing tbody tr.cotis-lastday > td {
  74     background-color: @cotisLastdayBackgroundColor;
  75 }
  76 #legende .table th.cotis-normal,
  77 #legende .table th.transaction-normal,
  78 .ui.ui.table.listing tbody tr.cotis-normal > td,
  79 .ui.ui.table.listing tbody tr.transaction-normal > td {
  80     background-color: @cotisOkBackgroundColor;
  81 }
  82 #legende .table th.cotis-give,
  83 .ui.ui.table.listing tbody tr.cotis-give > td {
  84     background-color: @cotisLateBackgroundColor;
  85 }
  86 @media only screen and (max-width: @largestMobileScreen) {
  87     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-ok,
  88     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-ok > td {
  89         background-color: @cotisOkBackgroundColor;
  90     }
  91     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-never,
  92     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-never > td {
  93         background-color: @cotisNeverBackgroundColor;
  94     }
  95     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-exempt,
  96     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-exempt > td {
  97         background-color: @cotisExemptBackgroundColor;
  98     }
  99     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-soon,
 100     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-soon > td {
 101         background-color: @cotisSoonBackgroundColor;
 102     }
 103     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-late,
 104     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-late > td,
 105     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-uncomplete,
 106     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-uncomplete > td {
 107         background-color: @cotisLateBackgroundColor;
 108     }
 109     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-lastday,
 110     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-lastday > td {
 111         background-color: @cotisLastdayBackgroundColor;
 112     }
 113     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-normal,
 114     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-normal > td,
 115     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-normal,
 116     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-normal > td {
 117         background-color: @cotisOkBackgroundColor;
 118     }
 119     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-give,
 120     .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-give > td {
 121         background-color: @cotisLateBackgroundColor;
 122     }
 123 }
 124
 125 /*-------------------------
 126      Legends display
 127 --------------------------*/
 128 #legende .table {
 129     th {
 130         text-align: center;
 131     }
 132     .color-sample {
 133         border: @rowBorder;
 134     }
 135 }
 136
 137 /*------------------
 138      Plugins list
 139 -------------------*/
 140 tr.plugins th {
 141    padding-top: 1rem;
 142    padding-bottom: 1rem;
 143    background: @pluginsActiveBackground;
 144 }
 145
 146 tr.inactives.plugins th {
 147     background: @pluginsInactiveBackground;
 148     border-top: @rowBorder;
 149     border-bottom: @rowBorder;
 150 }
 151 @media only screen and (max-width: @largestMobileScreen) {
 152     .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.plugins,
 153     .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.plugins > th {
 154         background: @pluginsActiveBackground;
 155     }
 156     .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.inactives.plugins,
 157     .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.inactives.plugins > th {
 158         background: @pluginsInactiveBackground;
 159     }
 160 }