Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.css

   1 /**
   2  * Force the jacket image column to consume a consistent amount of
   3  * horizontal space, while allowing some room for the browser to
   4  * render the correct aspect ratio.
   5  */
   6 .record-jacket-div {
   7     width: 120px;
   8 }
   9
  10 .record-jacket-div img {
  11     height: 100%;
  12     max-height: 158px;
  13     max-width: 100px;
  14 }
  15
  16 .shelving-locations {
  17     margin-inline-start: calc(var(--bs-gutter-x) * .5);
  18     padding-inline-start: 0;
  19     width: auto;
  20 }
  21
  22 [role="region"][aria-labelledby][tabindex]:focus-visible table {
  23     outline: 2px solid #0A58CA;
  24     outline-offset: 5px;
  25 }
  26
  27 .shelving-locations table.table {
  28     border: 1px solid rgb(222, 226, 230);
  29     caption-side: top;
  30     margin-block-start: 1rem;
  31     table-layout: auto;
  32     white-space: normal;
  33     width: revert;
  34 }
  35
  36 table caption {
  37     color: #000;
  38     font-weight: bold;
  39     caption-side: top;
  40 }
  41
  42 .shelving-locations .table> :not(:first-child) {
  43     border-top: revert;
  44 }
  45
  46 table th,
  47 table td {
  48     padding: .2rem 1rem .2rem .2rem;
  49 }
  50
  51 table.compact th,
  52 table.compact td {
  53     line-height: 1.4;
  54     padding: .1rem .6rem .1rem .1rem;
  55 }
  56
  57 table.wide th,
  58 table.wide td {
  59     padding: .5rem 1rem .5rem .5rem;
  60 }
  61
  62 table thead th {
  63     border-bottom: 1px solid rgba(0, 0, 0, .125);
  64 }
  65
  66 table th {
  67     background-color: rgba(0, 0, 0, .03);
  68     font-weight: 600;
  69     vertical-align: bottom;
  70 }
  71
  72 table td {
  73     vertical-align: top;
  74 }
  75
  76 .org-unit,
  77 .callnumber,
  78 .timestamp {
  79     font-variant-numeric: tabular-nums lining-nums;
  80 }
  81
  82 @media (min-width: 640px) {
  83
  84     /* pad left with the jacket column (120px) plus result number and checkbox */
  85     /* use margin instead of padding for sensible :focus-visible outline */
  86     .shelving-locations {
  87         margin-inline-start: calc(120px + 3rem);
  88         padding: 0;
  89     }
  90 }
  91
  92 @media (max-width: 480px) {
  93
  94     .shelving-locations table.table,
  95     .shelving-locations table caption,
  96     .shelving-locations table tbody {
  97         border: none;
  98         display: block;
  99         width: 100%;
 100     }
 101
 102     /* emulate .visually-hidden */
 103     .shelving-locations table thead {
 104         position: absolute !important;
 105         width: 1px !important;
 106         height: 1px !important;
 107         padding: 0 !important;
 108         padding-right: 0px;
 109         margin: -1px !important;
 110         overflow: hidden !important;
 111         clip: rect(0, 0, 0, 0) !important;
 112         white-space: nowrap !important;
 113         border: 0 !important;
 114     }
 115
 116     .shelving-locations table tr {
 117         align-items: flex-start;
 118         border: none;
 119         display: flex;
 120         flex-wrap: wrap;
 121         gap: 0 1ch;
 122         padding: 0 0 1rem;
 123     }
 124
 125     .shelving-locations table th,
 126     .shelving-locations table td {
 127         background: none;
 128         border: none;
 129         display: inline-block;
 130         flex-basis: auto;
 131         flex-grow: 0;
 132         padding: 0;
 133     }
 134
 135     .shelving-locations table .callnumber {
 136         flex-basis: 100%;
 137     }
 138
 139     .shelving-locations table .due-date span:before {
 140         content: attr(title);
 141         display: inline-block;
 142         margin-inline-start: 2ch;
 143         margin-inline-end: 1ch;
 144     }
 145 }
 146 .bib-field-title {
 147     font-size: .88rem;
 148     font-weight: inherit;
 149     margin: 0;
 150 }
 151
 152 .bib-title-link {
 153     font-weight: bold;
 154 }
 155
 156 .bib-author-link {
 157     font-weight: normal;
 158     display: block;
 159 }
 160
 161 .no-copies-transcendant {
 162     background-color: rgba(var(--bs-warning-rgb), .2);
 163     color: var(--bs-dark);
 164 }
 165
 166 .no-copies {
 167     background-color: rgba(var(--bs-info-rgb), .2);
 168     color: var(--bs-dark);
 169 }