75837af412
A browser will use Unicode glyphs from other font families if the glyph in question is not present for the current typeface. This leads to unnerving situations, whereby setting content through pseudo-selectors will cause text to misalign. And no, line-height won't make a difference in this case. This happens because fonts have different heights. Another reason may reside on CSS3 having pseudo selectors but not really having a proper spec for them to begin with.
403 lines
7.6 KiB
CSS
403 lines
7.6 KiB
CSS
.add-actor-button-container {
|
|
-moz-mask-image: url(../icons/add-actor.svg);
|
|
-o-mask-image: url(../icons/add-actor.svg);
|
|
-webkit-mask-image: url(../icons/add-actor.svg);
|
|
mask-image: url(../icons/add-actor.svg);
|
|
}
|
|
|
|
.alert,.alert-danger,.form-error,.form-row-widget-error {
|
|
align-items: center;
|
|
background-color: #FF634733;
|
|
border: solid 2px #ff6347;
|
|
border-radius: var(--s);
|
|
display: inline-flex;
|
|
font-style: italic;
|
|
justify-content: space-between;
|
|
margin-bottom: 6px;
|
|
margin-top: 6px;
|
|
padding: 2px 6px;
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: 2px;
|
|
height: auto;
|
|
margin-right: 5px;
|
|
max-height: 4rem;
|
|
max-width: 4rem;
|
|
min-width: var(--xxl);
|
|
width: 100%;
|
|
}
|
|
|
|
.button-container {
|
|
background-color: var(--foreground);
|
|
border: none !important;
|
|
display: inline-block;
|
|
height: var(--unit);
|
|
width: var(--unit);
|
|
mask-repeat: no-repeat !important;
|
|
mask-size: cover !important;
|
|
opacity: .33;
|
|
}
|
|
|
|
.button-container:focus,.button-container:hover {
|
|
background-color: var(--accent);
|
|
border: none !important;
|
|
mask-repeat: no-repeat !important;
|
|
mask-size: cover !important;
|
|
opacity: 1;
|
|
}
|
|
|
|
.button-container:not(:first-of-type) {
|
|
margin-left: var(--s);
|
|
}
|
|
|
|
.container-block {
|
|
display: block;
|
|
}
|
|
|
|
.container-grid {
|
|
display: grid;
|
|
gap: var(--s);
|
|
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
|
|
}
|
|
|
|
.details-subtitle-summary+* {
|
|
background: var(--gradient);
|
|
border-radius: var(--s);
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
.details-subtitle-summary a,.details-title-summary a {
|
|
line-height: initial;
|
|
}
|
|
|
|
.details-subtitle-summary svg:last-child,.details-title-summary svg:last-child {
|
|
margin-left: 4px;
|
|
}
|
|
|
|
.details-subtitle-summary ~ [class|="form-row"] {
|
|
padding: var(--s);
|
|
}
|
|
|
|
.footer ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer ul li {
|
|
margin-right: var(--s);
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--s);
|
|
}
|
|
|
|
.form-row-help {
|
|
font-style: italic;
|
|
margin-bottom: unset;
|
|
}
|
|
|
|
.form-row-widget {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-search {
|
|
display: inline-block;
|
|
margin-bottom: var(--m);
|
|
padding: unset !important;
|
|
}
|
|
|
|
.form-search span label {
|
|
display: block;
|
|
height: 0;
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
|
|
.form-search span .form-row {
|
|
margin-bottom: unset;
|
|
flex: 2;
|
|
}
|
|
|
|
.form-search span {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.form-search span button {
|
|
border-bottom-left-radius: 0;
|
|
border-left: none !important;
|
|
border-top-left-radius: 0;
|
|
height: 100%;
|
|
margin: unset;
|
|
flex: 1;
|
|
}
|
|
|
|
.form-search span input[type='text'] {
|
|
border-bottom-right-radius: 0;
|
|
border-top-right-radius: 0;
|
|
height: 100%;
|
|
margin: unset;
|
|
}
|
|
|
|
.frame-section {
|
|
background-color: var(--background-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--s);
|
|
box-shadow: var(--shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--s);
|
|
}
|
|
|
|
.frame-section hr {
|
|
margin-bottom: var(--s);
|
|
}
|
|
|
|
.frame-section-button-like {
|
|
align-self: end;
|
|
background: var(--gradient);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--s);
|
|
display: block;
|
|
font-family: 'Poppins',sans-serif;
|
|
font-weight: 900;
|
|
padding: 6px 8px;
|
|
width: max-content;
|
|
}
|
|
|
|
.frame-section-padding {
|
|
padding: var(--s);
|
|
}
|
|
|
|
.frame-section-paging {
|
|
display: block;
|
|
font-family: 'Poppins',sans-serif;
|
|
font-weight: 900;
|
|
margin-left: auto;
|
|
margin-top: var(--s);
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.frame-section-title {
|
|
margin-left: unset;
|
|
}
|
|
|
|
.profile {
|
|
background: var(--gradient) !important;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--s);
|
|
font-family: 'Open Sans',sans-serif;
|
|
margin-bottom: var(--s);
|
|
padding: var(--unit);
|
|
}
|
|
|
|
.profile header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.profile-bio {
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.profile-bio,.profile-info-url {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.profile-extra-actions {
|
|
background: var(--gradient),var(--background-hard);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--s);
|
|
display: inline-block;
|
|
font-weight: 900;
|
|
margin-right: var(--s);
|
|
margin-top: var(--s);
|
|
padding: 4px 8px;
|
|
}
|
|
|
|
.profile-info {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.profile-info .avatar {
|
|
flex: .5;
|
|
}
|
|
|
|
.profile-info section {
|
|
flex: 1;
|
|
}
|
|
|
|
.profile-info-url {
|
|
display: block;
|
|
}
|
|
|
|
.profile-info-url>* {
|
|
display: block;
|
|
}
|
|
|
|
.profile-info-url strong {
|
|
font-size: 1.215rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.profile-info-url-remote {
|
|
opacity: .66;
|
|
}
|
|
|
|
.profile-navigation>* {
|
|
display: block;
|
|
}
|
|
|
|
.profile-stats {
|
|
align-self: center;
|
|
margin-left: auto;
|
|
opacity: .66;
|
|
text-align: right;
|
|
}
|
|
|
|
.profile-stats-subscribers strong,.profile-stats-subscriptions strong {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.profile-stats-subscribers,.profile-stats-subscriptions {
|
|
display: block;
|
|
}
|
|
|
|
.profile-tags {
|
|
margin: 4px unset unset;
|
|
}
|
|
|
|
.remove-actor-button-container {
|
|
-moz-mask-image: url(../icons/remove-actor.svg);
|
|
-o-mask-image: url(../icons/remove-actor.svg);
|
|
-webkit-mask-image: url(../icons/remove-actor.svg);
|
|
mask-image: url(../icons/remove-actor.svg);
|
|
}
|
|
|
|
section {
|
|
margin-bottom: var(--s);
|
|
}
|
|
|
|
.section-details-subtitle .section-details-subtitle:not(:last-of-type) {
|
|
margin-bottom: var(--s);
|
|
}
|
|
|
|
.section-details-subtitle summary {
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
.section-details-subtitle summary,.section-details-title summary {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.section-details-subtitle summary>*,.section-details-title summary>* {
|
|
display: inline-block;
|
|
}
|
|
|
|
.section-details-subtitle summary>:last-child,.section-details-title summary>:last-child {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.section-details-subtitle summary,.section-details-title summary {
|
|
background: var(--gradient);
|
|
border-radius: var(--s);
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.section-details-subtitle:not(:last-of-type) {
|
|
margin-bottom: var(--s);
|
|
}
|
|
|
|
.details-summary-title {
|
|
line-height: initial;
|
|
font-size: 1.215rem;
|
|
font-weight: 900;
|
|
padding: 6px 8px;
|
|
}
|
|
|
|
.details-summary-subtitle {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.heading-no-margin {
|
|
font-size: 1.215rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.details-summary-title:after {
|
|
content: "\1F817";
|
|
display: block;
|
|
position: relative;
|
|
float: right;
|
|
}
|
|
|
|
.details-summary-subtitle:after {
|
|
content: "\1F815";
|
|
display: block;
|
|
position: relative;
|
|
float: right;
|
|
}
|
|
|
|
.section-details-subtitle:not([open])>.details-summary-subtitle:after {
|
|
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
|
|
content: "\1F817";
|
|
}
|
|
|
|
.section-details-subtitle[open]>.details-summary-subtitle:after {
|
|
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
|
|
transform: initial;
|
|
}
|
|
|
|
.section-details-title:not([open])>.details-summary-title:after {
|
|
animation: fadeIn 200ms cubic-bezier(0,0.55,0.45,1);
|
|
transform: initial;
|
|
}
|
|
|
|
.section-details-title[open]>.details-summary-title:after {
|
|
animation: fadeOut 200ms cubic-bezier(0,0.55,0.45,1);
|
|
content: "\1F815";
|
|
}
|
|
|
|
.section-form {
|
|
background-color: var(--background-card);
|
|
border-radius: var(--s);
|
|
display: block;
|
|
max-width: 100%;
|
|
padding: var(--s);
|
|
width: 100%;
|
|
}
|
|
|
|
.section-form-legend {
|
|
font-weight: 700;
|
|
margin-bottom: var(--s);
|
|
margin-top: unset;
|
|
}
|
|
|
|
.section-title {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.section-checkbox-flex {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.section-checkbox-flex>* {
|
|
margin-right: var(--m);
|
|
}
|
|
|
|
textarea.form-row-widget {
|
|
height: 7rem;
|
|
resize: vertical;
|
|
} |