158 lines
2.5 KiB
SCSS
158 lines
2.5 KiB
SCSS
@import 'styles_config';
|
|
|
|
|
|
.prgl_parent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@include rdmedia_range(0,1) { .prgl_parent {align-items: center;} }
|
|
|
|
.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; }
|
|
.prgl_elem_left img { filter: grayscale(100%); }
|
|
}
|
|
}
|
|
|
|
.prgl_elem_left {
|
|
padding: 4px;
|
|
display: flex;
|
|
}
|
|
|
|
.prgl_elem_left img {
|
|
width: 250px;
|
|
height: auto;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.prgl_elem_right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.prgl_elem_title {
|
|
color: $COL_TEXT_DARK_DARKER;
|
|
font-size: 40pt;
|
|
font-weight: bolder;
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
@include rdmedia_range(0,3)
|
|
{
|
|
.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;
|
|
}
|
|
.prgl_elem_sdesc {
|
|
font-size: 12pt;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
@include rdmedia_range(0,1)
|
|
{
|
|
.prgl_elem {
|
|
flex-direction: column;
|
|
width: 350px;
|
|
}
|
|
.prgl_elem_left img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.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;
|
|
}
|
|
.prgl_elem_sdesc {
|
|
display: none;
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
|
|
|