mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 03:18:19 -07:00
163 lines
3.8 KiB
CSS
163 lines
3.8 KiB
CSS
.ui-block-a,
|
|
.ui-block-b,
|
|
.ui-block-c,
|
|
.ui-block-d,
|
|
.ui-block-e {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
float: left;
|
|
min-height: 1px;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
/* force new row */
|
|
.ui-block-a {
|
|
clear: left;
|
|
}
|
|
li.ui-block-a,
|
|
li.ui-block-b,
|
|
li.ui-block-c,
|
|
li.ui-block-d,
|
|
li.ui-block-e {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
/* No margin in grids for 100% width button elements until we can use max-width: fill-available; */
|
|
[class*="ui-block-"] > button.ui-btn {
|
|
margin-right: 0;
|
|
margin-left: 0;
|
|
}
|
|
[class*="ui-block-"] > .ui-btn,
|
|
[class*="ui-block-"] > .ui-select,
|
|
[class*="ui-block-"] > .ui-checkbox,
|
|
[class*="ui-block-"] > .ui-radio,
|
|
[class*="ui-block-"] > button.ui-btn-inline,
|
|
[class*="ui-block-"] > button.ui-btn-icon-notext {
|
|
margin-right: .3125em;
|
|
margin-left: .3125em;
|
|
}
|
|
|
|
/* preset breakpoint to switch to stacked grid styles below 35em (560px) */
|
|
@media (max-width: 35em) {
|
|
.ui-responsive > .ui-block-a,
|
|
.ui-responsive > .ui-block-b,
|
|
.ui-responsive > .ui-block-c,
|
|
.ui-responsive > .ui-block-d,
|
|
.ui-responsive > .ui-block-e {
|
|
width: 100%;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.ui-table {
|
|
border: 0;
|
|
border-collapse: collapse;
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
.ui-table th,
|
|
.ui-table td {
|
|
line-height: 1.5em;
|
|
text-align: left;
|
|
padding: .4em .5em;
|
|
vertical-align:top;
|
|
}
|
|
.ui-table th .ui-btn,
|
|
.ui-table td .ui-btn {
|
|
line-height: normal;
|
|
}
|
|
.ui-table th {
|
|
font-weight: bold;
|
|
}
|
|
.ui-table caption {
|
|
text-align: left;
|
|
margin-bottom: 1.4em;
|
|
opacity: .5;
|
|
}
|
|
|
|
|
|
/*
|
|
Styles for the table columntoggle mode
|
|
*/
|
|
.ui-table-reflow td .ui-table-cell-label,
|
|
.ui-table-reflow th .ui-table-cell-label {
|
|
display: none;
|
|
}
|
|
|
|
/* Mobile first styles: Begin with the stacked presentation at narrow widths */
|
|
@media only all {
|
|
/* Hide the table headers */
|
|
.ui-table-reflow thead td,
|
|
.ui-table-reflow thead th {
|
|
display: none;
|
|
}
|
|
/* Show the table cells as a block level element */
|
|
.ui-table-reflow td,
|
|
.ui-table-reflow th {
|
|
text-align: left;
|
|
display: block;
|
|
}
|
|
/* Add a fair amount of top margin to visually separate each row when stacked */
|
|
.ui-table-reflow tbody th {
|
|
margin-top: 3em;
|
|
}
|
|
/* Make the label elements a percentage width */
|
|
.ui-table-reflow td .ui-table-cell-label,
|
|
.ui-table-reflow th .ui-table-cell-label {
|
|
padding: .4em;
|
|
min-width: 30%;
|
|
display: inline-block;
|
|
margin: -.4em 1em -.4em -.4em;
|
|
}
|
|
/* For grouped headers, have a different style to visually separate the levels by classing the first label in each col group */
|
|
.ui-table-reflow th .ui-table-cell-label-top,
|
|
.ui-table-reflow td .ui-table-cell-label-top {
|
|
display: block;
|
|
padding: .4em 0;
|
|
margin: .4em 0;
|
|
text-transform: uppercase;
|
|
font-size: .9em;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
|
|
/* Breakpoint to show as a standard table at 560px (35em x 16px) or wider */
|
|
@media ( min-width: 35em ) {
|
|
|
|
/* Show the table header rows */
|
|
.ui-table-reflow.ui-responsive td,
|
|
.ui-table-reflow.ui-responsive th,
|
|
.ui-table-reflow.ui-responsive tbody th,
|
|
.ui-table-reflow.ui-responsive tbody td,
|
|
.ui-table-reflow.ui-responsive thead td,
|
|
.ui-table-reflow.ui-responsive thead th {
|
|
display: table-cell;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Hide the labels in each cell */
|
|
.ui-table-reflow.ui-responsive td .ui-table-cell-label,
|
|
.ui-table-reflow.ui-responsive th .ui-table-cell-label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* Hack to make IE9 and WP7.5 treat cells like block level elements, scoped to ui-responsive class */
|
|
/* Applied in a max-width media query up to the table layout breakpoint so we don't need to negate this*/
|
|
@media ( max-width: 35em ) {
|
|
.ui-table-reflow.ui-responsive td,
|
|
.ui-table-reflow.ui-responsive th {
|
|
width: 100%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
float: left;
|
|
clear: left;
|
|
}
|
|
} |