mirror of
https://github.com/discourse/discourse.git
synced 2024-11-25 06:30:15 +08:00
c937afc75e
A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at `color_definitions.scss` that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets. This is an alpha feature at this point, can only be enabled via console using the `default_dark_mode_color_scheme_id` site setting.
767 lines
16 KiB
SCSS
767 lines
16 KiB
SCSS
a.loading-onebox {
|
|
&:before {
|
|
content: "";
|
|
display: inline-flex;
|
|
float: left;
|
|
margin: 3px 5px 0 0;
|
|
position: relative;
|
|
height: 10px;
|
|
width: 10px;
|
|
border: 2px solid var(--primary-low-mid);
|
|
border-right-color: transparent;
|
|
border-radius: 50%;
|
|
-webkit-animation: rotate-forever 1s infinite linear;
|
|
animation: rotate-forever 1s infinite linear;
|
|
}
|
|
}
|
|
|
|
.onebox-result {
|
|
@include post-aside;
|
|
|
|
margin-top: 15px;
|
|
padding: 12px;
|
|
font-size: $font-0;
|
|
> .source {
|
|
margin-bottom: 12px;
|
|
margin-right: 10px;
|
|
display: block;
|
|
color: var(--primary);
|
|
position: relative;
|
|
height: 20px;
|
|
.info {
|
|
a {
|
|
color: black;
|
|
text-decoration: none;
|
|
padding-right: 10px;
|
|
}
|
|
position: absolute;
|
|
font-size: $font-0;
|
|
img.favicon {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.onebox-result-body {
|
|
padding-top: 5px;
|
|
img {
|
|
max-height: 80%;
|
|
max-width: 25%;
|
|
height: auto;
|
|
float: left;
|
|
margin-right: 10px;
|
|
}
|
|
h3,
|
|
h4 {
|
|
margin: 0;
|
|
}
|
|
code {
|
|
max-height: 400px;
|
|
}
|
|
.metrics {
|
|
clear: both;
|
|
padding-bottom: 25px;
|
|
.metric {
|
|
display: inline-block;
|
|
padding-left: 33px;
|
|
float: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// RottenTomatoes Onebox
|
|
.onebox-result {
|
|
.onebox-result-body {
|
|
img.verdict {
|
|
float: none;
|
|
margin-right: 7px;
|
|
}
|
|
img.popcorn {
|
|
float: none;
|
|
margin-left: 20px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin onebox-favicon($class, $image) {
|
|
&.#{$class} .source {
|
|
background: image-url("favicons/#{$image}.png") no-repeat 0% 50%;
|
|
background-size: 16px 16px;
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
aside.onebox {
|
|
border: 5px solid var(--primary-low);
|
|
margin-bottom: 1em;
|
|
padding: 12px 25px 12px 12px;
|
|
font-size: $font-0;
|
|
background: var(--secondary);
|
|
|
|
header {
|
|
margin-bottom: 8px;
|
|
a[href] {
|
|
color: var(--primary-med-or-secondary-med);
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
@include onebox-favicon("stackexchange", "stackexchange");
|
|
@include onebox-favicon("twitterstatus", "twitter");
|
|
@include onebox-favicon("wikipedia", "wikipedia");
|
|
@include onebox-favicon("githubblob", "github");
|
|
@include onebox-favicon("githubcommit", "github");
|
|
@include onebox-favicon("githubpullrequest", "github");
|
|
@include onebox-favicon("githubissue", "github");
|
|
@include onebox-favicon("githubgist", "github");
|
|
@include onebox-favicon("amazon", "amazon");
|
|
@include onebox-favicon("instagram", "instagram");
|
|
@include onebox-favicon("googledocs", "google_branding/logo_drive_48px");
|
|
@include onebox-favicon("googledrive", "google_branding/logo_drive_48px");
|
|
|
|
.onebox-body {
|
|
clear: both;
|
|
|
|
h3,
|
|
h4 {
|
|
font-size: $font-up-1;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
a[href] {
|
|
color: var(--tertiary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a[href]:visited {
|
|
color: var(--tertiary);
|
|
}
|
|
|
|
img {
|
|
max-height: 170px;
|
|
max-width: 20%;
|
|
@media all and (max-width: 600px) {
|
|
max-width: 35%;
|
|
}
|
|
height: auto;
|
|
width: auto;
|
|
float: left;
|
|
margin-right: 10px;
|
|
&.onebox-full-image {
|
|
max-height: none;
|
|
max-width: none;
|
|
width: initial;
|
|
height: initial;
|
|
}
|
|
}
|
|
|
|
[style*="--aspect-ratio"] > :first-child {
|
|
width: 100%;
|
|
}
|
|
[style*="--aspect-ratio"] > img {
|
|
height: auto;
|
|
}
|
|
|
|
// this allows us to load all onebox images without jiggle
|
|
// see: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/
|
|
@supports (--custom: property) {
|
|
.aspect-image {
|
|
max-height: 170px;
|
|
--magic-ratio: calc(var(--aspect-ratio) + 0.15);
|
|
width: calc(128px * var(--magic-ratio));
|
|
max-width: 20%;
|
|
float: left;
|
|
margin-right: 10px;
|
|
height: auto;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: inherit;
|
|
max-width: initial;
|
|
max-height: initial;
|
|
float: none;
|
|
margin-right: none;
|
|
}
|
|
}
|
|
|
|
// full size images for instagram, twitter, etc.
|
|
.aspect-image-full-size {
|
|
max-height: 100%;
|
|
width: calc(500px * var(--aspect-ratio));
|
|
max-width: 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: inherit;
|
|
max-width: initial;
|
|
max-height: initial;
|
|
float: none;
|
|
padding: 5px 5px 5px 5px;
|
|
}
|
|
}
|
|
|
|
[style*="--aspect-ratio"] {
|
|
position: relative;
|
|
}
|
|
[style*="--aspect-ratio"]::before {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: calc(100% / (var(--aspect-ratio)));
|
|
}
|
|
[style*="--aspect-ratio"] > :first-child {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
// tighten bottom margin on last para
|
|
p:last-child {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
// twitter fixes
|
|
.tweet-images {
|
|
display: block;
|
|
clear: both;
|
|
|
|
img.tweet-image {
|
|
margin-top: 1em;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
float: none;
|
|
}
|
|
|
|
@include breakpoint(mobile-extra-large) {
|
|
// Prevent twitter embeds from being taller than the mobile viewport
|
|
iframe {
|
|
max-height: 70vh;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.user-onebox {
|
|
.fa {
|
|
margin-right: 5px;
|
|
}
|
|
.full-name,
|
|
.location {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
// instagram + reddit fixes
|
|
.instagram-images,
|
|
.scale-images {
|
|
clear: both;
|
|
position: relative;
|
|
|
|
.instagram-image,
|
|
.scale-image {
|
|
padding: 5px 5px 5px 5px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.instagram-video-icon {
|
|
&:before {
|
|
opacity: 0.8;
|
|
// ideally, the SVG used here should be in HTML and reference the SVG sprite
|
|
content: svg-uri(
|
|
'<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 512 512" fill="white"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
|
|
);
|
|
}
|
|
bottom: 15px;
|
|
right: 10px;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin gdocs-logo($type) {
|
|
&.g-#{$type}-logo {
|
|
background: image-url("favicons/google_branding/logo_#{$type}_48px.png")
|
|
no-repeat;
|
|
}
|
|
}
|
|
|
|
.googledocs-onebox-logo {
|
|
width: 60px;
|
|
height: 50px;
|
|
float: left;
|
|
@include gdocs-logo("docs");
|
|
@include gdocs-logo("forms");
|
|
@include gdocs-logo("sheets");
|
|
@include gdocs-logo("slides");
|
|
@include gdocs-logo("calendar");
|
|
@include gdocs-logo("drive");
|
|
}
|
|
|
|
// Google Calendar Placeholder
|
|
.gdocs-onebox-splash {
|
|
background-color: var(--primary-low-mid);
|
|
color: var(--primary);
|
|
border: 1px inset var(--primary);
|
|
.gdocs-onebox-logo {
|
|
display: inline-block;
|
|
width: 128px;
|
|
height: 128px;
|
|
&.g-calendar-logo {
|
|
background: image-url("favicons/google_branding/logo_calendar_128px.png")
|
|
no-repeat;
|
|
}
|
|
}
|
|
}
|
|
|
|
aside.onebox .onebox-body .onebox-avatar {
|
|
max-height: none;
|
|
max-width: none;
|
|
height: 60px;
|
|
width: 60px;
|
|
}
|
|
|
|
blockquote {
|
|
aside.onebox {
|
|
@include post-aside;
|
|
}
|
|
}
|
|
|
|
// -- Onebox Github Code Blob --
|
|
pre.onebox code ol.lines li:before {
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 35px;
|
|
left: -40px;
|
|
color: #afafaf;
|
|
text-align: right;
|
|
padding-right: 5px;
|
|
font-size: $font-down-1;
|
|
line-height: $line-height-large;
|
|
content: counter(li-counter);
|
|
counter-increment: li-counter;
|
|
}
|
|
|
|
pre.onebox code ol {
|
|
margin-left: 0;
|
|
line-height: $line-height-large;
|
|
}
|
|
pre.onebox code {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
pre.onebox code li {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
pre.onebox code ol.lines {
|
|
position: relative;
|
|
margin: 0 0 0 40px;
|
|
}
|
|
|
|
pre.onebox code ol.lines li {
|
|
list-style-type: none;
|
|
padding-left: 5px;
|
|
margin-left: 0;
|
|
border-left: 1px solid #cfcfcf;
|
|
min-height: 1.5em; //show empty li lines
|
|
white-space: pre;
|
|
}
|
|
|
|
pre.onebox code li.selected {
|
|
background-color: var(--highlight-low-or-medium);
|
|
}
|
|
|
|
pre.onebox code {
|
|
white-space: normal;
|
|
}
|
|
|
|
// Onebox - Github - PR, Commit & Issue
|
|
.onebox.githubpullrequest,
|
|
.onebox.githubcommit,
|
|
.onebox.githubissue {
|
|
.onebox-body {
|
|
h4 {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
> .github-icon {
|
|
// For backwards compatibility with old onebox
|
|
float: left;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.github-row {
|
|
display: flex;
|
|
}
|
|
|
|
.github-icon-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.github-icon {
|
|
fill: var(--primary-high);
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.branches {
|
|
font-size: $font-down-1;
|
|
code {
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
|
|
.github-info-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.github-info {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
|
|
> div {
|
|
margin: 2.5px 0;
|
|
}
|
|
|
|
> div:not(:last-child) {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.lines {
|
|
font-weight: bold;
|
|
|
|
.added {
|
|
color: var(--success);
|
|
}
|
|
.removed {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
}
|
|
|
|
.onebox-avatar-inline {
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 2px;
|
|
float: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
max-width: none;
|
|
}
|
|
|
|
.github-content {
|
|
margin: 5px 0 0 0;
|
|
}
|
|
|
|
.labels span {
|
|
// !important required to override inline style attribute
|
|
background-color: var(--primary-medium) !important;
|
|
color: var(--secondary) !important;
|
|
padding: 2px 4px !important;
|
|
}
|
|
}
|
|
|
|
//Onebox - Github - Pull request
|
|
.onebox-body .github-commit-status {
|
|
background: #f5f5f5;
|
|
border-radius: 5px;
|
|
margin: 0 0 5px 100px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.onebox-body .status_tag {
|
|
display: inline-block;
|
|
color: #fff;
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.onebox-body .build_status {
|
|
padding: 2px;
|
|
font-size: $font-down-1;
|
|
}
|
|
|
|
.onebox-body .status_tag.open {
|
|
background-color: #6cc644;
|
|
}
|
|
.onebox-body .status_tag.merged {
|
|
background-color: #6e5494;
|
|
}
|
|
.onebox-body .status_tag.closed {
|
|
background-color: #bd2c00;
|
|
}
|
|
|
|
.onebox-body .github-content-right {
|
|
margin-left: 100px;
|
|
}
|
|
|
|
//Onebox - Twitter - Status
|
|
aside.onebox.twitterstatus .onebox-body {
|
|
h4 {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// thumbnail, oddly, ONLY applies to twitter avatar
|
|
.onebox.twitterstatus {
|
|
.thumbnail {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
p,
|
|
.tweet {
|
|
white-space: pre-line;
|
|
padding-top: 3px;
|
|
margin-left: 70px;
|
|
|
|
.quoted {
|
|
border: 1px solid var(--primary-low);
|
|
padding: 0px 14px 0px 12px;
|
|
white-space: normal;
|
|
margin-top: 15px;
|
|
|
|
.quoted-link {
|
|
color: inherit;
|
|
}
|
|
|
|
.quoted-title {
|
|
font-weight: bold;
|
|
margin: 5px 2px;
|
|
|
|
span {
|
|
font-weight: lighter;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
div {
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
}
|
|
.date {
|
|
clear: left;
|
|
}
|
|
}
|
|
|
|
// Onebox - Imgur/Flickr - Album
|
|
.onebox.imgur-album,
|
|
.onebox.flickr-album {
|
|
.outer-box {
|
|
position: absolute;
|
|
z-index: z("base");
|
|
font-size: $font-down-1;
|
|
color: #fff;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
@include ellipsis;
|
|
max-width: 690px;
|
|
padding: 5px 0;
|
|
|
|
.inner-box {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
overflow: hidden;
|
|
@include ellipsis;
|
|
|
|
.album-title {
|
|
width: 100%;
|
|
font-size: $font-up-1;
|
|
line-height: $line-height-large;
|
|
color: #ccc;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// resize stackexchange onebox image
|
|
aside.onebox.stackexchange .onebox-body {
|
|
img:not(.onebox-avatar) {
|
|
max-height: 60%;
|
|
max-width: 10%;
|
|
}
|
|
|
|
.tags {
|
|
color: gray;
|
|
}
|
|
}
|
|
|
|
.onebox-metadata {
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
|
|
.onebox.xkcd .onebox-body {
|
|
img {
|
|
max-width: 100% !important;
|
|
float: none !important;
|
|
}
|
|
}
|
|
|
|
// pdf onebox
|
|
.onebox.pdf .onebox-body {
|
|
.pdf-onebox-logo {
|
|
width: 60px;
|
|
height: 50px;
|
|
float: left;
|
|
background: image-url("favicons/pdf_64px.png") no-repeat;
|
|
background-size: 48px 48px;
|
|
display: inline-block;
|
|
}
|
|
.filesize {
|
|
color: gray;
|
|
}
|
|
}
|
|
|
|
// allowlistedgeneric twitter labels
|
|
.onebox.allowlistedgeneric,
|
|
.onebox.whitelistedgeneric {
|
|
.label1,
|
|
.label2 {
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
.label1 {
|
|
float: left;
|
|
}
|
|
.label2 {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
.onebox {
|
|
&.allowlistedgeneric,
|
|
&.whitelistedgeneric,
|
|
&.gfycat {
|
|
.site-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.onebox.gfycat p {
|
|
span.label1 a {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.onebox.instagram {
|
|
div.instagram-description {
|
|
color: var(--primary-med-or-secondary-med);
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
.onebox.reddit {
|
|
div.aspect-image-full-size {
|
|
position: relative;
|
|
}
|
|
div.description {
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
}
|
|
|
|
.onebox.githubcommit {
|
|
pre.message {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.onebox.twitterstatus {
|
|
.like,
|
|
.retweet {
|
|
color: var(--primary-med-or-secondary-med);
|
|
padding-left: 10px;
|
|
svg {
|
|
fill: currentColor;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
// mobile specific style
|
|
.mobile-view article.onebox-body {
|
|
border-top: none;
|
|
}
|
|
|
|
// Google Photos Album
|
|
.onebox.google-photos-album {
|
|
@extend .imgur-album;
|
|
}
|
|
|
|
// Force oneboxed videos to 16:9 aspect ratio
|
|
.onebox.video-onebox,
|
|
.video-container {
|
|
position: relative;
|
|
padding: 0 0 56.25% 0;
|
|
width: 100%;
|
|
|
|
video {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.onebox-placeholder-container {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0 0 48.25% 0;
|
|
background-color: var(--primary-low);
|
|
|
|
.placeholder-icon {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
&.video {
|
|
&:before {
|
|
opacity: 0.8;
|
|
content: svg-uri(
|
|
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="grey" d="M336.2 64H47.8C21.4 64 0 85.4 0 111.8v288.4C0 426.6 21.4 448 47.8 448h288.4c26.4 0 47.8-21.4 47.8-47.8V111.8c0-26.4-21.4-47.8-47.8-47.8zm189.4 37.7L416 177.3v157.4l109.6 75.5c21.2 14.6 50.4-.3 50.4-25.8V127.5c0-25.4-29.1-40.4-50.4-25.8z"></path></svg>'
|
|
);
|
|
}
|
|
}
|
|
&.audio {
|
|
&:before {
|
|
opacity: 0.4;
|
|
content: svg-uri(
|
|
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M511.99 32.01c0-21.71-21.1-37.01-41.6-30.51L150.4 96c-13.3 4.2-22.4 16.5-22.4 30.5v261.42c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64V214.31l256-75.02v184.63c-10.05-2.38-20.72-3.92-32-3.92-53.02 0-96 28.65-96 64s42.98 64 96 64 96-28.65 96-64l-.01-351.99z"></path></svg>'
|
|
);
|
|
}
|
|
}
|
|
&.map {
|
|
&:before {
|
|
opacity: 0.4;
|
|
content: svg-uri(
|
|
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg>'
|
|
);
|
|
}
|
|
}
|
|
&.generic {
|
|
&:before {
|
|
opacity: 0.4;
|
|
content: svg-uri(
|
|
'<svg width="128px" height="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"></path></svg>'
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|