671c3968e2
[CSS] Font size hierarchy refactor [PLUGINS][MediaFeed] Renamed BeforeFeed event Type scale hierarchy redone. Bigger line height added, making it easier to click on links and separate contents. Feed title added. AddFeedActions replaces BeforeFeed event. MediaFeed links will now show an icon to the right of the feed title, smaller footprint and more consistent with the overall design.
158 lines
3.5 KiB
CSS
158 lines
3.5 KiB
CSS
.profile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
font-family: 'Open Sans',sans-serif;
|
|
margin-bottom: var(--s);
|
|
border-radius: var(--s);
|
|
padding: var(--s);
|
|
background: var(--gradient) !important;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.profile *[class*="profile-info-"] {
|
|
flex: 1;
|
|
}
|
|
.profile-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: column;
|
|
}
|
|
.profile-info-nickname {
|
|
font-size: var(--m);
|
|
}
|
|
.profile-info-tags {
|
|
margin: unset;
|
|
}
|
|
.profile-info-stats strong {
|
|
margin-right: 5px;
|
|
}
|
|
.profile-info-stats {
|
|
margin-top: var(--s);
|
|
}
|
|
.profile-info-bio,
|
|
.profile-info-nickname {
|
|
word-break: break-all;
|
|
}
|
|
.profile-avatar {
|
|
max-width: 4rem;
|
|
max-height: 4rem;
|
|
min-width: var(--xxl);
|
|
width: 100%;
|
|
height: auto;
|
|
margin-right: 5px;
|
|
border-radius: 2px;
|
|
}
|
|
.section-widget {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: var(--s);
|
|
margin-bottom: var(--m);
|
|
background-color: var(--background-card) !important;
|
|
box-shadow: var(--shadow);
|
|
border: 2px solid var(--border) !important;
|
|
}
|
|
.section-widget hr {
|
|
margin-bottom: var(--s);
|
|
}
|
|
.section-padding {
|
|
padding: var(--s);
|
|
}
|
|
.section-widget-paging {
|
|
display: block;
|
|
margin-top: var(--s);
|
|
margin-left: auto;
|
|
}
|
|
.section-widget-title {
|
|
margin-left: unset;
|
|
}
|
|
.section-widget-button-like {
|
|
border-radius: var(--s);
|
|
padding: 6px 10px;
|
|
margin-top: 6px;
|
|
cursor: pointer;
|
|
float: right;
|
|
align-self: end;
|
|
font-family: 'Open Sans',sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
.section-widget-subtitle-details :not(summary,svg,strong) {
|
|
border-radius: var(--s);
|
|
background: var(--gradient);
|
|
padding: 6px 10px;
|
|
}
|
|
.section-widget-title-details summary {
|
|
font-weight: 700;
|
|
}
|
|
.section-widget-subtitle-details summary {
|
|
border: 2px solid var(--border);
|
|
margin-bottom: var(--s);
|
|
}
|
|
.section-widget-title-details summary,
|
|
.section-widget-subtitle-details summary {
|
|
align-items: center;
|
|
border-radius: var(--s);
|
|
padding: 6px 10px;
|
|
background: var(--gradient) !important;
|
|
}
|
|
.section-widget-subtitle-details[open] svg,
|
|
.section-widget-title-details[open] .icon-details-open {
|
|
transform: rotate(180deg);
|
|
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
|
|
}
|
|
.section-widget-subtitle-details:not([open]) svg,
|
|
.section-widget-title-details:not([open]) .icon-details-open {
|
|
transform: initial;
|
|
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
|
|
}
|
|
.section-subtitle-summary,
|
|
.section-title-summary {
|
|
display: flex;
|
|
}
|
|
.section-subtitle-summary strong,
|
|
.section-title-summary h2 {
|
|
margin-right: auto;
|
|
}
|
|
.section-subtitle-summary a,
|
|
.section-title-summary a {
|
|
line-height: initial;
|
|
}
|
|
.section-subtitle-summary svg:last-child,
|
|
.section-title-summary svg:last-child {
|
|
margin-left: 4px;
|
|
}
|
|
.section-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
padding: var(--s);
|
|
}
|
|
.section-form-legend {
|
|
margin-top: unset;
|
|
margin-bottom: var(--s);
|
|
font-weight: bold;
|
|
}
|
|
div[class^="mb-"] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-basis: border-box;
|
|
margin-bottom: var(--s);
|
|
}
|
|
div[class^="mb-"]:last-of-type {
|
|
margin-bottom: unset;
|
|
}
|
|
div[class^="mb-"] textarea {
|
|
height: 7rem;
|
|
max-height: 100%;
|
|
}
|
|
.alert,
|
|
.alert-danger {
|
|
display: inline-block;
|
|
font-style: italic;
|
|
border: solid 2px #ff6347;
|
|
background-color: #FF634733;
|
|
border-radius: var(--s);
|
|
padding: 2px 6px;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
} |