Upgrade sass

This commit is contained in:
Jamie Kyle 2024-11-15 15:09:31 -08:00 committed by GitHub
parent e819bfe4eb
commit 8e3b8b92fd
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
165 changed files with 8663 additions and 6514 deletions

375
package-lock.json generated
View file

@ -230,7 +230,7 @@
"protobufjs-cli": "1.1.1",
"resedit": "2.0.2",
"resolve-url-loader": "5.0.0",
"sass": "1.49.7",
"sass": "1.80.7",
"sass-loader": "16.0.3",
"sinon": "19.0.2",
"storybook": "8.4.3",
@ -3857,6 +3857,324 @@
"@octokit/openapi-types": "^12.11.0"
}
},
"node_modules/@parcel/watcher": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
"integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
"dependencies": {
"detect-libc": "^1.0.3",
"is-glob": "^4.0.3",
"micromatch": "^4.0.5",
"node-addon-api": "^7.0.0"
},
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"@parcel/watcher-android-arm64": "2.5.0",
"@parcel/watcher-darwin-arm64": "2.5.0",
"@parcel/watcher-darwin-x64": "2.5.0",
"@parcel/watcher-freebsd-x64": "2.5.0",
"@parcel/watcher-linux-arm-glibc": "2.5.0",
"@parcel/watcher-linux-arm-musl": "2.5.0",
"@parcel/watcher-linux-arm64-glibc": "2.5.0",
"@parcel/watcher-linux-arm64-musl": "2.5.0",
"@parcel/watcher-linux-x64-glibc": "2.5.0",
"@parcel/watcher-linux-x64-musl": "2.5.0",
"@parcel/watcher-win32-arm64": "2.5.0",
"@parcel/watcher-win32-ia32": "2.5.0",
"@parcel/watcher-win32-x64": "2.5.0"
}
},
"node_modules/@parcel/watcher-android-arm64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
"integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-arm64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
"integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-x64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
"integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-freebsd-x64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
"integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-glibc": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
"integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-musl": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
"integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-glibc": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
"integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-musl": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
"integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-glibc": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
"integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-musl": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
"integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-arm64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
"integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-ia32": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
"integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-x64": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
"integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher/node_modules/node-addon-api": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
"dev": true,
"license": "MIT",
"optional": true
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@ -19111,10 +19429,11 @@
}
},
"node_modules/immutable": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
"integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
"dev": true
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.2.tgz",
"integrity": "sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==",
"dev": true,
"license": "MIT"
},
"node_modules/import-fresh": {
"version": "3.3.0",
@ -27854,20 +28173,24 @@
"integrity": "sha512-Ox0X2lk0kOGeODJgT9S9HFv0j5Cz89ir9ILylj62/vejHPdMmahmetfocoQwyiAnseeXyDa+KIbO6ZQJe5n2Lg=="
},
"node_modules/sass": {
"version": "1.49.7",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
"integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
"version": "1.80.7",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.80.7.tgz",
"integrity": "sha512-MVWvN0u5meytrSjsU7AWsbhoXi1sc58zADXFllfZzbsBT1GHjjar6JwBINYPRrkx/zqnQ6uqbQuHgE95O+C+eQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=12.0.0"
"node": ">=14.0.0"
},
"optionalDependencies": {
"@parcel/watcher": "^2.4.1"
}
},
"node_modules/sass-loader": {
@ -27911,6 +28234,36 @@
}
}
},
"node_modules/sass/node_modules/chokidar": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
"integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
"dev": true,
"license": "MIT",
"dependencies": {
"readdirp": "^4.0.1"
},
"engines": {
"node": ">= 14.16.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/sass/node_modules/readdirp": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
"integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 14.16.0"
},
"funding": {
"type": "individual",
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/sax": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",

View file

@ -314,7 +314,7 @@
"protobufjs-cli": "1.1.1",
"resedit": "2.0.2",
"resolve-url-loader": "5.0.0",
"sass": "1.49.7",
"sass": "1.80.7",
"sass-loader": "16.0.3",
"sinon": "19.0.2",
"storybook": "8.4.3",

View file

@ -2,7 +2,9 @@
// SPDX-License-Identifier: AGPL-3.0-only
@mixin light-theme() {
@content;
& {
@content;
}
}
@mixin dark-theme() {

View file

@ -1,6 +1,9 @@
// Copyright 2015 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use 'mixins';
@use 'variables';
html {
height: 100%;
cursor: inherit;
@ -16,18 +19,18 @@ body {
width: 100%;
margin: 0;
color: $color-gray-90;
color: variables.$color-gray-90;
@include font-family;
@include font-body-1;
@include mixins.font-family;
@include mixins.font-body-1;
&.light-theme {
background-color: $color-white;
color: $color-gray-90;
background-color: variables.$color-white;
color: variables.$color-gray-90;
}
&.dark-theme {
background-color: $color-gray-95;
color: $color-gray-05;
background-color: variables.$color-gray-95;
color: variables.$color-gray-05;
}
&.is-resizing-left-pane {
@ -87,31 +90,31 @@ textarea {
::-webkit-scrollbar-thumb {
border-radius: 4px;
@include light-theme {
background: $color-gray-25;
border: 2px solid $color-white;
@include mixins.light-theme {
background: variables.$color-gray-25;
border: 2px solid variables.$color-white;
}
@include dark-theme {
background: $color-gray-45;
border: 2px solid $color-gray-90;
@include mixins.dark-theme {
background: variables.$color-gray-45;
border: 2px solid variables.$color-gray-90;
}
&:hover {
@include light-theme {
background: $color-gray-45;
@include mixins.light-theme {
background: variables.$color-gray-45;
}
@include dark-theme {
background: $color-gray-25;
@include mixins.dark-theme {
background: variables.$color-gray-25;
}
}
}
::-webkit-scrollbar-corner {
@include light-theme {
background: $color-white;
@include mixins.light-theme {
background: variables.$color-white;
}
@include dark-theme {
background: $color-black;
@include mixins.dark-theme {
background: variables.$color-black;
}
}
@ -126,13 +129,13 @@ audio {
bottom: 0;
opacity: 0.25;
z-index: $z-index-popup-overlay;
z-index: variables.$z-index-popup-overlay;
@include light-theme {
background-color: $color-black;
@include mixins.light-theme {
background-color: variables.$color-black;
}
@include dark-theme {
background-color: $color-gray-95;
@include mixins.dark-theme {
background-color: variables.$color-gray-95;
}
}
@ -156,31 +159,31 @@ button {
}
button.grey {
border-radius: 5px;
border: solid 1px $color-gray-25;
border: solid 1px variables.$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 mixins.light-theme {
color: variables.$color-gray-60;
background: variables.$color-gray-02;
box-shadow: 0 0 10px -5px variables.$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;
@include mixins.dark-theme {
border: solid 1px variables.$color-gray-25;
color: variables.$color-gray-60;
background: variables.$color-gray-02;
box-shadow: 0 0 10px -5px variables.$color-white-alpha-60;
}
&:hover {
@include light-theme {
box-shadow: 0 0 10px -3px $color-black-alpha-60;
@include mixins.light-theme {
box-shadow: 0 0 10px -3px variables.$color-black-alpha-60;
}
@include dark-theme {
box-shadow: 0 0 10px -3px $color-white-alpha-80;
@include mixins.dark-theme {
box-shadow: 0 0 10px -3px variables.$color-white-alpha-80;
}
}
@ -195,12 +198,12 @@ button.grey {
}
a {
@include light-theme {
color: $color-ultramarine;
@include mixins.light-theme {
color: variables.$color-ultramarine;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
}
@ -219,8 +222,8 @@ $loading-height: 16px;
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;
border-color: variables.$color-ios-blue-tint variables.$color-ios-blue-tint
variables.$color-gray-02 variables.$color-gray-02 !important;
}
}
@ -232,14 +235,17 @@ $loading-height: 16px;
width: 22px;
height: 22px;
padding: 3px;
background: $color-gray-60;
background: variables.$color-gray-60;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
@include color-svg('../images/icons/v3/x/x.svg', $color-white);
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-white
);
}
}
@ -268,7 +274,7 @@ $loading-height: 16px;
}
.app-loading-screen {
z-index: $z-index-on-top-of-everything;
z-index: variables.$z-index-on-top-of-everything;
position: absolute;
inset-inline: 0;
top: 0;
@ -279,13 +285,13 @@ $loading-height: 16px;
/* Note: background-color is intentionally transparent until body has the
* theme class.
*/
@include explicit-light-theme {
background-color: $color-white;
color: $color-black-alpha-80;
@include mixins.explicit-light-theme {
background-color: variables.$color-white;
color: variables.$color-black-alpha-80;
}
@include dark-theme {
background-color: $color-gray-95;
color: $color-white-alpha-80;
@include mixins.dark-theme {
background-color: variables.$color-gray-95;
color: variables.$color-white-alpha-80;
}
display: flex;
@ -309,14 +315,16 @@ $loading-height: 16px;
margin-block: 0;
margin-inline: 6px;
transform: scale(0);
@include light-theme {
border-color: $color-black;
@include mixins.light-theme {
border-color: variables.$color-black;
}
@include dark-theme {
border-color: $color-white;
@include mixins.dark-theme {
border-color: variables.$color-white;
}
animation: loading 1500ms ease infinite 0ms;
& {
animation: loading 1500ms ease infinite 0ms;
}
&:nth-child(2) {
animation: loading 1500ms ease infinite 333ms;
}
@ -336,11 +344,11 @@ $loading-height: 16px;
width: 100%;
margin-block: 12px 26px;
margin-inline: 0;
@include light-theme {
background: $color-black-alpha-20;
@include mixins.light-theme {
background: variables.$color-black-alpha-20;
}
@include dark-theme {
background: $color-white-alpha-20;
@include mixins.dark-theme {
background: variables.$color-white-alpha-20;
}
}
@ -359,11 +367,11 @@ $loading-height: 16px;
}
transition: transform 500ms linear;
@include light-theme {
background: $color-black;
@include mixins.light-theme {
background: variables.$color-black;
}
@include dark-theme {
background: $color-white;
@include mixins.dark-theme {
background: variables.$color-white;
}
}
}
@ -383,12 +391,12 @@ $loading-height: 16px;
bottom: 0;
&.overlay {
z-index: $z-index-popup-overlay;
z-index: variables.$z-index-popup-overlay;
}
color: $color-black;
color: variables.$color-black;
a {
color: $color-ultramarine;
color: variables.$color-ultramarine;
}
background: linear-gradient(
to bottom,
@ -407,7 +415,7 @@ $loading-height: 16px;
input {
margin-top: 1em;
font-size: 12pt;
border: 2px solid $color-ultramarine;
border: 2px solid variables.$color-ultramarine;
padding: 0.5em;
text-align: center;
width: 20em;
@ -491,54 +499,57 @@ $loading-height: 16px;
// generic
&.check-circle-outline {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/check-circle-outline.svg',
$color-gray-15
variables.$color-gray-15
);
}
&.alert-outline {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/alert-outline.svg',
$color-gray-15
variables.$color-gray-15
);
}
// import and export
&.folder-outline {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/folder-outline.svg',
$color-gray-15
variables.$color-gray-15
);
}
&.import {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/import.svg',
$color-gray-15
variables.$color-gray-15
);
}
// registration process
&.lead-pencil {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/lead-pencil.svg',
$color-gray-15
variables.$color-gray-15
);
}
&.sync {
@include color-svg('../images/full-screen-flow/sync.svg', $color-gray-15);
@include mixins.color-svg(
'../images/full-screen-flow/sync.svg',
variables.$color-gray-15
);
}
// delete
&.alert-outline-red {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/alert-outline.svg',
$color-accent-red
variables.$color-accent-red
);
}
&.delete {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/delete.svg',
$color-gray-15
variables.$color-gray-15
);
}
}
@ -551,18 +562,18 @@ $loading-height: 16px;
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;
color: variables.$color-white;
background: variables.$color-ultramarine;
box-shadow: 2px 2px 4px variables.$color-black-alpha-40;
font-size: 12pt;
&.neutral {
color: $color-black;
background: $color-gray-15;
color: variables.$color-black;
background: variables.$color-gray-15;
}
&.destructive {
background: $color-accent-red;
background: variables.$color-accent-red;
}
@media (min-height: 750px) and (min-width: 700px) {
@ -570,23 +581,25 @@ $loading-height: 16px;
}
&:disabled {
background-color: $color-gray-20;
background-color: variables.$color-gray-20;
cursor: auto;
}
}
button.link {
@include button-reset;
@include mixins.button-reset;
display: block;
margin-block: 0.5em;
margin-inline: auto;
text-align: center;
text-decoration: underline;
color: $color-ultramarine;
& {
display: block;
margin-block: 0.5em;
margin-inline: auto;
text-align: center;
text-decoration: underline;
color: variables.$color-ultramarine;
}
&:disabled {
color: $color-gray-20;
color: variables.$color-gray-20;
cursor: auto;
}
}
@ -596,7 +609,7 @@ $loading-height: 16px;
cursor: pointer;
text-decoration: underline;
margin: 0.5em;
color: $color-ultramarine;
color: variables.$color-ultramarine;
}
.progress {
@ -608,14 +621,14 @@ $loading-height: 16px;
.bar-container {
height: 1em;
margin: 1em;
background-color: $color-gray-02;
background-color: variables.$color-gray-02;
}
.bar {
width: 100%;
height: 100%;
background-color: $color-ios-blue-tint;
background-color: variables.$color-ios-blue-tint;
transition: width 0.25s;
box-shadow: 2px 2px 4px $color-black-alpha-40;
box-shadow: 2px 2px 4px variables.$color-black-alpha-40;
}
}
@ -651,7 +664,7 @@ $loading-height: 16px;
}
.StandaloneRegistration__error {
color: $color-accent-red;
color: variables.$color-accent-red;
}
}

View file

@ -1,6 +1,11 @@
// Copyright 2016 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use 'sass:map';
@use 'sass:string';
@use 'variables';
// Fonts
@mixin localized-fonts {
@ -32,12 +37,12 @@
}
@mixin font-family {
font-family: $inter;
font-family: variables.$inter;
@include localized-fonts;
}
@mixin time-fonts {
font-family: Hatsuishi, $inter;
font-family: Hatsuishi, variables.$inter;
@include localized-fonts;
}
@ -111,7 +116,9 @@
}
@mixin font-subtitle-bold {
@include font-subtitle;
font-weight: 600;
& {
font-weight: 600;
}
}
@mixin font-caption {
@ -132,7 +139,9 @@
// Themes
@mixin light-theme() {
@content;
& {
@content;
}
}
@mixin explicit-light-theme() {
@ -187,10 +196,10 @@
}
@include light-theme {
background: $color-gray-05;
background: variables.$color-gray-05;
}
@include dark-theme {
background: $color-gray-65;
background: variables.$color-gray-65;
}
}
@ -216,13 +225,13 @@
// Icons
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
$index: string.index($string, $search);
@if $index {
@return (
str-slice($string, 1, $index - 1) + $replace +
string.slice($string, 1, $index - 1) + $replace +
str-replace(
str-slice($string, $index + str-length($search)),
string.slice($string, $index + string.length($search)),
$search,
$replace
)
@ -263,28 +272,30 @@ $rtl-icon-map: (
@function get-rtl-svg($svg) {
@each $ltr, $rtl in $rtl-icon-map {
@if str-index($svg, $ltr) {
@if string.index($svg, $ltr) {
@if $rtl == '' {
@return $ltr;
}
@return str-replace($svg, $ltr, $rtl);
}
}
@if str-index($svg, 'left') or str-index($svg, 'right') {
@if string.index($svg, 'left') or string.index($svg, 'right') {
@error "Missing RTL icon for #{$svg}";
}
@return false;
}
@mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
-webkit-mask: url($svg) no-repeat center;
@if $stretch {
-webkit-mask-size: 100%;
& {
-webkit-mask: url($svg) no-repeat center;
@if $stretch {
-webkit-mask-size: 100%;
}
@if $mask-origin {
-webkit-mask-origin: $mask-origin;
}
background-color: $color;
}
@if $mask-origin {
-webkit-mask-origin: $mask-origin;
}
background-color: $color;
@media (forced-colors: active) {
background-color: WindowText;
}
@ -325,9 +336,11 @@ $rtl-icon-map: (
// Other
@mixin popper-shadow() {
box-shadow:
0px 8px 20px rgba(0, 0, 0, 0.3),
0px 0px 8px rgba(0, 0, 0, 0.05);
& {
box-shadow:
0px 8px 20px rgba(0, 0, 0, 0.3),
0px 0px 8px rgba(0, 0, 0, 0.05);
}
@media (forced-colors: active) {
border: 1px solid WindowText;
@ -335,15 +348,17 @@ $rtl-icon-map: (
}
@mixin button-reset {
background: none;
color: inherit;
border: none;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
outline: inherit;
text-align: inherit;
& {
background: none;
color: inherit;
border: none;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
outline: inherit;
text-align: inherit;
}
@media (forced-colors: active) {
border: 1px solid WindowText;
@ -353,16 +368,18 @@ $rtl-icon-map: (
@mixin staged-attachment-close-button {
@include button-reset;
position: absolute;
top: 4px;
inset-inline-end: 4px;
width: 16px;
height: 16px;
z-index: $z-index-above-base;
& {
position: absolute;
top: 4px;
inset-inline-end: 4px;
width: 16px;
height: 16px;
z-index: variables.$z-index-above-base;
}
}
@mixin calling-text-shadow {
text-shadow: 0 0 4px $color-black-alpha-40;
text-shadow: 0 0 4px variables.$color-black-alpha-40;
}
@mixin lonely-local-video-preview {
@ -380,45 +397,53 @@ $rtl-icon-map: (
@mixin button-focus-outline {
&:focus {
@include keyboard-mode {
box-shadow: 0px 0px 0px 3px $color-ultramarine;
box-shadow: 0px 0px 0px 3px variables.$color-ultramarine;
}
@include dark-keyboard-mode {
box-shadow: 0px 0px 0px 3px $color-ultramarine-light;
box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
}
}
}
@mixin button-blue-text {
@include light-theme {
color: $color-ultramarine;
color: variables.$color-ultramarine;
}
@include dark-theme {
color: $color-ultramarine-light;
color: variables.$color-ultramarine-light;
}
}
// Complete button styles
@mixin button-primary {
background-color: $color-ultramarine;
background-color: variables.$color-ultramarine;
// Note: the background colors here need to match the parent component
@include light-theme {
color: $color-white;
color: variables.$color-white;
border: 1px solid white;
}
@include dark-theme {
color: $color-white-alpha-90;
border: 1px solid $color-gray-95;
color: variables.$color-white-alpha-90;
border: 1px solid variables.$color-gray-95;
}
&:hover {
@include mouse-mode {
background-color: mix($color-black, $color-ultramarine, 15%);
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
15%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-ultramarine, 15%);
background-color: color.mix(
variables.$color-white,
variables.$color-ultramarine,
15%
);
}
}
@ -426,17 +451,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $color-ultramarine, 25%);
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-ultramarine, 25%);
background-color: color.mix(
variables.$color-white,
variables.$color-ultramarine,
25%
);
}
@include keyboard-mode {
background-color: mix($color-black, $color-ultramarine, 25%);
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
}
@include dark-keyboard-mode {
background-color: mix($color-black, $color-ultramarine, 25%);
background-color: color.mix(
variables.$color-black,
variables.$color-ultramarine,
25%
);
}
}
@ -445,21 +486,29 @@ $rtl-icon-map: (
@mixin button-secondary {
@include light-theme {
color: $color-gray-90;
background-color: $color-gray-05;
color: variables.$color-gray-90;
background-color: variables.$color-gray-05;
}
@include dark-theme {
color: $color-gray-05;
background-color: $color-gray-65;
color: variables.$color-gray-05;
background-color: variables.$color-gray-65;
}
&:hover {
@include mouse-mode {
background-color: mix($color-black, $color-gray-05, 15%);
background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
15%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-gray-65, 15%);
background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
15%
);
}
}
@ -467,17 +516,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $color-gray-05, 25%);
background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
25%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-gray-65, 25%);
background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
25%
);
}
@include keyboard-mode {
background-color: mix($color-black, $color-gray-05, 25%);
background-color: color.mix(
variables.$color-black,
variables.$color-gray-05,
25%
);
}
@include dark-keyboard-mode {
background-color: mix($color-white, $color-gray-65, 25%);
background-color: color.mix(
variables.$color-white,
variables.$color-gray-65,
25%
);
}
}
@ -491,21 +556,29 @@ $rtl-icon-map: (
@mixin button-light {
@include light-theme {
color: $color-gray-90;
background-color: $color-gray-02;
color: variables.$color-gray-90;
background-color: variables.$color-gray-02;
}
@include dark-theme {
color: $color-gray-05;
background-color: $color-gray-75;
color: variables.$color-gray-05;
background-color: variables.$color-gray-75;
}
&:hover {
@include mouse-mode {
background-color: mix($color-black, $color-gray-02, 10%);
background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
10%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-gray-75, 10%);
background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
10%
);
}
}
@ -513,17 +586,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $color-gray-02, 20%);
background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
20%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-gray-75, 20%);
background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
20%
);
}
@include keyboard-mode {
background-color: mix($color-black, $color-gray-02, 20%);
background-color: color.mix(
variables.$color-black,
variables.$color-gray-02,
20%
);
}
@include dark-keyboard-mode {
background-color: mix($color-white, $color-gray-75, 20%);
background-color: color.mix(
variables.$color-white,
variables.$color-gray-75,
20%
);
}
}
@ -537,21 +626,29 @@ $rtl-icon-map: (
@mixin button-destructive {
@include light-theme {
color: $color-white;
background-color: $color-accent-red;
color: variables.$color-white;
background-color: variables.$color-accent-red;
}
@include dark-theme {
color: $color-white-alpha-90;
background-color: $color-accent-red;
color: variables.$color-white-alpha-90;
background-color: variables.$color-accent-red;
}
&:hover {
@include mouse-mode {
background-color: mix($color-black, $color-accent-red, 15%);
background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
15%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-accent-red, 15%);
background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
15%
);
}
}
@ -559,17 +656,33 @@ $rtl-icon-map: (
// We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $color-accent-red, 25%);
background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
25%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $color-accent-red, 25%);
background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
25%
);
}
@include keyboard-mode {
background-color: mix($color-black, $color-accent-red, 25%);
background-color: color.mix(
variables.$color-black,
variables.$color-accent-red,
25%
);
}
@include dark-keyboard-mode {
background-color: mix($color-white, $color-accent-red, 25%);
background-color: color.mix(
variables.$color-white,
variables.$color-accent-red,
25%
);
}
}
@ -577,26 +690,42 @@ $rtl-icon-map: (
}
@mixin button-green {
$background-color: $color-accent-green;
$background-color: variables.$color-accent-green;
background-color: $background-color;
color: $color-white;
color: variables.$color-white;
&:active {
// We need to include all four here for specificity precedence
@include mouse-mode {
background-color: mix($color-black, $background-color, 25%);
background-color: color.mix(
variables.$color-black,
$background-color,
25%
);
}
@include dark-mouse-mode {
background-color: mix($color-white, $background-color, 25%);
background-color: color.mix(
variables.$color-white,
$background-color,
25%
);
}
@include keyboard-mode {
background-color: mix($color-black, $background-color, 25%);
background-color: color.mix(
variables.$color-black,
$background-color,
25%
);
}
@include dark-keyboard-mode {
background-color: mix($color-white, $background-color, 25%);
background-color: color.mix(
variables.$color-white,
$background-color,
25%
);
}
}
@ -617,52 +746,57 @@ $rtl-icon-map: (
@mixin modal-reset {
@include popper-shadow();
border-radius: 8px;
margin-block: 0;
margin-inline: auto;
max-height: 100%;
max-width: 360px;
padding: 16px;
position: relative;
width: 95%;
display: flex;
flex-direction: column;
& {
border-radius: 8px;
margin-block: 0;
margin-inline: auto;
max-height: 100%;
max-width: 360px;
padding: 16px;
position: relative;
width: 95%;
display: flex;
flex-direction: column;
}
@include light-theme() {
background: $color-white;
color: $color-gray-90;
background: variables.$color-white;
color: variables.$color-gray-90;
}
@include dark-theme() {
background: $color-gray-95;
color: $color-gray-05;
background: variables.$color-gray-95;
color: variables.$color-gray-05;
}
}
@mixin modal-close-button {
@include button-reset;
position: absolute;
inset-inline-end: 12px;
top: 12px;
& {
position: absolute;
inset-inline-end: 12px;
top: 12px;
height: 24px;
width: 24px;
height: 24px;
width: 24px;
}
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
@include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-75);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
@include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-15);
}
&:focus {
@include keyboard-mode {
background-color: $color-ultramarine;
background-color: variables.$color-ultramarine;
}
@include dark-keyboard-mode {
background-color: $color-ultramarine-light;
background-color: variables.$color-ultramarine-light;
}
}
}
@ -678,27 +812,27 @@ $rtl-icon-map: (
padding: 2px;
width: $bubble-size;
@each $color, $value in $conversation-colors {
@each $color, $value in variables.$conversation-colors {
&--#{$color} {
background-color: $value;
}
}
@each $color, $value in $conversation-colors-gradient {
@each $color, $value in variables.$conversation-colors-gradient {
&--#{$color} {
background-image: linear-gradient(
map-get($value, 'deg'),
map-get($value, 'start'),
map-get($value, 'end')
map.get($value, 'deg'),
map.get($value, 'start'),
map.get($value, 'end')
);
}
}
}
@mixin avatar-colors {
@each $color, $value in $avatar-colors {
@each $color, $value in variables.$avatar-colors {
&--#{$color} {
--bg: #{map-get($value, 'bg')};
--fg: #{map-get($value, 'fg')};
--bg: #{map.get($value, 'bg')};
--fg: #{map.get($value, 'fg')};
background-color: var(--bg);
color: var(--fg);
@ -721,10 +855,10 @@ $rtl-icon-map: (
width: 6px;
@include light-theme {
background: $color-black-alpha-40;
background: variables.$color-black-alpha-40;
}
@include dark-theme {
background: $color-white-alpha-40;
background: variables.$color-white-alpha-40;
}
}
@ -751,26 +885,26 @@ $rtl-icon-map: (
width: 100%;
@include light-theme {
background: $color-white;
color: $color-black;
border-color: $color-gray-15;
background: variables.$color-white;
color: variables.$color-black;
border-color: variables.$color-gray-15;
&:disabled {
background: $color-gray-02;
border-color: $color-gray-05;
color: $color-gray-90;
background: variables.$color-gray-02;
border-color: variables.$color-gray-05;
color: variables.$color-gray-90;
}
}
@include dark-theme {
background: $color-gray-80;
color: $color-gray-05;
border-color: $color-gray-45;
background: variables.$color-gray-80;
color: variables.$color-gray-05;
border-color: variables.$color-gray-45;
&:disabled {
background: $color-gray-95;
border-color: $color-gray-60;
color: $color-gray-20;
background: variables.$color-gray-95;
border-color: variables.$color-gray-60;
color: variables.$color-gray-20;
}
}
@ -778,10 +912,10 @@ $rtl-icon-map: (
outline: none;
@include light-theme {
border-color: $color-ultramarine;
border-color: variables.$color-ultramarine;
}
@include dark-theme {
border-color: $color-ultramarine-light;
border-color: variables.$color-ultramarine-light;
}
}
}
@ -796,13 +930,13 @@ $rtl-icon-map: (
user-select: none;
@include light-theme {
background: $color-gray-02;
color: $color-black;
background: variables.$color-gray-02;
color: variables.$color-black;
}
@include dark-theme {
background: $color-gray-95;
color: $color-white;
background: variables.$color-gray-95;
color: variables.$color-white;
}
h1 {
@ -817,13 +951,13 @@ $rtl-icon-map: (
@mixin timeline-floating-header-node {
@include rounded-corners;
box-shadow: 0 1px 4px $color-black-alpha-20;
box-shadow: 0 1px 4px variables.$color-black-alpha-20;
@include light-theme {
background: $color-white;
background: variables.$color-white;
}
@include dark-theme {
background: $color-gray-80;
background: variables.$color-gray-80;
}
}
@ -879,12 +1013,12 @@ $rtl-icon-map: (
@include scrollbar;
&::-webkit-scrollbar-thumb {
@include light-theme {
background: $color-gray-25;
border-color: $color-gray-04;
background: variables.$color-gray-25;
border-color: variables.$color-gray-04;
}
@include dark-theme {
background: $color-gray-45;
border-color: $color-gray-80;
background: variables.$color-gray-45;
border-color: variables.$color-gray-80;
}
}
}
@ -901,22 +1035,24 @@ $rtl-icon-map: (
@include font-body-2;
@include light-theme {
background-color: $color-gray-04;
color: $color-black;
outline: 1px solid $color-gray-20;
background-color: variables.$color-gray-04;
color: variables.$color-black;
outline: 1px solid variables.$color-gray-20;
}
@include dark-theme {
background-color: $color-gray-80;
color: $color-gray-15;
outline: 1px solid $color-gray-62;
background-color: variables.$color-gray-80;
color: variables.$color-gray-15;
outline: 1px solid variables.$color-gray-62;
}
padding-block: 5px;
padding-inline: 12px;
border-radius: 6px;
filter: drop-shadow(0px 4px 3px $color-black-alpha-16);
pointer-events: none;
& {
padding-block: 5px;
padding-inline: 12px;
border-radius: 6px;
filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-16);
pointer-events: none;
}
}
& .module-tooltip-arrow::before {
@ -928,55 +1064,59 @@ $rtl-icon-map: (
&[data-placement='bottom'] .module-tooltip-arrow::before {
@include light-theme {
border-color: transparent transparent $color-gray-20 transparent;
border-color: transparent transparent variables.$color-gray-20 transparent;
}
@include dark-theme {
border-color: transparent transparent $color-gray-62 transparent;
border-color: transparent transparent variables.$color-gray-62 transparent;
}
margin-top: -14px;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
& {
margin-top: -14px;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
}
}
&[data-placement='bottom'] .module-tooltip-arrow::after {
@include light-theme {
border-bottom-color: $color-gray-04;
border-bottom-color: variables.$color-gray-04;
}
@include dark-theme {
border-bottom-color: $color-gray-80;
border-bottom-color: variables.$color-gray-80;
}
}
&[data-placement='top'] .module-tooltip-arrow::before {
@include light-theme {
border-color: $color-gray-20 transparent transparent transparent;
border-color: variables.$color-gray-20 transparent transparent transparent;
}
@include dark-theme {
border-color: $color-gray-62 transparent transparent transparent;
border-color: variables.$color-gray-62 transparent transparent transparent;
}
margin-top: 0;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
& {
margin-top: 0;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
}
}
&[data-placement='top'] .module-tooltip-arrow::after {
@include light-theme {
border-top-color: $color-gray-04;
border-top-color: variables.$color-gray-04;
}
@include dark-theme {
border-top-color: $color-gray-80;
border-top-color: variables.$color-gray-80;
}
}
}
@mixin button-active-call {
$background: $color-accent-green;
$background: variables.$color-accent-green;
@include font-body-2-bold;
@include rounded-corners;
@ -985,7 +1125,7 @@ $rtl-icon-map: (
width: auto;
align-items: center;
background-color: $background;
color: $color-white;
color: variables.$color-white;
outline: none;
overflow: hidden;
text-overflow: ellipsis;
@ -997,26 +1137,55 @@ $rtl-icon-map: (
@include color-svg(
'../images/icons/v3/video/video-compact-fill.svg',
$color-white
variables.$color-white
);
content: '';
display: block;
height: $icon-size;
margin-inline-end: 4px;
min-width: $icon-size;
width: $icon-size;
& {
content: '';
display: block;
height: $icon-size;
margin-inline-end: 4px;
min-width: $icon-size;
width: $icon-size;
}
}
&:not(:disabled) {
&:hover {
@include any-theme {
background-color: darken($background, 16%);
background-color: color.adjust($background, $lightness: -16%);
}
}
&:focus {
@include keyboard-mode {
background-color: darken($background, 16%);
background-color: color.adjust($background, $lightness: -16%);
}
}
}
}
@mixin module-composition-popper {
width: 332px;
border-radius: 4px;
margin-bottom: 6px;
z-index: variables.$z-index-context-menu;
user-select: none;
overflow: hidden;
@include popper-shadow();
& {
@include light-theme {
background: variables.$color-gray-02;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-02;
}
}
@include dark-theme {
background: variables.$color-gray-75;
::-webkit-scrollbar-thumb {
border: 2px solid variables.$color-gray-75;
}
}
}

File diff suppressed because it is too large Load diff

View file

@ -2,9 +2,9 @@
// SPDX-License-Identifier: AGPL-3.0-only
@use '../node_modules/intl-tel-input/build/css/intlTelInput.css';
@import 'fontfaces';
@import 'variables';
@import 'progress';
@use 'fontfaces';
@use 'variables';
@use 'progress';
.iti__flag {
// override intlTelInput's flags image location
@ -22,5 +22,5 @@
}
.intl-tel-input .country-list .country .country-name {
color: $color-black;
color: variables.$color-black;
}

View file

@ -1,6 +1,8 @@
// Copyright 2017 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use 'variables';
@keyframes progress-bar-stripes {
from {
background-position: 40px 0;
@ -12,11 +14,11 @@
.progress-bar-striped {
background-image: linear-gradient(
45deg,
$color-white-alpha-60 25%,
variables.$color-white-alpha-60 25%,
transparent 25%,
transparent 50%,
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
variables.$color-white-alpha-60 50%,
variables.$color-white-alpha-60 75%,
transparent 75%,
transparent
);
@ -25,11 +27,11 @@
.progress-bar-striped {
background-image: linear-gradient(
45deg,
$color-white-alpha-60 25%,
variables.$color-white-alpha-60 25%,
transparent 25%,
transparent 50%,
$color-white-alpha-60 50%,
$color-white-alpha-60 75%,
variables.$color-white-alpha-60 50%,
variables.$color-white-alpha-60 75%,
transparent 75%,
transparent
);
@ -39,7 +41,7 @@
}
.bar-container {
background: $color-ios-blue-tint;
background: variables.$color-ios-blue-tint;
.progress-bar {
height: 100%;

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.About {
align-items: center;
@ -11,14 +14,14 @@
overflow: hidden;
text-align: center;
@include light-theme {
background-color: $color-white;
color: $color-black;
@include mixins.light-theme {
background-color: variables.$color-white;
color: variables.$color-black;
}
@include dark-theme {
background-color: $color-gray-95;
color: $color-white-alpha-80;
@include mixins.dark-theme {
background-color: variables.$color-gray-95;
color: variables.$color-white-alpha-80;
}
img {
@ -26,16 +29,16 @@
}
a {
@include light-theme {
color: $color-ultramarine;
@include mixins.light-theme {
color: variables.$color-ultramarine;
}
@include dark-theme {
color: $color-ultramarine-pastel;
@include mixins.dark-theme {
color: variables.$color-ultramarine-pastel;
}
}
}
.About__Title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
margin: 0;
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AboutContactModal {
&__headerTitle.module-Modal__headerTitle {
// No padding between header and avatar
@ -26,7 +29,7 @@
}
&__title {
@include font-title-2;
@include mixins.font-title-2;
font-weight: 500;
margin: 0;
@ -41,12 +44,12 @@
flex-shrink: 0;
@mixin about-modal-icon($url) {
@include light-theme {
@include color-svg($url, $color-black);
@include mixins.light-theme {
@include mixins.color-svg($url, variables.$color-black);
}
@include dark-theme {
@include color-svg($url, $color-gray-05);
@include mixins.dark-theme {
@include mixins.color-svg($url, variables.$color-gray-05);
}
}
@ -111,8 +114,10 @@
align-items: center;
min-width: 0;
@include button-reset();
cursor: pointer;
@include mixins.button-reset();
& {
cursor: pointer;
}
&::after {
content: '';
@ -121,21 +126,23 @@
width: 20px;
flex-shrink: 0;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-45
variables.$color-gray-45
);
}
}
&__verified {
@include button-reset();
cursor: pointer;
@include mixins.button-reset();
& {
cursor: pointer;
}
}
}
.AboutContactModal__TitleWithoutNickname {
color: $color-gray-45;
color: variables.$color-gray-45;
}
.AboutContactModal__OneLineEllipsis {

View file

@ -1,12 +1,14 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.module-AddGroupMembersModal {
$root-selector: &;
$padding: 16px;
&__header {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
margin: 0;
padding: 0;
}
@ -26,7 +28,7 @@
}
&__close-button {
@include modal-close-button;
@include mixins.modal-close-button;
}
.module-ContactPills {
@ -46,10 +48,12 @@
}
&--choose-members {
@include modal-reset;
padding: 0; // The <ConversationList> has its own padding, so we pad various inner elements.
height: 60vh;
min-height: 400px;
@include mixins.modal-reset;
& {
padding: 0; // The <ConversationList> has its own padding, so we pad various inner elements.
height: 60vh;
min-height: 400px;
}
#{$root-selector}__header {
padding: $padding;
@ -57,7 +61,7 @@
}
&--confirm-adds {
@include modal-reset;
@include mixins.modal-reset;
#{$root-selector}__button-container {
margin-top: 12px;

View file

@ -1,24 +1,29 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AnnouncementsOnlyGroupBanner {
&__banner {
@include font-subtitle;
@include mixins.font-subtitle;
padding: 16px;
text-align: center;
@include light-theme {
border-top: 1px solid $color-gray-05;
color: $color-gray-60;
@include mixins.light-theme {
border-top: 1px solid variables.$color-gray-05;
color: variables.$color-gray-60;
}
@include dark-theme {
border-top: 1px solid $color-gray-05;
color: $color-gray-05;
@include mixins.dark-theme {
border-top: 1px solid variables.$color-gray-05;
color: variables.$color-gray-05;
}
&--admins {
@include button-reset;
color: $color-ultramarine;
@include mixins.button-reset;
& {
color: variables.$color-ultramarine;
}
}
}
}

View file

@ -1,6 +1,8 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../variables';
.App {
height: 100%;
position: relative;
@ -10,11 +12,11 @@
flex-direction: column;
&.light-theme {
background-color: $color-white;
color: $color-gray-90;
background-color: variables.$color-white;
color: variables.$color-gray-90;
}
&.dark-theme {
background-color: $color-gray-95;
color: $color-gray-05;
background-color: variables.$color-gray-95;
color: variables.$color-gray-05;
}
}

View file

@ -1,6 +1,10 @@
// Copyright 2016 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.AudioCapture {
display: flex;
text-align: center;
@ -22,9 +26,9 @@
padding: 0;
border: none;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
}
}
@ -36,11 +40,17 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/mic/mic.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/mic/mic.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/mic/mic.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/mic/mic.svg',
variables.$color-gray-15
);
}
}
}
@ -71,29 +81,32 @@
}
&--complete {
background: lighten($color-accent-green, 20%);
border: 1px solid $color-accent-green;
background: color.adjust(variables.$color-accent-green, $lightness: 20%);
border: 1px solid variables.$color-accent-green;
.icon {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/check/check.svg',
$color-accent-green
variables.$color-accent-green
);
}
}
&--cancel {
background: lighten($color-accent-red, 20%);
border: 1px solid $color-accent-red;
background: color.adjust(variables.$color-accent-red, $lightness: 20%);
border: 1px solid variables.$color-accent-red;
.icon {
@include color-svg('../images/icons/v3/x/x.svg', $color-accent-red);
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-accent-red
);
}
}
}
&__time {
color: $color-gray-60;
color: variables.$color-gray-60;
font-variant: tabular-nums;
line-height: 36px;
margin-block: 0;
@ -117,7 +130,7 @@
border-radius: 10px;
width: 10px;
height: 10px;
background: $color-accent-red;
background: variables.$color-accent-red;
margin-inline-end: 10px;
opacity: 0;
animation: pulse 2s infinite;

View file

@ -1,9 +1,12 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AutoSizeInput {
&__input {
@include font-body-1;
@include mixins.font-body-1;
background: inherit;
border: none;
@ -13,15 +16,15 @@
width: 20px;
&:placeholder {
color: $color-gray-45;
color: variables.$color-gray-45;
}
@include light-theme {
color: $color-black;
@include mixins.light-theme {
color: variables.$color-black;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
&:focus {
@ -35,7 +38,7 @@
top: 0;
width: auto;
z-index: $z-index-negative;
z-index: variables.$z-index-negative;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-Avatar {
display: inline-flex;
line-height: 0;
@ -10,21 +13,23 @@
vertical-align: middle;
&__contents {
@include avatar-colors;
position: relative;
overflow: hidden;
border-radius: 100%;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
outline: none;
@include mixins.avatar-colors;
& {
position: relative;
overflow: hidden;
border-radius: 100%;
width: 100%;
height: 100%;
border: 0;
padding: 0;
margin: 0;
outline: none;
}
@at-root button#{&} {
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow: 0 0 0 3px $color-ultramarine;
box-shadow: 0 0 0 3px variables.$color-ultramarine;
}
}
}
@ -46,10 +51,10 @@
}
&__click-to-view {
@include font-body-2;
@include mixins.font-body-2;
align-items: center;
background: $color-black-alpha-20;
color: $color-white;
background: variables.$color-black-alpha-20;
color: variables.$color-white;
display: flex;
flex-direction: column;
justify-content: center;
@ -58,19 +63,21 @@
top: 0;
&::before {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v2/click-outline-24.svg',
$color-white
variables.$color-white
);
content: '';
display: block;
height: 24px;
margin-bottom: 8px;
width: 24px;
& {
content: '';
display: block;
height: 24px;
margin-bottom: 8px;
width: 24px;
}
}
&:hover {
background: $color-black-alpha-40;
background: variables.$color-black-alpha-40;
}
}
@ -119,7 +126,7 @@
&__badge {
position: absolute;
z-index: $z-index-base;
z-index: variables.$z-index-base;
// Positioning should be overridden by JavaScript. These are set defensively.
bottom: 0;
@ -136,9 +143,9 @@
border: 0;
outline: none;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
border-radius: 6px;
}
}
@ -147,26 +154,26 @@
&--with-story {
border-radius: 100%;
border: 2px solid $color-black-alpha-40;
border: 2px solid variables.$color-black-alpha-40;
padding: 3px;
@include dark-theme {
border-color: $color-white-alpha-40;
@include mixins.dark-theme {
border-color: variables.$color-white-alpha-40;
&--unread {
border-color: $color-ultramarine-dawn;
border-color: variables.$color-ultramarine-dawn;
}
}
&--unread {
border-color: $color-ultramarine-dawn;
border-color: variables.$color-ultramarine-dawn;
}
}
&--signal-official {
.module-Avatar__contents {
align-items: center;
background-color: $color-ultramarine;
background-color: variables.$color-ultramarine;
display: flex;
justify-content: center;
}

View file

@ -1,35 +1,40 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AvatarEditor {
&__top-buttons {
display: flex;
}
&__button {
@include button-reset;
align-items: center;
border-radius: 8px;
display: flex;
flex-direction: column;
font-size: 9px;
justify-content: center;
line-height: 14px;
margin-block: 0;
margin-inline: 8px;
min-height: 44px;
min-width: 60px;
padding-block: 0;
padding-inline: 8px;
@include light-theme {
background-color: $color-gray-05;
color: $color-black;
@include mixins.button-reset;
& {
align-items: center;
border-radius: 8px;
display: flex;
flex-direction: column;
font-size: 9px;
justify-content: center;
line-height: 14px;
margin-block: 0;
margin-inline: 8px;
min-height: 44px;
min-width: 60px;
padding-block: 0;
padding-inline: 8px;
}
@include dark-theme {
background-color: $color-gray-65;
color: $color-gray-05;
@include mixins.light-theme {
background-color: variables.$color-gray-05;
color: variables.$color-black;
}
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
color: variables.$color-gray-05;
}
&::before {
@ -40,11 +45,11 @@
}
@mixin button-icon($icon) {
@include light-theme {
@include color-svg($icon, $color-black);
@include mixins.light-theme {
@include mixins.color-svg($icon, variables.$color-black);
}
@include dark-theme {
@include color-svg($icon, $color-gray-05);
@include mixins.dark-theme {
@include mixins.color-svg($icon, variables.$color-gray-05);
}
}
@ -57,7 +62,7 @@
}
&:focus {
box-shadow: 0 0 0 2px $color-ultramarine;
box-shadow: 0 0 0 2px variables.$color-ultramarine;
}
}
@ -69,16 +74,16 @@
&__divider {
border: none;
border-bottom: 1px solid $color-gray-15;
border-bottom: 1px solid variables.$color-gray-15;
margin-bottom: 24px;
margin-top: 20px;
@include light-theme {
border-color: $color-gray-15;
@include mixins.light-theme {
border-color: variables.$color-gray-15;
}
@include dark-theme {
border-color: $color-gray-75;
@include mixins.dark-theme {
border-color: variables.$color-gray-75;
}
}
@ -91,7 +96,7 @@
}
&__avatar-selector-title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
margin-bottom: 14px;
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.AvatarPreview {
align-items: center;
display: flex;
@ -9,24 +12,25 @@
width: 100%;
&__avatar {
@include button-reset;
align-items: center;
border-radius: 100%;
cursor: auto;
display: flex;
font-size: 32px;
height: 80px;
justify-content: center;
margin-bottom: 16px;
margin-top: 4px;
position: relative;
transition: background-color 100ms ease-out;
user-select: none;
width: 80px;
@include mixins.button-reset;
& {
align-items: center;
border-radius: 100%;
cursor: auto;
display: flex;
font-size: 32px;
height: 80px;
justify-content: center;
margin-bottom: 16px;
margin-top: 4px;
position: relative;
transition: background-color 100ms ease-out;
user-select: none;
width: 80px;
}
&--loading {
background: $color-black;
background: variables.$color-black;
}
&--has-image {
@ -34,9 +38,9 @@
background-position: center center;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow: 0 0 0 3px $color-ultramarine;
box-shadow: 0 0 0 3px variables.$color-ultramarine;
}
}
}
@ -57,7 +61,7 @@
&__upload {
align-items: center;
background: $color-gray-02;
background: variables.$color-gray-02;
border-radius: 100%;
bottom: 4px;
box-shadow:
@ -71,35 +75,47 @@
width: 28px;
&::after {
@include color-svg('../images/icons/v3/camera/camera.svg', $color-black);
content: '';
display: block;
height: 16px;
width: 16px;
@include mixins.color-svg(
'../images/icons/v3/camera/camera.svg',
variables.$color-black
);
& {
content: '';
display: block;
height: 16px;
width: 16px;
}
}
}
&__clear {
@include button-reset;
align-items: center;
background-color: $color-white;
border-radius: 100%;
box-shadow:
0px 4px 16px rgba(0, 0, 0, 0.12),
0px 2px 4px rgba(0, 0, 0, 0.2);
display: flex;
height: 24px;
justify-content: center;
position: absolute;
inset-inline-end: 0;
top: 0;
width: 24px;
@include mixins.button-reset;
& {
align-items: center;
background-color: variables.$color-white;
border-radius: 100%;
box-shadow:
0px 4px 16px rgba(0, 0, 0, 0.12),
0px 2px 4px rgba(0, 0, 0, 0.2);
display: flex;
height: 24px;
justify-content: center;
position: absolute;
inset-inline-end: 0;
top: 0;
width: 24px;
}
&:after {
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75);
content: '';
height: 16px;
width: 16px;
@include mixins.color-svg(
'../images/icons/v3/x/x-compact.svg',
variables.$color-gray-75
);
& {
content: '';
height: 16px;
width: 16px;
}
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BackupMediaDownloadProgress {
border-radius: 12px;
display: flex;
@ -14,16 +17,16 @@
position: relative;
&__title {
@include font-body-2-bold;
@include mixins.font-body-2-bold;
}
@include light-theme {
background-color: $color-white;
border: 1px solid $color-gray-20;
@include mixins.light-theme {
background-color: variables.$color-white;
border: 1px solid variables.$color-gray-20;
}
@include dark-theme {
background: $color-gray-75;
border: 1px solid $color-gray-60;
@include mixins.dark-theme {
background: variables.$color-gray-75;
border: 1px solid variables.$color-gray-60;
}
}
@ -37,16 +40,16 @@
display: block;
width: 24px;
height: 24px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/check/check-circle.svg',
$color-ultramarine
variables.$color-ultramarine
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/check/check-circle.svg',
$color-ultramarine-light
variables.$color-ultramarine-light
);
}
}
@ -58,28 +61,30 @@
display: block;
width: 24px;
height: 24px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/backup/backup-bold.svg',
$color-ultramarine
variables.$color-ultramarine
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/backup/backup-bold.svg',
$color-ultramarine-light
variables.$color-ultramarine-light
);
}
}
}
button.BackupMediaDownloadProgress__button {
@include button-reset;
@include font-subtitle-bold;
@include light-theme {
color: $color-ultramarine;
}
@include dark-theme {
color: $color-ultramarine-light;
@include mixins.button-reset;
& {
@include mixins.font-subtitle-bold;
@include mixins.light-theme {
color: variables.$color-ultramarine;
}
@include mixins.dark-theme {
color: variables.$color-ultramarine-light;
}
}
}
@ -87,17 +92,23 @@ button.BackupMediaDownloadProgress__button-more {
position: absolute;
inset-inline-end: 14px;
inset-block-start: 10px;
@include button-reset;
@include mixins.button-reset;
&::after {
content: '';
display: block;
width: 20px;
height: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-20);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-20
);
}
}
}
@ -105,17 +116,23 @@ button.BackupMediaDownloadProgress__button-close {
position: absolute;
inset-inline-end: 14px;
inset-block-start: 10px;
@include button-reset;
@include mixins.button-reset;
&::after {
content: '';
display: block;
width: 20px;
height: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-45);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-45
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-20);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-20
);
}
}
}
@ -129,14 +146,14 @@ button.BackupMediaDownloadProgress__button-close {
}
.BackupMediaDownloadProgress__description {
@include font-subtitle;
@include mixins.font-subtitle;
@include light-theme {
color: rgba($color-gray-60, 0.8);
@include mixins.light-theme {
color: rgba(variables.$color-gray-60, 0.8);
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BadgeCarouselIndex {
display: flex;
flex-wrap: wrap;
@ -14,21 +17,21 @@
width: 8px;
margin-top: 8px;
@include light-theme {
background: $color-black-alpha-20;
@include mixins.light-theme {
background: variables.$color-black-alpha-20;
}
@include dark-theme {
background: $color-white-alpha-20;
@include mixins.dark-theme {
background: variables.$color-white-alpha-20;
}
&--selected {
@include light-theme {
background: $color-ultramarine;
@include mixins.light-theme {
background: variables.$color-ultramarine;
}
@include dark-theme {
background: $color-ultramarine-light;
@include mixins.dark-theme {
background: variables.$color-ultramarine-light;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BadgeDialog {
@mixin fixed-height($height) {
height: $height;
@ -19,16 +22,18 @@
}
&__nav {
$light-color: $color-gray-65;
$dark-color: $color-gray-05;
$light-color: variables.$color-gray-65;
$dark-color: variables.$color-gray-05;
@include button-reset;
align-items: center;
border-radius: 4px;
display: flex;
justify-content: center;
padding-block: 3px;
padding-inline: 0;
@include mixins.button-reset;
& {
align-items: center;
border-radius: 4px;
display: flex;
justify-content: center;
padding-block: 3px;
padding-inline: 0;
}
&[disabled] {
visibility: hidden;
@ -41,34 +46,34 @@
height: 20px;
}
@include light-theme {
@include mixins.light-theme {
&:hover,
&:focus {
background: $color-gray-02;
background: variables.$color-gray-02;
}
&:active {
background: $color-gray-05;
background: variables.$color-gray-05;
}
}
@include dark-theme {
@include mixins.dark-theme {
&:hover,
&:focus {
background: $color-gray-80;
background: variables.$color-gray-80;
}
&:active {
background: $color-gray-75;
background: variables.$color-gray-75;
}
}
&--previous::before {
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$light-color
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$dark-color
);
@ -76,14 +81,14 @@
}
&--next::before {
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$light-color
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$dark-color
);
@ -99,7 +104,7 @@
}
&__name {
@include font-title-2;
@include mixins.font-title-2;
@include fixed-height(3.5em);
align-items: center;
display: flex;
@ -109,7 +114,7 @@
}
&__description {
@include font-body-1;
@include mixins.font-body-1;
@include fixed-height(5.5em);
margin-bottom: 12px;
}

View file

@ -1,6 +1,8 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.BadgeSustainerInstructionsDialog {
user-select: none;
@ -9,18 +11,18 @@
}
&__header {
@include font-title-2;
@include mixins.font-title-2;
text-align: center;
}
&__subheader {
@include font-body-1;
@include mixins.font-body-1;
font-weight: normal;
text-align: center;
}
&__instructions {
@include font-body-2;
@include mixins.font-body-2;
padding: 0;
list-style-position: inside;
@ -33,10 +35,10 @@
margin-inline: auto;
width: 146px;
@include light-theme {
@include mixins.light-theme {
background-image: url('../images/mobile-settings-light.svg');
}
@include dark-theme {
@include mixins.dark-theme {
background-image: url('../images/mobile-settings-dark.svg');
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.BetterAvatarBubble {
align-items: center;
background-clip: content-box;
@ -18,21 +21,21 @@
position: relative;
width: 56px;
@include avatar-colors();
@include mixins.avatar-colors();
&--selected {
@include light-theme {
border-color: $color-black;
@include mixins.light-theme {
border-color: variables.$color-black;
}
@include dark-theme {
border-color: $color-white;
@include mixins.dark-theme {
border-color: variables.$color-white;
}
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
border-color: $color-ultramarine;
border-color: variables.$color-ultramarine;
outline: none;
}
}
@ -42,7 +45,7 @@
align-items: center;
justify-content: center;
border-radius: 100%;
background: $color-black-alpha-20;
background: variables.$color-black-alpha-20;
height: 100%;
width: 100%;
@ -51,31 +54,41 @@
display: block;
height: 24px;
width: 24px;
@include color-svg('../images/icons/v3/edit/edit.svg', $color-white);
@include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-white
);
}
}
&__delete {
@include button-reset;
align-items: center;
background-color: $color-white;
border-radius: 100%;
box-shadow:
0px 4px 16px rgba(0, 0, 0, 0.12),
0px 2px 4px rgba(0, 0, 0, 0.2);
display: none;
height: 20px;
justify-content: center;
position: absolute;
top: 0;
inset-inline-end: 0;
width: 20px;
@include mixins.button-reset;
& {
align-items: center;
background-color: variables.$color-white;
border-radius: 100%;
box-shadow:
0px 4px 16px rgba(0, 0, 0, 0.12),
0px 2px 4px rgba(0, 0, 0, 0.2);
display: none;
height: 20px;
justify-content: center;
position: absolute;
top: 0;
inset-inline-end: 0;
width: 20px;
}
&:after {
@include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75);
content: '';
height: 10px;
width: 10px;
@include mixins.color-svg(
'../images/icons/v3/x/x-compact.svg',
variables.$color-gray-75
);
& {
content: '';
height: 10px;
width: 10px;
}
}
}

View file

@ -1,6 +1,10 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.module-Button {
@mixin focus-box-shadow($inner-color, $outer-color) {
&:focus {
@ -12,197 +16,229 @@
@mixin hover-and-active-states($background-color, $mix-color) {
&:hover {
@include not-disabled {
background: mix($background-color, $mix-color, 85%);
@include mixins.not-disabled {
background: color.mix($background-color, $mix-color, 85%);
}
}
&:active {
@include not-disabled {
background: mix($background-color, $mix-color, 75%);
@include mixins.not-disabled {
background: color.mix($background-color, $mix-color, 75%);
}
}
}
@include button-reset;
border-radius: 4px;
padding-block: 8px;
padding-inline: 16px;
text-align: center;
user-select: none;
-webkit-app-region: no-drag;
@include keyboard-mode {
@include focus-box-shadow($color-white, $color-ultramarine);
@include mixins.button-reset;
& {
border-radius: 4px;
padding-block: 8px;
padding-inline: 16px;
text-align: center;
user-select: none;
-webkit-app-region: no-drag;
}
@include dark-keyboard-mode {
@include focus-box-shadow($color-black, $color-ultramarine);
@include mixins.keyboard-mode {
@include focus-box-shadow(
variables.$color-white,
variables.$color-ultramarine
);
}
@include disabled {
@include mixins.dark-keyboard-mode {
@include focus-box-shadow(
variables.$color-black,
variables.$color-ultramarine
);
}
@include mixins.disabled {
cursor: not-allowed;
}
&--large {
@include font-title-2;
@include mixins.font-title-2;
font-weight: bold;
}
&--medium {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
}
&--small {
@include font-body-2;
@include rounded-corners;
@include mixins.font-body-2;
@include mixins.rounded-corners;
padding-block: 6px;
padding-inline: 12px;
}
&--primary {
$color: $color-white;
$background-color: $color-ultramarine;
$color: variables.$color-white;
$background-color: variables.$color-ultramarine;
color: $color;
background: $background-color;
@include disabled {
color: fade-out($color, 0.4);
background: fade-out($background-color, 0.6);
@include mixins.disabled {
color: color.adjust($color, $alpha: -0.4);
background: color.adjust($background-color, $alpha: -0.6);
}
&--discouraged {
@include light-theme {
@include mixins.light-theme {
opacity: 0.4;
}
@include dark-theme {
@include mixins.dark-theme {
opacity: 0.5;
}
}
@include light-theme {
@include hover-and-active-states($background-color, $color-black);
@include mixins.light-theme {
@include hover-and-active-states(
$background-color,
variables.$color-black
);
}
@include dark-theme {
@include hover-and-active-states($background-color, $color-white);
@include mixins.dark-theme {
@include hover-and-active-states(
$background-color,
variables.$color-white
);
}
}
&--secondary {
@include light-theme {
$color: $color-gray-90;
$background-color: $color-gray-05;
@include mixins.light-theme {
$color: variables.$color-gray-90;
$background-color: variables.$color-gray-05;
color: $color;
background: $background-color;
@include disabled {
color: $color-black-alpha-40;
background: fade-out($background-color, 0.6);
@include mixins.disabled {
color: variables.$color-black-alpha-40;
background: color.adjust($background-color, $alpha: -0.6);
}
&--affirmative {
color: $color-ultramarine;
color: variables.$color-ultramarine;
}
&--affirmative--discouraged {
color: fade-out($color-ultramarine, 0.5);
color: color.adjust(variables.$color-ultramarine, $alpha: -0.5);
}
&--destructive {
color: $color-accent-red;
color: variables.$color-accent-red;
}
&--destructive--discouraged {
color: fade-out($color-ultramarine, 0.5);
color: color.adjust(variables.$color-ultramarine, $alpha: -0.5);
}
@include hover-and-active-states($background-color, $color-black);
@include hover-and-active-states(
$background-color,
variables.$color-black
);
}
@include dark-theme {
$color: $color-gray-05;
$background-color: $color-gray-65;
@include mixins.dark-theme {
$color: variables.$color-gray-05;
$background-color: variables.$color-gray-65;
color: $color;
background: $background-color;
@include disabled {
color: $color-white-alpha-20;
background: fade-out($background-color, 0.6);
@include mixins.disabled {
color: variables.$color-white-alpha-20;
background: color.adjust($background-color, $alpha: -0.6);
}
&--affirmative {
color: $color-ultramarine-light;
color: variables.$color-ultramarine-light;
}
&--affirmative--discouraged {
color: fade-out($color-ultramarine-light, 0.5);
color: color.adjust(variables.$color-ultramarine-light, $alpha: -0.5);
}
&--destructive {
color: $color-accent-red;
color: variables.$color-accent-red;
}
&--destructive--discouraged {
color: fade-out($color-accent-red, 0.5);
color: color.adjust(variables.$color-accent-red, $alpha: -0.5);
}
@include hover-and-active-states($background-color, $color-white);
@include hover-and-active-states(
$background-color,
variables.$color-white
);
}
}
&--destructive {
$color: $color-white;
$background-color: $color-accent-red;
$color: variables.$color-white;
$background-color: variables.$color-accent-red;
color: $color;
background: $background-color;
@include disabled {
color: fade-out($color, 0.4);
background: fade-out($background-color, 0.6);
@include mixins.disabled {
color: color.adjust($color, $alpha: -0.4);
background: color.adjust($background-color, $alpha: -0.6);
}
@include light-theme {
@include hover-and-active-states($background-color, $color-black);
@include mixins.light-theme {
@include hover-and-active-states(
$background-color,
variables.$color-black
);
}
@include dark-theme {
@include hover-and-active-states($background-color, $color-white);
@include mixins.dark-theme {
@include hover-and-active-states(
$background-color,
variables.$color-white
);
}
}
&--calling {
$color: $color-white;
$background-color: $color-accent-green;
$color: variables.$color-white;
$background-color: variables.$color-accent-green;
@include rounded-corners;
@include mixins.rounded-corners;
color: $color;
background: $background-color;
@include disabled {
color: fade-out($color, 0.4);
background: fade-out($background-color, 0.6);
@include mixins.disabled {
color: color.adjust($color, $alpha: -0.4);
background: color.adjust($background-color, $alpha: -0.6);
}
&--discouraged {
@include light-theme {
@include mixins.light-theme {
opacity: 0.4;
}
@include dark-theme {
@include mixins.dark-theme {
opacity: 0.5;
}
}
@include light-theme {
@include hover-and-active-states($background-color, $color-black);
@include mixins.light-theme {
@include hover-and-active-states(
$background-color,
variables.$color-black
);
}
@include dark-theme {
@include hover-and-active-states($background-color, $color-white);
@include mixins.dark-theme {
@include hover-and-active-states(
$background-color,
variables.$color-white
);
}
}
&--system-message {
@include rounded-corners;
@include mixins.rounded-corners;
&.module-Button--small {
padding-top: 5px;
@ -210,40 +246,46 @@
font-weight: 500;
}
@include light-theme {
$color: $color-ultramarine;
$background-color: $color-gray-02;
@include mixins.light-theme {
$color: variables.$color-ultramarine;
$background-color: variables.$color-gray-02;
color: $color;
background: $background-color;
@include disabled {
color: fade-out($color, 0.4);
background: fade-out($background-color, 0.6);
@include mixins.disabled {
color: color.adjust($color, $alpha: -0.4);
background: color.adjust($background-color, $alpha: -0.6);
}
&--discouraged {
color: fade-out($color, 0.5);
color: color.adjust($color, $alpha: -0.5);
}
@include hover-and-active-states($background-color, $color-black);
@include hover-and-active-states(
$background-color,
variables.$color-black
);
}
@include dark-theme {
$color: $color-white;
$background-color: $color-gray-65;
@include mixins.dark-theme {
$color: variables.$color-white;
$background-color: variables.$color-gray-65;
color: $color;
background: $background-color;
@include disabled {
color: fade-out($color, 0.4);
background: fade-out($background-color, 0.6);
@include mixins.disabled {
color: color.adjust($color, $alpha: -0.4);
background: color.adjust($background-color, $alpha: -0.6);
}
&--discouraged {
color: fade-out($color, 0.5);
color: color.adjust($color, $alpha: -0.5);
}
@include hover-and-active-states($background-color, $color-white);
@include hover-and-active-states(
$background-color,
variables.$color-white
);
}
}
@ -260,27 +302,27 @@
padding: 8px;
&--discouraged {
@include light-theme {
@include mixins.light-theme {
opacity: 0.4;
}
@include dark-theme {
@include mixins.dark-theme {
opacity: 0.5;
}
}
@include light-theme {
background-color: $color-gray-05;
color: $color-black;
@include mixins.light-theme {
background-color: variables.$color-gray-05;
color: variables.$color-black;
}
@include dark-theme {
background-color: $color-gray-65;
color: $color-gray-05;
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
color: variables.$color-gray-05;
}
&:focus {
@include keyboard-mode {
box-shadow: 0 0 0 2px $color-ultramarine;
@include mixins.keyboard-mode {
box-shadow: 0 0 0 2px variables.$color-ultramarine;
}
}
@ -296,11 +338,11 @@
height: 18px;
width: 18px;
@include light-theme {
@include color-svg($icon, $color-black);
@include mixins.light-theme {
@include mixins.color-svg($icon, variables.$color-black);
}
@include dark-theme {
@include color-svg($icon, $color-gray-05);
@include mixins.dark-theme {
@include mixins.color-svg($icon, variables.$color-gray-05);
}
}

View file

@ -1,19 +1,22 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallControls {
position: relative;
bottom: 0;
display: flex;
flex-grow: 1;
flex-shrink: 0;
flex-basis: $CallControls__initial-width;
flex-basis: variables.$CallControls__initial-width;
align-items: center;
justify-content: space-between;
max-width: $CallControls__max-width;
height: $CallControls__height;
background-color: $color-gray-78;
box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
max-width: variables.$CallControls__max-width;
height: variables.$CallControls__height;
background-color: variables.$color-gray-78;
box-shadow: 0px 4px 14px 0px variables.$color-black-alpha-40;
border-radius: 18px;
margin-block-end: 16px;
margin-inline: 16px;
@ -33,7 +36,7 @@
display: flex;
max-height: 40px;
margin-block-end: 2px;
color: $color-gray-15;
color: variables.$color-gray-15;
font-size: 14px;
font-weight: bold;
line-height: 20px;
@ -44,33 +47,35 @@
display: flex;
min-height: 18px;
max-height: 36px;
color: $color-gray-20;
color: variables.$color-gray-20;
font-size: 13px;
line-height: 18px;
overflow: hidden;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus-within {
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
outline-offset: 2px;
}
}
}
.CallControls__Status--ParticipantCount {
@include button-reset;
display: flex;
flex-basis: 100%;
align-items: center;
@include mixins.button-reset;
& {
display: flex;
flex-basis: 100%;
align-items: center;
}
&::after {
content: '';
display: flex;
width: 14px;
height: 14px;
margin-inline-start: 1px;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right.svg',
$color-gray-20
variables.$color-gray-20
);
}
}
@ -95,17 +100,17 @@
padding-inline: 16px;
border-radius: 40px;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow:
0 0 0 1px $color-gray-80,
0 0 0 3px $color-ultramarine !important;
0 0 0 1px variables.$color-gray-80,
0 0 0 3px variables.$color-ultramarine !important;
}
}
}
.CallControls__JoinLeaveButton--hangup {
background-color: $color-accent-red;
background-color: variables.$color-accent-red;
}
.CallControls__JoinLeaveButton .module-spinner__container {
@ -113,20 +118,20 @@
}
.CallControls__OuterSpacer {
flex-basis: calc($calling-local-preview-width + 16px);
flex-basis: calc(variables.$calling-local-preview-width + 16px);
}
.CallControls__ReactionPickerContainer {
position: absolute;
inset-inline-start: min(44%, 32vw);
inset-block-end: 70px;
z-index: $z-index-toast;
z-index: variables.$z-index-toast;
display: flex;
flex-direction: column;
max-height: calc(100vh - 155px);
font-size: 13px;
filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
pointer-events: auto;
}

View file

@ -1,13 +1,15 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.CallLinkAddNameModal__Row {
display: flex;
gap: 12px;
}
.CallLinkAddNameModal__SrOnly {
@include sr-only;
@include mixins.sr-only;
}
// Overriding the default styles for the input container

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallLinkDetails__Container {
max-width: 750px;
margin-block: 0;
@ -27,18 +30,18 @@
.CallLinkDetails__HeaderTitle {
margin: 0;
@include font-title-medium;
@include mixins.font-title-medium;
}
.CallLinkDetails__HeaderDescription {
margin: 0;
user-select: text;
@include font-body-1;
@include light-theme {
color: $color-gray-60;
@include mixins.font-body-1;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
@ -47,35 +50,35 @@
}
.CallLinkDetails__HeaderButton--active-call {
@include button-active-call;
@include mixins.button-active-call;
}
.CallLinkDetails__DeleteLink {
// Override the default icon color
.ConversationDetails-icon__icon--trash::after {
@include any-theme {
background-color: $color-accent-red;
@include mixins.any-theme {
background-color: variables.$color-accent-red;
}
}
// Override the default label color
.ConversationDetails-panel-row__label {
color: $color-accent-red;
color: variables.$color-accent-red;
}
}
.CallLinkDetails__DeleteLink--disabled-for-active-call {
.ConversationDetails-icon__icon--trash::after {
@include any-theme {
background-color: $color-gray-45;
@include mixins.any-theme {
background-color: variables.$color-gray-45;
}
}
.ConversationDetails-panel-row__label {
color: $color-gray-45;
color: variables.$color-gray-45;
}
}
.CallLinkDetails__ApproveAllMembersDisabledTooltip,
.CallLinkDetails__DeleteLinkTooltip {
@include tooltip;
@include mixins.tooltip;
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
// Overriding default style
.module-Modal__body.CallLinkEditModal__body {
padding-inline: 12px 3px;
@ -8,7 +11,7 @@
}
.CallLinkEditModal__SrOnly {
@include sr-only;
@include mixins.sr-only;
}
.CallLinkEditModal__Header {
@ -27,18 +30,20 @@
}
.CallLinkEditModal__Header__Title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
}
.CallLinkEditModal__Header__CallLinkButton {
@include button-reset;
@include font-subtitle;
@include mixins.button-reset;
& {
@include mixins.font-subtitle;
@include light-theme {
color: $color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
}
@ -56,7 +61,7 @@
}
.CallLinkEditModal__JoinButton {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
}
.CallLinkEditModal__Row {
@ -67,9 +72,11 @@
}
.CallLinkEditModal__RowButton {
@include button-reset;
width: 100%;
padding-block: 1px;
@include mixins.button-reset;
& {
width: 100%;
padding-block: 1px;
}
.CallLinkEditModal__Row {
border-radius: 8px;
@ -78,33 +85,33 @@
&:hover,
&:focus {
.CallLinkEditModal__Row {
@include light-theme {
background: $color-gray-02;
@include mixins.light-theme {
background: variables.$color-gray-02;
}
@include dark-theme {
background: $color-gray-75;
@include mixins.dark-theme {
background: variables.$color-gray-75;
}
}
}
}
.CallLinkEditModal__Row--Button {
@include font-body-2;
@include mixins.font-body-2;
display: flex;
gap: 8px;
align-items: center;
width: 100%;
@include light-theme {
color: $color-black;
@include mixins.light-theme {
color: variables.$color-black;
}
@include dark-theme {
color: $color-gray-15;
@include mixins.dark-theme {
color: variables.$color-gray-15;
}
}
.CallLinkEditModal__RowLabel {
@include font-body-1;
@include mixins.font-body-1;
flex: 1;
}
@ -128,11 +135,11 @@
@mixin CallLinkEditModal__RowIcon($iconPath) {
&::after {
@include light-theme {
@include color-svg($iconPath, $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg($iconPath, variables.$color-gray-75);
}
@include dark-theme {
@include color-svg($iconPath, $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg($iconPath, variables.$color-gray-15);
}
}
}
@ -158,5 +165,5 @@
.CallLinkEditModal__Hr {
border: none;
height: 1px;
background: $color-black-alpha-12;
background: variables.$color-black-alpha-12;
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
// Overriding default style
.module-Modal__body_inner.CallLinkPendingParticipantModal__body_inner {
align-items: center;
@ -13,22 +16,24 @@
}
.CallLinkPendingParticipantModal__NameButton {
@include button-reset();
@include font-title-1;
display: flex;
flex-direction: row;
align-items: baseline;
max-width: 100%;
margin-top: 12px;
font-weight: 500;
color: $color-gray-05;
cursor: pointer;
@include mixins.button-reset();
& {
@include mixins.font-title-1;
display: flex;
flex-direction: row;
align-items: baseline;
max-width: 100%;
margin-top: 12px;
font-weight: 500;
color: variables.$color-gray-05;
cursor: pointer;
}
}
.CallLinkPendingParticipantModal__InContactsIcon {
height: 22px;
width: 22px;
@include any-theme {
@include mixins.any-theme {
background-color: currentColor;
}
}
@ -41,15 +46,15 @@
position: relative;
inset-block-start: 2px;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
.CallLinkPendingParticipantModal__SharedGroupInfo {
margin-top: 10px;
color: $color-gray-25;
color: variables.$color-gray-25;
text-align: center;
}
@ -58,17 +63,18 @@
margin-block: 24px;
border: none;
height: 1px;
background: $color-gray-65;
background: variables.$color-gray-65;
}
.CallLinkPendingParticipantModal__ActionButton {
@include button-reset;
display: flex;
padding-block: 6px;
width: 100%;
align-items: center;
color: $color-gray-05;
@include mixins.button-reset;
& {
display: flex;
padding-block: 6px;
width: 100%;
align-items: center;
color: variables.$color-gray-05;
}
}
.CallLinkPendingParticipantModal__ActionButton:last-child {
@ -76,8 +82,8 @@
}
.CallLinkPendingParticipantModal__ActionButton:focus {
@include keyboard-mode {
background: $color-gray-65;
@include mixins.keyboard-mode {
background: variables.$color-gray-65;
}
}
@ -95,12 +101,15 @@
}
.CallLinkPendingParticipantModal__ButtonIconContent--approve {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/check/check-circle.svg',
$color-gray-25
variables.$color-gray-25
);
}
.CallLinkPendingParticipantModal__ButtonIconContent--deny {
@include color-svg('../images/icons/v3/x/x-circle.svg', $color-gray-25);
@include mixins.color-svg(
'../images/icons/v3/x/x-circle.svg',
variables.$color-gray-25
);
}

View file

@ -1,16 +1,18 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../variables';
.CallingReactionsBurstToasts {
position: absolute;
width: 100%;
inset-block-end: calc($CallControls__height + 32px);
inset-block-end: calc(variables.$CallControls__height + 32px);
inset-inline-start: 15px;
}
.CallReactionBursts {
position: absolute;
z-index: $z-index-toast;
z-index: variables.$z-index-toast;
display: flex;
}

View file

@ -1,13 +1,16 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
@mixin CallSettingsButton-icon($path) {
@include color-svg($path, $color-gray-15);
@include mixins.color-svg($path, variables.$color-gray-15);
}
.CallSettingsButton__Button {
align-items: center;
background-color: $color-gray-78;
background-color: variables.$color-gray-78;
border: none;
border-radius: 40px;
display: flex;
@ -16,10 +19,10 @@
outline: none;
width: 36px;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline-offset: 1px;
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingAdhocCallInfo {
flex-shrink: 0;
width: 360px;
@ -41,22 +44,24 @@
}
.CallingAdhocCallInfo__MenuItem {
@include button-reset;
@include font-body-2;
display: flex;
width: 100%;
padding-block: 8px;
padding-inline: 10px 2px;
align-items: center;
border-radius: 6px;
@include mixins.button-reset;
& {
@include mixins.font-body-2;
display: flex;
width: 100%;
padding-block: 8px;
padding-inline: 10px 2px;
align-items: center;
border-radius: 6px;
}
}
.CallingAdhocCallInfo__MenuItem:hover {
background-color: $color-gray-62;
background-color: variables.$color-gray-62;
}
.CallingAdhocCallInfo__MenuItemIcon {
background: $color-gray-65;
background: variables.$color-gray-65;
display: flex;
width: 36px;
height: 36px;
@ -74,11 +79,17 @@
}
.CallingAdhocCallInfo__MenuItemIcon--copy-link:before {
@include color-svg('../images/icons/v3/copy/copy.svg', $color-gray-15);
@include mixins.color-svg(
'../images/icons/v3/copy/copy.svg',
variables.$color-gray-15
);
}
.CallingAdhocCallInfo__MenuItemIcon--share-via-signal:before {
@include color-svg('../images/icons/v3/forward/forward.svg', $color-gray-15);
@include mixins.color-svg(
'../images/icons/v3/forward/forward.svg',
variables.$color-gray-15
);
}
.CallingAdhocCallInfo__MenuItemText {
@ -89,30 +100,37 @@
display: flex;
margin-block: 16px;
margin-inline: 10px;
border: 1px solid $color-gray-65;
border: 1px solid variables.$color-gray-65;
}
.CallingAdhocCallInfo__RemoveClient {
@include button-reset;
width: 16px;
height: 16px;
margin-inline: 8px;
background: $color-white;
@include mixins.button-reset;
& {
width: 16px;
height: 16px;
margin-inline: 8px;
background: variables.$color-white;
}
}
.CallingAdhocCallInfo__UnknownContactInfoButton {
@include button-reset;
@include color-svg('../images/icons/v3/info/info.svg', $color-white);
display: flex;
flex: none;
width: 16px;
height: 16px;
margin-inline: 8px;
@include mixins.button-reset;
@include mixins.color-svg(
'../images/icons/v3/info/info.svg',
variables.$color-white
);
& {
display: flex;
flex: none;
width: 16px;
height: 16px;
margin-inline: 8px;
}
}
.CallingAdhocCallInfo__UnknownContactInfoButton:focus {
@include keyboard-mode {
background: $color-ultramarine;
@include mixins.keyboard-mode {
background: variables.$color-ultramarine;
}
}
@ -132,7 +150,7 @@
.module-Avatar__contents {
outline: 2px solid;
outline-color: $color-gray-80;
outline-color: variables.$color-gray-80;
}
}
@ -141,7 +159,7 @@
.CallingAdhocCallInfo__UnknownContactAvatar
.module-Avatar__contents {
// Should match background of .module-calling-participants-list__contact:hover
outline-color: $color-gray-62;
outline-color: variables.$color-gray-62;
}
.CallingAdhocCallInfo__RemoveClientDialog {

View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingAudioIndicator {
$size: 28px;
@ -10,11 +13,11 @@
height: $size;
min-width: $size;
width: $size;
z-index: $z-index-base;
z-index: variables.$z-index-base;
border-radius: calc($size / 2);
&--with-content {
background: rgba($color-gray-80, 0.7);
background: rgba(variables.$color-gray-80, 0.7);
}
&__content {
@ -27,9 +30,9 @@
justify-content: center;
&--muted {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/mic/mic-slash-fill-compact-light.svg',
$color-white
variables.$color-white
);
}
}
@ -39,12 +42,12 @@
position: absolute;
top: 6px;
inset-inline-end: 6px;
z-index: $z-index-base;
z-index: variables.$z-index-base;
}
.module-ongoing-call__group-call-remote-participant .CallingAudioIndicator {
position: absolute;
top: 8px;
inset-inline-end: 8px;
z-index: $z-index-base;
z-index: variables.$z-index-base;
}

View file

@ -1,9 +1,12 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingButton {
@mixin icon($path) {
@include color-svg($path, $color-white);
@include mixins.color-svg($path, variables.$color-white);
height: 20px;
width: 20px;
border: none;
@ -19,10 +22,10 @@
outline: none;
width: 36px;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline-offset: 1px;
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
}
}
@ -30,24 +33,42 @@
background-color: $background-color;
div {
@include color-svg($icon, $icon-color);
height: 20px;
width: 20px;
@include mixins.color-svg($icon, $icon-color);
& {
height: 20px;
width: 20px;
}
}
}
@mixin calling-button-icon-highlighted($icon) {
@include calling-button-icon($icon, $color-gray-15, $color-gray-90);
@include calling-button-icon(
$icon,
variables.$color-gray-15,
variables.$color-gray-90
);
}
@mixin calling-button-icon-regular($icon) {
@include calling-button-icon($icon, $color-gray-60, $color-gray-15);
backdrop-filter: blur(10px);
@include calling-button-icon(
$icon,
variables.$color-gray-60,
variables.$color-gray-15
);
& {
backdrop-filter: blur(10px);
}
}
@mixin calling-button-icon-disabled($icon) {
@include calling-button-icon($icon, $color-gray-60, $color-gray-15);
opacity: 0.4;
@include calling-button-icon(
$icon,
variables.$color-gray-60,
variables.$color-gray-15
);
& {
opacity: 0.4;
}
}
&--audio {
@ -83,8 +104,8 @@
&--hangup {
@include calling-button-icon(
'../images/icons/v3/phone/phone-down-fill-light.svg',
$color-accent-red,
$color-white
variables.$color-accent-red,
variables.$color-white
);
}
@ -168,13 +189,13 @@
}
&__tooltip {
background-color: $color-gray-80;
color: $color-gray-15;
background-color: variables.$color-gray-80;
color: variables.$color-gray-15;
font-size: 13px;
outline: 1px solid $color-gray-62;
outline: 1px solid variables.$color-gray-62;
padding-block: 5px;
padding-inline: 12px;
filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
pointer-events: none;
}
@ -186,24 +207,24 @@
}
&__tooltip[data-placement='bottom'] .module-tooltip-arrow::before {
border-color: transparent transparent $color-gray-62 transparent;
border-color: transparent transparent variables.$color-gray-62 transparent;
margin-top: -14px;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
}
&__tooltip[data-placement='bottom'] .module-tooltip-arrow::after {
border-bottom-color: $color-gray-80 !important;
border-bottom-color: variables.$color-gray-80 !important;
}
&__tooltip[data-placement='top'] .module-tooltip-arrow::before {
border-color: $color-gray-62 transparent transparent transparent;
border-color: variables.$color-gray-62 transparent transparent transparent;
margin-top: 0;
/* stylelint-disable-next-line liberty/use-logical-spec */
margin-left: -7px;
}
&__tooltip[data-placement='top'] .module-tooltip-arrow::after {
border-top-color: $color-gray-80 !important;
border-top-color: variables.$color-gray-80 !important;
}
}

View file

@ -1,15 +1,18 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingLobby {
&__local-preview {
position: absolute;
z-index: $z-index-negative;
z-index: variables.$z-index-negative;
top: 28px;
-webkit-app-region: no-drag;
&--camera-is-on {
@include lonely-local-video-preview;
@include mixins.lonely-local-video-preview;
width: auto;
height: 100%;
max-height: calc(100% - 140px);
@ -25,7 +28,7 @@
}
&--camera-is-off {
@include lonely-local-video-preview;
@include mixins.lonely-local-video-preview;
width: auto;
height: 100%;
max-height: calc(100% - 140px);
@ -36,7 +39,7 @@
position: absolute;
height: 100%;
width: 100%;
background: $color-black-alpha-40;
background: variables.$color-black-alpha-40;
}
}
}
@ -53,21 +56,21 @@
}
.CallingLobby__CallLinkNotice {
@include font-caption;
@include mixins.font-caption;
display: flex;
padding-block: 12px;
padding-inline: 18px;
margin-block-end: 32px;
width: 340px;
background: $color-gray-78;
color: $color-white;
background: variables.$color-gray-78;
color: variables.$color-white;
border-radius: 10px;
align-items: center;
text-align: center;
}
.CallingLobby__CallLinkNotice--join-request-pending {
@include font-body-1;
@include mixins.font-body-1;
width: auto;
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingPendingParticipants {
width: 420px;
height: auto;
@ -18,7 +21,7 @@
}
.CallingPendingParticipants--Expandable {
background: $color-gray-78;
background: variables.$color-gray-78;
}
.CallingPendingParticipants--Expanded {
@ -38,19 +41,19 @@
}
.CallingPendingParticipants__ParticipantButton {
@include button-reset();
@include mixins.button-reset();
}
.CallingPendingParticipants__ParticipantButton:focus {
@include keyboard-mode {
outline: 3px solid $color-ultramarine;
@include mixins.keyboard-mode {
outline: 3px solid variables.$color-ultramarine;
outline-offset: 1px;
}
}
.CallingPendingParticipants__ParticipantName {
@include font-body-1-bold;
color: $color-gray-15;
@include mixins.font-body-1-bold;
color: variables.$color-gray-15;
}
.CallingPendingParticipants__ParticipantAboutIcon {
@ -61,15 +64,15 @@
position: relative;
inset-block-start: 3px;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05
variables.$color-gray-05
);
}
.CallingPendingParticipants__WouldLikeToJoin {
@include font-body-2;
color: $color-gray-20;
@include mixins.font-body-2;
color: variables.$color-gray-20;
}
.CallingPendingParticipants__PendingActionButton {
@ -111,11 +114,17 @@
}
.CallingPendingParticipants__PendingActionButtonIcon--Approve {
@include color-svg('../images/icons/v3/check/check-bold.svg', $color-white);
@include mixins.color-svg(
'../images/icons/v3/check/check-bold.svg',
variables.$color-white
);
}
.CallingPendingParticipants__PendingActionButtonIcon--Deny {
@include color-svg('../images/icons/v3/x/x-bold.svg', $color-white);
@include mixins.color-svg(
'../images/icons/v3/x/x-bold.svg',
variables.$color-white
);
}
.CallingPendingParticipants__ActionPanel {
@ -133,26 +142,28 @@
}
.CallingPendingParticipants__ShowAllRequestsButton {
@include button-reset;
@include font-body-2-bold;
display: flex;
padding-block: 5px;
padding-inline: 15px;
margin-block: 12px;
margin-inline: auto;
color: $color-white-alpha-90;
background: $color-gray-65;
border-radius: 46px;
outline: none;
@include mixins.button-reset;
& {
@include mixins.font-body-2-bold;
display: flex;
padding-block: 5px;
padding-inline: 15px;
margin-block: 12px;
margin-inline: auto;
color: variables.$color-white-alpha-90;
background: variables.$color-gray-65;
border-radius: 46px;
outline: none;
}
}
.CallingPendingParticipants__ShowAllRequestsButton:focus {
@include keyboard-mode {
outline: 3px solid $color-ultramarine;
@include mixins.keyboard-mode {
outline: 3px solid variables.$color-ultramarine;
outline-offset: 1px;
}
}
.CallingPendingParticipants__ShowAllRequestsButtonContainer {
background: $color-black-alpha-24;
background: variables.$color-black-alpha-24;
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingPreCallInfo {
text-align: center;
user-select: none;
@ -8,22 +11,22 @@
&__title,
&__subtitle {
-webkit-box-orient: vertical;
color: $color-white;
color: variables.$color-white;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
@include calling-text-shadow;
@include mixins.calling-text-shadow;
}
&__title {
-webkit-line-clamp: 1;
@include font-title-2;
@include mixins.font-title-2;
margin-top: 16px;
}
&__subtitle {
-webkit-line-clamp: 2;
@include font-body-1;
@include mixins.font-body-1;
margin-top: 8px;
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingRaisedHandsList {
width: 100%;
height: auto;
@ -45,22 +48,24 @@
}
.CallingRaisedHandsList__Button {
@include button-reset;
position: absolute;
inset-inline-start: 16px;
inset-block-end: 16px;
display: flex;
padding-block: 14px;
padding-inline: 12px;
background: $color-white;
border-radius: 24px;
color: $color-black;
font-size: 14px;
z-index: $z-index-above-above-base;
@include mixins.button-reset;
& {
position: absolute;
inset-inline-start: 16px;
inset-block-end: 16px;
display: flex;
padding-block: 14px;
padding-inline: 12px;
background: variables.$color-white;
border-radius: 24px;
color: variables.$color-black;
font-size: 14px;
z-index: variables.$z-index-above-above-base;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
}
}
}
@ -73,9 +78,9 @@
margin-inline-end: 4px;
content: '';
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-black
variables.$color-black
);
}
@ -86,23 +91,25 @@
height: $icon-size;
content: '';
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-gray-15
variables.$color-gray-15
);
}
.CallingRaisedHandsList__LowerMyHandLink {
@include button-reset;
display: flex;
margin-inline-end: 16px;
font-size: 13px;
font-weight: 500;
color: $color-ultramarine-pastel;
@include mixins.button-reset;
& {
display: flex;
margin-inline-end: 16px;
font-size: 13px;
font-weight: 500;
color: variables.$color-ultramarine-pastel;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingRaisedHandsToast__Content {
display: flex;
margin-block: 4px;
@ -16,21 +19,23 @@
margin-inline-end: 8px;
content: '';
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-white
variables.$color-white
);
}
.CallingRaisedHandsToasts__Link {
@include button-reset;
color: $color-ultramarine-pastel;
font-weight: 600;
margin-inline-start: 16px;
@include mixins.button-reset;
& {
color: variables.$color-ultramarine-pastel;
font-weight: 600;
margin-inline-start: 16px;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
}
}
}

View file

@ -1,9 +1,12 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingReactionsToasts {
position: absolute;
inset-block-end: calc($CallControls__height + 32px);
inset-block-end: calc(variables.$CallControls__height + 32px);
inset-inline-start: 65px;
width: 100%;
}
@ -25,9 +28,9 @@
}
.CallingReactionsToasts .CallingToast {
@include font-body-1;
@include mixins.font-body-1;
padding-inline: 16px;
color: $color-gray-20;
color: variables.$color-gray-20;
font-size: 15px;
line-height: 20px;
transform: rotate(-180deg);

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingScreenSharingController {
display: flex;
width: 100%;
@ -10,10 +13,10 @@
overflow: hidden;
align-items: center;
justify-content: space-between;
@include draggable-region;
@include mixins.draggable-region;
&__text {
@include font-body-2;
@include mixins.font-body-2;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
@ -39,11 +42,16 @@
}
&__close {
@include button-reset;
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
width: 4.5vw;
height: 45.5vh;
margin-inline-start: 2.5vw;
cursor: pointer;
@include mixins.button-reset;
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-25
);
& {
width: 4.5vw;
height: 45.5vh;
margin-inline-start: 2.5vw;
cursor: pointer;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CallingSelectPresentingSourcesModal {
&__width-container {
max-width: 665px;
@ -10,7 +13,7 @@
// there's no module-class-name on the footer,
// so we have to reference it using the generic selector
.module-Modal__button-footer {
background-color: $color-gray-95;
background-color: variables.$color-gray-95;
}
&__sources {
@ -30,18 +33,19 @@
}
&__source {
@include button-reset();
border-radius: 4px;
border: 1px solid $color-gray-60;
overflow: hidden;
padding: 8px;
text-align: center;
width: 200px;
@include mixins.button-reset();
& {
border-radius: 4px;
border: 1px solid variables.$color-gray-60;
overflow: hidden;
padding: 8px;
text-align: center;
width: 200px;
}
&--selected {
background-color: $color-ultramarine-dark;
border: 1px solid $color-ultramarine-dark;
background-color: variables.$color-ultramarine-dark;
border: 1px solid variables.$color-ultramarine-dark;
}
img {

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingStatusIndicator {
$size: 28px;
@ -10,9 +13,9 @@
height: $size;
min-width: $size;
width: $size;
z-index: $z-index-base;
z-index: variables.$z-index-base;
border-radius: calc($size / 2);
background: rgba($color-gray-80, 0.7);
background: rgba(variables.$color-gray-80, 0.7);
&::after {
content: '';
@ -23,26 +26,26 @@
}
.CallingStatusIndicator--HandRaised {
background: $color-white;
background: variables.$color-white;
}
.CallingStatusIndicator--HandRaised::after {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/raise_hand/raise_hand-light.svg',
$color-black
variables.$color-black
);
}
.CallingStatusIndicator--Video::after {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/video/video-slash-fill-light.svg',
$color-white
variables.$color-white
);
}
.module-ongoing-call__footer__local-preview .CallingStatusIndicator {
position: absolute;
z-index: $z-index-base;
z-index: variables.$z-index-base;
}
.module-ongoing-call__footer__local-preview .CallingStatusIndicator--Video {

View file

@ -1,9 +1,12 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallingToasts {
position: fixed;
z-index: $z-index-toast;
z-index: variables.$z-index-toast;
top: 32px;
width: 100%;
display: flex;
@ -21,16 +24,16 @@
}
.CallingToast--dismissable {
@include button-reset();
@include mixins.button-reset();
}
.CallingToast {
@include font-subtitle;
@include mixins.font-subtitle;
padding-block: 8px;
padding-inline: 12px;
border-radius: 22px;
background-color: $color-gray-80;
color: $color-gray-15;
background-color: variables.$color-gray-80;
color: variables.$color-gray-15;
text-align: center;
user-select: none;
&__reconnecting {
@ -42,10 +45,10 @@
.CallingButtonToasts__outer {
position: absolute;
inset-block-end: calc($CallControls__height + 16px);
inset-block-end: calc(variables.$CallControls__height + 16px);
width: 100%;
// Match .module-ongoing-call__footer
z-index: $z-index-above-base;
z-index: variables.$z-index-above-base;
}
// Match the width behavior of .CallControls
@ -53,8 +56,8 @@
display: flex;
flex-grow: 1;
flex-shrink: 0;
flex-basis: $CallControls__initial-width;
max-width: $CallControls__max-width;
flex-basis: variables.$CallControls__initial-width;
max-width: variables.$CallControls__max-width;
}
.CallingButtonToasts .CallingToasts {

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CallsTab {
display: flex;
width: 100%;
@ -11,16 +14,16 @@
display: block;
width: 20px;
height: 20px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-light.svg',
$color-black
variables.$color-black
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-light.svg',
$color-gray-15
variables.$color-gray-15
);
}
}
@ -29,11 +32,17 @@
display: block;
width: 20px;
height: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-15
);
}
}
@ -52,16 +61,16 @@
width: 40px;
height: 40px;
opacity: 0.7;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-display-bold.svg',
$color-gray-60
variables.$color-gray-60
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-display-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
}
@ -71,11 +80,11 @@
margin-inline: 0;
opacity: 0.7;
text-align: center;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
@ -85,16 +94,16 @@
width: 16px;
height: 16px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-bold.svg',
$color-gray-60
variables.$color-gray-60
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-plus-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
}
@ -110,16 +119,16 @@
}
.CallsTab__ClearCallHistoryIcon {
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/trash/trash-compact.svg',
$color-gray-90
variables.$color-gray-90
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/trash/trash-compact.svg',
$color-white
variables.$color-white
);
}
}
@ -133,10 +142,10 @@
display: flex;
align-items: center;
@include font-body-1-bold;
@include mixins.font-body-1-bold;
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
padding-inline-start: 24px;
text-overflow: ellipsis;
@ -145,27 +154,29 @@
}
.CallsList__ToggleFilterByMissed {
@include button-reset;
flex-shrink: 0;
padding: 4px;
margin-inline-end: 8px;
border-radius: 4px;
@include mixins.button-reset;
& {
flex-shrink: 0;
padding: 4px;
margin-inline-end: 8px;
border-radius: 4px;
}
&:not(.CallsList__ToggleFilterByMissed--pressed):hover {
@include light-theme {
background-color: $color-black-alpha-06;
@include mixins.light-theme {
background-color: variables.$color-black-alpha-06;
}
@include dark-theme {
background-color: $color-white-alpha-06;
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-06;
}
}
&:focus {
outline: none;
@include keyboard-mode {
@include mixins.keyboard-mode {
box-shadow:
0 0 0 2px $color-white,
0 0 0 4px $color-ultramarine;
0 0 0 2px variables.$color-white,
0 0 0 4px variables.$color-ultramarine;
}
}
@ -174,13 +185,16 @@
display: block;
width: 20px;
height: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/filter/filter.svg', $color-black);
}
@include dark-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
$color-gray-15
variables.$color-black
);
}
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
variables.$color-gray-15
);
}
}
@ -188,14 +202,17 @@
.CallsList__ToggleFilterByMissed--pressed {
border-radius: 9999px;
background: $color-accent-blue;
background: variables.$color-accent-blue;
&::before {
@include color-svg('../images/icons/v3/filter/filter.svg', $color-white);
@include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
variables.$color-white
);
}
}
.CallsList__ToggleFilterByMissedLabel {
@include sr-only;
@include mixins.sr-only;
}
.CallsList__ListContainer {
@ -204,7 +221,7 @@
}
.CallsList__List {
@include NavTabs__Scroller;
@include mixins.NavTabs__Scroller;
}
.CallsList__List--disableScrolling {
@ -225,31 +242,43 @@
}
.CallsList__ItemIcon--Phone {
@include light-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-gray-15
);
}
}
.CallsList__ItemIcon--Video {
@include light-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-gray-15
);
}
}
.CallsList__LoadingAvatar,
.CallsList__LoadingText {
animation: CallsList__LoadingPulse 1.5s ease-in-out infinite;
@include light-theme {
background-color: $color-gray-05;
@include mixins.light-theme {
background-color: variables.$color-gray-05;
}
@include dark-theme {
background-color: $color-gray-75;
@include mixins.dark-theme {
background-color: variables.$color-gray-75;
}
}
@ -282,11 +311,11 @@
.CallsList__Item--missed .ListTile__subtitle,
.CallsList__Item--declined .ListTile__subtitle {
// Need to override the themed selector specificity of .ListTile__subtitle
@include light-theme {
color: $color-accent-red;
@include mixins.light-theme {
color: variables.$color-accent-red;
}
@include dark-theme {
color: $color-accent-red;
@include mixins.dark-theme {
color: variables.$color-accent-red;
}
}
@ -296,16 +325,16 @@
// Override .ListTile__subtitle with correct font size
.ListTile__subtitle {
@include font-body-2;
@include mixins.font-body-2;
}
}
.CallsList__Item--selected .CallsList__ItemTile {
@include light-theme {
background-color: $color-gray-15;
@include mixins.light-theme {
background-color: variables.$color-gray-15;
}
@include dark-theme {
background-color: $color-gray-65;
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
}
}
@ -325,13 +354,13 @@
}
.CallsNewCall__List {
@include NavTabs__Scroller;
@include mixins.NavTabs__Scroller;
}
.CallsNewCall__ListHeaderItem {
padding-block: 10px;
padding-inline: 24px;
@include font-body-1-bold;
@include mixins.font-body-1-bold;
}
.CallsNewCall__EmptyState {
@ -347,21 +376,23 @@
}
.CallsNewCall__ItemActionButton {
@include button-reset;
padding: 4px;
border-radius: 4px;
@include mixins.button-reset;
& {
padding: 4px;
border-radius: 4px;
}
&:not(:disabled, [aria-disabled='true']):hover {
@include light-theme {
background: $color-gray-20;
@include mixins.light-theme {
background: variables.$color-gray-20;
}
@include dark-theme {
background: $color-gray-62;
@include mixins.dark-theme {
background: variables.$color-gray-62;
}
}
&:focus {
outline: none;
@include keyboard-mode {
box-shadow: 0 0 0 2px $color-ultramarine;
@include mixins.keyboard-mode {
box-shadow: 0 0 0 2px variables.$color-ultramarine;
}
}
&:disabled,
@ -371,24 +402,28 @@
}
.CallsNewCall__ItemActionButton--join-call {
@include button-active-call;
height: 26px;
padding-block: 4px;
padding-inline: 10px;
@include mixins.button-active-call;
& {
height: 26px;
padding-block: 4px;
padding-inline: 10px;
}
}
.CallsNewCall__ItemActionButton--join-call-disabled {
@include light-theme {
@include mixins.light-theme {
opacity: 0.4;
}
@include dark-theme {
@include mixins.dark-theme {
opacity: 0.5;
}
}
.CallsNewCall__ItemActionButtonTooltip {
@include tooltip;
max-width: 212px;
@include mixins.tooltip;
& {
max-width: 212px;
}
}
.CallsNewCall__ItemIcon {
@ -398,19 +433,31 @@
}
.CallsNewCall__ItemIcon--Phone {
@include light-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-gray-15
);
}
}
.CallsNewCall__ItemIcon--Video {
@include light-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-gray-15
);
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ChatColorPicker {
$bubble-size: 52px;
@ -10,12 +13,12 @@
margin-inline: auto;
hr {
@include light-theme {
border-color: $color-gray-15;
@include mixins.light-theme {
border-color: variables.$color-gray-15;
}
@include dark-theme {
border-color: $color-gray-75;
@include mixins.dark-theme {
border-color: variables.$color-gray-75;
}
}
}
@ -38,18 +41,18 @@
align-items: center;
display: flex;
justify-content: center;
@include color-bubble($bubble-size);
@include mixins.color-bubble($bubble-size);
&--selected {
border-color: $color-gray-75;
border-color: variables.$color-gray-75;
@include dark-theme {
border-color: $color-white;
@include mixins.dark-theme {
border-color: variables.$color-white;
}
}
&:focus {
border-color: $color-ultramarine;
border-color: variables.$color-ultramarine;
outline: none;
}
@ -59,19 +62,27 @@
display: block;
height: 24px;
width: 24px;
@include color-svg('../images/icons/v3/more/more.svg', $color-gray-05);
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-gray-05
);
}
}
&--custom {
background-color: $color-gray-05;
background-color: variables.$color-gray-05;
}
}
&__add-icon {
@include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-90);
display: block;
height: 24px;
width: 24px;
@include mixins.color-svg(
'../images/icons/v3/plus/plus.svg',
variables.$color-gray-90
);
& {
display: block;
height: 24px;
width: 24px;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Checkbox {
&__container {
align-items: center;
@ -10,17 +13,17 @@
height: 18px;
width: 18px;
@include mouse-mode {
@include mixins.mouse-mode {
&:focus,
&:active {
outline: none;
}
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus,
&:active {
outline: 1px solid $color-ultramarine;
outline: 1px solid variables.$color-ultramarine;
}
}
}
@ -33,12 +36,12 @@
}
&__description {
@include font-subtitle;
@include light-theme {
color: $color-gray-60;
@include mixins.font-subtitle;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CircleCheckbox {
&__checkbox {
position: relative;
@ -13,17 +16,17 @@
position: absolute;
width: 0;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
&::before {
border-color: $color-ultramarine;
border-color: variables.$color-ultramarine;
}
outline: none;
}
}
&::before {
@include rounded-corners;
@include mixins.rounded-corners;
background: inherit;
content: '';
display: block;
@ -31,11 +34,11 @@
position: absolute;
width: 20px;
@include light-theme {
border: 1.5px solid $color-gray-25;
@include mixins.light-theme {
border: 1.5px solid variables.$color-gray-25;
}
@include dark-theme {
border: 1.5px solid $color-gray-65;
@include mixins.dark-theme {
border: 1.5px solid variables.$color-gray-65;
}
}
@ -43,30 +46,30 @@
cursor: inherit;
}
@include light-theme {
@include mixins.light-theme {
&:disabled {
&::before {
border-color: $color-gray-15;
border-color: variables.$color-gray-15;
}
}
&:disabled:checked {
&::before {
background: $color-gray-15;
border-color: $color-gray-15;
background: variables.$color-gray-15;
border-color: variables.$color-gray-15;
}
}
}
@include dark-theme {
@include mixins.dark-theme {
&:disabled {
&::before {
border-color: $color-gray-45;
border-color: variables.$color-gray-45;
}
}
&:disabled:checked {
&::before {
background: $color-gray-45;
border-color: $color-gray-45;
background: variables.$color-gray-45;
border-color: variables.$color-gray-45;
}
}
}
@ -83,19 +86,21 @@
input[type='checkbox'] {
&:checked {
&:not([disabled])::before {
background: $color-ultramarine;
border: 1.5px solid $color-ultramarine;
background: variables.$color-ultramarine;
border: 1.5px solid variables.$color-ultramarine;
}
&::after {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/check/check-compact-bold.svg',
$color-white
variables.$color-white
);
width: 14px;
height: 14px;
top: 3px;
inset-inline-start: 3px;
& {
width: 14px;
height: 14px;
top: 3px;
inset-inline-start: 3px;
}
}
}
}
@ -103,11 +108,11 @@
input[type='radio'] {
&:checked {
&::before {
border: 2px solid $color-ultramarine;
border: 2px solid variables.$color-ultramarine;
}
&::after {
background: $color-ultramarine;
background: variables.$color-ultramarine;
top: 4px;
inset-inline-start: 4px;
width: 12px;
@ -131,12 +136,12 @@
input[type='checkbox'] {
&:checked {
&::before {
background: $color-ultramarine;
border: 1.5px solid $color-ultramarine;
background: variables.$color-ultramarine;
border: 1.5px solid variables.$color-ultramarine;
}
&::after {
border: solid $color-white;
border: solid variables.$color-white;
border-width: 0 2px 2px 0;
height: 10px;
/* stylelint-disable-next-line liberty/use-logical-spec */
@ -151,11 +156,11 @@
input[type='radio'] {
&:checked {
&::before {
border: 2px solid $color-ultramarine;
border: 2px solid variables.$color-ultramarine;
}
&::after {
background: $color-ultramarine;
background: variables.$color-ultramarine;
top: 4px;
/* stylelint-disable-next-line liberty/use-logical-spec */
left: 4px;

View file

@ -1,6 +1,10 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.ClearFilterButton {
display: flex;
justify-content: center;
@ -15,23 +19,31 @@
padding-block: 5px;
padding-inline: 15px;
@include dark-theme {
background-color: mix($color-gray-80, $color-gray-65, 40%);
color: $color-white;
@include mixins.dark-theme {
background-color: color.mix(
variables.$color-gray-80,
variables.$color-gray-65,
40%
);
color: variables.$color-white;
&:hover {
@include not-disabled {
background-color: $color-gray-65;
@include mixins.not-disabled {
background-color: variables.$color-gray-65;
}
}
}
@include light-theme {
background-color: mix($color-gray-04, $color-white, 15%);
color: $color-black;
@include mixins.light-theme {
background-color: color.mix(
variables.$color-gray-04,
variables.$color-white,
15%
);
color: variables.$color-black;
&:hover {
@include not-disabled {
background-color: $color-white;
@include mixins.not-disabled {
background-color: variables.$color-white;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ComposeStepButton {
&__icon {
display: flex;
@ -11,11 +14,11 @@
height: 32px;
border-radius: 16px;
@include light-theme {
background-color: $color-black-alpha-06;
@include mixins.light-theme {
background-color: variables.$color-black-alpha-06;
}
@include dark-theme {
background-color: $color-white-alpha-12;
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-12;
}
&::before {
@ -26,11 +29,11 @@
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
@include light-theme {
background-color: $color-black;
@include mixins.light-theme {
background-color: variables.$color-black;
}
@include dark-theme {
background-color: $color-gray-05;
@include mixins.dark-theme {
background-color: variables.$color-gray-05;
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CompositionArea {
position: relative;
min-height: 42px;
@ -56,14 +59,16 @@
}
&__edit-button {
@include button-reset;
@include rounded-corners;
align-items: center;
background-color: $color-gray-45;
display: flex;
height: 28px;
justify-content: center;
width: 28px;
@include mixins.button-reset;
& {
@include mixins.rounded-corners;
align-items: center;
background-color: variables.$color-gray-45;
display: flex;
height: 28px;
justify-content: center;
width: 28px;
}
&::before {
content: '';
@ -73,14 +78,20 @@
&--discard {
&::before {
@include color-svg('../images/icons/v3/x/x.svg', $color-white);
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-white
);
}
}
&--accept {
background-color: $color-ultramarine;
background-color: variables.$color-ultramarine;
margin-inline-start: 16px;
&::before {
@include color-svg('../images/icons/v3/check/check.svg', $color-white);
@include mixins.color-svg(
'../images/icons/v3/check/check.svg',
variables.$color-white
);
}
&:disabled {
opacity: 0.5;
@ -102,9 +113,9 @@
width: 20px;
height: 20px;
flex-shrink: 0;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/send/send-fill.svg',
$color-ultramarine
variables.$color-ultramarine
);
}
}
@ -141,12 +152,12 @@
pointer-events: all;
}
@include light-theme() {
background-color: $color-white;
@include mixins.light-theme() {
background-color: variables.$color-white;
}
@include dark-theme() {
background-color: $color-gray-95;
@include mixins.dark-theme() {
background-color: variables.$color-gray-95;
}
&__button {
@ -154,35 +165,35 @@
height: 24px;
border: none;
@include light-theme() {
@include color-svg(
@include mixins.light-theme() {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-up.svg',
$color-gray-45,
variables.$color-gray-45,
false
);
}
@include dark-theme() {
@include color-svg(
@include mixins.dark-theme() {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-up.svg',
$color-gray-45,
variables.$color-gray-45,
false
);
}
&--large-active {
@include light-theme() {
@include color-svg(
@include mixins.light-theme() {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-down.svg',
$color-gray-45,
variables.$color-gray-45,
false
);
}
@include dark-theme() {
@include color-svg(
@include mixins.dark-theme() {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-shallow-down.svg',
$color-gray-45,
variables.$color-gray-45,
false
);
}
@ -203,38 +214,38 @@
padding-inline: 16px;
&:not(.module-composition-area--pending) {
@include light-theme {
border-top: 1px solid $color-gray-05;
@include mixins.light-theme {
border-top: 1px solid variables.$color-gray-05;
}
@include dark-theme {
border-top: 1px solid $color-gray-75;
@include mixins.dark-theme {
border-top: 1px solid variables.$color-gray-75;
}
}
&__title {
@include font-body-2-bold;
@include mixins.font-body-2-bold;
margin-block: 0 2px;
margin-inline: 0;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
}
&__body {
@include font-body-2;
@include mixins.font-body-2;
text-align: center;
margin: 0;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
}
}
@ -250,9 +261,9 @@
align-items: center;
justify-content: center;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
outline: 2px solid $color-ultramarine;
outline: 2px solid variables.$color-ultramarine;
}
}
@ -264,16 +275,16 @@
width: 20px;
height: 20px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/attach/attach.svg',
$color-gray-75
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/attach/attach.svg',
$color-gray-15
variables.$color-gray-15
);
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-composition-input {
&__quill {
height: 100%;
@ -31,15 +34,15 @@
}
&__at-mention {
background-color: $color-gray-20;
background-color: variables.$color-gray-20;
border-radius: 4px;
display: inline;
padding-inline: 4px;
height: 22px;
line-height: 22px;
@include dark-theme {
background-color: $color-gray-60;
@include mixins.dark-theme {
background-color: variables.$color-gray-60;
}
}
@ -54,29 +57,29 @@
.ql-container {
// Inherit global font stack
font-family: inherit;
@include font-body-1;
@include mixins.font-body-1;
}
.ql-blank::before {
@include light-theme() {
color: $color-gray-45;
@include mixins.light-theme() {
color: variables.$color-gray-45;
}
@include dark-theme() {
color: $color-gray-25;
@include mixins.dark-theme() {
color: variables.$color-gray-25;
}
}
@include light-theme() {
@include mixins.light-theme() {
// Same as background color
background-color: $color-gray-05;
color: $color-gray-90;
background-color: variables.$color-gray-05;
color: variables.$color-gray-90;
}
@include dark-theme() {
@include mixins.dark-theme() {
// Same as background color
background-color: $color-gray-75;
color: $color-gray-05;
background-color: variables.$color-gray-75;
color: variables.$color-gray-05;
}
&__scroller {
@ -89,11 +92,11 @@
overflow: auto;
&::-webkit-scrollbar-thumb {
@include light-theme {
border: 2px solid $color-gray-05;
@include mixins.light-theme {
border: 2px solid variables.$color-gray-05;
}
@include dark-theme {
border: 2px solid $color-gray-75;
@include mixins.dark-theme {
border: 2px solid variables.$color-gray-75;
}
}
@ -116,12 +119,14 @@
}
}
border: $border-size solid transparent;
& {
border: $border-size solid transparent;
}
&:focus-within {
outline: 0;
@include keyboard-mode {
border: $border-size solid $color-ultramarine;
@include mixins.keyboard-mode {
border: $border-size solid variables.$color-ultramarine;
}
}
}
@ -131,7 +136,7 @@
padding-block: 6px;
padding-inline: 12px;
border-radius: 8px;
z-index: $z-index-above-popup;
z-index: variables.$z-index-above-popup;
display: flex;
flex-direction: row;
@ -144,85 +149,87 @@
0px 4px 10px rgba(0, 0, 0, 30%),
0px 0px 4px rgba(0, 0, 0, 5%);
@include light-theme() {
background: $color-white;
@include mixins.light-theme() {
background: variables.$color-white;
}
@include dark-theme() {
background: $color-gray-65;
@include mixins.dark-theme() {
background: variables.$color-gray-65;
}
&__item {
$parent: &;
@include button-reset;
height: 24px;
width: 24px;
border-radius: 4px;
margin-inline-end: 8px;
@include mixins.button-reset;
& {
height: 24px;
width: 24px;
border-radius: 4px;
margin-inline-end: 8px;
}
&:last-child {
margin-inline-end: 0;
}
@include mouse-mode {
@include mixins.mouse-mode {
&:hover {
background-color: $color-gray-05;
background-color: variables.$color-gray-05;
}
}
@include dark-mouse-mode {
@include mixins.dark-mouse-mode {
&:hover {
background-color: $color-gray-60;
background-color: variables.$color-gray-60;
}
}
&--active {
@include light-theme {
background-color: $color-gray-05;
@include mixins.light-theme {
background-color: variables.$color-gray-05;
}
@include dark-theme {
background-color: rgba($color-gray-45, 30%);
@include mixins.dark-theme {
background-color: rgba(variables.$color-gray-45, 30%);
}
@include mouse-mode {
@include mixins.mouse-mode {
&:hover {
background-color: $color-gray-15;
background-color: variables.$color-gray-15;
}
}
@include dark-mouse-mode {
@include mixins.dark-mouse-mode {
&:hover {
background-color: rgba($color-gray-45, 50%);
background-color: rgba(variables.$color-gray-45, 50%);
}
}
}
&__popover {
@include font-subtitle-bold;
padding-block: 5px;
padding-inline: 8px;
text-align: center;
border-radius: 4px;
margin-bottom: 8px;
@include mixins.font-subtitle-bold;
& {
padding-block: 5px;
padding-inline: 8px;
text-align: center;
border-radius: 4px;
margin-bottom: 8px;
opacity: 0;
transition: opacity 120ms ease-out;
@include light-theme {
background-color: $color-black;
color: $color-gray-05;
opacity: 0;
transition: opacity 120ms ease-out;
}
@include dark-theme {
background-color: $color-gray-65;
color: $color-gray-05;
@include mixins.light-theme {
background-color: variables.$color-black;
color: variables.$color-gray-05;
}
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
color: variables.$color-gray-05;
}
&__shortcut {
@include font-caption-bold;
@include mixins.font-caption-bold;
@include light-theme {
color: $color-gray-15;
@include mixins.light-theme {
color: variables.$color-gray-15;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
}
@ -233,76 +240,76 @@
margin: 2px;
&--bold {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-bold-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-bold-bold.svg',
$color-gray-60
variables.$color-gray-60
);
}
}
&--italic {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-italic-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-italic-bold.svg',
$color-gray-60
variables.$color-gray-60
);
}
}
&--strike {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-strikethrough-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-strikethrough-bold.svg',
$color-gray-60
variables.$color-gray-60
);
}
}
&--monospace {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-monospace-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-monospace-bold.svg',
$color-gray-60
variables.$color-gray-60
);
}
}
&--spoiler {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-spoiler-bold.svg',
$color-gray-25
variables.$color-gray-25
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/text_format/textformat-spoiler-bold.svg',
$color-gray-60
variables.$color-gray-60
);
}
}
@ -310,26 +317,26 @@
// Here we look at hover for the parent so the 2px border is a hover target
// Note: We can't use the mixins because .mouse-mode would end up after the >
.mouse-mode #{$parent}:hover & {
background-color: $color-gray-90;
background-color: variables.$color-gray-90;
}
.dark-theme.mouse-mode #{$parent}:hover & {
background-color: $color-gray-15;
background-color: variables.$color-gray-15;
}
&--active {
@include dark-theme {
background-color: $color-ultramarine-light;
@include mixins.dark-theme {
background-color: variables.$color-ultramarine-light;
}
@include light-theme {
background-color: $color-ultramarine;
@include mixins.light-theme {
background-color: variables.$color-ultramarine;
}
// Override above hover behaviors
.mouse-mode #{$parent}:hover & {
background-color: $color-ultramarine;
background-color: variables.$color-ultramarine;
}
.dark-theme.mouse-mode #{$parent}:hover & {
background-color: $color-ultramarine-light;
background-color: variables.$color-ultramarine-light;
}
}
}
@ -341,7 +348,7 @@
padding: 0;
margin-bottom: 6px;
border-radius: 8px;
z-index: $z-index-above-popup;
z-index: variables.$z-index-above-popup;
overflow: hidden;
&--scroller {
@ -349,14 +356,14 @@
overflow-y: auto;
}
@include popper-shadow();
@include mixins.popper-shadow();
@include light-theme() {
background: $color-white;
@include mixins.light-theme() {
background: variables.$color-white;
}
@include dark-theme() {
background: $color-gray-75;
@include mixins.dark-theme() {
background: variables.$color-gray-75;
}
&__row {
@ -379,14 +386,16 @@
outline: 0;
}
@include font-body-2;
@include light-theme() {
color: $color-gray-60;
& {
@include mixins.font-body-2;
}
@include dark-theme() {
color: $color-gray-25;
@include mixins.light-theme() {
color: variables.$color-gray-60;
}
@include mixins.dark-theme() {
color: variables.$color-gray-25;
}
&__short-name {
@ -395,14 +404,14 @@
&--selected,
&:hover {
@include light-theme() {
background: $color-gray-05;
color: $color-gray-90;
@include mixins.light-theme() {
background: variables.$color-gray-05;
color: variables.$color-gray-90;
}
@include dark-theme() {
background: $color-gray-60;
color: $color-gray-05;
@include mixins.dark-theme() {
background: variables.$color-gray-60;
color: variables.$color-gray-05;
}
}
}
@ -411,11 +420,13 @@
padding-inline-start: 8px;
}
stroke: $color-white;
& {
stroke: variables.$color-white;
}
}
&__editing-message {
@include font-body-2-bold;
@include mixins.font-body-2-bold;
margin-top: 10px;
user-select: none;
@ -428,10 +439,16 @@
width: 16px;
vertical-align: middle;
@include color-svg('../images/icons/v3/edit/edit.svg', $color-black);
@include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-black
);
@include dark-theme {
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-gray-15
);
}
}
@ -447,7 +464,7 @@
}
div.CompositionInput__link-preview {
background: $color-gray-02;
background: variables.$color-gray-02;
border-radius: 8px;
flex-direction: row-reverse;
justify-content: space-between;
@ -455,8 +472,8 @@ div.CompositionInput__link-preview {
min-height: 74px;
overflow: hidden;
@include dark-theme {
background: $color-gray-80;
@include mixins.dark-theme {
background: variables.$color-gray-80;
}
&__icon-container {
@ -480,10 +497,10 @@ div.CompositionInput__link-preview {
button.CompositionInput__link-preview__close-button {
-webkit-mask: none;
@include rounded-corners;
@include mixins.rounded-corners;
align-items: center;
backdrop-filter: blur(32px);
background: $color-white-alpha-80;
background: variables.$color-white-alpha-80;
display: flex;
height: 20px;
justify-content: center;
@ -492,13 +509,18 @@ button.CompositionInput__link-preview__close-button {
width: 20px;
&::before {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
content: '';
height: 16px;
width: 16px;
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-75
);
& {
content: '';
height: 16px;
width: 16px;
}
@include dark-theme {
background-color: $color-gray-05;
@include mixins.dark-theme {
background-color: variables.$color-gray-05;
}
}
}
@ -506,16 +528,16 @@ button.CompositionInput__link-preview__close-button {
// Note: These are referenced in formatting/matchers.ts, to detect these styles on paste
.quill {
&--monospace {
font-family: $monospace;
font-family: variables.$monospace;
}
&--spoiler {
@include light-theme {
@include mixins.light-theme {
// vs color/$color-gray-90, background/$color-gray-05
background-color: $color-gray-25;
background-color: variables.$color-gray-25;
}
@include dark-theme {
@include mixins.dark-theme {
// vs color/$color-gray-05, background/$color-gray-95
background-color: $color-gray-45;
background-color: variables.$color-gray-45;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CompositionRecording {
display: flex;
align-items: center;
@ -18,11 +21,11 @@
padding-block: 6px;
padding-inline: 12px;
@include light-theme {
background: $color-gray-05;
@include mixins.light-theme {
background: variables.$color-gray-05;
}
@include dark-theme {
background: $color-gray-75;
@include mixins.dark-theme {
background: variables.$color-gray-75;
}
}
@ -30,11 +33,13 @@
display: inline-block;
height: 20px;
width: 20px;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/mic/mic-fill.svg',
$color-accent-red
variables.$color-accent-red
);
animation: pulse 2s infinite;
& {
animation: pulse 2s infinite;
}
}
&__timer {

View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CompositionTextArea {
position: relative;
@ -15,7 +18,7 @@
border: none;
}
@include dark-theme() {
@include mixins.dark-theme() {
border: none;
&:focus-within {
@ -23,9 +26,9 @@
}
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus-within {
border: solid 1px $color-ultramarine;
border: solid 1px variables.$color-ultramarine;
}
}
}
@ -45,13 +48,13 @@
top: 8px;
button::after {
background-color: $color-black;
background-color: variables.$color-black;
}
}
&__remaining-character-count {
@include font-subtitle;
color: $color-gray-45;
@include mixins.font-subtitle;
color: variables.$color-gray-45;
position: absolute;
bottom: 0;
inset-inline-start: 0;

View file

@ -1,79 +1,82 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ContactListItem {
&__context-menu {
&__chat-icon {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chat/chat-compact.svg',
$color-white
variables.$color-white
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chat/chat-compact.svg',
$color-black
variables.$color-black
);
}
}
&__phone-icon {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-compact.svg',
$color-white
variables.$color-white
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone-compact.svg',
$color-black
variables.$color-black
);
}
}
&__video-icon {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video-compact.svg',
$color-white
variables.$color-white
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video-compact.svg',
$color-black
variables.$color-black
);
}
}
&__delete-icon {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/minus/minus-circle-compact.svg',
$color-white
variables.$color-white
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/minus/minus-circle-compact.svg',
$color-black
variables.$color-black
);
}
}
&__block-icon {
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/block/block-compact.svg',
$color-white
variables.$color-white
);
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/block/block-compact.svg',
$color-black
variables.$color-black
);
}
}
@ -91,12 +94,12 @@
}
&:hover {
@include light-theme {
background-color: $color-gray-20;
@include mixins.light-theme {
background-color: variables.$color-gray-20;
}
@include dark-theme {
background-color: $color-gray-80;
@include mixins.dark-theme {
background-color: variables.$color-gray-80;
}
}
@ -111,11 +114,17 @@
height: 20px;
content: '';
@include dark-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-white);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-white
);
}
@include light-theme {
@include color-svg('../images/icons/v3/more/more.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/more/more.svg',
variables.$color-black
);
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ContactModal {
align-items: center;
display: flex;
@ -11,16 +14,18 @@
padding-inline: 24px;
&__name {
@include button-reset();
@include font-title-1;
font-weight: 400;
display: flex;
flex-direction: row;
align-items: baseline;
max-width: 100%;
@include mixins.button-reset();
& {
@include mixins.font-title-1;
font-weight: 400;
display: flex;
flex-direction: row;
align-items: baseline;
max-width: 100%;
margin-top: 12px;
cursor: pointer;
margin-top: 12px;
cursor: pointer;
}
}
&__name__text {
@ -32,7 +37,7 @@
&__name__contact-icon {
height: 22px;
width: 22px;
@include any-theme {
@include mixins.any-theme {
background-color: currentColor;
}
}
@ -48,16 +53,16 @@
position: relative;
inset-block-start: 2px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-90
variables.$color-gray-90
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05
variables.$color-gray-05
);
}
}
@ -77,32 +82,33 @@
}
&__button {
@include button-reset;
display: flex;
align-items: center;
padding-block: 6px;
width: 100%;
@include mixins.button-reset;
& {
display: flex;
align-items: center;
padding-block: 6px;
width: 100%;
}
&:last-child {
margin-bottom: 0;
}
&:hover {
background-color: $color-gray-02;
background-color: variables.$color-gray-02;
@include dark-theme {
background-color: $color-gray-80;
@include mixins.dark-theme {
background-color: variables.$color-gray-80;
}
}
&:focus {
@include keyboard-mode {
background-color: $color-gray-02;
@include mixins.keyboard-mode {
background-color: variables.$color-gray-02;
}
@include dark-keyboard-mode {
background-color: $color-gray-80;
@include mixins.dark-keyboard-mode {
background-color: variables.$color-gray-80;
}
}
}
@ -119,12 +125,18 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/edit/edit.svg',
variables.$color-gray-15
);
}
}
@ -132,12 +144,18 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/chat/chat.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chat/chat.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/chat/chat.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chat/chat.svg',
variables.$color-gray-15
);
}
}
@ -145,17 +163,17 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/safety_number/safety_number.svg',
$color-gray-75
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/safety_number/safety_number.svg',
$color-gray-15
variables.$color-gray-15
);
}
}
@ -164,12 +182,18 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/block/block.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/block/block.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/block/block.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/block/block.svg',
variables.$color-gray-15
);
}
}
@ -177,12 +201,18 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/key/key.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/key/key.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/key/key.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/key/key.svg',
variables.$color-gray-15
);
}
}
@ -190,17 +220,17 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/plus/plus-circle.svg',
$color-gray-75
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/plus/plus-circle.svg',
$color-gray-15
variables.$color-gray-15
);
}
}
@ -209,12 +239,18 @@
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v3/leave/leave.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/leave/leave.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/leave/leave.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/leave/leave.svg',
variables.$color-gray-15
);
}
}
@ -237,7 +273,7 @@
width: 10px;
height: 10px;
border-radius: 5px;
background: $color-white;
background: variables.$color-white;
}
}
@ -251,9 +287,9 @@
inset-inline-start: 0;
width: 100%;
height: 100%;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/official/official-compact.svg',
$color-ultramarine
variables.$color-ultramarine
);
}
}
@ -276,9 +312,9 @@
inset-inline-start: 0;
width: 100%;
height: 100%;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/official/official.svg',
$color-ultramarine
variables.$color-ultramarine
);
}
}
@ -299,14 +335,16 @@
border-bottom: none;
border-width: 1px;
@include light-theme {
border-color: $color-gray-15;
@include mixins.light-theme {
border-color: variables.$color-gray-15;
}
@include dark-theme {
border-color: $color-gray-75;
@include mixins.dark-theme {
border-color: variables.$color-gray-75;
}
margin-block: 8px 5px;
& {
margin-block: 8px 5px;
}
}
}

View file

@ -1,8 +1,10 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
button.module-contact-name {
@include button-reset;
@include mixins.button-reset;
&:hover,
&:focus {
@ -10,7 +12,7 @@ button.module-contact-name {
}
&:focus {
@include keyboard-mode {
@include mixins.keyboard-mode {
outline: auto;
text-decoration: none;
}
@ -20,252 +22,252 @@ button.module-contact-name {
.module-contact-name {
&--000 {
color: #d00b0b;
@include dark-theme {
@include mixins.dark-theme {
color: #ff7070;
}
}
&--010 {
color: #c13215;
@include dark-theme {
@include mixins.dark-theme {
color: #ff6f52;
}
}
&--020 {
color: #b34209;
@include dark-theme {
@include mixins.dark-theme {
color: #f57a3d;
}
}
&--030 {
color: #9c5711;
@include dark-theme {
@include mixins.dark-theme {
color: #d5920b;
}
}
&--040 {
color: #866118;
@include dark-theme {
@include mixins.dark-theme {
color: #d68f00;
}
}
&--050 {
color: #76681e;
@include dark-theme {
@include mixins.dark-theme {
color: #b89b0a;
}
}
&--060 {
color: #6b6b24;
@include dark-theme {
@include mixins.dark-theme {
color: #a4a437;
}
}
&--070 {
color: #5e6e0c;
@include dark-theme {
@include mixins.dark-theme {
color: #8faa09;
}
}
&--080 {
color: #4b7000;
@include dark-theme {
@include mixins.dark-theme {
color: #74ad00;
}
}
&--090 {
color: #3d7406;
@include dark-theme {
@include mixins.dark-theme {
color: #5eb309;
}
}
&--100 {
color: #2d7906;
@include dark-theme {
@include mixins.dark-theme {
color: #42b309;
}
}
&--110 {
color: #2d761e;
@include dark-theme {
@include mixins.dark-theme {
color: #43b42d;
}
}
&--120 {
color: #067906;
@include dark-theme {
@include mixins.dark-theme {
color: #0ab80a;
}
}
&--130 {
color: #067919;
@include dark-theme {
@include mixins.dark-theme {
color: #0ab827;
}
}
&--140 {
color: #06792d;
@include dark-theme {
@include mixins.dark-theme {
color: #0ab844;
}
}
&--150 {
color: #007a3d;
@include dark-theme {
@include mixins.dark-theme {
color: #00b85c;
}
}
&--160 {
color: #067953;
@include dark-theme {
@include mixins.dark-theme {
color: #00b87a;
}
}
&--170 {
color: #067462;
@include dark-theme {
@include mixins.dark-theme {
color: #09b397;
}
}
&--180 {
color: #007575;
@include dark-theme {
@include mixins.dark-theme {
color: #00b2b2;
}
}
&--190 {
color: #077288;
@include dark-theme {
@include mixins.dark-theme {
color: #00aed1;
}
}
&--200 {
color: #006da3;
@include dark-theme {
@include mixins.dark-theme {
color: #00a7fa;
}
}
&--210 {
color: #5b6976;
@include dark-theme {
@include mixins.dark-theme {
color: #8ba1b6;
}
}
&--220 {
color: #2662d9;
@include dark-theme {
@include mixins.dark-theme {
color: #7da1e8;
}
}
&--230 {
color: #2e51ff;
@include dark-theme {
@include mixins.dark-theme {
color: #8599ff;
}
}
&--240 {
color: #5151f6;
@include dark-theme {
@include mixins.dark-theme {
color: #9494ff;
}
}
&--250 {
color: #6447f5;
@include dark-theme {
@include mixins.dark-theme {
color: #a18ff9;
}
}
&--260 {
color: #7a3df5;
@include dark-theme {
@include mixins.dark-theme {
color: #af8af9;
}
}
&--270 {
color: #8f2af4;
@include dark-theme {
@include mixins.dark-theme {
color: #bf80ff;
}
}
&--280 {
color: #a20ced;
@include dark-theme {
@include mixins.dark-theme {
color: #cf7cf8;
}
}
&--290 {
color: #af0bd0;
@include dark-theme {
@include mixins.dark-theme {
color: #e06ef7;
}
}
&--300 {
color: #b814b8;
@include dark-theme {
@include mixins.dark-theme {
color: #f65af6;
}
}
&--310 {
color: #c20aa3;
@include dark-theme {
@include mixins.dark-theme {
color: #f75fdd;
}
}
&--320 {
color: #c70a88;
@include dark-theme {
@include mixins.dark-theme {
color: #f76ec9;
}
}
&--330 {
color: #cc0066;
@include dark-theme {
@include mixins.dark-theme {
color: #f76eb2;
}
}
&--340 {
color: #d00b4d;
@include dark-theme {
@include mixins.dark-theme {
color: #ff6b9c;
}
}
&--350 {
color: #d00b2c;
@include dark-theme {
@include mixins.dark-theme {
color: #f77389;
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ContactPill {
align-items: center;
display: inline-flex;
@ -10,31 +13,31 @@
padding-inline: 8px;
border-radius: 6px;
@include light-theme {
background: $color-black-alpha-08;
color: $color-gray-90;
@include mixins.light-theme {
background: variables.$color-black-alpha-08;
color: variables.$color-gray-90;
}
@include dark-theme {
background: $color-white-alpha-12;
color: $color-gray-05;
@include mixins.dark-theme {
background: variables.$color-white-alpha-12;
color: variables.$color-gray-05;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus-within {
@include light-theme {
background: $color-gray-45;
color: $color-white;
@include mixins.light-theme {
background: variables.$color-gray-45;
color: variables.$color-white;
}
@include dark-theme {
background: $color-gray-25;
color: $color-gray-90;
@include mixins.dark-theme {
background: variables.$color-gray-25;
color: variables.$color-gray-90;
}
}
}
&__contact-name {
@include font-body-2;
@include mixins.font-body-2;
padding-block: 0;
padding-inline: 6px;
text-overflow: ellipsis;
@ -45,14 +48,16 @@
&__remove {
$icon: '../images/icons/v3/x/x-compact-light.svg';
@include button-reset;
height: 100%;
display: flex;
width: 16px;
height: 16px;
justify-content: center;
align-items: center;
padding: 0;
@include mixins.button-reset;
& {
height: 100%;
display: flex;
width: 16px;
height: 16px;
justify-content: center;
align-items: center;
padding: 0;
}
&::before {
content: '';
@ -60,25 +65,25 @@
height: 100%;
display: block;
@include light-theme {
@include color-svg($icon, $color-gray-60);
@include mixins.light-theme {
@include mixins.color-svg($icon, variables.$color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-25);
@include mixins.dark-theme {
@include mixins.color-svg($icon, variables.$color-gray-25);
}
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
&::before {
@include color-svg($icon, $color-white);
@include mixins.color-svg($icon, variables.$color-white);
}
}
}
@include dark-keyboard-mode {
@include mixins.dark-keyboard-mode {
&:focus {
&::before {
@include color-svg($icon, $color-gray-90);
@include mixins.color-svg($icon, variables.$color-gray-90);
}
}
}

View file

@ -1,18 +1,21 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-ContactPills {
@include smooth-scroll;
@use '../mixins';
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
max-height: 88px;
overflow-x: hidden;
overflow-y: scroll;
padding-block: 4px;
padding-inline: 16px;
gap: 8px 12px;
.module-ContactPills {
@include mixins.smooth-scroll;
& {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
max-height: 88px;
overflow-x: hidden;
overflow-y: scroll;
padding-block: 4px;
padding-inline: 16px;
gap: 8px 12px;
}
.module-ContactPill {
max-width: calc(

View file

@ -1,18 +1,21 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ContactSpoofingReviewDialog {
user-select: none;
p {
@include font-body-2;
@include mixins.font-body-2;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
}
@ -21,7 +24,7 @@
}
h2 {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
margin-top: 28px;
margin-bottom: 20px;
}
@ -32,11 +35,11 @@
margin-block: 12px;
margin-inline: 0;
@include light-theme {
background: $color-gray-05;
@include mixins.light-theme {
background: variables.$color-gray-05;
}
@include dark-theme {
background: $color-gray-75;
@include mixins.dark-theme {
background: variables.$color-gray-75;
}
}

View file

@ -1,13 +1,16 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ContactSpoofingReviewDialogPerson {
display: flex;
padding-block: 8px;
gap: 16px;
&:is(button) {
@include button-reset;
@include mixins.button-reset;
}
&__info {
@ -16,23 +19,25 @@
gap: 12px;
&__contact-name {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
display: block;
}
&__property {
@include font-body-2;
@include mixins.font-body-2;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
display: flex;
gap: 12px;
& {
display: flex;
gap: 12px;
}
&__icon {
display: inline-block;
@ -42,12 +47,12 @@
flex-shrink: 0;
@mixin contact-spoofing-icon($url) {
@include light-theme {
@include color-svg($url, $color-gray-90);
@include mixins.light-theme {
@include mixins.color-svg($url, variables.$color-gray-90);
}
@include dark-theme {
@include color-svg($url, $color-gray-05);
@include mixins.dark-theme {
@include mixins.color-svg($url, variables.$color-gray-05);
}
}
@ -79,8 +84,10 @@
flex-direction: row;
align-items: center;
@include button-reset();
cursor: pointer;
@include mixins.button-reset();
& {
cursor: pointer;
}
&::after {
content: '';
@ -88,9 +95,9 @@
height: 20px;
width: 20px;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-45
variables.$color-gray-45
);
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ContextMenu {
&__container {
align-items: center;
@ -9,11 +12,13 @@
}
&__popper {
@extend %module-composition-popper;
margin: 0;
padding-block: 6px;
padding-inline: 0px;
width: auto;
@include mixins.module-composition-popper;
& {
margin: 0;
padding-block: 6px;
padding-inline: 0px;
width: auto;
}
&--single-item {
padding: 0;
@ -21,26 +26,28 @@
}
&__title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
margin-bottom: 12px;
}
&__button {
@include button-reset();
@include mixins.button-reset();
}
&__option {
@include button-reset();
@include font-body-2;
@include dark-theme {
color: $color-gray-05;
}
@include mixins.button-reset();
& {
@include mixins.font-body-2;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
align-items: center;
display: flex;
justify-content: space-between;
min-width: 150px;
width: 100%;
align-items: center;
display: flex;
justify-content: space-between;
min-width: 150px;
width: 100%;
}
&--container {
display: flex;
@ -58,16 +65,16 @@
}
}
&--selected::before {
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/check/check.svg',
$color-black
variables.$color-black
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/check/check.svg',
$color-white
variables.$color-white
);
}
}
@ -84,28 +91,28 @@
}
&--title {
@include font-body-2;
@include mixins.font-body-2;
}
&--description {
@include font-subtitle;
@include mixins.font-subtitle;
}
&:hover {
@include light-theme() {
background-color: $color-gray-05;
@include mixins.light-theme() {
background-color: variables.$color-gray-05;
}
@include dark-theme() {
background-color: $color-gray-65;
@include mixins.dark-theme() {
background-color: variables.$color-gray-65;
}
}
&--focused,
&:focus,
&:active {
@include keyboard-mode {
box-shadow: 0 0 1px 1px $color-ultramarine;
@include mixins.keyboard-mode {
box-shadow: 0 0 1px 1px variables.$color-ultramarine;
outline: none;
}
}
@ -119,12 +126,12 @@
margin-top: 2px;
margin-bottom: 2px;
@include light-theme {
border-color: $color-gray-15;
@include mixins.light-theme {
border-color: variables.$color-gray-15;
}
@include dark-theme {
border-color: $color-gray-65;
@include mixins.dark-theme {
border-color: variables.$color-gray-65;
}
}
}

View file

@ -1,9 +1,12 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationDetails {
&__chat-color {
@include color-bubble(32px);
@include mixins.color-bubble(32px);
}
&-membership-list,
@ -11,11 +14,16 @@
&__add-members-icon,
&__add-to-group-icon {
@mixin plus-icon($color) {
@include color-svg('../images/icons/v3/plus/plus-compact.svg', $color);
content: '';
display: block;
height: 18px;
width: 18px;
@include mixins.color-svg(
'../images/icons/v3/plus/plus-compact.svg',
$color
);
& {
content: '';
display: block;
height: 18px;
width: 18px;
}
}
align-items: center;
@ -25,26 +33,26 @@
justify-content: center;
width: 32px;
@include light-theme {
background: $color-gray-02;
@include mixins.light-theme {
background: variables.$color-gray-02;
&::before {
@include plus-icon($color-black);
@include plus-icon(variables.$color-black);
}
}
@include dark-theme {
background: $color-gray-90;
@include mixins.dark-theme {
background: variables.$color-gray-90;
&::before {
@include plus-icon($color-gray-15);
@include plus-icon(variables.$color-gray-15);
}
}
}
}
&__block-group {
color: $color-accent-red;
color: variables.$color-accent-red;
}
&__unblock-group {
color: $color-accent-blue;
color: variables.$color-accent-blue;
}
&__tabs {
@ -54,16 +62,18 @@
}
&__pending--info {
@include font-subtitle;
@include light-theme {
color: $color-gray-60;
@include mixins.font-subtitle;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
& {
padding-block: 0;
padding-inline: 28px;
padding-top: 16px;
}
padding-block: 0;
padding-inline: 28px;
padding-top: 16px;
}
&-icon {
@ -76,8 +86,8 @@
outline: none;
.ConversationDetails-icon__icon::after {
@include keyboard-mode {
background-color: $color-ultramarine;
@include mixins.keyboard-mode {
background-color: variables.$color-ultramarine;
}
}
}
@ -99,15 +109,15 @@
@mixin details-icon(
$url,
$light-color: $color-gray-75,
$dark-color: $color-gray-15
$light-color: variables.$color-gray-75,
$dark-color: variables.$color-gray-15
) {
@include light-theme {
@include color-svg($url, $light-color);
@include mixins.light-theme {
@include mixins.color-svg($url, $light-color);
}
@include dark-theme {
@include color-svg($url, $dark-color);
@include mixins.dark-theme {
@include mixins.color-svg($url, $dark-color);
}
}
@ -205,12 +215,12 @@
&--down {
border-radius: 18px;
@include light-theme {
background-color: $color-gray-02;
@include mixins.light-theme {
background-color: variables.$color-gray-02;
}
@include dark-theme {
background-color: $color-gray-90;
@include mixins.dark-theme {
background-color: variables.$color-gray-90;
}
&::after {
@ -232,8 +242,8 @@
&::after {
@include details-icon(
'../images/icons/v3/block/block.svg',
$color-accent-red,
$color-accent-red
variables.$color-accent-red,
variables.$color-accent-red
);
}
}
@ -241,8 +251,8 @@
&::after {
@include details-icon(
'../images/icons/v3/block/block.svg',
$color-accent-blue,
$color-accent-blue
variables.$color-accent-blue,
variables.$color-accent-blue
);
}
}
@ -294,11 +304,11 @@
border: none;
padding: 0;
@include light-theme {
color: $color-gray-95;
@include mixins.light-theme {
color: variables.$color-gray-95;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
}
}
@ -314,19 +324,19 @@
padding-inline: 24px;
user-select: none;
width: 100%;
@include font-body-2;
@include mixins.font-body-2;
&--button {
color: inherit;
background: none;
&:hover:not(:disabled) {
@include light-theme {
background-color: $color-gray-02;
@include mixins.light-theme {
background-color: variables.$color-gray-02;
}
@include dark-theme {
background-color: $color-gray-90;
@include mixins.dark-theme {
background-color: variables.$color-gray-90;
}
& .ConversationDetails-panel-row__actions {
@ -345,11 +355,11 @@
}
}
@include keyboard-mode {
@include keyboard-focus-state($color-ultramarine);
@include mixins.keyboard-mode {
@include keyboard-focus-state(variables.$color-ultramarine);
}
@include dark-keyboard-mode {
@include keyboard-focus-state($color-ultramarine-light);
@include mixins.dark-keyboard-mode {
@include keyboard-focus-state(variables.$color-ultramarine-light);
}
}
@ -367,18 +377,18 @@
&__info {
margin-top: 4px;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
&__right {
position: relative;
color: $color-gray-45;
color: variables.$color-gray-45;
min-width: 143px;
}
@ -401,18 +411,20 @@
&:not(:first-child)::before {
border-top: 1px solid transparent;
@include light-theme {
border-top-color: $color-gray-15;
@include mixins.light-theme {
border-top-color: variables.$color-gray-15;
}
@include dark-theme {
border-top-color: $color-gray-65;
@include mixins.dark-theme {
border-top-color: variables.$color-gray-65;
}
content: '';
display: block;
margin-block: 8px;
margin-inline: 0;
& {
content: '';
display: block;
margin-block: 8px;
margin-inline: 0;
}
}
&--borderless {
@ -434,7 +446,7 @@
}
&__title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
}
}
@ -483,29 +495,47 @@
}
.ConversationDetails__CallHistoryGroup__ItemIcon--Audio {
@include light-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/phone/phone.svg',
variables.$color-gray-15
);
}
}
.ConversationDetails__CallHistoryGroup__ItemIcon--Video {
@include light-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/video/video.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/video/video.svg',
variables.$color-gray-15
);
}
}
.ConversationDetails__CallHistoryGroup__ItemIcon--Adhoc {
@include light-theme {
@include color-svg('../images/icons/v3/link/link.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/link/link.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/link/link.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/link/link.svg',
variables.$color-gray-15
);
}
}
@ -518,40 +548,48 @@
}
.ConversationDetails--nickname-actions {
@include button-reset;
width: 32px;
height: 32px;
@include mixins.button-reset;
& {
width: 32px;
height: 32px;
}
&::before {
display: inline-block;
content: '';
width: 20px;
height: 20px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-down.svg',
$color-black
variables.$color-black
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-down.svg',
$color-white
variables.$color-white
);
}
}
}
.ConversationDetails--nickname-actions-label {
@include sr-only;
@include mixins.sr-only;
}
.ConversationDetails--nickname-actions--delete {
width: 16px;
height: 16px;
@include light-theme {
@include color-svg('../images/icons/v3/trash/trash.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/trash/trash.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/trash/trash.svg',
variables.$color-white
);
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationDetailsHeader {
align-items: center;
display: flex;
@ -14,12 +17,14 @@
&__edit-button,
&__about-button {
@include button-reset();
cursor: pointer;
@include mixins.button-reset();
& {
cursor: pointer;
}
}
&__title {
@include font-title-1;
@include mixins.font-title-1;
font-weight: 400;
padding-bottom: 8px;
padding-top: 12px;
@ -33,13 +38,13 @@
}
&__subtitle {
@include font-body-1;
color: $color-gray-60;
@include mixins.font-body-1;
color: variables.$color-gray-60;
justify-content: center;
padding-bottom: 6px;
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
&__about {
@ -64,11 +69,11 @@
transition: opacity 100ms ease-out;
width: $size;
@include light-theme {
@include color-svg($icon, $color-gray-60);
@include mixins.light-theme {
@include mixins.color-svg($icon, variables.$color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-25);
@include mixins.dark-theme {
@include mixins.color-svg($icon, variables.$color-gray-25);
}
}
}
@ -86,16 +91,16 @@
position: relative;
inset-block-start: 2px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-black
variables.$color-black
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05
variables.$color-gray-05
);
}
}

View file

@ -1,6 +1,10 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use 'sass:color';
@use '../mixins';
@use '../variables';
.module-ConversationHeader {
@mixin icon-element($icon, $margin-right: 4px) {
display: flex;
@ -17,11 +21,11 @@
display: block;
margin-inline-end: $margin-right;
@include light-theme {
@include color-svg($icon, $color-gray-60);
@include mixins.light-theme {
@include mixins.color-svg($icon, variables.$color-gray-60);
}
@include dark-theme {
@include color-svg($icon, $color-gray-25);
@include mixins.dark-theme {
@include mixins.color-svg($icon, variables.$color-gray-25);
}
}
}
@ -32,7 +36,7 @@
--button-spacing: 4px;
}
@include draggable-region;
@include mixins.draggable-region;
// In Electron v23+, clicking on a `drag` region in an unfocused window may not
// propagate clicks to no-drag elements that have a higher CSS order; this avoids that
// scenario for interactive elements (e.g. IncomingCallBar) which overlap the
@ -45,15 +49,15 @@
display: flex;
flex-direction: row;
align-items: center;
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
height: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
@include light-theme {
color: $color-gray-90;
background-color: $color-white;
@include mixins.light-theme {
color: variables.$color-gray-90;
background-color: variables.$color-white;
}
@include dark-theme {
color: $color-gray-02;
background-color: $color-gray-95;
@include mixins.dark-theme {
color: variables.$color-gray-02;
background-color: variables.$color-gray-95;
}
&__header {
@ -70,24 +74,26 @@
transition: margin-inline-end 200ms ease-out;
&--clickable {
@include button-reset;
flex: 1;
border-radius: 4px;
-webkit-app-region: no-drag;
@include mixins.button-reset;
& {
flex: 1;
border-radius: 4px;
-webkit-app-region: no-drag;
// These are clobbered by button-reset:
margin-inline: 4px var(--button-spacing);
padding: $padding;
padding-inline-start: 0;
// These are clobbered by button-reset:
margin-inline: 4px var(--button-spacing);
padding: $padding;
padding-inline-start: 0;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
color: $color-ultramarine;
color: variables.$color-ultramarine;
}
}
@include dark-keyboard-mode {
@include mixins.dark-keyboard-mode {
&:focus {
color: $color-ultramarine-light;
color: variables.$color-ultramarine-light;
}
}
}
@ -105,7 +111,7 @@
min-width: 0;
&__title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
display: flex;
align-items: center;
@ -121,18 +127,20 @@
&__subtitle {
display: flex;
@include font-body-2;
@include mixins.font-body-2;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
&__expiration {
@include icon-element('../images/icons/v3/timer/timer-compact.svg');
margin-inline-end: 12px;
& {
margin-inline-end: 12px;
}
}
&__verified {
@ -148,21 +156,23 @@
$icon-size: 32px;
-webkit-app-region: no-drag;
@include button-reset;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 2px solid transparent;
display: flex;
height: $icon-size;
margin-inline-end: var(--button-spacing);
min-width: $icon-size;
padding: 2px;
transition:
margin-inline-end 200ms ease-out,
opacity 200ms ease-out,
background 100ms ease-out;
width: $icon-size;
@include mixins.button-reset;
& {
align-items: center;
justify-content: center;
border-radius: 4px;
border: 2px solid transparent;
display: flex;
height: $icon-size;
margin-inline-end: var(--button-spacing);
min-width: $icon-size;
padding: 2px;
transition:
margin-inline-end 200ms ease-out,
opacity 200ms ease-out,
background 100ms ease-out;
width: $icon-size;
}
&:disabled {
cursor: default;
@ -174,50 +184,50 @@
}
&--in-another-call {
@include light-theme {
@include mixins.light-theme {
opacity: 0.5;
}
@include dark-theme {
@include mixins.dark-theme {
opacity: 0.4;
}
}
&:not(:disabled) {
@include light-theme {
@include mixins.light-theme {
&:hover {
background: $color-gray-02;
background: variables.$color-gray-02;
}
&:focus {
@include keyboard-mode {
background: $color-gray-02;
@include mixins.keyboard-mode {
background: variables.$color-gray-02;
}
}
&:active {
background: $color-gray-05;
background: variables.$color-gray-05;
}
}
@include dark-theme {
@include mixins.dark-theme {
&:hover {
background: $color-gray-80;
background: variables.$color-gray-80;
}
&:focus {
@include keyboard-mode {
background: $color-gray-02;
@include mixins.keyboard-mode {
background: variables.$color-gray-02;
}
}
&:active {
background: $color-gray-75;
background: variables.$color-gray-75;
}
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
border-color: $color-ultramarine;
border-color: variables.$color-ultramarine;
}
}
@include dark-keyboard-mode {
@include mixins.dark-keyboard-mode {
&:focus {
border-color: $color-ultramarine-light;
border-color: variables.$color-ultramarine-light;
}
}
}
@ -229,20 +239,20 @@
width: $size;
height: $size;
@include light-theme {
@include color-svg($icon, $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg($icon, variables.$color-gray-75);
&:hover,
&:active,
&:focus {
@include color-svg($icon, $color-gray-90);
@include mixins.color-svg($icon, variables.$color-gray-90);
}
}
@include dark-theme {
@include color-svg($icon, $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg($icon, variables.$color-gray-15);
&:hover,
&:active,
&:focus {
@include color-svg($icon, $color-gray-02);
@include mixins.color-svg($icon, variables.$color-gray-02);
}
}
}
@ -262,17 +272,19 @@
&--more {
@include normal-button('../images/icons/v3/more/more.svg', 20px);
margin-inline-end: 16px;
& {
margin-inline-end: 16px;
}
}
&--join-call {
$background: $color-accent-green;
$background: variables.$color-accent-green;
@include font-body-1;
@include rounded-corners;
@include mixins.font-body-1;
@include mixins.rounded-corners;
align-items: center;
background-color: $background;
color: $color-white;
color: variables.$color-white;
display: flex;
outline: none;
overflow: hidden;
@ -287,29 +299,31 @@
&:before {
$icon-size: 16px;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/video/video-compact-fill.svg',
$color-white
variables.$color-white
);
content: '';
display: block;
height: $icon-size;
margin-inline-end: 4px;
min-width: $icon-size;
width: $icon-size;
& {
content: '';
display: block;
height: $icon-size;
margin-inline-end: 4px;
min-width: $icon-size;
width: $icon-size;
}
}
&:not(:disabled) {
// Override hover/focus/active state coming from __button above.
&:hover,
&:active {
@include any-theme {
background-color: darken($background, 16%);
@include mixins.any-theme {
background-color: color.adjust($background, $lightness: -16%);
}
}
&:focus {
@include keyboard-mode {
background-color: darken($background, 16%);
@include mixins.keyboard-mode {
background-color: color.adjust($background, $lightness: -16%);
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-conversation-hero {
padding-block: 32px 28px;
padding-inline: 0;
@ -11,12 +14,14 @@
}
&__title {
@include button-reset();
cursor: pointer;
@include mixins.button-reset();
& {
cursor: pointer;
}
}
&__title span {
@include font-title-1;
@include mixins.font-title-1;
font-weight: 400;
}
@ -29,16 +34,16 @@
position: relative;
inset-block-start: 2px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-90
variables.$color-gray-90
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-right-bold.svg',
$color-gray-05
variables.$color-gray-05
);
}
}
@ -48,47 +53,47 @@
align-items: center;
justify-content: center;
@include font-title-2;
@include mixins.font-title-2;
margin-bottom: 2px;
margin-top: 0;
@include light-theme {
color: $color-gray-90;
@include mixins.light-theme {
color: variables.$color-gray-90;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
}
&__with {
@include font-body-2;
@include mixins.font-body-2;
margin-block: 0;
margin-inline: auto;
margin-bottom: 20px;
max-width: 500px;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
&__note-to-self {
@include font-body-2;
@include mixins.font-body-2;
padding-block: 0;
padding-inline: 16px;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
@ -97,11 +102,11 @@
padding-block: 6px;
padding-inline: 14px;
margin-top: 12px;
@include font-subtitle;
@include mixins.font-subtitle;
}
&__membership {
@include font-body-2;
@include mixins.font-body-2;
user-select: none;
max-width: 255px;
@ -113,19 +118,19 @@
border-style: solid;
border-width: 1.5px;
@include light-theme() {
border-color: $color-gray-05;
@include mixins.light-theme() {
border-color: variables.$color-gray-05;
}
@include dark-theme() {
border-color: $color-gray-80;
@include mixins.dark-theme() {
border-color: variables.$color-gray-80;
}
@include light-theme {
color: $color-gray-90;
@include mixins.light-theme {
color: variables.$color-gray-90;
}
@include dark-theme {
color: $color-gray-02;
@include mixins.dark-theme {
color: variables.$color-gray-02;
}
&__chevron {
@ -135,14 +140,17 @@
vertical-align: text-top;
margin-inline-end: 8px;
@include light-theme {
@include color-svg('../images/icons/v3/group/group.svg', $color-black);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/group/group.svg',
variables.$color-black
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/group/group.svg',
$color-gray-05
variables.$color-gray-05
);
}
}
@ -163,30 +171,32 @@
width: 18px;
vertical-align: middle;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/info/info.svg',
$color-gray-90
variables.$color-gray-90
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/info/info.svg',
$color-gray-02
variables.$color-gray-02
);
}
}
&__learn-more {
@include button-reset();
cursor: pointer;
text-decoration: underline;
@include mixins.button-reset();
& {
cursor: pointer;
text-decoration: underline;
}
}
}
}
&__linkNotification {
@include font-body-2;
@include mixins.font-body-2;
margin-top: 12px;
text-align: center;
@ -200,11 +210,17 @@
vertical-align: middle;
width: 16px;
@include light-theme {
@include color-svg('../images/icons/v3/info/info.svg', $color-gray-60);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/info/info.svg',
variables.$color-gray-60
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/info/info.svg', $color-gray-25);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/info/info.svg',
variables.$color-gray-25
);
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationPanel {
height: 100%;
inset-inline-start: 0;
@ -8,18 +11,20 @@
position: absolute;
top: 0;
width: 100%;
z-index: $z-index-above-base;
z-index: variables.$z-index-above-base;
@include light-theme() {
background-color: $color-white;
@include mixins.light-theme() {
background-color: variables.$color-white;
}
@include dark-theme() {
background-color: $color-gray-95;
@include mixins.dark-theme() {
background-color: variables.$color-gray-95;
}
&__body {
margin-top: calc(#{$header-height} + var(--title-bar-drag-area-height));
margin-top: calc(
#{variables.$header-height} + var(--title-bar-drag-area-height)
);
padding-inline: 24px;
}
@ -27,19 +32,21 @@
align-items: center;
display: flex;
flex-direction: row;
height: calc(#{$header-height} + var(--title-bar-drag-area-height));
height: calc(
#{variables.$header-height} + var(--title-bar-drag-area-height)
);
padding-top: var(--title-bar-drag-area-height);
position: fixed;
width: 100%;
z-index: $z-index-base;
z-index: variables.$z-index-base;
@include light-theme {
color: $color-gray-90;
background-color: $color-white;
@include mixins.light-theme {
color: variables.$color-gray-90;
background-color: variables.$color-white;
}
@include dark-theme {
color: $color-gray-02;
background-color: $color-gray-95;
@include mixins.dark-theme {
color: variables.$color-gray-02;
background-color: variables.$color-gray-95;
}
&__info {
@ -48,7 +55,7 @@
min-width: 0;
&__title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
display: flex;
align-items: center;
@ -79,27 +86,27 @@
cursor: default;
}
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-90
variables.$color-gray-90
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/chevron/chevron-left.svg',
$color-gray-02
variables.$color-gray-02
);
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
background-color: $color-ultramarine;
background-color: variables.$color-ultramarine;
}
}
@include dark-keyboard-mode {
@include mixins.dark-keyboard-mode {
&:focus {
background-color: $color-ultramarine-light;
background-color: variables.$color-ultramarine-light;
}
}
}
@ -111,7 +118,7 @@
position: absolute;
top: 0;
width: 100%;
z-index: $z-index-above-base;
z-index: variables.$z-index-above-base;
}
&__hidden {

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.ConversationView {
display: flex;
flex-direction: column;
@ -9,20 +12,22 @@
&__pane {
display: flex;
flex-direction: column;
height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height));
height: calc(
100% - #{variables.$header-height} - var(--title-bar-drag-area-height)
);
inset-inline-start: 0;
overflow-y: overlay;
position: absolute;
top: calc(#{$header-height} + var(--title-bar-drag-area-height));
top: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
width: 100%;
z-index: $z-index-base;
z-index: variables.$z-index-base;
@include light-theme() {
background-color: $color-white;
@include mixins.light-theme() {
background-color: variables.$color-white;
}
@include dark-theme() {
background-color: $color-gray-95;
@include mixins.dark-theme() {
background-color: variables.$color-gray-95;
}
}
@ -35,15 +40,17 @@
z-index: 0;
}
-webkit-padding-start: 0px;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
position: absolute;
top: 0;
width: 100%;
& {
-webkit-padding-start: 0px;
height: 100%;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
}
&__composition-area {

View file

@ -1,27 +1,32 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CountryCodeSelect {
@include button-reset();
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
@include mixins.button-reset();
& {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
@include font-body-2;
border: solid 1px transparent;
border-radius: 8px;
height: 28px;
padding-inline: 12px;
width: 100%;
@include light-theme {
background-color: $color-black-alpha-06;
color: $color-gray-90;
@include mixins.font-body-2;
border: solid 1px transparent;
border-radius: 8px;
height: 28px;
padding-inline: 12px;
width: 100%;
}
@include dark-theme {
background-color: $color-white-alpha-12;
color: $color-gray-05;
@include mixins.light-theme {
background-color: variables.$color-black-alpha-06;
color: variables.$color-gray-90;
}
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-12;
color: variables.$color-gray-05;
}
&__text {
@ -33,17 +38,17 @@
width: 16px;
height: 16px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/dropdown/dropdown-compact.svg',
$color-black
variables.$color-black
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/dropdown/dropdown-compact.svg',
$color-gray-05
variables.$color-gray-05
);
}
}
@ -72,33 +77,35 @@
}
&__CountryButton {
@include button-reset();
@include font-body-1;
@include mixins.button-reset();
& {
@include mixins.font-body-1;
width: 100%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
display: flex;
flex-direction: row;
align-items: center;
height: 40px;
padding-inline: 14px;
border-radius: 8px;
height: 40px;
padding-inline: 14px;
border-radius: 8px;
}
@include mouse-mode {
@include mixins.mouse-mode {
&:hover {
@include light-theme {
background-color: $color-black-alpha-06;
@include mixins.light-theme {
background-color: variables.$color-black-alpha-06;
}
@include dark-theme {
background-color: $color-white-alpha-12;
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-12;
}
}
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
box-shadow: inset 0px 0px 0px 2px variables.$color-ultramarine;
}
}
}

View file

@ -1,10 +1,13 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.CustomColorEditor {
&__messages {
border-radius: 8px;
border: 1px solid $color-gray-15;
border: 1px solid variables.$color-gray-15;
padding-block: 27px;
padding-inline: 0;
margin-top: 16px;
@ -16,9 +19,11 @@
}
&__gradient-knob {
@include color-bubble(42px);
cursor: move;
position: absolute;
@include mixins.color-bubble(42px);
& {
cursor: move;
position: absolute;
}
}
&__slider-container {
@ -45,7 +50,7 @@
&__hue-slider__handle {
&:focus {
outline: none;
border: 2px solid $color-white;
border: 2px solid variables.$color-white;
border-radius: 8px;
}
}

View file

@ -1,13 +1,16 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-CustomizingPreferredReactionsModal {
&__overlay-container {
z-index: $z-index-above-context-menu;
z-index: variables.$z-index-above-context-menu;
}
&__small-emoji-picker-wrapper {
@include font-subtitle;
@include mixins.font-subtitle;
align-items: center;
display: flex;
flex-direction: column;
@ -17,11 +20,11 @@
text-align: center;
user-select: none;
@include light-theme {
color: $color-gray-45;
@include mixins.light-theme {
color: variables.$color-gray-45;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
.module-ReactionPickerPicker {

View file

@ -1,6 +1,9 @@
// Copyright 2016 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.DebugLogWindow {
display: flex;
flex-direction: column;
@ -22,15 +25,15 @@
overflow-y: scroll;
max-height: 100%;
border: 1px solid $color-gray-45;
border: 1px solid variables.$color-gray-45;
@include dark-theme {
background-color: $color-gray-90;
color: $color-gray-02;
@include mixins.dark-theme {
background-color: variables.$color-gray-90;
color: variables.$color-gray-02;
}
&__text {
font-family: $monospace;
font-family: variables.$monospace;
font-size: 12px;
margin: 0;
user-select: none;
@ -39,16 +42,16 @@
}
&__title {
@include font-title-2;
@include mixins.font-title-2;
}
&__subtitle {
@include font-body-2;
@include light-theme {
color: $color-gray-60;
@include mixins.font-body-2;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
@ -70,13 +73,13 @@
padding-inline: 10px;
width: 100%;
@include light-theme {
border: solid 1px $color-gray-25;
@include mixins.light-theme {
border: solid 1px variables.$color-gray-25;
}
@include dark-theme {
background-color: $color-gray-90;
border: solid 1px $color-gray-45;
color: $color-gray-02;
@include mixins.dark-theme {
background-color: variables.$color-gray-90;
border: solid 1px variables.$color-gray-45;
color: variables.$color-gray-02;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-disappearing-timer-select {
position: relative;
@ -10,14 +13,14 @@
margin-top: 4px;
padding-inline-start: 14px;
@include font-subtitle;
@include mixins.font-subtitle;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-EditConversationAttributesModal {
.module-AvatarInput {
margin-block: 24px;
@ -8,14 +11,14 @@
}
&__error-message {
@include font-body-1;
@include mixins.font-body-1;
margin-block: 16px;
margin-inline: 0;
}
&__description-warning {
@include font-subtitle;
color: $color-gray-45;
@include mixins.font-subtitle;
color: variables.$color-gray-45;
margin-block: 0;
margin-inline: 16px;
}

View file

@ -1,37 +1,40 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.EditHistoryMessagesModal {
&__divider {
border-bottom: 0;
border-style: solid;
margin-block: 24px;
@include light-theme {
border-color: $color-gray-15;
@include mixins.light-theme {
border-color: variables.$color-gray-15;
}
@include dark-theme {
border-color: $color-gray-75;
@include mixins.dark-theme {
border-color: variables.$color-gray-75;
}
}
&__title {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
}
.module-message {
padding-inline: 0;
&__link-preview__content {
@include dark-theme {
background-color: $color-gray-75;
@include mixins.dark-theme {
background-color: variables.$color-gray-75;
}
}
&__container--incoming {
@include dark-theme {
background-color: $color-gray-65;
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
}
}
}

View file

@ -1,18 +1,21 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.EditNicknameAndNoteModal__width-container {
max-width: 360px;
}
.EditNicknameAndNoteModal__Description {
margin-block: 12px 24px;
@include font-body-2;
@include light-theme {
color: $color-gray-75;
@include mixins.font-body-2;
@include mixins.light-theme {
color: variables.$color-gray-75;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
@ -23,5 +26,5 @@
}
.EditNicknameAndNoteModal__Label {
@include sr-only;
@include mixins.sr-only;
}

View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.EditUsernameModalBody {
&__header {
display: flex;
@ -19,12 +22,12 @@
margin-top: 21px;
margin-bottom: 16px;
@include light-theme {
background-color: $color-gray-04;
@include mixins.light-theme {
background-color: variables.$color-gray-04;
}
@include dark-theme {
background-color: $color-gray-65;
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
}
&::after {
@ -33,12 +36,18 @@
height: 36px;
content: '';
@include light-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/at/at.svg',
variables.$color-gray-75
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/at/at.svg',
variables.$color-gray-15
);
}
}
}
@ -54,12 +63,12 @@
margin-block: 0;
margin-inline: 12px;
@include light-theme {
background-color: $color-gray-20;
@include mixins.light-theme {
background-color: variables.$color-gray-20;
}
@include dark-theme {
background-color: $color-gray-45;
@include mixins.dark-theme {
background-color: variables.$color-gray-45;
}
}
@ -68,27 +77,27 @@
}
&__error {
@include font-body-2;
@include mixins.font-body-2;
margin-block: 8px 12px;
margin-inline: 6px;
font-size: 12px;
line-height: 17px;
color: $color-accent-red;
color: variables.$color-accent-red;
}
&__info {
@include font-body-2;
@include mixins.font-body-2;
font-size: 12px;
line-height: 17px;
margin-block: 12px;
margin-inline: 6px;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
// To account for missing error section: 8px top margin, 17px line height,
@ -99,8 +108,10 @@
}
&__learn-more-button {
@include button-reset;
color: $color-accent-blue;
@include mixins.button-reset;
& {
color: variables.$color-accent-blue;
}
}
&__learn-more {
@ -118,15 +129,17 @@
-webkit-mask-size: 100%;
content: '';
@include light-theme {
background-color: $color-gray-75;
@include mixins.light-theme {
background-color: variables.$color-gray-75;
}
@include dark-theme {
background-color: $color-gray-15;
@include mixins.dark-theme {
background-color: variables.$color-gray-15;
}
-webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center;
& {
-webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-ForwardMessageModal {
flex-direction: column;
margin-block: 0;
@ -14,12 +17,12 @@
}
&--link-preview {
border-bottom: 1px solid $color-gray-15;
border-bottom: 1px solid variables.$color-gray-15;
padding-block: 12px;
padding-inline: 16px;
@include dark-theme() {
border-color: $color-gray-60;
@include mixins.dark-theme() {
border-color: variables.$color-gray-60;
}
}
@ -62,18 +65,18 @@
&::after {
height: 24px;
width: 24px;
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/arrow/arrow-right.svg',
$color-white
variables.$color-white
);
}
}
&--forward {
&::after {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/send/send-fill.svg',
$color-white
variables.$color-white
);
}
}
@ -86,7 +89,7 @@
}
&__footer {
@include font-body-2;
@include mixins.font-body-2;
display: flex;
align-items: center;
flex-grow: 1;

View file

@ -1,10 +1,13 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.GradientDial {
&__container {
height: 100%;
@include position-absolute-center;
@include mixins.position-absolute-center;
width: 100%;
}
@ -17,8 +20,8 @@
}
&--node {
background: $color-white;
border: 1px solid $color-black-alpha-20;
background: variables.$color-white;
border: 1px solid variables.$color-black-alpha-20;
height: 100%;
height: 1000px;
inset-inline-start: 50%;
@ -30,20 +33,22 @@
}
&__knob {
@include color-bubble(42px);
box-shadow: 0 0 4px $color-black-alpha-20;
cursor: move;
margin-inline-start: -20px;
margin-top: -20px;
padding: 2px;
position: absolute;
z-index: $z-index-base;
@include mixins.color-bubble(42px);
& {
box-shadow: 0 0 4px variables.$color-black-alpha-20;
cursor: move;
margin-inline-start: -20px;
margin-top: -20px;
padding: 2px;
position: absolute;
z-index: variables.$z-index-base;
}
&--selected {
border-color: $color-gray-75;
border-color: variables.$color-gray-75;
@include dark-theme {
border-color: $color-white;
@include mixins.dark-theme {
border-color: variables.$color-white;
}
}
@ -51,9 +56,9 @@
outline: none;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
border-color: $color-ultramarine;
border-color: variables.$color-ultramarine;
outline: none;
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.GroupDescription {
&__text {
-webkit-box-orient: vertical;
@ -10,18 +13,20 @@
user-select: text;
a {
@include light-theme {
color: $color-gray-90;
@include mixins.light-theme {
color: variables.$color-gray-90;
}
@include dark-theme {
color: $color-gray-02;
@include mixins.dark-theme {
color: variables.$color-gray-02;
}
}
}
&__read-more {
@include button-reset();
display: inline-block;
font-weight: bold;
@include mixins.button-reset();
& {
display: inline-block;
font-weight: bold;
}
}
}

View file

@ -1,59 +1,72 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-GroupDialog {
@include popper-shadow();
border-radius: 8px;
margin-block: 0;
margin-inline: auto;
max-height: 80vh;
max-width: 360px;
padding: 16px;
position: relative;
width: 95%;
display: flex;
flex-direction: column;
@use '../mixins';
@use '../variables';
@include light-theme() {
background: $color-white;
color: $color-gray-90;
.module-GroupDialog {
@include mixins.popper-shadow();
& {
border-radius: 8px;
margin-block: 0;
margin-inline: auto;
max-height: 80vh;
max-width: 360px;
padding: 16px;
position: relative;
width: 95%;
display: flex;
flex-direction: column;
}
@include dark-theme() {
background: $color-gray-95;
color: $color-gray-05;
@include mixins.light-theme() {
background: variables.$color-white;
color: variables.$color-gray-90;
}
@include mixins.dark-theme() {
background: variables.$color-gray-95;
color: variables.$color-gray-05;
}
&__close-button {
@include button-reset;
@include mixins.button-reset;
position: absolute;
inset-inline-end: 12px;
top: 12px;
& {
position: absolute;
inset-inline-end: 12px;
top: 12px;
height: 24px;
width: 24px;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
height: 24px;
width: 24px;
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-75
);
}
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-15
);
}
&:focus {
@include keyboard-mode {
background-color: $color-ultramarine;
@include mixins.keyboard-mode {
background-color: variables.$color-ultramarine;
}
@include dark-keyboard-mode {
background-color: $color-ultramarine-light;
@include mixins.dark-keyboard-mode {
background-color: variables.$color-ultramarine-light;
}
}
}
&__title {
@include font-title-2;
@include mixins.font-title-2;
text-align: center;
margin-bottom: 20px;
@ -84,11 +97,11 @@
top: 4px;
width: 4px;
@include light-theme {
background-color: $color-gray-15;
@include mixins.light-theme {
background-color: variables.$color-gray-15;
}
@include dark-theme {
background-color: $color-gray-65;
@include mixins.dark-theme {
background-color: variables.$color-gray-65;
}
}
}

View file

@ -1,8 +1,11 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-GroupInput {
@include normal-input;
@include mixins.normal-input;
&__description {
resize: none;
@ -13,9 +16,9 @@
}
&--remaining {
@include font-subtitle;
@include mixins.font-subtitle;
bottom: 0;
color: $color-gray-45;
color: variables.$color-gray-45;
margin: 12px;
position: absolute;
inset-inline-end: 0;

View file

@ -1,6 +1,8 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../variables';
.HueSlider {
&.Slider {
background-image: linear-gradient(
@ -24,7 +26,7 @@
&__handle {
&.Slider__handle {
border: 7px solid $color-white;
border: 7px solid variables.$color-white;
margin-top: -7px;
margin-inline-start: -11px;
height: 22px;

View file

@ -1,6 +1,8 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.InAnotherCallTooltip {
@include tooltip;
@include mixins.tooltip;
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Inbox {
display: flex;
flex-direction: row;
@ -25,12 +28,12 @@
}
.__conversation {
@include light-theme {
background-color: $color-white;
@include mixins.light-theme {
background-color: variables.$color-white;
}
@include dark-theme {
background-color: $color-gray-95;
@include mixins.dark-theme {
background-color: variables.$color-gray-95;
}
}
}
@ -48,11 +51,11 @@
margin-block: 24px;
position: relative;
@include light-theme() {
--Inbox__logo__bg: #{$color-ultramarine-logo};
@include mixins.light-theme() {
--Inbox__logo__bg: #{variables.$color-ultramarine-logo};
}
@include dark-theme() {
--Inbox__logo__bg: #{$color-white};
@include mixins.dark-theme() {
--Inbox__logo__bg: #{variables.$color-white};
}
.Inbox__logo__part {
@ -62,8 +65,13 @@
}
.Inbox__logo__part--base {
@include color-svg('../images/logo-parts/base.svg', var(--Inbox__logo__bg));
z-index: 1;
@include mixins.color-svg(
'../images/logo-parts/base.svg',
var(--Inbox__logo__bg)
);
& {
z-index: 1;
}
}
.Inbox__logo__part--segment {
@ -79,11 +87,13 @@
@for $i from 1 through 16 {
.Inbox__logo__part--segment:nth-child(#{$i + 1}) {
@include color-svg(
@include mixins.color-svg(
'../images/logo-parts/p#{$i}.svg',
var(--Inbox__logo__bg)
);
transform: rotate(#{(16 - $i) * 22.5}deg);
& {
transform: rotate(#{(16 - $i) * 22.5}deg);
}
}
}
@ -96,7 +106,7 @@
.Inbox__welcome {
margin-block: 20px 6px;
@include font-title-medium;
@include mixins.font-title-medium;
line-height: 24px;
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.IncomingCallBar {
&__container {
-webkit-app-region: no-drag;
@ -9,14 +12,14 @@
top: 22px;
user-select: none;
width: 100%;
z-index: $z-index-calling;
z-index: variables.$z-index-calling;
padding-inline: 1rem;
}
&__bar {
-webkit-app-region: no-drag;
align-items: center;
background-color: $color-gray-75;
background-color: variables.$color-gray-75;
border-radius: 8px;
display: flex;
height: 70px;
@ -49,7 +52,7 @@
}
&--name-header {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
color: #ffffff;
overflow-x: hidden;
text-overflow: ellipsis;
@ -59,7 +62,7 @@
&--message-text {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
@include font-body-2;
@include mixins.font-body-2;
color: #ffffff;
display: -webkit-box;
overflow: hidden;
@ -90,102 +93,110 @@
}
&--accept-video-as-audio {
background-color: $color-gray-45;
background-color: variables.$color-gray-45;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine;
box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
}
}
@include mouse-mode {
@include mixins.mouse-mode {
&:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
}
}
div {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/video/video-slash-fill.svg',
$color-white
variables.$color-white
);
height: 24px;
width: 24px;
& {
height: 24px;
width: 24px;
}
}
}
&--accept-video {
background-color: $color-accent-green;
background-color: variables.$color-accent-green;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine;
box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
}
}
@include mouse-mode {
@include mixins.mouse-mode {
&:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
}
}
div {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/video/video-fill.svg',
$color-white
variables.$color-white
);
height: 24px;
width: 24px;
& {
height: 24px;
width: 24px;
}
}
}
&--accept-audio {
background-color: $color-accent-green;
background-color: variables.$color-accent-green;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine;
box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
}
}
@include mouse-mode {
@include mixins.mouse-mode {
&:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
}
}
div {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/phone/phone-fill.svg',
$color-white
variables.$color-white
);
height: 24px;
width: 24px;
& {
height: 24px;
width: 24px;
}
}
}
&--decline {
background-color: $color-accent-red;
background-color: variables.$color-accent-red;
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 4px $color-ultramarine;
box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
}
}
@include mouse-mode {
@include mixins.mouse-mode {
&:hover {
box-shadow: 0px 0px 0px 2px $color-ultramarine;
box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
}
}
div {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/phone/phone-down-fill.svg',
$color-white
variables.$color-white
);
height: 24px;
width: 24px;
& {
height: 24px;
width: 24px;
}
}
}
}

View file

@ -1,9 +1,12 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Input {
&__container {
@include font-body-1;
@include mixins.font-body-1;
border-radius: 6px;
border-style: solid;
border-width: 2px;
@ -19,40 +22,40 @@
padding-inline: 8px;
}
@include light-theme {
background: $color-white;
border-color: $color-gray-15;
color: $color-black;
@include mixins.light-theme {
background: variables.$color-white;
border-color: variables.$color-gray-15;
color: variables.$color-black;
}
@include dark-theme {
background: $color-gray-80;
border-color: $color-gray-45;
color: $color-gray-05;
@include mixins.dark-theme {
background: variables.$color-gray-80;
border-color: variables.$color-gray-45;
color: variables.$color-gray-05;
}
&--disabled {
@include light-theme {
background: $color-gray-02;
border-color: $color-gray-05;
color: $color-gray-90;
@include mixins.light-theme {
background: variables.$color-gray-02;
border-color: variables.$color-gray-05;
color: variables.$color-gray-90;
}
@include dark-theme {
background: $color-gray-95;
border-color: $color-gray-60;
color: $color-gray-20;
@include mixins.dark-theme {
background: variables.$color-gray-95;
border-color: variables.$color-gray-60;
color: variables.$color-gray-20;
}
}
&:focus-within {
outline: none;
@include light-theme {
border-color: $color-ultramarine;
@include mixins.light-theme {
border-color: variables.$color-ultramarine;
}
@include dark-theme {
border-color: $color-ultramarine-light;
@include mixins.dark-theme {
border-color: variables.$color-ultramarine-light;
}
}
}
@ -65,7 +68,7 @@
}
&__input {
@include font-body-1;
@include mixins.font-body-1;
background: inherit;
border: none;
@ -81,15 +84,15 @@
}
&:placeholder {
color: $color-gray-45;
color: variables.$color-gray-45;
}
@include light-theme {
color: $color-black;
@include mixins.light-theme {
color: variables.$color-black;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
&:focus {
@ -110,17 +113,23 @@
height: 18px;
width: 18px;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-60
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-25
);
}
}
&__remaining-count {
@include font-subtitle;
color: $color-gray-45;
@include mixins.font-subtitle;
color: variables.$color-gray-45;
&--large {
position: absolute;
@ -131,7 +140,7 @@
}
&--warn {
color: $color-accent-red;
color: variables.$color-accent-red;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2024 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.InstallScreenBackupImportStep {
position: relative;
display: flex;
@ -22,7 +25,7 @@
}
.InstallScreenBackupImportStep__title {
@include font-title-2;
@include mixins.font-title-2;
margin-block: 0 20px;
}
@ -31,41 +34,43 @@
}
.InstallScreenBackupImportStep__progressbar-hint {
@include font-caption;
@include mixins.font-caption;
margin-block-end: 22px;
@include light-theme {
color: rgba($color-gray-60, 0.8);
@include mixins.light-theme {
color: rgba(variables.$color-gray-60, 0.8);
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
.InstallScreenBackupImportStep__description {
@include font-body-1;
@include mixins.font-body-1;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
.InstallScreenBackupImportStep__cancel {
@include button-reset();
@include button-focus-outline;
@include font-body-1-bold;
@include light-theme() {
color: $color-ultramarine;
@include mixins.button-reset();
& {
@include mixins.button-focus-outline;
@include mixins.font-body-1-bold;
}
@include dark-theme() {
color: $color-ultramarine-light;
@include mixins.light-theme() {
color: variables.$color-ultramarine;
}
@include mixins.dark-theme() {
color: variables.$color-ultramarine-light;
}
}
@ -85,34 +90,39 @@
max-width: 336px;
&--icon::after {
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/lock/lock.svg',
rgba($color-gray-60, 0.8)
rgba(variables.$color-gray-60, 0.8)
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/lock/lock.svg', $color-gray-25);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/lock/lock.svg',
variables.$color-gray-25
);
}
content: '';
display: block;
height: 16px;
width: 16px;
margin-bottom: 4px;
& {
content: '';
display: block;
height: 16px;
width: 16px;
margin-bottom: 4px;
}
}
&--description {
@include font-caption;
@include mixins.font-caption;
text-align: center;
@include light-theme {
color: rgba($color-gray-60, 0.8);
@include mixins.light-theme {
color: rgba(variables.$color-gray-60, 0.8);
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
a {

View file

@ -1,10 +1,14 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-InstallScreenChoosingDeviceNameStep {
@include install-screen;
@use '../mixins';
text-align: center;
.module-InstallScreenChoosingDeviceNameStep {
@include mixins.install-screen;
& {
text-align: center;
}
&__inputs {
display: flex;
@ -15,9 +19,11 @@
}
&__input {
@include normal-input;
width: 90%;
max-width: 300px;
margin-bottom: 18px;
@include mixins.normal-input;
& {
width: 90%;
max-width: 300px;
margin-bottom: 18px;
}
}
}

View file

@ -1,11 +1,15 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.module-InstallScreenErrorStep {
@include install-screen;
flex-direction: column;
padding-inline: 2rem;
text-align: center;
@include mixins.install-screen;
& {
flex-direction: column;
padding-inline: 2rem;
text-align: center;
}
&__buttons {
margin-top: 1rem;

View file

@ -1,27 +1,32 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-InstallScreenLinkInProgressStep {
@include install-screen;
@use '../mixins';
@use '../variables';
flex-direction: column;
text-align: center;
.module-InstallScreenLinkInProgressStep {
@include mixins.install-screen;
& {
flex-direction: column;
text-align: center;
}
h1 {
@include font-title-2;
@include mixins.font-title-2;
margin-top: 18px;
}
h2 {
@include font-body-1;
@include mixins.font-body-1;
font-weight: normal;
margin-block-start: 0;
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
}

View file

@ -1,28 +1,31 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.module-InstallScreenQrCodeNotScannedStep {
@include install-screen;
@include mixins.install-screen;
&__contents {
$base-max-width: 760px;
align-items: center;
background: $color-white;
background: variables.$color-white;
border-radius: 8px;
color: $color-black;
color: variables.$color-black;
display: flex;
flex-direction: row;
animation: 500ms module-InstallScreenQrCodeNotScannedStep__slide-in;
position: relative;
top: 0;
@include light-theme {
@include mixins.light-theme {
max-width: $base-max-width;
padding: 22px;
}
@include dark-theme {
@include mixins.dark-theme {
max-width: $base-max-width + 44px;
padding: 44px;
margin-top: 44px; // Avoids overlap with the Signal logo
@ -45,36 +48,40 @@
width: $size;
&--loaded {
background: $color-white;
background: variables.$color-white;
}
&--load-failed {
@include font-subtitle;
border-color: $color-gray-05;
@include mixins.font-subtitle;
border-color: variables.$color-gray-05;
border-radius: 10px;
color: $color-gray-60;
color: variables.$color-gray-60;
}
&__link {
@include button-reset;
@include font-body-2-bold;
@include mixins.button-reset;
& {
@include mixins.font-body-2-bold;
display: flex;
gap: 4px;
align-items: center;
display: flex;
gap: 4px;
align-items: center;
color: $color-ultramarine;
margin-block-start: 16px;
color: variables.$color-ultramarine;
margin-block-start: 16px;
}
&::before {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/refresh/refresh-bold.svg',
$color-ultramarine
variables.$color-ultramarine
);
content: '';
display: block;
height: 16px;
width: 16px;
& {
content: '';
display: block;
height: 16px;
width: 16px;
}
}
}
@ -87,22 +94,26 @@
&__error-message {
text-align: center;
@include font-body-2;
@include mixins.font-body-2;
&::before {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/error/error-circle.svg',
$color-accent-red
variables.$color-accent-red
);
content: '';
display: block;
height: 22px;
margin-block: 0 8px;
margin-inline: auto;
width: 22px;
& {
content: '';
display: block;
height: 22px;
margin-block: 0 8px;
margin-inline: auto;
width: 22px;
}
}
margin-inline: 24px;
& {
margin-inline: 24px;
}
}
&__error-message p {
@ -110,7 +121,7 @@
}
&__get-help {
@include font-body-2-bold;
@include mixins.font-body-2-bold;
display: flex;
gap: 4px;
@ -118,24 +129,26 @@
margin-block-start: 16px;
color: $color-ultramarine;
color: variables.$color-ultramarine;
text-decoration: none;
&::before {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/open/open-compact-bold.svg',
$color-ultramarine
variables.$color-ultramarine
);
content: '';
display: block;
height: 16px;
width: 16px;
& {
content: '';
display: block;
height: 16px;
width: 16px;
}
}
}
}
ol {
@include font-body-1;
@include mixins.font-body-1;
line-height: 26px;
list-style-position: inside;
padding-inline-start: 0;
@ -143,7 +156,7 @@
a {
// We want the right link color in dark mode. This is a no-op in light mode.
color: $color-ultramarine;
color: variables.$color-ultramarine;
}
}

View file

@ -1,8 +1,11 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.InstallScreenSignalLogo {
@include font-title-1;
@include mixins.font-title-1;
align-items: center;
display: flex;
font-weight: bold;
@ -11,11 +14,16 @@
inset-inline-start: 32px;
&::before {
@include color-svg('../images/signal-logo.svg', $color-ultramarine-logo);
content: '';
display: block;
height: 32px;
margin-inline-end: 6px;
width: 32px;
@include mixins.color-svg(
'../images/signal-logo.svg',
variables.$color-ultramarine-logo
);
& {
content: '';
display: block;
height: 32px;
margin-inline-end: 6px;
width: 32px;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.InstallScreenUpdateDialog {
&__download-size {
font-weight: 400;
@ -8,22 +11,24 @@
&__progress {
&--container {
@include light-theme() {
background-color: $color-gray-15;
@include mixins.light-theme() {
background-color: variables.$color-gray-15;
}
@include dark-theme() {
background-color: $color-gray-65;
@include mixins.dark-theme() {
background-color: variables.$color-gray-65;
}
& {
border-radius: 2px;
height: 4px;
overflow: hidden;
width: 100%;
margin-block: 16px;
margin-inline: 0;
}
border-radius: 2px;
height: 4px;
overflow: hidden;
width: 100%;
margin-block: 16px;
margin-inline: 0;
}
&--bar {
background-color: $color-ultramarine;
background-color: variables.$color-ultramarine;
border-radius: 2px;
display: block;
height: 100%;

View file

@ -1,6 +1,9 @@
// Copyright 2023 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.LeftPaneBanner {
margin-block: 4px 8px;
margin-inline: 10px;
@ -9,16 +12,18 @@
padding-inline-end: 7px;
border-radius: 8px;
@include light-theme {
background-color: $color-gray-15;
color: $color-gray-75;
@include mixins.light-theme {
background-color: variables.$color-gray-15;
color: variables.$color-gray-75;
}
@include dark-theme {
background-color: $color-gray-75;
color: $color-gray-15;
@include mixins.dark-theme {
background-color: variables.$color-gray-75;
color: variables.$color-gray-15;
}
@include font-body-2;
& {
@include mixins.font-body-2;
}
&__content {
margin-bottom: 8px;
@ -30,15 +35,17 @@
margin-inline-end: 9px;
&__action-button {
@include button-reset;
@include button-focus-outline;
@include font-body-1-bold;
@include light-theme {
color: $color-gray-90;
@include mixins.button-reset;
@include mixins.button-focus-outline;
& {
@include mixins.font-body-1-bold;
}
@include dark-theme {
color: $color-gray-05;
@include mixins.light-theme {
color: variables.$color-gray-90;
}
@include mixins.dark-theme {
color: variables.$color-gray-05;
}
}
}

View file

@ -1,6 +1,9 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
@keyframes progress-animation {
0% {
background-position: 100%;
@ -11,12 +14,12 @@
}
.LeftPaneDialog {
$default-background-color: $color-ultramarine;
$default-text-color: $color-white;
$error-background-color: $color-accent-red;
$default-background-color: variables.$color-ultramarine;
$default-text-color: variables.$color-white;
$error-background-color: variables.$color-accent-red;
$error-text-color: $default-text-color;
$warning-background-color: $color-accent-yellow;
$warning-text-color: $color-black;
$warning-background-color: variables.$color-accent-yellow;
$warning-text-color: variables.$color-black;
align-items: center;
background: $default-background-color;
@ -39,8 +42,10 @@
}
&__retry {
@include button-reset;
@include font-body-1-bold;
@include mixins.button-reset;
& {
@include mixins.font-body-1-bold;
}
}
&--clickable {
@ -64,16 +69,16 @@
&__spinner {
&__arc {
background-color: $color-black;
background-color: variables.$color-black;
// Needed for specificity
@include dark-theme {
background-color: $color-black;
@include mixins.dark-theme {
background-color: variables.$color-black;
}
}
&__circle {
background-color: $color-accent-yellow;
background-color: variables.$color-accent-yellow;
}
}
@ -81,7 +86,7 @@
width: 24px;
height: 24px;
margin-inline-end: 18px;
background-color: $color-white;
background-color: variables.$color-white;
-webkit-mask-size: contain;
@media (forced-colors: active) {
@ -115,22 +120,26 @@
}
&__action-text {
@include button-reset;
text-decoration: none;
color: $color-white-alpha-80;
@include mixins.button-reset;
& {
text-decoration: none;
color: variables.$color-white-alpha-80;
}
}
&__close-button {
@include button-reset;
@include mixins.button-reset;
border-radius: 4px;
float: inline-end;
height: 20px;
width: 20px;
& {
border-radius: 4px;
float: inline-end;
height: 20px;
width: 20px;
}
&::before {
-webkit-mask: url('../images/icons/v3/x/x.svg') no-repeat center;
background-color: $color-white;
background-color: variables.$color-white;
content: '';
display: block;
width: 100%;
@ -138,7 +147,7 @@
@media (forced-colors: active) {
background-color: WindowText;
@include dark-theme {
@include mixins.dark-theme {
background-color: WindowText;
}
}
@ -146,10 +155,10 @@
&:hover,
&:focus {
background-color: $color-white-alpha-20;
background-color: variables.$color-white-alpha-20;
}
&:active {
background-color: $color-white-alpha-20;
background-color: variables.$color-white-alpha-20;
}
@media (forced-colors: active) {
@ -158,7 +167,7 @@
&:active {
background-color: none;
}
@include dark-theme {
@include mixins.dark-theme {
&:hover,
&:focus,
&:active {
@ -177,12 +186,12 @@
max-width: 250px;
h3 {
@include font-body-1-bold;
@include mixins.font-body-1-bold;
padding: 0px;
margin: 0px;
}
span {
@include font-body-1;
@include mixins.font-body-1;
display: inline-block;
}
a {
@ -204,7 +213,7 @@
background-color: $error-background-color;
color: $error-text-color;
@include any-theme {
@include mixins.any-theme {
--tooltip-background-color: #{$error-background-color};
--tooltip-text-color: #{$error-text-color};
}
@ -222,7 +231,7 @@
background-color: $warning-background-color;
color: $warning-text-color;
@include any-theme {
@include mixins.any-theme {
--tooltip-background-color: #{$warning-background-color};
--tooltip-text-color: #{$warning-text-color};
}
@ -255,7 +264,7 @@
&__progress {
&--container {
background: $color-white-alpha-20;
background: variables.$color-white-alpha-20;
border-radius: 2px;
height: 4px;
max-width: 210px;
@ -269,11 +278,11 @@
animation: progress-animation 2s linear infinite;
background: linear-gradient(
90deg,
$color-white-alpha-40,
$color-white-alpha-60,
$color-white-alpha-90,
$color-white-alpha-60,
$color-white-alpha-40
variables.$color-white-alpha-40,
variables.$color-white-alpha-60,
variables.$color-white-alpha-90,
variables.$color-white-alpha-60,
variables.$color-white-alpha-40
);
background-size: 200% 100%;
border-radius: 2px;

View file

@ -1,29 +1,34 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.LeftPaneSearchInput {
&__input--with-children.module-SearchInput__input--with-children {
padding-inline-start: 50px;
}
&__in-conversation-pill {
@include button-reset;
@include rounded-corners;
align-items: center;
bottom: 4px;
display: flex;
flex-direction: row;
inset-inline-start: 3px;
padding-block: 0;
padding-inline: 0 3px;
position: absolute;
top: 4px;
@include light-theme {
background-color: $color-gray-25;
@include mixins.button-reset;
& {
@include mixins.rounded-corners;
align-items: center;
bottom: 4px;
display: flex;
flex-direction: row;
inset-inline-start: 3px;
padding-block: 0;
padding-inline: 0 3px;
position: absolute;
top: 4px;
}
@include dark-theme {
background-color: $color-gray-80;
@include mixins.light-theme {
background-color: variables.$color-gray-25;
}
@include mixins.dark-theme {
background-color: variables.$color-gray-80;
}
&__x-button {
@ -31,25 +36,31 @@
margin-inline-start: 2px;
width: 16px;
@include light-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-60
);
}
@include dark-theme {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-25
);
}
@include light-theme {
@include mixins.light-theme {
&:hover,
&:focus,
&:active {
background: $color-ultramarine;
background: variables.$color-ultramarine;
}
}
@include dark-theme {
@include mixins.dark-theme {
&:hover,
&:focus,
&:active {
background: $color-ultramarine-light;
background: variables.$color-ultramarine-light;
}
}
}
@ -62,27 +73,29 @@
}
&__FilterButton {
@include button-reset;
flex-shrink: 0;
padding: 4px;
margin-inline-end: 8px;
border-radius: 4px;
@include mixins.button-reset;
& {
flex-shrink: 0;
padding: 4px;
margin-inline-end: 8px;
border-radius: 4px;
}
&:not(.LeftPaneSearchInput__FilterButton--pressed):hover {
@include light-theme {
background-color: $color-black-alpha-06;
@include mixins.light-theme {
background-color: variables.$color-black-alpha-06;
}
@include dark-theme {
background-color: $color-white-alpha-06;
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-06;
}
}
&:focus {
outline: none;
@include keyboard-mode {
@include mixins.keyboard-mode {
box-shadow:
0 0 0 2px $color-white,
0 0 0 4px $color-ultramarine;
0 0 0 2px variables.$color-white,
0 0 0 4px variables.$color-ultramarine;
}
}
@ -91,33 +104,33 @@
display: block;
width: 20px;
height: 20px;
@include light-theme {
@include color-svg(
@include mixins.light-theme {
@include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
$color-black
variables.$color-black
);
}
@include dark-theme {
@include color-svg(
@include mixins.dark-theme {
@include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
$color-gray-15
variables.$color-gray-15
);
}
}
&--pressed {
border-radius: 9999px;
background: $color-accent-blue;
background: variables.$color-accent-blue;
&::before {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/filter/filter.svg',
$color-white
variables.$color-white
);
}
}
}
&__FilterLabel {
@include sr-only;
@include mixins.sr-only;
}
}

View file

@ -1,14 +1,17 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
.Lightbox {
&__container {
background-color: $color-black;
background-color: variables.$color-black;
bottom: 0;
inset-inline: 0;
position: absolute;
top: 0;
z-index: $z-index-popup;
z-index: variables.$z-index-popup;
}
&__animated {
@ -51,13 +54,15 @@
}
&__thumbnail {
@include button-reset;
position: relative;
border-radius: 6px;
height: 44px;
margin-inline-end: 8px;
overflow: hidden;
width: 44px;
@include mixins.button-reset;
& {
position: relative;
border-radius: 6px;
height: 44px;
margin-inline-end: 8px;
overflow: hidden;
width: 44px;
}
img {
height: 100%;
@ -74,13 +79,18 @@
width: 100%;
height: 100%;
border-radius: 6px;
box-shadow: inset 0px 0px 0px 2px $color-white;
box-shadow: inset 0px 0px 0px 2px variables.$color-white;
}
&--unavailable {
@include color-svg('../images/image.svg', $color-gray-25);
height: 100%;
width: 100%;
@include mixins.color-svg(
'../images/image.svg',
variables.$color-gray-25
);
& {
height: 100%;
width: 100%;
}
}
}
@ -92,7 +102,7 @@
overflow: hidden;
position: relative;
// Using this so that the zoom cleanly goes over the footer
z-index: $z-index-base;
z-index: variables.$z-index-base;
&--zoom {
backface-visibility: hidden;
@ -113,37 +123,47 @@
}
}
height: auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
outline: none;
width: auto;
& {
height: auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
outline: none;
width: auto;
}
}
&__unsupported {
@include button-reset;
flex-grow: 1;
height: 100%;
max-width: 200px;
width: 100%;
@include mixins.button-reset;
& {
flex-grow: 1;
height: 100%;
max-width: 200px;
width: 100%;
}
&--image {
@include color-svg('../images/image.svg', $color-gray-25);
@include mixins.color-svg(
'../images/image.svg',
variables.$color-gray-25
);
}
&--video {
@include color-svg('../images/movie.svg', $color-gray-25);
@include mixins.color-svg(
'../images/movie.svg',
variables.$color-gray-25
);
}
&--file {
@include color-svg('../images/file.svg', $color-gray-25);
@include mixins.color-svg('../images/file.svg', variables.$color-gray-25);
}
&--missing {
@include color-svg(
@include mixins.color-svg(
'../images/full-screen-flow/alert-outline.svg',
$color-gray-25
variables.$color-gray-25
);
}
}
@ -158,10 +178,12 @@
}
&__zoom-button {
@include button-reset;
max-height: 100%;
max-width: 100%;
cursor: zoom-in;
@include mixins.button-reset;
& {
max-height: 100%;
max-width: 100%;
cursor: zoom-in;
}
}
&__object--container--zoom,
@ -172,8 +194,8 @@
}
&__caption {
@include font-body-2;
color: $color-white;
@include mixins.font-body-2;
color: variables.$color-white;
margin-block: 12px;
margin-inline: 0;
text-align: center;
@ -184,8 +206,8 @@
}
&__timestamp {
@include font-body-1;
background-color: $color-black;
@include mixins.font-body-1;
background-color: variables.$color-black;
border-radius: 15px;
color: #eeefef;
padding-block: 6px;
@ -201,7 +223,7 @@
height: var(--height);
// We need this so that the buttons stack above the container
z-index: $z-index-above-base;
z-index: variables.$z-index-above-base;
// Added extended click zone only when it wouldn't overlap video controls
@media (min-height: 500px) {
@ -242,13 +264,13 @@
}
&--name {
@include font-body-2-bold;
color: $color-white;
@include mixins.font-body-2-bold;
color: variables.$color-white;
}
&--timestamp {
@include font-caption;
color: $color-gray-25;
@include mixins.font-caption;
color: variables.$color-gray-25;
}
}
@ -272,12 +294,13 @@
}
&__button {
@include button-reset;
border-radius: 4px;
display: inline-block;
height: 24px;
width: 24px;
@include mixins.button-reset;
& {
border-radius: 4px;
display: inline-block;
height: 24px;
width: 24px;
}
&::before {
content: '';
@ -287,33 +310,39 @@
}
&:focus {
outline: 4px solid $color-ultramarine;
outline: 4px solid variables.$color-ultramarine;
}
&:disabled {
&::before {
background: $color-gray-65;
background: variables.$color-gray-65;
}
}
&--forward {
&::before {
@include color-svg(
@include mixins.color-svg(
'../images/icons/v3/forward/forward.svg',
$color-gray-15
variables.$color-gray-15
);
}
}
&--save {
&::before {
@include color-svg('../images/icons/v3/save/save.svg', $color-gray-15);
@include mixins.color-svg(
'../images/icons/v3/save/save.svg',
variables.$color-gray-15
);
}
}
&--close {
&::before {
@include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
@include mixins.color-svg(
'../images/icons/v3/x/x.svg',
variables.$color-gray-15
);
}
}
@ -331,7 +360,7 @@
&::before {
width: 32px;
height: 32px;
-webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
-webkit-filter: drop-shadow(0 0 4px variables.$color-black-alpha-40);
content: '';
display: block;
background-size: 100%;
@ -346,12 +375,12 @@
outline: none;
}
@include keyboard-mode {
@include mixins.keyboard-mode {
&:focus {
opacity: 1;
}
}
@include button-focus-outline;
@include mixins.button-focus-outline;
}
&--previous {

View file

@ -1,6 +1,9 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
@use '../variables';
button.ListTile {
width: 100%;
}
@ -33,7 +36,7 @@ button.ListTile {
flex: 1;
display: flex;
flex-direction: column;
font-family: $inter;
font-family: variables.$inter;
}
&__title {
@ -50,7 +53,7 @@ button.ListTile {
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12px;
color: $color-gray-25;
color: variables.$color-gray-25;
line-height: 17px;
&--max-lines-1 {
@ -63,11 +66,11 @@ button.ListTile {
-webkit-line-clamp: 3;
}
@include light-theme {
color: $color-gray-60;
@include mixins.light-theme {
color: variables.$color-gray-60;
}
@include dark-theme {
color: $color-gray-25;
@include mixins.dark-theme {
color: variables.$color-gray-25;
}
}
@ -87,12 +90,12 @@ button.ListTile {
&:hover:not([aria-disabled='true'], [aria-selected='true']),
&:focus:not([aria-disabled='true'], [aria-selected='true']) {
@include light-theme {
background-color: $color-black-alpha-06;
@include mixins.light-theme {
background-color: variables.$color-black-alpha-06;
}
@include dark-theme {
background-color: $color-white-alpha-06;
@include mixins.dark-theme {
background-color: variables.$color-white-alpha-06;
}
& .ConversationDetails-panel-row__actions {

View file

@ -1,6 +1,8 @@
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
@use '../mixins';
.LocalDeleteWarningModal__width-container {
max-width: 440px;
}
@ -11,7 +13,7 @@
}
.LocalDeleteWarningModal__header {
@include font-title-2;
@include mixins.font-title-2;
margin-block: 18px;
margin-inline: 8px;

Some files were not shown because too many files have changed in this diff Show more