signal-desktop/stylesheets/_settings.scss

117 lines
1.9 KiB
SCSS
Raw Normal View History

2020-10-30 20:34:04 +00:00
// Copyright 2016-2020 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.settings {
user-select: none;
&.modal {
padding: 0;
background-color: transparent;
2021-06-01 20:45:43 +00:00
z-index: 1;
.content {
margin: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 450px;
border-radius: 0;
box-shadow: 0px 0px 0px 0px;
}
}
hr {
margin: 10px 0;
2019-10-04 18:06:17 +00:00
@include dark-theme {
border-color: $color-gray-45;
}
}
New design for import/install, 'light' import (#2053) - A new design for the import flow. It features: - Icons at the top of every screen - Gray background, blue buttons, thinner text - Simpler copy - A new design for the install flow. It features: - Immediate entry into the QR code screen - Animated dots to show that we're loading the QR code from the server - Fewer screens: 1) QR 2) device name 3) sync-in-progress - When not set up, the app opens directly into the install screen, which has been streamlined. The `--import` command-line argument will cause the app to open directly into the import flow. - Support for two different flavors of builds - the normal build will open into the standard registration flow, and the import flavor will be exactly the same except during setup it will open directly into the import flow. - A new design for the (dev-only) standalone registration view - When these install sequences are active, the OS File menu has entries to allow you to switch the method of setup you'd like to use. These go away as soon as the first step is taken in any of these flows. - The device name (chosen on initial setup) is now shown in the settings panel - At the end of a light import, we hand off to the normal device link screen, starting at the QR code. On a full import, we remove the sensitive encryption information in the export to prevent conflicts on multiple imports. - `Whisper.Backup.exportToDirectory()` takes an options object so you can tell it to do a light export. - `Whisper.Backup.importFromDirectory()` takes an options object so you can force it to load only the light components found on disk. It also returns an object so you can tell whether a given import was a full import or light import. - On start of import, we build a list of all the ids present in the messages, conversations, and groups stores in IndexedDB. This can take some time if a lot of data is in the database already, but it makes the subsequent deduplicated import very fast. - Disappearing messages are now excluded when exporting - Remove some TODOs in the tests
2018-02-22 18:40:32 +00:00
.device-name-settings {
text-align: center;
margin-bottom: 1em;
}
.syncSettings {
button {
float: right;
line-height: 36px;
padding: 0 20px;
margin: 0 0 20px 20px;
}
.synced_at {
2019-10-17 18:22:07 +00:00
@include font-body-2;
2019-10-04 18:06:17 +00:00
color: $color-gray-60;
}
.sync_failed {
2018-05-04 20:07:52 +00:00
display: none;
2019-10-17 18:22:07 +00:00
@include font-body-2;
2019-10-04 18:06:17 +00:00
color: $color-accent-red;
}
}
.restart-needed {
margin-top: 1em;
}
.clear-data-settings {
button {
float: right;
line-height: 36px;
padding: 0 20px;
margin: 0 0 20px 20px;
}
.destructive {
2019-10-04 18:06:17 +00:00
background-color: $color-accent-red;
color: $color-white;
}
}
2019-01-16 03:03:56 +00:00
.send-link-previews-setting {
margin-top: 0.75em;
}
.description {
margin-top: 0.3em;
margin-left: 1.5em;
}
2020-06-04 18:16:19 +00:00
.detail {
margin-top: 0.3em;
margin-left: 1.5em;
@include font-body-2;
color: $color-gray-60;
}
2021-06-01 20:45:43 +00:00
.disappearing-messages-setting {
&__timer {
display: flex;
flex-direction: row;
align-items: center;
&__label {
flex-grow: 1;
margin-right: 20px;
}
margin-bottom: 10px;
&__right {
position: relative;
&__info {
position: absolute;
@include font-subtitle;
padding-left: 14px;
}
}
&--with-info {
margin-bottom: 16px;
}
}
&__footer {
@include font-body-2;
color: $color-gray-60;
}
}
}