Upgrade sass
This commit is contained in:
Jamie Kyle
GitHub
parent
e819bfe4eb
commit
8e3b8b92fd
165 changed files with 8663 additions and 6514 deletions
375
package-lock.json
generated
375
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@mixin light-theme() {
|
||||
@content;
|
||||
& {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dark-theme() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
// Copyright 2024 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
@use '../mixins';
|
||||
|
||||
.InAnotherCallTooltip {
|
||||
@include tooltip;
|
||||
@include mixins.tooltip;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
Loading…
Add table
Add a link
Reference in a new issue