FediAct/src/content_styles.css

/*
    Normal stylings
*/

:root { /* Modal Vars */
    --bg: #eee;
    --fg: #494949;
    --border: rgba(120,120,130,0.3);
    --hover: rgba(100,100,130,0.2);
    --confirmation: rgb(38, 133, 0);
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #24262d;
        --fg: white;
    }
}

/* Styles for the mute/block modal popup */

.fediactmodal {
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    margin: 0;
    padding: 0;
    display: flex;
    font-size: 1rem;
    animation: fadeIn .2s;
}

.fediactmodalinner {
    background-color: var(--bg);
    border: 1px solid var(--border);
	width: 80%;
	max-width: 300px;
	margin: auto;
	padding: .4em;
    border-radius: 8px;
    animation: scaleInSmall .2s;
}
.fediactmodalitem {
    position: relative;
    display: block;
	padding: .7em;
    border-radius: 6px;
    cursor: pointer;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
    transition: background-color .4s;
}
.fediactmodalitem:hover, .fediactmodalitem:focus-within {
    background-color: var(--hover);
}
.fediactmodallink {
    display: flex;
    align-items: center;
    cursor: pointer;
	text-decoration: none;
	color: var(--fg);
    margin: -.7em;
    padding: .7em;
    border-radius: inherit;
    box-shadow: inset 0 0 0 var(--confirmation);
    transition: padding .2s, color .2s, box-shadow .2s cubic-bezier(.2,.2,0,1);
}
.fediactmodallink span:not(:first-of-type) {
    position: absolute;
    right: .7em;
    font-size: .8em;
    padding: .2em .4em;
    border-radius: 4px;
    background-color: white;
    color: var(--confirmation);
    animation: scaleInFadeSmall .2s;
}
.fediactmodallink.activated {
    box-shadow: inset 300px 0 0 var(--confirmation);
    color: white;
    font-weight: 600;
}

/* Styles for "resolving..." indicator */
.fediactprocessing {
    display: inline-block;
    margin: auto 10px;
    animation: spin 2s infinite linear;
    width: 1em;
    height: 1em;
    border-radius: 1em;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-top-color: transparent;
    position: relative;
    box-sizing: border-box;
    opacity: .8;
}
.fediactprocessing::after {
    content: "";
    border: inherit;
    border-radius: inherit;
    animation: inherit;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    position: absolute;
    inset: -2px;
}

/* Styles for unresolved indicator */

.fediactunresolved {
    color: orange;
    font-weight: bold;
    padding-right: 10px;
    padding-left: 10px
}

/* Styles for after a poll was voted */

.fediactvoted {
    font-style: italic;
}

.fediactvoted > a {
    font-weight: bold !important;
    color: orange !important;
}

/* Inserted in the bottom right of any external instance where FediAct is running */

.fediacticon {
    height: 32px;
    width: 32px;
    position: fixed;
    z-index: 99998;
    bottom: 15px;
    right: 10px;
    background: url('data:image/png;base64,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');
    background-size: 32px 32px;
    cursor: pointer;
}

.fediactsettings_onsite {
    position: fixed;
    z-index: 99998;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    margin: 0;
    padding: 0;
    display: none;
}

.fediactsettings_onsite  .fediactsettings_onsite_inner {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 10px 15px;
    background: white;
    border-radius: 5px;
}

.fediactsettings_onsite  .fediactsettings_onsite_inner a {
    color: blue !important;
}

/* Keyframes */

@keyframes fadeIn {
    from {
        filter: opacity(0);
    }
}
@keyframes fadeOut {
    to {
        filter: opacity(0);
    }
}
@keyframes scaleInSmall {
    from {
        transform: scale(.98);
    }
}
@keyframes scaleInFadeSmall {
    from {
        transform: scale(.98);
        filter: opacity(0);
    }
}
@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}


/*  
    We insert these styles for the DOMNodeAppeared function as separate stylesheet (see manifest) to fix
    Firefox blocking script-inserted <style> elements due to the site's CSP (long time bug)
*/

@-moz-keyframes nodeInserted { 
    from {
        opacity: 1;
    } to {
        opacity: 1;
    }
}
@-webkit-keyframes nodeInserted { 
    from {
        opacity: 1;
    } to {
        opacity: 1;
    }
}
@-ms-keyframes nodeInserted { 
    from {
        opacity: 1;
    } to {
        opacity: 1;
    }
}
@-o-keyframes nodeInserted {
    from {
        opacity: 1;
    } to {
        opacity: 1;
    }
}
@keyframes nodeInserted { 
  from { 
      opacity: 1;
  } to {
      opacity: 1;
  }
}

div.status,
div.detailed-status,
div.detailed-status__action-bar,
div.account__header button.logo-button,
div.account__header button.button--follow,
div.public-account-header a.logo-button,
div.account-card a.logo-button,
div.directory-card a.icon-button,
div.detailed-status a.logo-button,
button.remote-button,
script#initial-state { 
    -webkit-animation-name: nodeInserted !important;
    -webkit-animation-duration: 0.001s !important;
    -ms-animation-name: nodeInserted !important;
    -ms-animation-duration: 0.001s !important;
    -moz-animation-name: nodeInserted !important;
    -moz-animation-duration: 0.001s !important;
    -o-animation-name: nodeInserted !important;
    -o-animation-duration: 0.001s !important;
    animation-name: nodeInserted !important;
    animation-duration: 0.001s !important;
}