cyp/app/css/component.less

62 lines
792 B
Text
Raw Normal View History

2019-03-25 22:49:23 +08:00
.component {
height: 100%;
2019-04-03 01:19:46 +08:00
.flex-column;
2019-03-26 19:35:47 +08:00
2019-04-01 17:18:28 +08:00
header {
2019-04-03 01:19:46 +08:00
.flex-row;
2019-04-16 14:40:16 +08:00
padding: var(--spacing);
2019-04-03 01:19:46 +08:00
button {
font-size: var(--font-size-large);
font-weight: bold;
.icon { margin-right: var(--icon-spacing); }
2019-04-16 14:40:16 +08:00
overflow: hidden;
2019-04-03 01:19:46 +08:00
}
2019-04-01 17:18:28 +08:00
}
2019-03-26 19:35:47 +08:00
ul {
flex-grow: 1;
overflow: auto;
list-style: none;
margin: 0;
padding: 0;
}
2019-03-30 19:57:01 +08:00
li {
2019-04-03 01:19:46 +08:00
.flex-row;
2019-03-26 19:35:47 +08:00
2019-04-01 04:02:26 +08:00
.info {
flex-grow: 1;
overflow: hidden;
.icon {
color: var(--primary);
margin-right: var(--icon-spacing);
2019-04-16 15:03:42 +08:00
filter: drop-shadow(var(--text-shadow));
2019-04-01 04:02:26 +08:00
}
h2 {
font-size: var(--font-size-large);
margin: 0;
}
h2, div { .long-line; }
}
&.has-art {
}
2019-03-28 22:23:28 +08:00
2019-04-01 04:02:26 +08:00
&:not(.has-art) {
padding: 8px;
2019-03-26 19:35:47 +08:00
}
2019-04-03 01:19:46 +08:00
button .icon { width: 32px; }
2019-03-30 19:57:01 +08:00
}
2019-03-26 19:35:47 +08:00
2019-03-30 19:57:01 +08:00
li:nth-child(odd) {
2019-04-03 01:52:53 +08:00
background-color: var(--bg-alt);
2019-03-30 19:57:01 +08:00
}
2019-03-26 19:35:47 +08:00
}