1
0
www.mikescher.com/www/data/css/styles_programslist.scss

158 lines
2.5 KiB
SCSS
Raw Normal View History

2018-01-04 16:55:26 +01:00
@import 'styles_config';
.prgl_parent {
display: flex;
flex-direction: column;
}
2018-01-20 14:41:21 +01:00
@include rdmedia_range(0,1) { .prgl_parent {align-items: center;} }
2018-01-04 16:55:26 +01:00
.prgl_elem {
display: flex;
flex-direction: row;
text-decoration: none;
background: #BBB;
border: solid 1px #444;
margin: 5px 0;
&:hover {
background: $COL_COMPLEXHOVER_BG;
color: $COL_COMPLEXHOVER_FG;
border: solid 1px $COL_COMPLEXHOVER_BRD;
.prgl_elem_sdesc { color: $COL_COMPLEXHOVER_FG; }
.prgl_elem_subinfo_caption { color: $COL_COMPLEXHOVER_FG; }
.prgl_elem_subinfo_data { color: $COL_COMPLEXHOVER_FG; }
2018-01-27 18:13:38 +01:00
.prgl_elem_left img { filter: grayscale(100%); }
2018-01-04 16:55:26 +01:00
}
}
.prgl_elem_left {
padding: 4px;
display: flex;
}
.prgl_elem_left img {
width: 250px;
2018-01-28 14:23:12 +01:00
height: auto;
2018-01-04 16:55:26 +01:00
min-height: 100px;
}
.prgl_elem_right {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.prgl_elem_title {
2018-01-20 03:05:15 +01:00
color: $COL_TEXT_DARK_DARKER;
2018-01-04 16:55:26 +01:00
font-size: 40pt;
font-weight: bolder;
flex-grow: 1;
display: flex;
justify-content: center;
align-items: center;
}
2018-01-20 03:05:15 +01:00
.prgl_elem_sdesc {
color: $COL_TEXT_DARK_LIGHTER;
font-size: 14pt;
flex-grow: 1;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
}
2018-01-04 16:55:26 +01:00
.prgl_elem_info {
display:flex;
flex-direction: row;
}
.prgl_elem_subinfo {
flex: 1;
display: flex;
flex-direction: row;
}
.prgl_elem_subinfo_caption {
color: #111;
font-weight: bold;
margin: 0 5px 0 10px;
}
.prgl_elem_subinfo_data {
color: #555;
display: flex;
flex-direction: row;
align-items: center;
height: 100%;
}
.prgl_elem_subinfo_data img {
display: inline;
height: 13pt;
margin: 1px 2px 0 2px;
}
2018-01-20 14:41:21 +01:00
@include rdmedia_range(0,3)
2018-01-04 16:55:26 +01:00
{
.prgl_elem_title {
font-size: 22pt;
}
.prgl_elem_subinfo {
flex-direction: column;
}
.prgl_elem_subinfo_data {
justify-content: center;
}
.prgl_elem_subinfo_caption {
text-align: center;
}
2018-01-20 03:05:15 +01:00
.prgl_elem_sdesc {
font-size: 12pt;
margin-bottom: 10px;
}
2018-01-04 16:55:26 +01:00
}
2018-01-20 14:41:21 +01:00
@include rdmedia_range(0,1)
2018-01-04 16:55:26 +01:00
{
.prgl_elem {
flex-direction: column;
width: 350px;
}
.prgl_elem_left img {
width: 100%;
2018-01-28 14:23:12 +01:00
height: 100%;
2018-01-04 16:55:26 +01:00
}
.prgl_elem_title {
font-size: 24pt;
word-wrap: break-word;
text-align: center;
}
.prgl_elem_left {
justify-content: center;
}
.prgl_elem_info {
flex-direction: column;
margin: 8px 0 8px 8px;
}
.prgl_elem_subinfo {
flex-direction: row;
}
2018-01-20 03:05:15 +01:00
.prgl_elem_sdesc {
display: none;
visibility: hidden;
}
2018-01-04 16:55:26 +01:00
}