src/content_script.css (300 lines of code) (raw):

body { --fbc-blue-60: #0060df; --fbc-blue-70: #003eaa; --fbc-gray-20: #ededf0; --fbc-light-gray: #F0F0F4; --fbc-white: #ffffff; --fbc-transition: all .15s cubic-bezier(.07,.95,0,1); --fbc-borders: 1px solid #ededf0; --fbc-primary-text: #15141A; --fbc-secondary-text: #5B5B66; --fbc-font-size: 13px; } .fbc-container { font-size: var(--fbc-font-size); font-weight: 400; color: var(--fbc-primary-text); background: var(--fbc-white); font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } /* Button Replacement */ .fbc-loginButton { background-size: contain; background-position: center; background-repeat: none; cursor: pointer; } .fbc-loginButton.fbc-size-large.fbc-button-type-continue_with { height: 40px; width: 252px; background-image: url(/img/login_continue_large.png); } .fbc-loginButton.fbc-size-medium.fbc-button-type-continue_with { height: 28px; width: 180px; background-image: url(/img/login_continue_medium.png); } .fbc-loginButton.fbc-size-small.fbc-button-type-continue_with { height: 20px; width: 154px; background-image: url(/img/login_continue_small.png); } .fbc-loginButton.fbc-size-large.fbc-button-type-login_width { height: 40px; width: 236px; background-image: url(/img/login_login_large.png); } .fbc-loginButton.fbc-size-medium.fbc-button-type-login_width { height: 28px; width: 166px; background-image: url(/img/login_login_medium.png); } .fbc-loginButton.fbc-size-small.fbc-button-type-login_width { height: 20px; width: 62px; background-image: url(/img/login_login_small.png); } /* Overlay */ .fbc-badge { all: initial; position: absolute; z-index: 100; transition: opacity 0.2s ease-out; --fbc-transition: all .15s cubic-bezier(.07,.95,0,1) } .fbc-badge.fbc-badge-disabled { display: none; visibility: hidden; opacity: 0; } .fbc-badge-fence { display: block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); background-position: center center; background-size: 16px auto, 100%; background-image: url(/img/fence-large.svg), linear-gradient(-45deg, #6200A4, #D70022); background-repeat: no-repeat; border-radius: 100%; width: 28px; height: 28px; padding: 0; border: 1px solid white; cursor: pointer; } .fbc-badge.fbc-badge-small .fbc-badge-fence { background-size: 7px auto, 100%; background-image: url(/img/fence-small.svg), linear-gradient(-45deg, #6200A4, #D70022); width: 17px; height: 17px; } .fbc-badge.fbc-badge-fixed { position: fixed; } .fbc-badge:hover .fbc-badge-tooltip { display: block; } .fbc-badge-share.fbc-badge-tooltip-active .fbc-badge-tooltip { display: block; } .fbc-badge.active:hover .fbc-badge-tooltip { display: none; } .fbc-badge.active .fbc-badge-prompt { display: block; } .fbc-badge-share-passive:hover { display: block; visibility: visible; opacity: 1; } /* Only show first Share badge */ .fbc-badge-share-passive, .fbc-badge-share-passive.fbc-badge-share:not(.fbc-badge-disabled), .fbc-badge-share.fbc-badge-disabled, .fbc-badge-share:not(.fbc-badge-disabled):not(.fbc-badge-tooltip-active) ~ .fbc-badge-share:not(.fbc-badge-disabled):not(.fbc-badge-tooltip-active) { display: none; visibility: hidden; opacity: 0; } .fbc-badge-share:not(.fbc-badge-disabled), .fbc-badge-share.fbc-badge-tooltip-active:not(.fbc-badge-disabled) { display: block; visibility: visible; opacity: 1; } .fbc-wrapper{ position: fixed; height: 100%; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 999999999999; background-color: rgba(0, 0, 0, 0.1); } .fbc-wrapper iframe { color: var(--black); box-shadow: 0 5px 12px 0 rgba(0,0,0,0.2); border: 1px solid rgba(0,0,0,0.2); background: var(--fbc-white); border-radius: 8px; line-height: 120%; } .fbc-iframe-chevron { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid rgb(255, 255, 255); position: absolute; left: 1px; z-index: 9999999; } .fbc-chevron-arrow-right { transform: rotate(180deg); left: -1px; } .fbc-chevron-arrow-top { transform: rotate(90deg); top: -4px; } .fbc-badge-prompt-align-right iframe { left: auto; right: calc( 100% + 20px); } .fbc-badge-prompt-align-right iframe { left: auto; right: -10px; border-width: 10px 0 10px 10px; } .fbc-badge-prompt-align-top iframe { top: -7px; transform: none; } .fbc-badge-prompt-align-top iframe:after { top: 16px; } .fbc-badge-prompt-align-bottom iframe { top: auto; bottom: -20px; transform: none; } .fbc-badge-prompt-align-bottom iframe:after { display: none; } .fbc-badge-prompt h1, .fbc-title { all: unset; letter-spacing: -0.1px; font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; font-size: 13px; font-weight: 700; display: flex; width: 100%; margin: 0; line-height: 0; padding: 15px 0 20px 0; border-bottom: 1px solid var(--fbc-light-gray); justify-content: center; align-items: center; text-align: center; color: var(--fbc-primary-text); } .fbc-badge-prompt p { line-height: 140%; } .fbc-subtitle-login, .fbc-subtitle-email { color: var(--fbc-primary-text); font-weight: 500; } .fbc-badge-prompt-contents { padding: 4px 8px; background: var(--fbc-white); } .fbc-badge-prompt form { all: unset; display: flex; justify-content: flex-start; align-items: center; } .fbc-badge-prompt-dontShowAgain-checkbox { gap: 8px; margin-bottom: 16px; } .fbc-badge-prompt input[type=checkbox] { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; margin: 0; background-color: var(--fbc-light-gray); border: 1px solid #8F8F9D; border-radius: 2px; height: 13px; width: 13px; line-height: 14px; cursor: pointer; } .fbc-badge-prompt input[type=checkbox]:checked { appearance: checkbox; } .fbc-badge-prompt label { color: var(--fbc-secondary-text); margin: 0; cursor: pointer; } .fbc-badge-prompt-dontShowAgain-checkbox { display: flex; align-items: center; gap: 8px; } .fbc-badge-prompt-buttons { width: 100%; z-index: 0; display: flex; gap: 8px; justify-content: end; } .fbc-badge-prompt-buttons button { font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; display: inline-block; width: auto; padding: 8px 16px; border-radius: 4px; appearance: none; border: 0; font-size: 13px; font-weight: 500; color: var(--fbc-primary-text); background: var(--fbc-light-gray); transition: var(--fbc-transition); cursor: pointer; text-align: center; } .fbc-badge-prompt-buttons button:focus { border-top: 1px solid #cfcfd8; } .fbc-badge-prompt-buttons button:hover { background: #E9E9E9; } /* Tooltip */ .fbc-badge-tooltip { display: none; padding: 5px 10px 10px; width: 250px; max-width: 250px; background: var(--fbc-white); z-index: 9999; position: absolute; left: calc( 100% + 0.5em); top: 50%; color: black; font-size: 13px; line-height: 17px; border: 1px solid #BEBEBF; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important; } .fbc-badge-prompt-align-right .fbc-badge-tooltip { left: auto; right: calc( 100% + 0.5em ); } .fbc-badge-prompt-align-bottom .fbc-badge-tooltip { top: auto; bottom: 25%; } #fbc-email.is-hidden, #fbc-login.is-hidden { display: none; }