/* Real SimX platform UI, lifted verbatim out of the running product and inlined for the landing page. Every rule is scoped under a component root (.twitter-feed-window, .facebook-feed-window, .cl-mcont, .sxw-tw), so none of it can reach the page around it. Verified: 207 selectors, 0 global. Source of the extraction and the reference prototype: landing/proto/features-a.html */ /* ====================== EXTRACTED, VERBATIM: TWITCHER ====================== landing/extracted/twitcher.css, the real platform stylesheet, unchanged except that the eight rules it leaves unscoped (.border-box-sizing, the .bg-twitter body defaults and the six Angular Material layout attribute selectors) are prefixed with .sxw-tw so they cannot reach the page or the other component. Every .twitter-feed-window rule is untouched, so the cascade inside the component is exactly the one the running product has. ========================================================================== */ /* ========================================================================== TWITCHER - real platform styles, compiled from LESS by hand ========================================================================== Primary source : O8.SOCOM.Server/Content/socom/twitter-simulation.less Also drawn from : Content/socom/simulation.less (.account-logo, .html-content-container) Content/socom/window.less (.window-content-container, .border-box-sizing) Content/socom/varibles.less (all @variables below) Content/bootstrap/*.less (grid, normalize, .btn, headings) Content/theme/less/general.less (body + heading font) Content/theme/less/block-panels.less (.cl-mcont .row margin-top) Content/theme/less/elements/buttons.less Content/angular-material.layout-attributes.css (layout/flex attrs) Content/fonts/font-awesome-4/* (icon glyphs) LESS variables resolved to their declared values (Content/socom/varibles.less unless noted): @twitter-background-color #f5f7fb (declared in twitter-simulation.less) @twitter-brand #30A9F4 (declared in twitter-simulation.less) @window-grey #a7adba @sidebar-color #292828 @gray-light #777777 (bootstrap: lighten(#000, 46.7%)) @primary-color #2eb6d1 Declared but not needed by this snippet, for reference: @brand-danger -> @alert-red #ea6153 (.twitter-warning, hacked state) @brand-success -> @alert-green #00AD5D (.retweeted badge) SCOPING NOTE. In the platform, the grid / button / FontAwesome / heading rules are global (bootstrap, the theme and font-awesome are loaded app wide). They are reproduced here prefixed with .twitter-feed-window so dropping this file into the landing page cannot restyle anything else. The cascade result inside the component is unchanged - each block records the selector it really has. ========================================================================== */ /* -------------------------------------------------------------------------- box-sizing real: Content/bootstrap/scaffolding.less * , *:before , *:after real: Content/socom/window.less .k-widget .border-box-sizing , .k-widget .border-box-sizing * (the .k-widget ancestor is the Kendo window wrapper, which this snippet does not reproduce, so the rule is written against .border-box-sizing directly) -------------------------------------------------------------------------- */ .sxw-tw .border-box-sizing, .sxw-tw .border-box-sizing *, .sxw-tw .border-box-sizing *::before, .sxw-tw .border-box-sizing *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- inherited page defaults - Content/theme/less/general.less body { } The snippet root stands in for . 'Open Sans' is pulled from Google Fonts by Views/Home/Index.cshtml; with no webfont it falls back to sans-serif. -------------------------------------------------------------------------- */ .sxw-tw .bg-twitter { font-family: 'Open Sans', sans-serif; font-size: 12px; color: #555; } /* Content/socom/twitter-simulation.less .bg-twitter */ .sxw-tw .bg-twitter { background-color: #f5f7fb !important; } /* -------------------------------------------------------------------------- Angular Material layout attributes real: Content/angular-material.layout-attributes.css (v1.1.1), unscoped -------------------------------------------------------------------------- */ .sxw-tw [layout], .sxw-tw [layout="column"], .sxw-tw [layout="row"] { box-sizing: border-box; display: -webkit-flex; display: flex; } .sxw-tw [layout="column"] { -webkit-flex-direction: column; flex-direction: column; } .sxw-tw [layout="row"] { -webkit-flex-direction: row; flex-direction: row; } .sxw-tw [flex] { -webkit-flex: 1; flex: 1; box-sizing: border-box; } .sxw-tw [layout-fill] { margin: 0; width: 100%; min-height: 100%; height: 100%; } .sxw-tw [layout-padding] { padding: 8px; } /* -------------------------------------------------------------------------- normalize / scaffolding subset - Content/bootstrap/normalize.less + scaffolding.less real selectors: img / button / textarea (global) -------------------------------------------------------------------------- */ .twitter-feed-window img { vertical-align: middle; } .twitter-feed-window button, .twitter-feed-window textarea { color: inherit; font: inherit; margin: 0; } .twitter-feed-window button { overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; } .twitter-feed-window textarea { overflow: auto; } /* -------------------------------------------------------------------------- float helpers - Content/bootstrap/utilities.less (.pull-left/.pull-right) and Content/fonts/font-awesome-4/bordered-pulled.less (.fa.pull-*) real selectors: .pull-left , .pull-right , .fa.pull-left , .fa.pull-right -------------------------------------------------------------------------- */ .twitter-feed-window .pull-right { float: right; } .twitter-feed-window .pull-left { float: left; } .twitter-feed-window .fa.pull-left { margin-right: .3em; } .twitter-feed-window .fa.pull-right { margin-left: .3em; } /* -------------------------------------------------------------------------- grid subset - Content/bootstrap/grid.less, @grid-gutter-width: 30px real selectors: .container , .row , .col-xs-3 , .col-xs-9 , .col-xs-12 -------------------------------------------------------------------------- */ .twitter-feed-window .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .twitter-feed-window .row { margin-left: -15px; margin-right: -15px; } /* .clearfix() from Content/bootstrap/mixins/clearfix.less, applied by .container-fixed() and .make-row() */ .twitter-feed-window .container::before, .twitter-feed-window .container::after, .twitter-feed-window .row::before, .twitter-feed-window .row::after { content: " "; display: table; } .twitter-feed-window .container::after, .twitter-feed-window .row::after { clear: both; } .twitter-feed-window .col-xs-3, .twitter-feed-window .col-xs-9, .twitter-feed-window .col-xs-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; } .twitter-feed-window .col-xs-3 { width: 25%; } .twitter-feed-window .col-xs-9 { width: 75%; } .twitter-feed-window .col-xs-12 { width: 100%; } /* Content/theme/less/block-panels.less .cl-mcont .row - the whole app renders inside .cl-mcont (Views/Home/Index.cshtml), so every .row in the feed carries this 20px top margin. twitter-simulation.less only cancels it for the admin view (.twitter-admin-view .row) and the comment modal, never for the participant feed, which is why the tweet rows sit as far apart as they do. */ .twitter-feed-window .row { margin-top: 20px; } /* -------------------------------------------------------------------------- headings real: Content/bootstrap/type.less (sizes, margins, line-height) + Content/theme/less/general.less (font-family, font-weight:300) + Content/Site.less (h1..h6 { font-weight: 400 } wins, imported last) @font-size-base 14px -> h2 floor(14*2.15)=30px, h4 ceil(14*1.25)=18px, h5 14px, h6 ceil(14*0.85)=12px; @line-height-computed 20px -------------------------------------------------------------------------- */ .twitter-feed-window h2, .twitter-feed-window h4, .twitter-feed-window h5, .twitter-feed-window h6 { font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 1.1; color: inherit; } .twitter-feed-window h2 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; } .twitter-feed-window h4, .twitter-feed-window h5, .twitter-feed-window h6 { margin-top: 10px; margin-bottom: 10px; } .twitter-feed-window h4 { font-size: 18px; } .twitter-feed-window h5 { font-size: 14px; } .twitter-feed-window h6 { font-size: 12px; } /* -------------------------------------------------------------------------- buttons real: Content/bootstrap/buttons.less .btn (@padding-base-vertical 6px, @padding-base-horizontal 12px, @font-size-base 14px, @line-height-base 1.428571429, @btn-border-radius-base 4px) then Content/theme/less/elements/buttons.less overrides .btn and .btn-primary (@primary-color #2eb6d1) -------------------------------------------------------------------------- */ .twitter-feed-window .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .twitter-feed-window .btn { border-color: #CCCCCC; border-radius: 0; -webkit-border-radius: 0; outline: none; margin-bottom: 5px !important; margin-left: 5px; font-size: 13px; padding: 7px 11px; } .twitter-feed-window .btn-primary, .twitter-feed-window .btn-primary:focus { background-color: #2eb6d1; border-color: transparent; color: #fff; } /* -------------------------------------------------------------------------- FontAwesome 4 real: Content/fonts/font-awesome-4/core.less + larger.less + icons.less The webfont is not shipped with this snippet, so each .fa-*::before renders the SAME glyph outline as a CSS mask. The path data is copied verbatim from Content/fonts/font-awesome-4/fonts/fontawesome-webfont.svg (units-per-em 1792, ascent 1536, descent -256), so proportions and advance widths match the real font exactly. background-color:currentColor keeps the colour under the control of the real .tweet i / .icon:hover rules below. -------------------------------------------------------------------------- */ .twitter-feed-window .fa { display: inline-block; /* real declaration; the FontAwesome family is unavailable here but the line-height:1 from this shorthand is load bearing */ font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .twitter-feed-window .fa-2x { font-size: 2em; } .twitter-feed-window .fa::before { content: ""; display: inline-block; box-sizing: content-box; height: 1em; vertical-align: -0.1429em; /* descent 256/1792em, matches the real baseline */ background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: auto 100%; mask-size: auto 100%; } /* -------------------------------------------------------------------------- Content/socom/window.less real selectors are unscoped: .window-content-container and .window-content-container .window-content-inner-container -------------------------------------------------------------------------- */ .sxw-tw .bg-twitter .window-content-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .sxw-tw .bg-twitter .window-content-container .window-content-inner-container { overflow: auto; height: 100%; } /* -------------------------------------------------------------------------- Content/socom/simulation.less (global selectors in the platform) -------------------------------------------------------------------------- */ .twitter-feed-window .html-content-container img { max-width: 100%; max-height: 100%; } .twitter-feed-window .account-logo { max-width: 60px; } .twitter-feed-window .account-logo-default { background-color: lightgrey; padding: 9px 10px; } /* ========================================================================== Content/socom/twitter-simulation.less - nesting resolved, variables inlined ========================================================================== */ .twitter-feed-window { font-family: Arial, sans-serif !important; background-color: #f5f7fb; overflow: hidden; } .twitter-feed-window .twitter-feed-container { height: 100%; padding: 0; padding-right: 15px; padding-bottom: 15px; width: 100%; overflow-y: auto; } .twitter-feed-window .container { width: 100%; } .twitter-feed-window .header { height: 30px; background-color: white; } .twitter-feed-window .header .twitcher-logo { overflow: hidden; width: 25px; top: 5px; position: absolute; } .twitter-feed-window .icon { color: #30A9F4; font-size: 28px; margin-left: 20px; } .twitter-feed-window .window-content { padding: 0; } .twitter-feed-window .banner-container { background: #30A9F4; color: white; } .twitter-feed-window .banner { width: 100%; min-height: 50px; max-height: 500px; } .twitter-feed-window .banner h2 { padding: 8px 20px 8px 8px; } .twitter-feed-window .stats-container { background-color: white; text-align: center; padding: 5px 0; } .twitter-feed-window .stats-container .stats { margin-right: 30px; } .twitter-feed-window .stats-container .stats .stats-heading { font-size: 10px; color: #777777; } .twitter-feed-window .stats-container .stats .stats-value { font-weight: 600; } .twitter-feed-window .account-info { border-radius: 5px; background: white; margin: 10px 5px; padding: 10px; border: 1px solid rgba(0,0,0,0.1); } .twitter-feed-window .account-info .trend-header { font-weight: 500; } .twitter-feed-window .account-info .trend .trend-name { color: #30A9F4; font-weight: bold; } .twitter-feed-window .feed { margin-top: 10px; margin-bottom: 20px; } .twitter-feed-window .feed .row { margin-bottom: 5px; } .twitter-feed-window .feed .tweet { font-size: 14px; line-height: 18px; background-color: white; padding: 9px 12px; border-bottom: 1px solid #a7adba; } .twitter-feed-window .feed .tweet .avatar { margin-right: 10px; } /* this beats .twitter-feed-window .icon and .fa-2x on specificity, so every icon inside a tweet - including the fallback avatar glyph - is 16px and #a7adba, not 28px twitcher blue */ .twitter-feed-window .feed .tweet i { font-size: 16px; color: #a7adba; } .twitter-feed-window .feed .tweet .account-name { font-weight: 600; } .twitter-feed-window .feed .tweet .account-handle { color: #777777; } .twitter-feed-window .feed .tweet .controls { margin-top: 10px; font-family: Arial, sans-serif; } .twitter-feed-window .feed .tweet .controls .icon { margin: 0 40px 0 0; } .twitter-feed-window .feed .tweet .controls .icon:hover { cursor: pointer; color: #292828; } .twitter-feed-window .feed .tweet .controls .icon::before { padding-right: 5px; } .twitter-feed-window .reply { margin-top: 20px; margin-bottom: 10px; } .twitter-feed-window .reply textarea { padding: 10px; font-size: 14px; line-height: 18px; min-height: 75px; width: 100%; margin-bottom: 5px; } .twitter-feed-window .reply .character-count { font-size: 14px; margin: 10px 5px; color: #777777; } .twitter-feed-window .reply .btn { border-radius: 5px; background: #30A9F4; } .twitter-feed-window .list-more-controls { margin: 20px 0; } .twitter-feed-window .list-more-controls .tw-more-btn { width: 100%; background: #30A9F4; color: white; padding: 5px 11px; border: none; } /* ========================================================================== SNIPPET ONLY - not in the platform LESS. Three stand-ins, nothing else. The live window is 800x550 (min 700x500), set by in twitterFeed.html and applied by Kendo as an inline style on the window wrapper, so it is not represented in any stylesheet. Give the snippet a comparable width or the 25% / 75% grid gets cramped. ========================================================================== */ /* In the platform .window-content-container is position:absolute inside a sized Kendo window; here it only needs to be the positioning context for .twitcher-logo (position:absolute; top:5px) and let content set the height. */ .sxw-tw .bg-twitter .window-content-container { position: relative; height: auto; } .sxw-tw .bg-twitter .window-content-container .window-content-inner-container { height: auto; overflow: visible; } /* real selector is .window-container[ng-click] (Content/socom/window.less); the ng-click attribute was stripped from the snippet */ .sxw-tw .bg-twitter .window-container { cursor: default; } /* ========================================================================== FontAwesome glyph masks - generated from the real fontawesome-webfont.svg ========================================================================== */ /*fa-reply advance 1792/1792em = 1.0000em*/ .twitter-feed-window .fa-reply::before{width:1.0000em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20416q0%20-166%20-127%20-451q-3%20-7%20-10.5%20-24t-13.5%20-30t-13%20-22q-12%20-17%20-28%20-17q-15%200%20-23.5%2010t-8.5%2025q0%209%202.5%2026.5t2.5%2023.5q5%2068%205%20123q0%20101%20-17.5%20181t-48.5%20138.5t-80%20101t-105.5%2069.5t-133%2042.5t-154%2021.5t-175.5%206h-224v-256q0%20-26%20-19%20-45t-45%20-19t-45%2019%20l-512%20512q-19%2019%20-19%2045t19%2045l512%20512q19%2019%2045%2019t45%20-19t19%20-45v-256h224q713%200%20875%20-403q53%20-134%2053%20-333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20416q0%20-166%20-127%20-451q-3%20-7%20-10.5%20-24t-13.5%20-30t-13%20-22q-12%20-17%20-28%20-17q-15%200%20-23.5%2010t-8.5%2025q0%209%202.5%2026.5t2.5%2023.5q5%2068%205%20123q0%20101%20-17.5%20181t-48.5%20138.5t-80%20101t-105.5%2069.5t-133%2042.5t-154%2021.5t-175.5%206h-224v-256q0%20-26%20-19%20-45t-45%20-19t-45%2019%20l-512%20512q-19%2019%20-19%2045t19%2045l512%20512q19%2019%2045%2019t45%20-19t19%20-45v-256h224q713%200%20875%20-403q53%20-134%2053%20-333z'/%3E%3C/svg%3E");} /*fa-retweet advance 1920/1792em = 1.0714em*/ .twitter-feed-window .fa-retweet::before{width:1.0714em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1280%2032q0%20-13%20-9.5%20-22.5t-22.5%20-9.5h-960q-8%200%20-13.5%202t-9%207t-5.5%208t-3%2011.5t-1%2011.5v13v11v160v416h-192q-26%200%20-45%2019t-19%2045q0%2024%2015%2041l320%20384q19%2022%2049%2022t49%20-22l320%20-384q15%20-17%2015%20-41q0%20-26%20-19%20-45t-45%20-19h-192v-384h576q16%200%2025%20-11l160%20-192q7%20-11%207%20-21%20zM1920%20448q0%20-24%20-15%20-41l-320%20-384q-20%20-23%20-49%20-23t-49%2023l-320%20384q-15%2017%20-15%2041q0%2026%2019%2045t45%2019h192v384h-576q-16%200%20-25%2012l-160%20192q-7%209%20-7%2020q0%2013%209.5%2022.5t22.5%209.5h960q8%200%2013.5%20-2t9%20-7t5.5%20-8t3%20-11.5t1%20-11.5v-13v-11v-160v-416h192q26%200%2045%20-19t19%20-45z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1280%2032q0%20-13%20-9.5%20-22.5t-22.5%20-9.5h-960q-8%200%20-13.5%202t-9%207t-5.5%208t-3%2011.5t-1%2011.5v13v11v160v416h-192q-26%200%20-45%2019t-19%2045q0%2024%2015%2041l320%20384q19%2022%2049%2022t49%20-22l320%20-384q15%20-17%2015%20-41q0%20-26%20-19%20-45t-45%20-19h-192v-384h576q16%200%2025%20-11l160%20-192q7%20-11%207%20-21%20zM1920%20448q0%20-24%20-15%20-41l-320%20-384q-20%20-23%20-49%20-23t-49%2023l-320%20384q-15%2017%20-15%2041q0%2026%2019%2045t45%2019h192v384h-576q-16%200%20-25%2012l-160%20192q-7%209%20-7%2020q0%2013%209.5%2022.5t22.5%209.5h960q8%200%2013.5%20-2t9%20-7t5.5%20-8t3%20-11.5t1%20-11.5v-13v-11v-160v-416h192q26%200%2045%20-19t19%20-45z'/%3E%3C/svg%3E");} /*fa-comment advance 1792/1792em = 1.0000em*/ .twitter-feed-window .fa-comment::before{width:1.0000em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20640q0%20-174%20-120%20-321.5t-326%20-233t-450%20-85.5q-70%200%20-145%208q-198%20-175%20-460%20-242q-49%20-14%20-114%20-22q-17%20-2%20-30.5%209t-17.5%2029v1q-3%204%20-0.5%2012t2%2010t4.5%209.5l6%209t7%208.5t8%209q7%208%2031%2034.5t34.5%2038t31%2039.5t32.5%2051t27%2059t26%2076q-157%2089%20-247.5%20220t-90.5%20281%20q0%20130%2071%20248.5t191%20204.5t286%20136.5t348%2050.5q244%200%20450%20-85.5t326%20-233t120%20-321.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20640q0%20-174%20-120%20-321.5t-326%20-233t-450%20-85.5q-70%200%20-145%208q-198%20-175%20-460%20-242q-49%20-14%20-114%20-22q-17%20-2%20-30.5%209t-17.5%2029v1q-3%204%20-0.5%2012t2%2010t4.5%209.5l6%209t7%208.5t8%209q7%208%2031%2034.5t34.5%2038t31%2039.5t32.5%2051t27%2059t26%2076q-157%2089%20-247.5%20220t-90.5%20281%20q0%20130%2071%20248.5t191%20204.5t286%20136.5t348%2050.5q244%200%20450%20-85.5t326%20-233t120%20-321.5z'/%3E%3C/svg%3E");} /*fa-heart advance 1792/1792em = 1.0000em*/ .twitter-feed-window .fa-heart::before{width:1.0000em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M896%20-128q-26%200%20-44%2018l-624%20602q-10%208%20-27.5%2026t-55.5%2065.5t-68%2097.5t-53.5%20121t-23.5%20138q0%20220%20127%20344t351%20124q62%200%20126.5%20-21.5t120%20-58t95.5%20-68.5t76%20-68q36%2036%2076%2068t95.5%2068.5t120%2058t126.5%2021.5q224%200%20351%20-124t127%20-344q0%20-221%20-229%20-450l-623%20-600%20q-18%20-18%20-44%20-18z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M896%20-128q-26%200%20-44%2018l-624%20602q-10%208%20-27.5%2026t-55.5%2065.5t-68%2097.5t-53.5%20121t-23.5%20138q0%20220%20127%20344t351%20124q62%200%20126.5%20-21.5t120%20-58t95.5%20-68.5t76%20-68q36%2036%2076%2068t95.5%2068.5t120%2058t126.5%2021.5q224%200%20351%20-124t127%20-344q0%20-221%20-229%20-450l-623%20-600%20q-18%20-18%20-44%20-18z'/%3E%3C/svg%3E");} /*fa-ellipsis-h advance 1408/1792em = 0.7857em*/ .twitter-feed-window .fa-ellipsis-h::before{width:0.7857em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M384%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM896%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM1408%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192%20q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M384%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM896%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM1408%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192%20q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68z'/%3E%3C/svg%3E");} /*fa-user advance 1408/1792em = 0.7857em*/ .twitter-feed-window .fa-user::before{width:0.7857em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1408%20131q0%20-120%20-73%20-189.5t-194%20-69.5h-874q-121%200%20-194%2069.5t-73%20189.5q0%2053%203.5%20103.5t14%20109t26.5%20108.5t43%2097.5t62%2081t85.5%2053.5t111.5%2020q9%200%2042%20-21.5t74.5%20-48t108%20-48t133.5%20-21.5t133.5%2021.5t108%2048t74.5%2048t42%2021.5q61%200%20111.5%20-20t85.5%20-53.5t62%20-81%20t43%20-97.5t26.5%20-108.5t14%20-109t3.5%20-103.5zM1088%201024q0%20-159%20-112.5%20-271.5t-271.5%20-112.5t-271.5%20112.5t-112.5%20271.5t112.5%20271.5t271.5%20112.5t271.5%20-112.5t112.5%20-271.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1408%20131q0%20-120%20-73%20-189.5t-194%20-69.5h-874q-121%200%20-194%2069.5t-73%20189.5q0%2053%203.5%20103.5t14%20109t26.5%20108.5t43%2097.5t62%2081t85.5%2053.5t111.5%2020q9%200%2042%20-21.5t74.5%20-48t108%20-48t133.5%20-21.5t133.5%2021.5t108%2048t74.5%2048t42%2021.5q61%200%20111.5%20-20t85.5%20-53.5t62%20-81%20t43%20-97.5t26.5%20-108.5t14%20-109t3.5%20-103.5zM1088%201024q0%20-159%20-112.5%20-271.5t-271.5%20-112.5t-271.5%20112.5t-112.5%20271.5t112.5%20271.5t271.5%20112.5t271.5%20-112.5t112.5%20-271.5z'/%3E%3C/svg%3E");} /* ===================== EXTRACTED, VERBATIM: FACESPACE ===================== landing/extracted/facespace.css, unchanged. It arrives already scoped under .cl-mcont with :where(), so nothing needed doing to it at all. ========================================================================== */ /* ========================================================================== FaceSpace (participant Facebook clone) - real platform styles, hand-compiled from LESS for the static landing-page snippet. Pairs with facespace.html. SOURCES O8.SOCOM.Server/Content/socom/facebook-simulation.less (the module's styles) O8.SOCOM.Server/Content/socom/simulation.less (.account-logo, .account-logo-default, .html-content-container img) O8.SOCOM.Server/Content/socom/window.less (.window-content, .border-box-sizing) O8.SOCOM.Server/Content/socom/varibles.less (LESS variable values) O8.SOCOM.Server/Content/bootstrap/variables.less (LESS variable values) O8.SOCOM.Server/Content/bootstrap/* (grid / btn / normalize subset) O8.SOCOM.Server/Content/theme/less/block-panels.less (.cl-mcont .row margin-top) O8.SOCOM.Server/Content/theme/less/elements/buttons.less (.btn overrides) O8.SOCOM.Server/Content/theme/less/general.less (body base metrics) O8.SOCOM.Server/Content/fonts/font-awesome-4/* (icon base classes + glyphs) O8.SOCOM.Server/Content/angular-material.layout-attributes.css (layout/flex attributes) LESS VARIABLES RESOLVED (looked up, not guessed) @facebook-background-color #eaebef facebook-simulation.less:1 @facebook-brand #264484 facebook-simulation.less:2 @facebook-light-gray #f6f7fa facebook-simulation.less:3 @facebook-border rgb(221, 223, 226) facebook-simulation.less:4 @gray-light #777 bootstrap/variables.less:14 (lighten(#000, 46.7%)) @gray-lighter #eee bootstrap/variables.less:15 (lighten(#000, 93.5%)) @fa-inverse #fff font-awesome-4/variables.less:11 SUBSTITUTIONS (see facespace.html header too) 1. FontAwesome glyphs. The platform renders .fa-* through the FontAwesome webfont. A webfont is not self-contained, so each .fa-* class used here draws the SAME glyph outline, lifted straight out of Content/fonts/font-awesome-4/fonts/fontawesome-webfont.svg, as a CSS mask. Colour still comes from the real rules via currentColor, and the box matches the font metrics (units-per-em 1792, ascent 1536). 2. box-sizing: border-box comes from bootstrap's global reset plus ".k-widget .border-box-sizing *" (window.less). Both are re-scoped under .cl-mcont here so the snippet cannot leak into the host page, and so it does not need Kendo. 3. Base font metrics (12px / 1.428571429) are inherited from the app's (theme/less/general.less + bootstrap). They are pinned on .cl-mcont here for the same reason. .cl-mcont's own "margin-top: 64px" (navbar offset, Site.less) is dropped as irrelevant. 4. Kendo window chrome (title bar, .window-content-container) is NOT included - the landing page supplies its own frame. 5. Every rule below is prefixed with ":where(.cl-mcont) " - .cl-mcont being the app's own content root and this snippet's outermost element - so that the shared class names the platform inherits from bootstrap / the theme / FontAwesome (.container, .row, .col-xs-*, .btn, .pull-left, .fa) cannot leak out and restyle the landing page. :where() carries zero specificity, so every selector keeps exactly the weight it has in the running app and the real cascade is reproduced unchanged. Rules that already name .cl-mcont are the app root rules themselves and are left alone. ========================================================================== */ /* --- scoped resets ------------------------------------------------------- */ /* bootstrap: *, *:before, *:after { box-sizing: border-box } - scoped */ .cl-mcont, .cl-mcont *, .cl-mcont *:before, .cl-mcont *:after { box-sizing: border-box; } /* window.less: .k-widget .border-box-sizing, .k-widget .border-box-sizing * */ :where(.cl-mcont) .border-box-sizing, :where(.cl-mcont) .border-box-sizing * { box-sizing: border-box; } /* theme/less/general.less body { font-size: 12px; color: #555 } + bootstrap body { line-height: 1.428571429 }. Inherited by the module in the real app. */ .cl-mcont { position: relative; padding: 0; font-size: 12px; line-height: 1.428571429; color: #555; } /* bootstrap normalize subset */ :where(.cl-mcont) img { vertical-align: middle; border: 0; } :where(.cl-mcont) button, :where(.cl-mcont) textarea { color: inherit; font: inherit; margin: 0; } :where(.cl-mcont) textarea { overflow: auto; } /* bootstrap type.less + Site.less (h1..h6 { font-weight: 400 }) */ :where(.cl-mcont) h5 { font-family: inherit; font-weight: 400; line-height: 1.1; color: inherit; font-size: 14px; margin-top: 10px; margin-bottom: 10px; } /* --- bootstrap grid + helpers (only the classes this snippet uses) ------- */ :where(.cl-mcont) .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } :where(.cl-mcont) .row { margin-right: -15px; margin-left: -15px; } :where(.cl-mcont) .container:before, :where(.cl-mcont) .container:after, :where(.cl-mcont) .row:before, :where(.cl-mcont) .row:after { content: " "; display: table; } :where(.cl-mcont) .container:after, :where(.cl-mcont) .row:after { clear: both; } :where(.cl-mcont) .col-xs-1, :where(.cl-mcont) .col-xs-3, :where(.cl-mcont) .col-xs-9, :where(.cl-mcont) .col-xs-11, :where(.cl-mcont) .col-xs-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; float: left; } :where(.cl-mcont) .col-xs-1 { width: 8.33333333%; } :where(.cl-mcont) .col-xs-3 { width: 25%; } :where(.cl-mcont) .col-xs-9 { width: 75%; } :where(.cl-mcont) .col-xs-11 { width: 91.66666667%; } :where(.cl-mcont) .col-xs-12 { width: 100%; } :where(.cl-mcont) .center-block { display: block; margin-right: auto; margin-left: auto; } /* theme/less/block-panels.less - every .row inside the app content root */ .cl-mcont .row { margin-top: 20px; } /* bootstrap buttons.less base */ :where(.cl-mcont) .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; user-select: none; } /* theme/less/elements/buttons.less overrides. NOTE the !important margin-bottom: it beats the module's own "margin: 10px", exactly as it does in the app. */ :where(.cl-mcont) .btn { border-color: #CCCCCC; border-radius: 0; -webkit-border-radius: 0; outline: none; margin-bottom: 5px !important; margin-left: 5px; font-size: 13px; padding: 7px 11px; } :where(.cl-mcont) .btn i { font-size: 14px; margin-right: 2px; display: inline-block; min-width: 10px; } /* the markup really does say class="btn bt-primary" (typo in the platform), so no .btn-primary rule ever applies - the blue comes from the module rules below. */ /* --- angular-material layout attributes (subset actually used) ----------- */ :where(.cl-mcont) [layout], :where(.cl-mcont) [layout="column"], :where(.cl-mcont) [layout="row"] { box-sizing: border-box; display: flex; } :where(.cl-mcont) [layout="column"] { flex-direction: column; } :where(.cl-mcont) [layout="row"] { flex-direction: row; } :where(.cl-mcont) [flex] { flex: 1; box-sizing: border-box; } :where(.cl-mcont) [layout-fill] { margin: 0; width: 100%; min-height: 100%; height: 100%; } :where(.cl-mcont) [layout-align="start center"] { justify-content: flex-start; align-items: center; align-content: center; max-width: 100%; } :where(.cl-mcont) [layout-align="start center"] > * { max-width: 100%; box-sizing: border-box; } /* --- FontAwesome 4 base classes ----------------------------------------- */ :where(.cl-mcont) .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } :where(.cl-mcont) .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } :where(.cl-mcont) .fa-2x { font-size: 2em; } :where(.cl-mcont) .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } :where(.cl-mcont) .fa-stack-1x, :where(.cl-mcont) .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } :where(.cl-mcont) .fa-stack-1x { line-height: inherit; } :where(.cl-mcont) .fa-stack-2x { font-size: 2em; } :where(.cl-mcont) .fa-inverse { color: #fff; } :where(.cl-mcont) .pull-right { float: right; } :where(.cl-mcont) .pull-left { float: left; } :where(.cl-mcont) .fa.pull-left { margin-right: .3em; } :where(.cl-mcont) .fa.pull-right { margin-left: .3em; } /* --- FontAwesome glyph outlines (substituted for the webfont) ------------ */ :where(.cl-mcont) .fa-search::before { content: ""; display: inline-block; width: 0.92857em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1152 704q0 185 -131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5t316.5 131.5t131.5 316.5zM1664 -128q0 -52 -38 -90t-90 -38q-54 0 -90 38l-343 342q-179 -124 -399 -124q-143 0 -273.5 55.5t-225 150t-150 225t-55.5 273.5 t55.5 273.5t150 225t225 150t273.5 55.5t273.5 -55.5t225 -150t150 -225t55.5 -273.5q0 -220 -124 -399l343 -343q37 -37 37 -90z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1152 704q0 185 -131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5t316.5 131.5t131.5 316.5zM1664 -128q0 -52 -38 -90t-90 -38q-54 0 -90 38l-343 342q-179 -124 -399 -124q-143 0 -273.5 55.5t-225 150t-150 225t-55.5 273.5 t55.5 273.5t150 225t225 150t273.5 55.5t273.5 -55.5t225 -150t150 -225t55.5 -273.5q0 -220 -124 -399l343 -343q37 -37 37 -90z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-globe::before { content: ""; display: inline-block; width: 0.85714em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M768 1408q209 0 385.5 -103t279.5 -279.5t103 -385.5t-103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103zM1042 887q-2 -1 -9.5 -9.5t-13.5 -9.5q2 0 4.5 5t5 11t3.5 7q6 7 22 15q14 6 52 12q34 8 51 -11 q-2 2 9.5 13t14.5 12q3 2 15 4.5t15 7.5l2 22q-12 -1 -17.5 7t-6.5 21q0 -2 -6 -8q0 7 -4.5 8t-11.5 -1t-9 -1q-10 3 -15 7.5t-8 16.5t-4 15q-2 5 -9.5 10.5t-9.5 10.5q-1 2 -2.5 5.5t-3 6.5t-4 5.5t-5.5 2.5t-7 -5t-7.5 -10t-4.5 -5q-3 2 -6 1.5t-4.5 -1t-4.5 -3t-5 -3.5 q-3 -2 -8.5 -3t-8.5 -2q15 5 -1 11q-10 4 -16 3q9 4 7.5 12t-8.5 14h5q-1 4 -8.5 8.5t-17.5 8.5t-13 6q-8 5 -34 9.5t-33 0.5q-5 -6 -4.5 -10.5t4 -14t3.5 -12.5q1 -6 -5.5 -13t-6.5 -12q0 -7 14 -15.5t10 -21.5q-3 -8 -16 -16t-16 -12q-5 -8 -1.5 -18.5t10.5 -16.5 q2 -2 1.5 -4t-3.5 -4.5t-5.5 -4t-6.5 -3.5l-3 -2q-11 -5 -20.5 6t-13.5 26q-7 25 -16 30q-23 8 -29 -1q-5 13 -41 26q-25 9 -58 4q6 1 0 15q-7 15 -19 12q3 6 4 17.5t1 13.5q3 13 12 23q1 1 7 8.5t9.5 13.5t0.5 6q35 -4 50 11q5 5 11.5 17t10.5 17q9 6 14 5.5t14.5 -5.5 t14.5 -5q14 -1 15.5 11t-7.5 20q12 -1 3 17q-5 7 -8 9q-12 4 -27 -5q-8 -4 2 -8q-1 1 -9.5 -10.5t-16.5 -17.5t-16 5q-1 1 -5.5 13.5t-9.5 13.5q-8 0 -16 -15q3 8 -11 15t-24 8q19 12 -8 27q-7 4 -20.5 5t-19.5 -4q-5 -7 -5.5 -11.5t5 -8t10.5 -5.5t11.5 -4t8.5 -3 q14 -10 8 -14q-2 -1 -8.5 -3.5t-11.5 -4.5t-6 -4q-3 -4 0 -14t-2 -14q-5 5 -9 17.5t-7 16.5q7 -9 -25 -6l-10 1q-4 0 -16 -2t-20.5 -1t-13.5 8q-4 8 0 20q1 4 4 2q-4 3 -11 9.5t-10 8.5q-46 -15 -94 -41q6 -1 12 1q5 2 13 6.5t10 5.5q34 14 42 7l5 5q14 -16 20 -25 q-7 4 -30 1q-20 -6 -22 -12q7 -12 5 -18q-4 3 -11.5 10t-14.5 11t-15 5q-16 0 -22 -1q-146 -80 -235 -222q7 -7 12 -8q4 -1 5 -9t2.5 -11t11.5 3q9 -8 3 -19q1 1 44 -27q19 -17 21 -21q3 -11 -10 -18q-1 2 -9 9t-9 4q-3 -5 0.5 -18.5t10.5 -12.5q-7 0 -9.5 -16t-2.5 -35.5 t-1 -23.5l2 -1q-3 -12 5.5 -34.5t21.5 -19.5q-13 -3 20 -43q6 -8 8 -9q3 -2 12 -7.5t15 -10t10 -10.5q4 -5 10 -22.5t14 -23.5q-2 -6 9.5 -20t10.5 -23q-1 0 -2.5 -1t-2.5 -1q3 -7 15.5 -14t15.5 -13q1 -3 2 -10t3 -11t8 -2q2 20 -24 62q-15 25 -17 29q-3 5 -5.5 15.5 t-4.5 14.5q2 0 6 -1.5t8.5 -3.5t7.5 -4t2 -3q-3 -7 2 -17.5t12 -18.5t17 -19t12 -13q6 -6 14 -19.5t0 -13.5q9 0 20 -10t17 -20q5 -8 8 -26t5 -24q2 -7 8.5 -13.5t12.5 -9.5l16 -8t13 -7q5 -2 18.5 -10.5t21.5 -11.5q10 -4 16 -4t14.5 2.5t13.5 3.5q15 2 29 -15t21 -21 q36 -19 55 -11q-2 -1 0.5 -7.5t8 -15.5t9 -14.5t5.5 -8.5q5 -6 18 -15t18 -15q6 4 7 9q-3 -8 7 -20t18 -10q14 3 14 32q-31 -15 -49 18q0 1 -2.5 5.5t-4 8.5t-2.5 8.5t0 7.5t5 3q9 0 10 3.5t-2 12.5t-4 13q-1 8 -11 20t-12 15q-5 -9 -16 -8t-16 9q0 -1 -1.5 -5.5t-1.5 -6.5 q-13 0 -15 1q1 3 2.5 17.5t3.5 22.5q1 4 5.5 12t7.5 14.5t4 12.5t-4.5 9.5t-17.5 2.5q-19 -1 -26 -20q-1 -3 -3 -10.5t-5 -11.5t-9 -7q-7 -3 -24 -2t-24 5q-13 8 -22.5 29t-9.5 37q0 10 2.5 26.5t3 25t-5.5 24.5q3 2 9 9.5t10 10.5q2 1 4.5 1.5t4.5 0t4 1.5t3 6q-1 1 -4 3 q-3 3 -4 3q7 -3 28.5 1.5t27.5 -1.5q15 -11 22 2q0 1 -2.5 9.5t-0.5 13.5q5 -27 29 -9q3 -3 15.5 -5t17.5 -5q3 -2 7 -5.5t5.5 -4.5t5 0.5t8.5 6.5q10 -14 12 -24q11 -40 19 -44q7 -3 11 -2t4.5 9.5t0 14t-1.5 12.5l-1 8v18l-1 8q-15 3 -18.5 12t1.5 18.5t15 18.5q1 1 8 3.5 t15.5 6.5t12.5 8q21 19 15 35q7 0 11 9q-1 0 -5 3t-7.5 5t-4.5 2q9 5 2 16q5 3 7.5 11t7.5 10q9 -12 21 -2q7 8 1 16q5 7 20.5 10.5t18.5 9.5q7 -2 8 2t1 12t3 12q4 5 15 9t13 5l17 11q3 4 0 4q18 -2 31 11q10 11 -6 20q3 6 -3 9.5t-15 5.5q3 1 11.5 0.5t10.5 1.5 q15 10 -7 16q-17 5 -43 -12zM879 10q206 36 351 189q-3 3 -12.5 4.5t-12.5 3.5q-18 7 -24 8q1 7 -2.5 13t-8 9t-12.5 8t-11 7q-2 2 -7 6t-7 5.5t-7.5 4.5t-8.5 2t-10 -1l-3 -1q-3 -1 -5.5 -2.5t-5.5 -3t-4 -3t0 -2.5q-21 17 -36 22q-5 1 -11 5.5t-10.5 7t-10 1.5t-11.5 -7 q-5 -5 -6 -15t-2 -13q-7 5 0 17.5t2 18.5q-3 6 -10.5 4.5t-12 -4.5t-11.5 -8.5t-9 -6.5t-8.5 -5.5t-8.5 -7.5q-3 -4 -6 -12t-5 -11q-2 4 -11.5 6.5t-9.5 5.5q2 -10 4 -35t5 -38q7 -31 -12 -48q-27 -25 -29 -40q-4 -22 12 -26q0 -7 -8 -20.5t-7 -21.5q0 -6 2 -16z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M768 1408q209 0 385.5 -103t279.5 -279.5t103 -385.5t-103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103zM1042 887q-2 -1 -9.5 -9.5t-13.5 -9.5q2 0 4.5 5t5 11t3.5 7q6 7 22 15q14 6 52 12q34 8 51 -11 q-2 2 9.5 13t14.5 12q3 2 15 4.5t15 7.5l2 22q-12 -1 -17.5 7t-6.5 21q0 -2 -6 -8q0 7 -4.5 8t-11.5 -1t-9 -1q-10 3 -15 7.5t-8 16.5t-4 15q-2 5 -9.5 10.5t-9.5 10.5q-1 2 -2.5 5.5t-3 6.5t-4 5.5t-5.5 2.5t-7 -5t-7.5 -10t-4.5 -5q-3 2 -6 1.5t-4.5 -1t-4.5 -3t-5 -3.5 q-3 -2 -8.5 -3t-8.5 -2q15 5 -1 11q-10 4 -16 3q9 4 7.5 12t-8.5 14h5q-1 4 -8.5 8.5t-17.5 8.5t-13 6q-8 5 -34 9.5t-33 0.5q-5 -6 -4.5 -10.5t4 -14t3.5 -12.5q1 -6 -5.5 -13t-6.5 -12q0 -7 14 -15.5t10 -21.5q-3 -8 -16 -16t-16 -12q-5 -8 -1.5 -18.5t10.5 -16.5 q2 -2 1.5 -4t-3.5 -4.5t-5.5 -4t-6.5 -3.5l-3 -2q-11 -5 -20.5 6t-13.5 26q-7 25 -16 30q-23 8 -29 -1q-5 13 -41 26q-25 9 -58 4q6 1 0 15q-7 15 -19 12q3 6 4 17.5t1 13.5q3 13 12 23q1 1 7 8.5t9.5 13.5t0.5 6q35 -4 50 11q5 5 11.5 17t10.5 17q9 6 14 5.5t14.5 -5.5 t14.5 -5q14 -1 15.5 11t-7.5 20q12 -1 3 17q-5 7 -8 9q-12 4 -27 -5q-8 -4 2 -8q-1 1 -9.5 -10.5t-16.5 -17.5t-16 5q-1 1 -5.5 13.5t-9.5 13.5q-8 0 -16 -15q3 8 -11 15t-24 8q19 12 -8 27q-7 4 -20.5 5t-19.5 -4q-5 -7 -5.5 -11.5t5 -8t10.5 -5.5t11.5 -4t8.5 -3 q14 -10 8 -14q-2 -1 -8.5 -3.5t-11.5 -4.5t-6 -4q-3 -4 0 -14t-2 -14q-5 5 -9 17.5t-7 16.5q7 -9 -25 -6l-10 1q-4 0 -16 -2t-20.5 -1t-13.5 8q-4 8 0 20q1 4 4 2q-4 3 -11 9.5t-10 8.5q-46 -15 -94 -41q6 -1 12 1q5 2 13 6.5t10 5.5q34 14 42 7l5 5q14 -16 20 -25 q-7 4 -30 1q-20 -6 -22 -12q7 -12 5 -18q-4 3 -11.5 10t-14.5 11t-15 5q-16 0 -22 -1q-146 -80 -235 -222q7 -7 12 -8q4 -1 5 -9t2.5 -11t11.5 3q9 -8 3 -19q1 1 44 -27q19 -17 21 -21q3 -11 -10 -18q-1 2 -9 9t-9 4q-3 -5 0.5 -18.5t10.5 -12.5q-7 0 -9.5 -16t-2.5 -35.5 t-1 -23.5l2 -1q-3 -12 5.5 -34.5t21.5 -19.5q-13 -3 20 -43q6 -8 8 -9q3 -2 12 -7.5t15 -10t10 -10.5q4 -5 10 -22.5t14 -23.5q-2 -6 9.5 -20t10.5 -23q-1 0 -2.5 -1t-2.5 -1q3 -7 15.5 -14t15.5 -13q1 -3 2 -10t3 -11t8 -2q2 20 -24 62q-15 25 -17 29q-3 5 -5.5 15.5 t-4.5 14.5q2 0 6 -1.5t8.5 -3.5t7.5 -4t2 -3q-3 -7 2 -17.5t12 -18.5t17 -19t12 -13q6 -6 14 -19.5t0 -13.5q9 0 20 -10t17 -20q5 -8 8 -26t5 -24q2 -7 8.5 -13.5t12.5 -9.5l16 -8t13 -7q5 -2 18.5 -10.5t21.5 -11.5q10 -4 16 -4t14.5 2.5t13.5 3.5q15 2 29 -15t21 -21 q36 -19 55 -11q-2 -1 0.5 -7.5t8 -15.5t9 -14.5t5.5 -8.5q5 -6 18 -15t18 -15q6 4 7 9q-3 -8 7 -20t18 -10q14 3 14 32q-31 -15 -49 18q0 1 -2.5 5.5t-4 8.5t-2.5 8.5t0 7.5t5 3q9 0 10 3.5t-2 12.5t-4 13q-1 8 -11 20t-12 15q-5 -9 -16 -8t-16 9q0 -1 -1.5 -5.5t-1.5 -6.5 q-13 0 -15 1q1 3 2.5 17.5t3.5 22.5q1 4 5.5 12t7.5 14.5t4 12.5t-4.5 9.5t-17.5 2.5q-19 -1 -26 -20q-1 -3 -3 -10.5t-5 -11.5t-9 -7q-7 -3 -24 -2t-24 5q-13 8 -22.5 29t-9.5 37q0 10 2.5 26.5t3 25t-5.5 24.5q3 2 9 9.5t10 10.5q2 1 4.5 1.5t4.5 0t4 1.5t3 6q-1 1 -4 3 q-3 3 -4 3q7 -3 28.5 1.5t27.5 -1.5q15 -11 22 2q0 1 -2.5 9.5t-0.5 13.5q5 -27 29 -9q3 -3 15.5 -5t17.5 -5q3 -2 7 -5.5t5.5 -4.5t5 0.5t8.5 6.5q10 -14 12 -24q11 -40 19 -44q7 -3 11 -2t4.5 9.5t0 14t-1.5 12.5l-1 8v18l-1 8q-15 3 -18.5 12t1.5 18.5t15 18.5q1 1 8 3.5 t15.5 6.5t12.5 8q21 19 15 35q7 0 11 9q-1 0 -5 3t-7.5 5t-4.5 2q9 5 2 16q5 3 7.5 11t7.5 10q9 -12 21 -2q7 8 1 16q5 7 20.5 10.5t18.5 9.5q7 -2 8 2t1 12t3 12q4 5 15 9t13 5l17 11q3 4 0 4q18 -2 31 11q10 11 -6 20q3 6 -3 9.5t-15 5.5q3 1 11.5 0.5t10.5 1.5 q15 10 -7 16q-17 5 -43 -12zM879 10q206 36 351 189q-3 3 -12.5 4.5t-12.5 3.5q-18 7 -24 8q1 7 -2.5 13t-8 9t-12.5 8t-11 7q-2 2 -7 6t-7 5.5t-7.5 4.5t-8.5 2t-10 -1l-3 -1q-3 -1 -5.5 -2.5t-5.5 -3t-4 -3t0 -2.5q-21 17 -36 22q-5 1 -11 5.5t-10.5 7t-10 1.5t-11.5 -7 q-5 -5 -6 -15t-2 -13q-7 5 0 17.5t2 18.5q-3 6 -10.5 4.5t-12 -4.5t-11.5 -8.5t-9 -6.5t-8.5 -5.5t-8.5 -7.5q-3 -4 -6 -12t-5 -11q-2 4 -11.5 6.5t-9.5 5.5q2 -10 4 -35t5 -38q7 -31 -12 -48q-27 -25 -29 -40q-4 -22 12 -26q0 -7 -8 -20.5t-7 -21.5q0 -6 2 -16z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-comment::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-70 0 -145 8q-198 -175 -460 -242q-49 -14 -114 -22q-17 -2 -30.5 9t-17.5 29v1q-3 4 -0.5 12t2 10t4.5 9.5l6 9t7 8.5t8 9q7 8 31 34.5t34.5 38t31 39.5t32.5 51t27 59t26 76q-157 89 -247.5 220t-90.5 281 q0 130 71 248.5t191 204.5t286 136.5t348 50.5q244 0 450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-70 0 -145 8q-198 -175 -460 -242q-49 -14 -114 -22q-17 -2 -30.5 9t-17.5 29v1q-3 4 -0.5 12t2 10t4.5 9.5l6 9t7 8.5t8 9q7 8 31 34.5t34.5 38t31 39.5t32.5 51t27 59t26 76q-157 89 -247.5 220t-90.5 281 q0 130 71 248.5t191 204.5t286 136.5t348 50.5q244 0 450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-users::before { content: ""; display: inline-block; width: 1.07143em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M593 640q-162 -5 -265 -128h-134q-82 0 -138 40.5t-56 118.5q0 353 124 353q6 0 43.5 -21t97.5 -42.5t119 -21.5q67 0 133 23q-5 -37 -5 -66q0 -139 81 -256zM1664 3q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5 t43 97.5t62 81t85.5 53.5t111.5 20q10 0 43 -21.5t73 -48t107 -48t135 -21.5t135 21.5t107 48t73 48t43 21.5q61 0 111.5 -20t85.5 -53.5t62 -81t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM640 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75 t75 -181zM1344 896q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5zM1920 671q0 -78 -56 -118.5t-138 -40.5h-134q-103 123 -265 128q81 117 81 256q0 29 -5 66q66 -23 133 -23q59 0 119 21.5t97.5 42.5 t43.5 21q124 0 124 -353zM1792 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75t75 -181z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M593 640q-162 -5 -265 -128h-134q-82 0 -138 40.5t-56 118.5q0 353 124 353q6 0 43.5 -21t97.5 -42.5t119 -21.5q67 0 133 23q-5 -37 -5 -66q0 -139 81 -256zM1664 3q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5 t43 97.5t62 81t85.5 53.5t111.5 20q10 0 43 -21.5t73 -48t107 -48t135 -21.5t135 21.5t107 48t73 48t43 21.5q61 0 111.5 -20t85.5 -53.5t62 -81t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM640 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75 t75 -181zM1344 896q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5zM1920 671q0 -78 -56 -118.5t-138 -40.5h-134q-103 123 -265 128q81 117 81 256q0 29 -5 66q66 -23 133 -23q59 0 119 21.5t97.5 42.5 t43.5 21q124 0 124 -353zM1792 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75t75 -181z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-user::before { content: ""; display: inline-block; width: 0.78571em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-newspaper-o::before { content: ""; display: inline-block; width: 1.14286em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1024 1024h-384v-384h384v384zM1152 384v-128h-640v128h640zM1152 1152v-640h-640v640h640zM1792 384v-128h-512v128h512zM1792 640v-128h-512v128h512zM1792 896v-128h-512v128h512zM1792 1152v-128h-512v128h512zM256 192v960h-128v-960q0 -26 19 -45t45 -19t45 19 t19 45zM1920 192v1088h-1536v-1088q0 -33 -11 -64h1483q26 0 45 19t19 45zM2048 1408v-1216q0 -80 -56 -136t-136 -56h-1664q-80 0 -136 56t-56 136v1088h256v128h1792z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1024 1024h-384v-384h384v384zM1152 384v-128h-640v128h640zM1152 1152v-640h-640v640h640zM1792 384v-128h-512v128h512zM1792 640v-128h-512v128h512zM1792 896v-128h-512v128h512zM1792 1152v-128h-512v128h512zM256 192v960h-128v-960q0 -26 19 -45t45 -19t45 19 t19 45zM1920 192v1088h-1536v-1088q0 -33 -11 -64h1483q26 0 45 19t19 45zM2048 1408v-1216q0 -80 -56 -136t-136 -56h-1664q-80 0 -136 56t-56 136v1088h256v128h1792z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-ellipsis-h::before { content: ""; display: inline-block; width: 0.78571em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M384 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM896 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM1408 800v-192q0 -40 -28 -68t-68 -28h-192 q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M384 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM896 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM1408 800v-192q0 -40 -28 -68t-68 -28h-192 q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-commenting::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M640 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1024 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1408 640q0 53 -37.5 90.5t-90.5 37.5 t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-110 0 -211 18q-173 -173 -435 -229q-52 -10 -86 -13q-12 -1 -22 6t-13 18q-4 15 20 37q5 5 23.5 21.5t25.5 23.5t23.5 25.5t24 31.5t20.5 37 t20 48t14.5 57.5t12.5 72.5q-146 90 -229.5 216.5t-83.5 269.5q0 174 120 321.5t326 233t450 85.5t450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M640 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1024 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1408 640q0 53 -37.5 90.5t-90.5 37.5 t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-110 0 -211 18q-173 -173 -435 -229q-52 -10 -86 -13q-12 -1 -22 6t-13 18q-4 15 20 37q5 5 23.5 21.5t25.5 23.5t23.5 25.5t24 31.5t20.5 37 t20 48t14.5 57.5t12.5 72.5q-146 90 -229.5 216.5t-83.5 269.5q0 174 120 321.5t326 233t450 85.5t450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-bookmark::before { content: ""; display: inline-block; width: 0.71429em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1164 1408q23 0 44 -9q33 -13 52.5 -41t19.5 -62v-1289q0 -34 -19.5 -62t-52.5 -41q-19 -8 -44 -8q-48 0 -83 32l-441 424l-441 -424q-36 -33 -83 -33q-23 0 -44 9q-33 13 -52.5 41t-19.5 62v1289q0 34 19.5 62t52.5 41q21 9 44 9h1048z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1164 1408q23 0 44 -9q33 -13 52.5 -41t19.5 -62v-1289q0 -34 -19.5 -62t-52.5 -41q-19 -8 -44 -8q-48 0 -83 32l-441 424l-441 -424q-36 -33 -83 -33q-23 0 -44 9q-33 13 -52.5 41t-19.5 62v1289q0 34 19.5 62t52.5 41q21 9 44 9h1048z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-calendar-o::before { content: ""; display: inline-block; width: 0.92857em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M128 -128h1408v1024h-1408v-1024zM512 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1280 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1664 1152v-1280 q0 -52 -38 -90t-90 -38h-1408q-52 0 -90 38t-38 90v1280q0 52 38 90t90 38h128v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h384v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h128q52 0 90 -38t38 -90z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M128 -128h1408v1024h-1408v-1024zM512 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1280 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1664 1152v-1280 q0 -52 -38 -90t-90 -38h-1408q-52 0 -90 38t-38 90v1280q0 52 38 90t90 38h128v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h384v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h128q52 0 90 -38t38 -90z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-circle::before { content: ""; display: inline-block; width: 0.85714em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1536 640q0 -209 -103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103t385.5 -103t279.5 -279.5t103 -385.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1536 640q0 -209 -103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103t385.5 -103t279.5 -279.5t103 -385.5z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-video-camera::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 1184v-1088q0 -42 -39 -59q-13 -5 -25 -5q-27 0 -45 19l-403 403v-166q0 -119 -84.5 -203.5t-203.5 -84.5h-704q-119 0 -203.5 84.5t-84.5 203.5v704q0 119 84.5 203.5t203.5 84.5h704q119 0 203.5 -84.5t84.5 -203.5v-165l403 402q18 19 45 19q12 0 25 -5 q39 -17 39 -59z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 1184v-1088q0 -42 -39 -59q-13 -5 -25 -5q-27 0 -45 19l-403 403v-166q0 -119 -84.5 -203.5t-203.5 -84.5h-704q-119 0 -203.5 84.5t-84.5 203.5v704q0 119 84.5 203.5t203.5 84.5h704q119 0 203.5 -84.5t84.5 -203.5v-165l403 402q18 19 45 19q12 0 25 -5 q39 -17 39 -59z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-camera::before { content: ""; display: inline-block; width: 1.07143em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M960 864q119 0 203.5 -84.5t84.5 -203.5t-84.5 -203.5t-203.5 -84.5t-203.5 84.5t-84.5 203.5t84.5 203.5t203.5 84.5zM1664 1280q106 0 181 -75t75 -181v-896q0 -106 -75 -181t-181 -75h-1408q-106 0 -181 75t-75 181v896q0 106 75 181t181 75h224l51 136 q19 49 69.5 84.5t103.5 35.5h512q53 0 103.5 -35.5t69.5 -84.5l51 -136h224zM960 128q185 0 316.5 131.5t131.5 316.5t-131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M960 864q119 0 203.5 -84.5t84.5 -203.5t-84.5 -203.5t-203.5 -84.5t-203.5 84.5t-84.5 203.5t84.5 203.5t203.5 84.5zM1664 1280q106 0 181 -75t75 -181v-896q0 -106 -75 -181t-181 -75h-1408q-106 0 -181 75t-75 181v896q0 106 75 181t181 75h224l51 136 q19 49 69.5 84.5t103.5 35.5h512q53 0 103.5 -35.5t69.5 -84.5l51 -136h224zM960 128q185 0 316.5 131.5t131.5 316.5t-131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-thumbs-up::before { content: ""; display: inline-block; width: 0.92857em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M256 192q0 26 -19 45t-45 19q-27 0 -45.5 -19t-18.5 -45q0 -27 18.5 -45.5t45.5 -18.5q26 0 45 18.5t19 45.5zM416 704v-640q0 -26 -19 -45t-45 -19h-288q-26 0 -45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45 -19t19 -45zM1600 704q0 -86 -55 -149q15 -44 15 -76 q3 -76 -43 -137q17 -56 0 -117q-15 -57 -54 -94q9 -112 -49 -181q-64 -76 -197 -78h-36h-76h-17q-66 0 -144 15.5t-121.5 29t-120.5 39.5q-123 43 -158 44q-26 1 -45 19.5t-19 44.5v641q0 25 18 43.5t43 20.5q24 2 76 59t101 121q68 87 101 120q18 18 31 48t17.5 48.5 t13.5 60.5q7 39 12.5 61t19.5 52t34 50q19 19 45 19q46 0 82.5 -10.5t60 -26t40 -40.5t24 -45t12 -50t5 -45t0.5 -39q0 -38 -9.5 -76t-19 -60t-27.5 -56q-3 -6 -10 -18t-11 -22t-8 -24h277q78 0 135 -57t57 -135z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M256 192q0 26 -19 45t-45 19q-27 0 -45.5 -19t-18.5 -45q0 -27 18.5 -45.5t45.5 -18.5q26 0 45 18.5t19 45.5zM416 704v-640q0 -26 -19 -45t-45 -19h-288q-26 0 -45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45 -19t19 -45zM1600 704q0 -86 -55 -149q15 -44 15 -76 q3 -76 -43 -137q17 -56 0 -117q-15 -57 -54 -94q9 -112 -49 -181q-64 -76 -197 -78h-36h-76h-17q-66 0 -144 15.5t-121.5 29t-120.5 39.5q-123 43 -158 44q-26 1 -45 19.5t-19 44.5v641q0 25 18 43.5t43 20.5q24 2 76 59t101 121q68 87 101 120q18 18 31 48t17.5 48.5 t13.5 60.5q7 39 12.5 61t19.5 52t34 50q19 19 45 19q46 0 82.5 -10.5t60 -26t40 -40.5t24 -45t12 -50t5 -45t0.5 -39q0 -38 -9.5 -76t-19 -60t-27.5 -56q-3 -6 -10 -18t-11 -22t-8 -24h277q78 0 135 -57t57 -135z'/%3E%3C/svg%3E") no-repeat center / contain; } :where(.cl-mcont) .fa-reply::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 416q0 -166 -127 -451q-3 -7 -10.5 -24t-13.5 -30t-13 -22q-12 -17 -28 -17q-15 0 -23.5 10t-8.5 25q0 9 2.5 26.5t2.5 23.5q5 68 5 123q0 101 -17.5 181t-48.5 138.5t-80 101t-105.5 69.5t-133 42.5t-154 21.5t-175.5 6h-224v-256q0 -26 -19 -45t-45 -19t-45 19 l-512 512q-19 19 -19 45t19 45l512 512q19 19 45 19t45 -19t19 -45v-256h224q713 0 875 -403q53 -134 53 -333z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 416q0 -166 -127 -451q-3 -7 -10.5 -24t-13.5 -30t-13 -22q-12 -17 -28 -17q-15 0 -23.5 10t-8.5 25q0 9 2.5 26.5t2.5 23.5q5 68 5 123q0 101 -17.5 181t-48.5 138.5t-80 101t-105.5 69.5t-133 42.5t-154 21.5t-175.5 6h-224v-256q0 -26 -19 -45t-45 -19t-45 19 l-512 512q-19 19 -19 45t19 45l512 512q19 19 45 19t45 -19t19 -45v-256h224q713 0 875 -403q53 -134 53 -333z'/%3E%3C/svg%3E") no-repeat center / contain; } /* --- socom/simulation.less ---------------------------------------------- */ :where(.cl-mcont) .account-logo { max-width: 60px; } :where(.cl-mcont) .account-logo-default { background-color: lightgrey; padding: 9px 10px; } :where(.cl-mcont) .html-content-container img { max-width: 100%; max-height: 100%; } /* --- socom/window.less -------------------------------------------------- */ :where(.cl-mcont) .window-content { padding: 10px; } /* ======================================================================== socom/facebook-simulation.less, nesting resolved ======================================================================== */ :where(.cl-mcont) .bg-facebook { background-color: #eaebef !important; } :where(.cl-mcont) .facebook-feed-window { font-family: helvetica, arial, sans-serif !important; color: black; } :where(.cl-mcont) .facebook-feed-window .face-space-icon { color: white; font-weight: bold; font-family: 'Courier New'; font-size: 16pt; margin: 5px; } :where(.cl-mcont) .facebook-feed-window .fb-feed-container { height: 100%; padding: 0; } :where(.cl-mcont) .facebook-feed-window .main-column { padding: 0; overflow: hidden; } :where(.cl-mcont) .facebook-feed-window .window-content { padding: 0; margin: 0; } :where(.cl-mcont) .facebook-feed-window .container { width: 100%; } /* header bar */ :where(.cl-mcont) .facebook-feed-window .header { height: 30px; background-color: #264484; } :where(.cl-mcont) .facebook-feed-window .header .search-box { background-color: white; height: 20px; width: 150px; margin-top: 5px; } :where(.cl-mcont) .facebook-feed-window .header .search-button { height: 20px; margin-top: 5px; width: 20px; background-color: #eaebef; } :where(.cl-mcont) .facebook-feed-window .header .search-button .fa { color: #777; font-size: 18px; } :where(.cl-mcont) .facebook-feed-window .header .header-links { color: white; font-size: 14px; margin-top: 5px; } :where(.cl-mcont) .facebook-feed-window .header .header-links .link { margin-left: 10px; border-left: 1px solid #777; padding-left: 10px; } /* left rail */ :where(.cl-mcont) .facebook-feed-window .account-info { margin-top: 20px; } :where(.cl-mcont) .facebook-feed-window .account-info .side-link { height: 25px; margin: 5px 0; } :where(.cl-mcont) .facebook-feed-window .account-info .side-link .link-icon { width: 30px; } :where(.cl-mcont) .facebook-feed-window .account-info .side-link .fa-stack { margin-right: 5px; } :where(.cl-mcont) .facebook-feed-window .account-info .side-button { border: 1px solid rgba(0,0,0,0); padding: 8px 5px; color: rgba(0,0,0,0.5); } :where(.cl-mcont) .facebook-feed-window .account-info .side-button.selected { background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.2); } :where(.cl-mcont) .facebook-feed-window .account-info .side-button .side-button-text { padding-left: 5px; font-weight: bold; color: black; } :where(.cl-mcont) .facebook-feed-window .account-info .side-button .side-button-icon { color: #264484; } /* compose box */ :where(.cl-mcont) .facebook-feed-window .author-post { width: 100%; background-color: white; margin: 20px 0; border: 1px solid rgb(221, 223, 226); } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header { background-color: #f6f7fa; height: 30px; font-size: 14px; font-weight: 600; line-height: 30px; } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header .item { border-right: 1px solid rgb(221, 223, 226); padding: 0 20px; } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header .item .fa { margin-top: 8px; } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header .item:active { -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.5); box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.5); } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-body { height: 117px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background-color: white; } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-body textarea { min-height: 99px; width: 100%; padding: 10px; } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-footer { background-color: white; } :where(.cl-mcont) .facebook-feed-window .author-post .author-post-footer button { background-color: #264484; color: white; margin: 10px; font-size: 12px; padding: 5px 7px; } /* feed */ :where(.cl-mcont) .facebook-feed-window .facebook-feed { padding-right: 15px; overflow-y: auto; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post { margin-bottom: 20px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main { background-color: white; padding: 10px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .avatar { margin-right: 10px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .author-name { color: #264484; font-size: 14px; font-weight: 600; margin-bottom: 5px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-date { color: #777; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-body { font-size: 14px; margin: 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid rgb(221, 223, 226); } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-controls { height: 30px; border-bottom: 1px solid rgb(221, 223, 226); } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-controls .control { margin-right: 30px; margin-bottom: 10px; font-weight: 600; color: #777; line-height: 30px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-controls .control .fa { font-size: 16px; margin-top: 5px; } /* comments */ :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments { padding: 10px; background-color: #f6f7fa; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment img { max-width: 52px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment textarea { height: 40px; padding: 10px; width: 100%; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment .btn { background-color: #264484; color: white; margin: 10px; font-size: 12px; padding: 5px 7px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment { margin-bottom: 10px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment .avatar { max-width: 40px; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment .comment-author { color: #264484; font-weight: 600; } :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment .comment-date { color: #777; } /* facebook-simulation.less:422 - flat in the source too */ :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment .btn, :where(.cl-mcont) .facebook-feed-window .author-post .author-post-footer button { border: none; } /* facebook-simulation.less:443 - the FaceSpace wordmark glyph */ :where(.cl-mcont) .face-space-icon::before { content: "F"; font-weight: bold; font-family: "Courier New"; } /* ========================================================================== 6. HOSTING THE REAL COMPONENTS Everything above this point is the page. Everything between the two rules marked EXTRACTED is the running product, reproduced without edits. This last block is the seam between them, and it is deliberately short: four rules that let a fixed-width platform window live inside a drawing of a monitor, and one documented set of contrast repairs. ========================================================================== */ /* The platform scrolls its feed with overflow-y:auto inside a Kendo window that has a real height. There is no Kendo here, so the column grows to fit its content and that overflow rule can only produce a scrollbar in the picture. The window body crops instead, at the window's own bottom edge, and the feed is moved by transform, which is what the sequence animates. */ .sxw-tw .twitter-feed-window .twitter-feed-container{ overflow:hidden; } .sxw-tw .twitter-feed-window .twitcher-list{ will-change:transform; } .cl-mcont .facebook-feed-window .facebook-feed{ will-change:transform; } .wk-win{ transform-origin:50% 26%; } #wk-win-l{ visibility:hidden; } /* The compose overlay. The real