nfp_sites/app/widgets/common.scss

322 lines
4.6 KiB
SCSS
Raw Normal View History

2019-09-13 13:33:10 +00:00
newsentry {
display: flex;
color: $meta-fg;
font-size: 12px;
2019-09-14 19:03:38 +00:00
.title {
display: flex;
margin-bottom: 10px !important;
a {
text-decoration: none;
color: $secondary-dark-bg;
font-size: 14px;
font-weight: bold;
}
}
a.cover {
flex-shrink: 0;
margin-right: 10px;
width: 124px;
text-align: center;
img {
max-height: 70px;
width: auto;
}
}
a.nobg {
height: 70px;
width: 124px;
background: #ddd;
}
.entrycontent {
display: flex;
flex-direction: column;
flex: 2 1 auto;
padding: 0 5px 5px;
h3 {
margin-bottom: 0 !important;
font-size: 1.3em;
font-weight: bold;
}
}
.entrymeta {
font-size: 10px;
color: $meta-fg;
font-weight: bold;
display: none;
}
}
fileinfo {
padding: 0 5px;
margin-bottom: 5px;
2019-10-02 21:48:50 +00:00
display: flex;
flex-direction: column;
2019-09-14 19:03:38 +00:00
&.slim {
padding: 0;
margin: 0;
}
.filetitle {
display: block;
line-height: 16px;
.prefix {
font-weight: bold;
margin-right: 5px;
}
a {
color: $secondary-dark-bg;
font-weight: bold;
text-decoration: none;
padding-right: 5px;
border-right: 1px solid $border;
margin-right: 5px;
display: inline-block;
2019-09-13 13:33:10 +00:00
}
2019-09-14 19:03:38 +00:00
}
.trimmed {
padding: 3px 0 5px 25px;
}
2019-09-14 19:03:38 +00:00
ul {
margin: 10px 0;
padding-left: 0;
list-style-type: disc;
list-style-position: inside;
li {
padding-left: 20px;
}
}
}
2019-10-02 21:48:50 +00:00
@media screen and (max-width: 480px){
fileinfo,
fileinfo.slim {
padding: 8px 5px;
justify-content: center;
}
}
@media (pointer:coarse) {
fileinfo,
fileinfo.slim {
padding: 8px 5px;
justify-content: center;
}
}
2019-09-14 19:03:38 +00:00
newsitem {
display: flex;
flex-direction: column;
font-size: 15px;
background: $newsitem-bg;
border: $newsitem-border;
2019-09-14 19:03:38 +00:00
.title {
text-decoration: none;
background: $secondary-bg;
color: $secondary-fg;
font-size: 1.2em;
font-weight: bold;
text-align: center;
padding: 5px 10px;
margin-bottom: 10px;
}
.newsitemcontent {
display: flex;
}
a.cover {
flex-shrink: 0;
margin-right: 10px;
width: 400px;
text-align: center;
2019-09-13 13:33:10 +00:00
2019-09-14 19:03:38 +00:00
img {
max-height: 360px;
max-width: 360px;
2019-09-14 19:03:38 +00:00
width: auto;
2019-09-13 13:33:10 +00:00
}
}
2019-09-14 19:03:38 +00:00
a.nobg {
height: 225px;
width: 400px;
background: #ddd;
}
2019-09-13 13:33:10 +00:00
.entrycontent {
display: flex;
flex-direction: column;
flex: 2 1 auto;
padding: 0 5px 5px;
2019-10-01 03:45:44 +00:00
&.extrapadding {
padding: 0 15px 5px;
}
2019-09-13 13:33:10 +00:00
h3 {
2019-09-14 19:03:38 +00:00
margin-bottom: 0 !important;
2019-09-13 13:33:10 +00:00
font-size: 1.3em;
font-weight: bold;
}
2019-09-14 19:03:38 +00:00
.fr-view {
margin-bottom: 10px;
}
fileinfo {
font-size: 0.8em;
}
}
.entrymeta {
flex-grow: 2;
font-size: 11px;
color: $meta-fg;
font-weight: bold;
padding: 10px 0;
a {
color: $secondary-dark-bg;
margin: 0 5px;
text-decoration: none;
}
2019-09-14 19:03:38 +00:00
}
}
pages {
display: flex;
justify-content: center;
width: 100%;
a, div {
display: block;
font-size: 0.9em;
max-width: 80px;
flex-grow: 2;
text-align: center;
padding: 10px !important;
margin-top: 10px;
}
a {
color: $secondary-dark-bg;
cursor: pointer;
2019-09-13 13:33:10 +00:00
}
}
@media screen and (max-width: 1000px){
newsitem a.cover {
width: 300px;
2019-10-03 15:51:31 +00:00
img {
max-width: 300px;
width: auto;
}
}
}
@media screen and (max-width: 639px){
newsitem {
a.cover {
width: 100%;
margin-bottom: 20px;
img {
max-height: unset;
max-width: unset;
2019-10-03 19:23:03 +00:00
width: 100%;
}
}
.newsitemcontent {
flex-direction: column;
}
2019-10-01 03:45:44 +00:00
.entrycontent.extrapadding {
padding: 0 5px 5px;
}
}
2019-10-01 03:45:44 +00:00
}
2019-10-02 21:48:50 +00:00
@media screen and (max-width: 440px){
newsentry {
flex-direction: column;
align-items: center;
a.cover {
margin: 0 0 15px;
width: 100%;
img {
max-height: unset;
width: 100%;
}
}
}
}
2019-10-01 03:45:44 +00:00
.darkmodeon {
newsentry {
color: $dark_meta-fg;
.title {
a {
color: $dark_secondary-dark-bg;
}
}
.entrymeta {
color: $dark_meta-fg;
}
}
fileinfo {
.filetitle {
a {
color: $dark_secondary-dark-bg;
border-right: 1px solid $dark_border;
}
}
}
newsitem {
background: $dark_newsitem-bg;
border: $dark_newsitem-border;
.title {
background: $dark_secondary-bg;
color: $dark_secondary-fg;
}
.entrymeta {
color: $dark_meta-fg;
a {
color: $dark_secondary-dark-bg;
}
}
}
pages {
a {
color: $dark_secondary-dark-bg;
}
}
}