// Copyright 2015 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only html { height: 100%; cursor: inherit; body.dark-theme { color-scheme: dark; } } body { position: relative; height: 100%; width: 100%; margin: 0; color: $color-gray-90; @include font-family; @include font-body-1; &.light-theme { background-color: $color-white; color: $color-gray-90; } &.dark-theme { background-color: $color-gray-95; color: $color-gray-05; } &.is-resizing-left-pane { cursor: col-resize; } } input, button, select, optgroup, textarea { font-family: inherit; } [contenteditable] { -webkit-user-modify: read-write-plaintext-only; } // This is a bugfix for browsers that implement dir="auto" wrong. // // Spec: https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute // > 2. If result is null, then return the parent directionality of element. // // Chrome is defaulting to ltr all the time, which breaks cursors on empty // inputs, textareas, and contenteditable elements. [dir='auto'] { &:is( input[value=""], input:not([value]), :not(input):empty, /* Fix for https://developer.mozilla.org/en-US/docs/Web/CSS/:empty#browser_compatibility */ :has(> br:only-child) ) { :dir(ltr) > & { /* stylelint-disable-next-line declaration-property-value-disallowed-list */ direction: ltr; } :dir(rtl) > & { /* stylelint-disable-next-line declaration-property-value-disallowed-list */ direction: rtl; } } } ::-webkit-scrollbar { // For vertical scrollbars width: 9px; // For horizontal scrollbars height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { @include light-theme { background: $color-gray-25; border: 2px solid $color-white; } @include dark-theme { background: $color-gray-45; border: 2px solid $color-gray-90; } &:hover { @include light-theme { background: $color-gray-45; } @include dark-theme { background: $color-gray-25; } } } ::-webkit-scrollbar-corner { @include light-theme { background: $color-white; } @include dark-theme { background: $color-black; } } audio { max-width: 100%; } .dark-overlay { position: absolute; top: 0; inset-inline: 0; bottom: 0; opacity: 0.25; z-index: $z-index-popup-overlay; @include light-theme { background-color: $color-black; } @include dark-theme { background-color: $color-gray-95; } } .clearfix:before, .clearfix:after { display: table; content: ' '; } .clearfix:after { clear: both; } .hide { display: none; } button { cursor: pointer; font-size: inherit; -webkit-app-region: no-drag; } button.grey { border-radius: 5px; border: solid 1px $color-gray-25; cursor: pointer; margin-block: 1em; margin-inline: auto; padding: 1em; font-family: inherit; @include light-theme { color: $color-gray-60; background: $color-gray-02; box-shadow: 0 0 10px -5px $color-black-alpha-40; } @include dark-theme { border: solid 1px $color-gray-25; color: $color-gray-60; background: $color-gray-02; box-shadow: 0 0 10px -5px $color-white-alpha-60; } &:hover { @include light-theme { box-shadow: 0 0 10px -3px $color-black-alpha-60; } @include dark-theme { box-shadow: 0 0 10px -3px $color-white-alpha-80; } } &[disabled='disabled'] { &, &:hover { opacity: 0.5; box-shadow: none; cursor: default; } } } a { @include light-theme { color: $color-ultramarine; } @include dark-theme { color: $color-gray-05; } } $loading-height: 16px; .loading { position: relative; &::before { display: block; margin-block: 0px; margin-inline: auto; content: ' '; height: $loading-height; width: $loading-height; border-radius: 2 * $loading-height; animation: rotate 1s linear infinite; border: solid 3px; border-color: $color-ios-blue-tint $color-ios-blue-tint $color-gray-02 $color-gray-02 !important; } } .x { display: inline-block; float: inline-end; cursor: pointer; border-radius: 50%; width: 22px; height: 22px; padding: 3px; background: $color-gray-60; &:before { content: ''; display: block; width: 100%; height: 100%; @include color-svg('../images/icons/v3/x/x.svg', $color-white); } } @keyframes loading { 50% { transform: scale(1); opacity: 1; } 100% { opacity: 0.3; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .app-migration-screen { display: flex; flex-direction: column; } .app-loading-screen { z-index: $z-index-on-top-of-everything; position: absolute; inset-inline: 0; top: 0; bottom: 0; padding-block: 0; padding-inline: 16px; /* Note: background-color is intentionally transparent until body has the * theme class. */ @include explicit-light-theme { background-color: $color-ultramarine-icon; } @include dark-theme { background-color: $color-gray-95; } color: $color-white; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; .container { display: flex; gap: 7px; margin-block: 6px 22px; margin-inline: 0; .dot { width: 14px; height: 14px; border: 3px solid $color-white; border-radius: 50%; float: inline-start; margin-block: 0; margin-inline: 6px; transform: scale(0); animation: loading 1500ms ease infinite 0ms; &:nth-child(2) { animation: loading 1500ms ease infinite 333ms; } &:nth-child(3) { animation: loading 1500ms ease infinite 666ms; } } } &__progress { &--container { animation: fade-in 150ms ease 1 0ms; background: $color-white-alpha-20; border-radius: 2px; height: 4px; max-width: 400px; overflow: hidden; width: 100%; margin-block: 12px 26px; margin-inline: 0; } &--bar { background: $color-white; border-radius: 2px; display: block; height: 100%; width: 100%; &:dir(ltr) { // stylelint-disable-next-line declaration-property-value-disallowed-list transform: translateX(-100%); } &:dir(rtl) { // stylelint-disable-next-line declaration-property-value-disallowed-list transform: translateX(100%); } transition: transform 500ms linear; } } .message { animation: fade-in 150ms ease 1 0ms; max-width: 35em; } .message-placeholder { height: 20px; } } .full-screen-flow { position: absolute; inset-inline: 0; top: 0; bottom: 0; &.overlay { z-index: $z-index-popup-overlay; } color: $color-black; a { color: $color-ultramarine; } background: linear-gradient( to bottom, /* (1 - 0.41) * 255 + 0.41 * 213*/ rgb(238, 238, 238) 0%, /* (1 - 0.19) * 255 + 0.19 * 191*/ rgb(243, 243, 243) 12%, rgb(255, 255, 255) 27%, rgb(255, 255, 255) 60%, /* (1 - 0.19) * 255 + 0.19 * 222*/ rgb(249, 249, 249) 85%, /* (1 - 0.27) * 255 + 0.27 * 98 */ rgb(213, 213, 213) 100% ); display: flex; align-items: center; text-align: center; font-size: 10pt; input { margin-top: 1em; font-size: 12pt; border: 2px solid $color-ultramarine; padding: 0.5em; text-align: center; width: 20em; } @media (min-height: 750px) and (min-width: 700px) { font-size: 14pt; input { font-size: 16pt; } } .header { font-weight: normal; line-height: 1em; margin-bottom: 1.5em; font-size: 20pt; @media (min-height: 750px) and (min-width: 700px) { font-size: 28pt; } } .body-text { max-width: 22em; text-align: start; margin-inline: auto; } .body-text-wide { max-width: 30em; text-align: start; margin-inline: auto; } form { height: 100%; width: 100%; } .step { height: 100%; width: 100%; padding-block: 70px 50px; padding-inline: 0; } .step-body { margin-inline: auto; max-width: 35em; } .inner { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } .banner-image { margin: 1em; display: none; @media (min-height: 550px) { display: inline-block; height: 10em; width: 10em; } } .banner-icon { display: none; margin: 1em; // 640px by 338px is the smallest the window can go @media (min-height: 550px) { display: inline-block; height: 10em; width: 10em; } // generic &.check-circle-outline { @include color-svg( '../images/full-screen-flow/check-circle-outline.svg', $color-gray-15 ); } &.alert-outline { @include color-svg( '../images/full-screen-flow/alert-outline.svg', $color-gray-15 ); } // import and export &.folder-outline { @include color-svg( '../images/full-screen-flow/folder-outline.svg', $color-gray-15 ); } &.import { @include color-svg( '../images/full-screen-flow/import.svg', $color-gray-15 ); } // registration process &.lead-pencil { @include color-svg( '../images/full-screen-flow/lead-pencil.svg', $color-gray-15 ); } &.sync { @include color-svg('../images/full-screen-flow/sync.svg', $color-gray-15); } // delete &.alert-outline-red { @include color-svg( '../images/full-screen-flow/alert-outline.svg', $color-accent-red ); } &.delete { @include color-svg( '../images/full-screen-flow/delete.svg', $color-gray-15 ); } } .button { cursor: pointer; display: inline-block; border: none; min-width: 300px; padding: 0.75em; margin-top: 1em; margin-inline: 0.5em; color: $color-white; background: $color-ultramarine; box-shadow: 2px 2px 4px $color-black-alpha-40; font-size: 12pt; &.neutral { color: $color-black; background: $color-gray-15; } &.destructive { background: $color-accent-red; } @media (min-height: 750px) and (min-width: 700px) { font-size: 20pt; } &:disabled { background-color: $color-gray-20; cursor: auto; } } button.link { @include button-reset; display: block; margin-block: 0.5em; margin-inline: auto; text-align: center; text-decoration: underline; color: $color-ultramarine; &:disabled { color: $color-gray-20; cursor: auto; } } a.link { display: block; cursor: pointer; text-decoration: underline; margin: 0.5em; color: $color-ultramarine; } .progress { text-align: center; padding: 1em; width: 80%; margin: auto; .bar-container { height: 1em; margin: 1em; background-color: $color-gray-02; } .bar { width: 100%; height: 100%; background-color: $color-ios-blue-tint; transition: width 0.25s; box-shadow: 2px 2px 4px $color-black-alpha-40; } } .nav { width: 100%; bottom: 50px; margin-top: auto; padding-bottom: 2em; padding-inline: 20px; .instructions { text-align: start; margin-inline: auto; margin-bottom: 2em; margin-top: 2em; max-width: 30em; } .instructions:after { clear: both; } .android { float: inline-start; } .apple { float: inline-end; } .label { float: inline-start; } .body { float: inline-start; } } } //yellow border fix .inbox:focus { outline: none; } .inbox { position: relative; } .overflow-hidden { overflow: hidden; } @keyframes rotate { to { transform: rotate(360deg); } }