[Refactoring] More stylelint constraints; Update browserlist (#1708)
This commit is contained in:
Alexander Zinchuk
parent
c5bebc8a3d
commit
50c3614fee
@ -1 +1 @@
|
||||
> 2%, last 2 edge versions, iOS >= 13.4, firefox >= 68, firefoxandroid >= 68, last 2 safari major versions
|
||||
> 0.75%, not op_mini all, not and_uc > 0
|
||||
|
||||
@ -7,6 +7,7 @@ src/lib/gramjs/tl/types-generator/template.js
|
||||
src/lib/gramjs/tl/api.d.ts
|
||||
src/lib/gramjs/tl/apiTl.js
|
||||
src/lib/gramjs/tl/schemaTl.js
|
||||
src/lib/gramjs/tl/apiTl.full.js
|
||||
src/lib/gramjs/tl/schemaTl.full.js
|
||||
src/lib/gramjs/tl/generateModules.js
|
||||
|
||||
webpack.config.js
|
||||
jest.config.js
|
||||
src/lib/secret-sauce/
|
||||
|
||||
@ -71,10 +71,5 @@
|
||||
},
|
||||
"parserOptions": {
|
||||
"project": "./tsconfig.json"
|
||||
},
|
||||
"ignorePatterns": [
|
||||
"webpack.config.js",
|
||||
"jest.config.js",
|
||||
"src/lib/secret-sauce"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,27 @@
|
||||
{
|
||||
"extends": "stylelint-config-recommended-scss",
|
||||
"extends": [
|
||||
"stylelint-config-recommended-scss"
|
||||
],
|
||||
"plugins": [
|
||||
"stylelint-declaration-block-no-ignored-properties",
|
||||
"stylelint-high-performance-animation",
|
||||
"stylelint-group-selectors",
|
||||
"./plugins/wholePixel.js"
|
||||
],
|
||||
"rules": {
|
||||
"no-descending-specificity": null
|
||||
"number-leading-zero": "always",
|
||||
"selector-attribute-quotes": "always",
|
||||
"scss/operator-no-unspaced": null,
|
||||
"no-descending-specificity": null,
|
||||
"plugin/declaration-block-no-ignored-properties": true,
|
||||
"plugin/no-low-performance-animation-properties": [
|
||||
true,
|
||||
{
|
||||
"severity": "warning",
|
||||
"ignore": "paint-properties"
|
||||
}
|
||||
],
|
||||
"plugin/stylelint-group-selectors": [true, { "severity": "warning" }],
|
||||
"plugin/whole-pixel": [true, { "ignoreList": ["letter-spacing"] }]
|
||||
}
|
||||
}
|
||||
|
||||
2037
package-lock.json
generated
2037
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -88,6 +88,9 @@
|
||||
"style-loader": "^3.3.1",
|
||||
"stylelint": "^14.3.0",
|
||||
"stylelint-config-recommended-scss": "^5.0.2",
|
||||
"stylelint-declaration-block-no-ignored-properties": "^2.5.0",
|
||||
"stylelint-group-selectors": "^1.0.8",
|
||||
"stylelint-high-performance-animation": "^1.6.0",
|
||||
"typescript": "^4.5.5",
|
||||
"webpack": "^5.68.0",
|
||||
"webpack-bundle-analyzer": "^4.5.0",
|
||||
|
||||
82
plugins/wholePixel.js
Normal file
82
plugins/wholePixel.js
Normal file
@ -0,0 +1,82 @@
|
||||
const stylelint = require('stylelint');
|
||||
const postcss = require('postcss');
|
||||
|
||||
const ruleName = 'plugin/whole-pixel';
|
||||
|
||||
const isString = (s) => typeof s === 'string';
|
||||
|
||||
const messages = stylelint.utils.ruleMessages(ruleName, {
|
||||
expected: (unfixed, fixed) => `Expected "${unfixed}" to be "${fixed}"`,
|
||||
});
|
||||
|
||||
const PX_PER_REM = 16;
|
||||
const unitRegex = /(px|rem)$/;
|
||||
const numberRegex = /^([-0-9.]+)/;
|
||||
|
||||
module.exports = stylelint.createPlugin(ruleName, (primaryOption, secondaryOptionObject, context) => {
|
||||
const secondaryOptions = secondaryOptionObject || {};
|
||||
return (root, result) => {
|
||||
const validOptions = stylelint.utils.validateOptions(
|
||||
result,
|
||||
ruleName,
|
||||
{
|
||||
actual: secondaryOptions,
|
||||
possible: {
|
||||
pxPerRem: (value) => value % 1 === 0,
|
||||
ignoreList: [isString],
|
||||
},
|
||||
},
|
||||
);
|
||||
|
||||
if (!validOptions) {
|
||||
return;
|
||||
}
|
||||
const pxPerRem = Number(secondaryOptions.pxPerRem) || PX_PER_REM;
|
||||
const ignoreList = secondaryOptions.ignoreList || [];
|
||||
|
||||
const isAutoFixing = Boolean(context.fix);
|
||||
|
||||
const isValid = (value, unit) => {
|
||||
if (unit === 'px') return Number.isInteger(value);
|
||||
if (unit === 'rem') return Number.isInteger(value * pxPerRem);
|
||||
};
|
||||
|
||||
const suggestFix = (value, unit) => {
|
||||
if (unit === 'px') return `${Math.round(value)}px`;
|
||||
if (unit === 'rem') return `${Math.round(value * pxPerRem) / pxPerRem}rem`;
|
||||
};
|
||||
|
||||
const handleValue = (decl, value) => {
|
||||
if (!unitRegex.test(value)) return;
|
||||
const matched = value.match(numberRegex);
|
||||
if (!matched) return;
|
||||
const valueNumberString = matched[0];
|
||||
const valueNumber = parseFloat(valueNumberString);
|
||||
const unit = value.replace(valueNumberString, '');
|
||||
|
||||
if (isValid(valueNumber, unit)) return;
|
||||
const suggestedValue = suggestFix(valueNumber, unit);
|
||||
if (isAutoFixing) {
|
||||
decl.value = decl.value.replace(value, suggestedValue);
|
||||
} else {
|
||||
stylelint.utils.report({
|
||||
ruleName,
|
||||
result,
|
||||
node: decl,
|
||||
message: messages.expected(value, suggestedValue),
|
||||
word: value,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
root.walkDecls(decl => {
|
||||
if (!decl.value || ignoreList.includes(decl.prop)) return;
|
||||
const values = postcss.list.space(decl.value);
|
||||
if (!values?.length) return;
|
||||
values.forEach((value) => handleValue(decl, value));
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
module.exports.ruleName = ruleName;
|
||||
module.exports.messages = messages;
|
||||
@ -6,14 +6,15 @@
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 600px) and (min-height: 450px) {
|
||||
padding: 6.8rem 1.5rem 1.5rem;
|
||||
padding: 6.8125rem 1.5rem 1.5rem;
|
||||
|
||||
&.qr {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#logo, .AvatarEditable label {
|
||||
#logo,
|
||||
.AvatarEditable label {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -29,7 +30,7 @@
|
||||
}
|
||||
|
||||
#logo {
|
||||
background: url('../../assets/telegram-logo.svg') center no-repeat;
|
||||
background: url("../../assets/telegram-logo.svg") center no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
@ -100,13 +101,15 @@
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#auth-qr-form {
|
||||
.qr-container, .qr-loading {
|
||||
.qr-container,
|
||||
.qr-loading {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
@ -121,10 +124,10 @@
|
||||
}
|
||||
|
||||
canvas {
|
||||
padding: .625rem;
|
||||
padding: 0.625rem;
|
||||
border-radius: var(--border-radius-default);
|
||||
background: var(--color-white);
|
||||
margin-top: -.625rem;
|
||||
margin-top: -0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -148,8 +151,8 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
min-width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
padding: 0;
|
||||
margin: 0 0.75rem 0 0;
|
||||
background: var(--color-primary);
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.CountryCodeInput {
|
||||
|
||||
.input-group {
|
||||
cursor: pointer;
|
||||
|
||||
@ -18,13 +17,13 @@
|
||||
position: absolute;
|
||||
top: 1.125rem;
|
||||
right: 1rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border: 2px solid var(--color-text-secondary);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transform: scaleY(1) rotate(45deg);
|
||||
transition: color .2s ease, transform .2s ease, top .2s ease;
|
||||
transition: color 0.2s ease, transform 0.2s ease, top 0.2s ease;
|
||||
|
||||
&.open {
|
||||
border-color: var(--color-primary);
|
||||
@ -54,7 +53,7 @@
|
||||
|
||||
&.no-results button {
|
||||
justify-content: center;
|
||||
padding: .5rem 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
span {
|
||||
font-size: 0.875rem;
|
||||
@ -71,7 +70,7 @@
|
||||
height: 2rem;
|
||||
display: inline-block;
|
||||
vertical-align: 4px;
|
||||
margin: -.5rem .125rem;
|
||||
margin: -0.5rem 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
|
||||
.modal-dialog {
|
||||
max-height: calc(100% - 4rem);
|
||||
background: #181F27;
|
||||
background: #181f27;
|
||||
}
|
||||
|
||||
.Menu .bubble {
|
||||
--color-background: #232A34;
|
||||
--color-chat-hover: #2F363E;
|
||||
--color-item-active: #2F363E;
|
||||
--color-background: #232a34;
|
||||
--color-chat-hover: #2f363e;
|
||||
--color-item-active: #2f363e;
|
||||
--color-text: #fff;
|
||||
box-shadow: 0 0.25rem 0.5rem 0.125rem rgba(16, 16, 16, 0.3);
|
||||
}
|
||||
@ -34,7 +34,7 @@
|
||||
margin-top: auto;
|
||||
margin-bottom: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: transform .3s ease, opacity .3s ease;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
@ -75,7 +75,7 @@
|
||||
|
||||
.participants {
|
||||
margin-top: 0.75rem;
|
||||
background: #222B34;
|
||||
background: #222b34;
|
||||
border-radius: 0.75rem;
|
||||
|
||||
.Loading {
|
||||
@ -87,12 +87,12 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 0.75rem;
|
||||
transition: .15s ease-out background-color;
|
||||
transition: 0.15s ease-out background-color;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&:hover {
|
||||
background: #2F363E;
|
||||
background: #2f363e;
|
||||
}
|
||||
|
||||
.text {
|
||||
@ -139,7 +139,7 @@
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
background: linear-gradient(0deg, #181F27, rgba(24, 31, 39, 0));
|
||||
background: linear-gradient(0deg, #181f27, rgba(24, 31, 39, 0));
|
||||
z-index: 0;
|
||||
top: -2rem;
|
||||
}
|
||||
@ -182,7 +182,8 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.small-button, .smaller-button {
|
||||
.small-button,
|
||||
.smaller-button {
|
||||
outline: none;
|
||||
border: 0;
|
||||
background: #15415b;
|
||||
@ -210,7 +211,7 @@
|
||||
}
|
||||
|
||||
.small-button.speaker {
|
||||
background: #2B3A51;
|
||||
background: #2b3a51;
|
||||
|
||||
&.active {
|
||||
background: #496092;
|
||||
@ -218,7 +219,7 @@
|
||||
}
|
||||
|
||||
.small-button.leave {
|
||||
background: #5A2824;
|
||||
background: #5a2824;
|
||||
|
||||
&:hover {
|
||||
background: #49201d;
|
||||
@ -233,7 +234,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.landscape .scrollable {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -293,7 +293,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.MicrophoneButton, .microphone-wrapper {
|
||||
.MicrophoneButton,
|
||||
.microphone-wrapper {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
||||
|
||||
@ -6,11 +6,11 @@
|
||||
color: #fff;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.75rem;
|
||||
transition: .15s ease-out background-color;
|
||||
transition: 0.15s ease-out background-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #2F363E;
|
||||
background: #2f363e;
|
||||
}
|
||||
|
||||
audio {
|
||||
@ -36,19 +36,19 @@
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #848D94;
|
||||
color: #848d94;
|
||||
font-size: 0.75rem;
|
||||
|
||||
&.blue {
|
||||
color: #4DA6E0;
|
||||
color: #4da6e0;
|
||||
}
|
||||
|
||||
&.green {
|
||||
color: #57BC6C;
|
||||
color: #57bc6c;
|
||||
}
|
||||
|
||||
&.red {
|
||||
color: #FF706F;
|
||||
color: #ff706f;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -62,12 +62,12 @@
|
||||
height: 2.75rem;
|
||||
margin-left: auto;
|
||||
font-size: 1.5rem;
|
||||
color: #FF706F;
|
||||
color: #ff706f;
|
||||
}
|
||||
|
||||
&.can-self-unmute {
|
||||
.microphone {
|
||||
color: #848D94;
|
||||
color: #848d94;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -19,11 +19,11 @@
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -.1875rem;
|
||||
top: -0.1875rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: .125rem;
|
||||
box-shadow: 0 .125rem .125rem var(--color-light-shadow);
|
||||
height: 0.125rem;
|
||||
box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
|
||||
}
|
||||
|
||||
&.is-hidden {
|
||||
@ -81,7 +81,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
#Main.right-column-open .MiddleHeader .GroupCallTopPane {
|
||||
width: calc(100% - var(--right-column-width));
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
}
|
||||
|
||||
.toggle-play {
|
||||
margin-inline-end: .5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
|
||||
&.translucent-white {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
@ -46,7 +46,7 @@
|
||||
&.smaller {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin-inline-end: .75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
|
||||
i {
|
||||
font-size: 1.625rem;
|
||||
@ -61,17 +61,18 @@
|
||||
position: absolute;
|
||||
|
||||
&.icon-play {
|
||||
margin-left: .1875rem;
|
||||
margin-left: 0.1875rem;
|
||||
@media (max-width: 600px) {
|
||||
margin-left: .125rem;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-play, .icon-pause {
|
||||
.icon-play,
|
||||
.icon-pause {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: opacity .4s, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
&.play .icon-pause,
|
||||
@ -79,7 +80,7 @@
|
||||
&.loading .icon-play,
|
||||
&.loading .icon-pause {
|
||||
opacity: 0;
|
||||
transform: scale(.5);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -90,7 +91,7 @@
|
||||
padding: 0;
|
||||
left: 1.9375rem;
|
||||
top: 1.9375rem;
|
||||
border: .125rem solid var(--background-color);
|
||||
border: 0.125rem solid var(--background-color);
|
||||
z-index: 1;
|
||||
|
||||
i {
|
||||
@ -101,7 +102,7 @@
|
||||
&.bigger .download-button {
|
||||
left: 2rem;
|
||||
top: 2rem;
|
||||
border: .125rem solid var(--color-background);
|
||||
border: 0.125rem solid var(--color-background);
|
||||
}
|
||||
|
||||
.content {
|
||||
@ -130,17 +131,17 @@
|
||||
}
|
||||
|
||||
.voice-duration {
|
||||
margin: .25rem 0 0;
|
||||
font-size: .875rem;
|
||||
margin: 0.25rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-variant-numeric: tabular-nums;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
&.unread::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: relative;
|
||||
margin: 0 0 .375rem .25rem;
|
||||
margin: 0 0 0.375rem 0.25rem;
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
border-radius: 50%;
|
||||
@ -150,7 +151,7 @@
|
||||
|
||||
body.is-ios & {
|
||||
.voice-duration.unread::after {
|
||||
margin-bottom: .4375rem;
|
||||
margin-bottom: 0.4375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -167,7 +168,7 @@
|
||||
.meta,
|
||||
.performer,
|
||||
.date {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
@ -177,7 +178,7 @@
|
||||
}
|
||||
|
||||
.duration {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -222,7 +223,7 @@
|
||||
touch-action: none;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 6px;
|
||||
@ -232,7 +233,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.seekline-buffered-progress, .seekline-play-progress {
|
||||
.seekline-buffered-progress,
|
||||
.seekline-play-progress {
|
||||
position: absolute;
|
||||
height: 2px;
|
||||
border-radius: 2px;
|
||||
@ -267,7 +269,7 @@
|
||||
right: 100%;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
@ -306,7 +308,7 @@
|
||||
left: 0.1875rem;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.media-loading {
|
||||
left: auto !important;
|
||||
right: 0;
|
||||
@ -319,17 +321,17 @@
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
&:last-child {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.toggle-play {
|
||||
margin-left: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0;
|
||||
|
||||
&.smaller {
|
||||
margin-left: .75rem;
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@ -350,6 +352,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.has-replies .Audio[dir=rtl] {
|
||||
.has-replies .Audio[dir="rtl"] {
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
|
||||
@ -28,29 +28,29 @@
|
||||
font-size: 2.5rem;
|
||||
|
||||
&.icon-reply-filled {
|
||||
transform: scale(.7);
|
||||
transform: scale(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&.size-micro {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
font-size: 0.5125rem;
|
||||
font-size: 0.5rem;
|
||||
|
||||
.emoji {
|
||||
width: .5625rem;
|
||||
height: .5625rem;
|
||||
width: 0.5625rem;
|
||||
height: 0.5625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.size-tiny {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.emoji {
|
||||
width: .875rem;
|
||||
height: .875rem;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,8 +60,8 @@
|
||||
font-size: 0.875rem;
|
||||
|
||||
.emoji {
|
||||
width: .875rem;
|
||||
height: .875rem;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,11 +108,11 @@
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0.05rem;
|
||||
right: 0.05rem;
|
||||
bottom: 0.0625rem;
|
||||
right: 0.0625rem;
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
border-radius: 50%;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
.modal-dialog {
|
||||
max-width: 26.25rem;
|
||||
.modal-content {
|
||||
padding: .375rem 1rem 1rem;
|
||||
padding: 0.375rem 1rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
text-transform: none;
|
||||
|
||||
+ .Button {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -49,11 +49,11 @@
|
||||
font-size: 1.25rem;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-left: .75rem;
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
& ~ .Button {
|
||||
color: var(--color-primary)
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,10 +68,10 @@
|
||||
border-radius: 4rem;
|
||||
outline: none !important;
|
||||
font-weight: 500;
|
||||
margin: .125rem .625rem;
|
||||
margin: 0.125rem 0.625rem;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin: .25rem .375rem;
|
||||
margin: 0.25rem 0.375rem;
|
||||
}
|
||||
|
||||
&.weekday {
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
}
|
||||
|
||||
.modal-title:not(:only-child) {
|
||||
margin: 0 0 0 .75rem;
|
||||
margin: 0 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: .5rem 1.25rem;
|
||||
padding: 0.5rem 1.25rem;
|
||||
}
|
||||
|
||||
.confirm-dialog-button {
|
||||
margin-right: -.625rem;
|
||||
margin-right: -0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,11 +8,11 @@
|
||||
overflow: hidden;
|
||||
|
||||
&::after {
|
||||
content: '...';
|
||||
content: "...";
|
||||
animation: dot-animation 1s steps(4, start) infinite;
|
||||
|
||||
html[lang=ar] &,
|
||||
html[lang=fa] & {
|
||||
html[lang="ar"] &,
|
||||
html[lang="fa"] & {
|
||||
animation-name: dot-animation-rtl;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
.EmbeddedMessage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: calc(var(--message-text-size, 1rem) - .125rem);
|
||||
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
|
||||
line-height: 1.125rem;
|
||||
margin: 0 -0.25rem .0625rem;
|
||||
padding: .1875rem 0.25rem .1875rem .4375rem;
|
||||
margin: 0 -0.25rem 0.0625rem;
|
||||
padding: 0.1875rem 0.25rem 0.1875rem 0.4375rem;
|
||||
border-radius: var(--border-radius-messages-small);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@ -25,13 +25,13 @@
|
||||
box-shadow: 0 1px 2px var(--color-default-shadow);
|
||||
|
||||
&::before {
|
||||
left: .625rem;
|
||||
top: .625rem;
|
||||
bottom: .625rem;
|
||||
left: 0.625rem;
|
||||
top: 0.625rem;
|
||||
bottom: 0.625rem;
|
||||
}
|
||||
|
||||
img:not(.emoji) {
|
||||
margin-inline-start: .5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
@ -40,12 +40,12 @@
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: .3125rem;
|
||||
bottom: .3125rem;
|
||||
left: .3125rem;
|
||||
top: 0.3125rem;
|
||||
bottom: 0.3125rem;
|
||||
left: 0.3125rem;
|
||||
width: 2px;
|
||||
background: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
@ -60,7 +60,7 @@
|
||||
}
|
||||
|
||||
.message-title {
|
||||
font-size: calc(var(--message-text-size, 1rem) - .125rem);
|
||||
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
|
||||
}
|
||||
|
||||
.message-text {
|
||||
@ -108,8 +108,8 @@
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
object-fit: cover;
|
||||
border-radius: .25rem;
|
||||
margin-left: .25rem;
|
||||
border-radius: 0.25rem;
|
||||
margin-left: 0.25rem;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.round {
|
||||
@ -119,7 +119,7 @@
|
||||
|
||||
&.inside-input {
|
||||
padding-inline-start: 0.5625rem;
|
||||
margin: 0 0 -.125rem -0.1875rem;
|
||||
margin: 0 0 -0.125rem -0.1875rem;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
@ -128,15 +128,15 @@
|
||||
--hover-color: var(--color-interactive-element-hover);
|
||||
|
||||
&::before {
|
||||
bottom: .3125rem;
|
||||
bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
img:not(.emoji) {
|
||||
margin-left: .125rem;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
|
||||
.message-text {
|
||||
margin-inline-start: .375rem;
|
||||
margin-inline-start: 0.375rem;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
.file-preview {
|
||||
width: 3.375rem;
|
||||
height: 3.375rem;
|
||||
margin-inline-end: .75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
border-radius: var(--border-radius-messages-small);
|
||||
background: var(--color-primary);
|
||||
display: flex;
|
||||
@ -39,7 +39,7 @@
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
padding: 1rem .75rem .5rem;
|
||||
padding: 1rem 0.75rem 0.5rem;
|
||||
align-items: flex-end;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
@ -48,7 +48,7 @@
|
||||
.file-ext {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: opacity .15s;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@ -62,7 +62,7 @@
|
||||
border-color: transparent var(--background-color) transparent var(--background-color);
|
||||
border-width: 0 1.125rem 1.125rem 0;
|
||||
border-style: solid;
|
||||
transition: border-width .15s ease-in;
|
||||
transition: border-width 0.15s ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity .25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
&.interactive .file-icon-container {
|
||||
@ -118,14 +118,14 @@
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: .1875rem;
|
||||
margin-right: .125rem;
|
||||
margin-top: 0.1875rem;
|
||||
margin-right: 0.125rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
& + .Link {
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
padding-left: 1rem;
|
||||
white-space: nowrap;
|
||||
@ -145,8 +145,8 @@
|
||||
}
|
||||
|
||||
.file-subtitle {
|
||||
font-size: .875rem;
|
||||
line-height: .9375rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 0.9375rem;
|
||||
color: var(--secondary-color);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
@ -154,14 +154,14 @@
|
||||
|
||||
span + span {
|
||||
&::before {
|
||||
content: '\00a0\2022\00a0';
|
||||
content: "\00a0\2022\00a0";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.smaller {
|
||||
--background-color: var(--color-background);
|
||||
--border-radius-messages-small: .3125rem;
|
||||
--border-radius-messages-small: 0.3125rem;
|
||||
|
||||
.action-icon,
|
||||
.file-progress,
|
||||
@ -172,7 +172,7 @@
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
padding-bottom: .375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
|
||||
&::after {
|
||||
border-width: 0 1rem 1rem 0;
|
||||
@ -180,7 +180,7 @@
|
||||
}
|
||||
|
||||
.file-info {
|
||||
margin-top: -.125rem;
|
||||
margin-top: -0.125rem;
|
||||
}
|
||||
|
||||
.file-title {
|
||||
@ -193,11 +193,11 @@
|
||||
}
|
||||
|
||||
&:dir(rtl),
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.file-progress,
|
||||
.file-icon,
|
||||
.file-preview {
|
||||
margin-left: .75rem;
|
||||
margin-left: 0.75rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.LastMessageMeta {
|
||||
margin-right: .2rem;
|
||||
padding: .3rem 0 .15rem;
|
||||
margin-right: 0.1875rem;
|
||||
padding: 0.3125rem 0 0.125rem;
|
||||
flex-shrink: 0;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
@ -9,16 +9,16 @@
|
||||
|
||||
.MessageOutgoingStatus {
|
||||
color: var(--color-text-meta-colored);
|
||||
margin-right: 0.1rem;
|
||||
font-size: 1.15rem;
|
||||
margin-right: 0.125rem;
|
||||
font-size: 1.125rem;
|
||||
|
||||
body.is-ios & {
|
||||
margin-bottom: -.125rem;
|
||||
margin-bottom: -0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: var(--color-text-meta);
|
||||
line-height: 1.15rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
|
||||
.video-duration {
|
||||
position: absolute;
|
||||
left: .25rem;
|
||||
top: .25rem;
|
||||
background: rgba(0, 0, 0, .25);
|
||||
left: 0.25rem;
|
||||
top: 0.25rem;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
font-size: .75rem;
|
||||
padding: 0 .3125rem;
|
||||
border-radius: .1875rem;
|
||||
font-size: 0.75rem;
|
||||
padding: 0 0.3125rem;
|
||||
border-radius: 0.1875rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.MessageOutgoingStatus {
|
||||
width: 1.19rem;
|
||||
height: 1.19rem;
|
||||
width: 1.1875rem;
|
||||
height: 1.1875rem;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.icon-message-succeeded {
|
||||
padding-left: 0.13rem;
|
||||
padding-left: 0.125rem;
|
||||
}
|
||||
|
||||
.Transition {
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
.description {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
margin: 1rem 0 0;
|
||||
unicode-bidi: plaintext;
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex-shrink: 1;
|
||||
transition: background-color .15s ease;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
max-width: calc(50% - 0.5rem);
|
||||
|
||||
@ -31,7 +31,8 @@
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.Avatar, .item-icon {
|
||||
.Avatar,
|
||||
.item-icon {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -53,18 +54,19 @@
|
||||
.SearchInput & {
|
||||
flex: 1 0 auto;
|
||||
position: relative;
|
||||
top: .25rem;
|
||||
left: -.125rem;
|
||||
top: 0.25rem;
|
||||
left: -0.125rem;
|
||||
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.Avatar, .item-icon {
|
||||
.Avatar,
|
||||
.item-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
opacity: 1;
|
||||
flex-shrink: 0;
|
||||
transition: opacity .15s ease;
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
i {
|
||||
font-size: 2rem;
|
||||
@ -115,10 +117,10 @@
|
||||
font-size: 1.5rem;
|
||||
color: white;
|
||||
opacity: 0;
|
||||
transition: opacity .15s ease;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
padding-left: 1rem;
|
||||
padding-right: 0;
|
||||
|
||||
@ -129,7 +131,7 @@
|
||||
|
||||
.SearchInput & {
|
||||
left: auto;
|
||||
right: -.125rem;
|
||||
right: -0.125rem;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
|
||||
@ -32,24 +32,24 @@
|
||||
.photo-dashes {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: .125rem;
|
||||
padding: 0 .375rem;
|
||||
height: 0.125rem;
|
||||
padding: 0 0.375rem;
|
||||
z-index: 1;
|
||||
|
||||
display: flex;
|
||||
top: .5rem;
|
||||
top: 0.5rem;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.photo-dash {
|
||||
flex: 1 1 auto;
|
||||
background-color: var(--color-white);
|
||||
opacity: .25;
|
||||
border-radius: .125rem;
|
||||
margin: 0 .125rem;
|
||||
opacity: 0.25;
|
||||
border-radius: 0.125rem;
|
||||
margin: 0 0.125rem;
|
||||
|
||||
&.current {
|
||||
opacity: .75;
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@ -64,13 +64,14 @@
|
||||
appearance: none;
|
||||
background: transparent no-repeat;
|
||||
background-size: 1.25rem;
|
||||
opacity: .25;
|
||||
transition: opacity .15s;
|
||||
opacity: 0.25;
|
||||
transition: opacity 0.15s;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
|
||||
&:hover, .is-touch-env & {
|
||||
&:hover,
|
||||
.is-touch-env & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -93,8 +94,8 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
padding: 0 1.5rem .5rem;
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);
|
||||
padding: 0 1.5rem 0.5rem;
|
||||
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
color: var(--color-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -108,7 +109,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.status {
|
||||
text-align: right;
|
||||
unicode-bidi: plaintext;
|
||||
@ -126,7 +127,7 @@
|
||||
line-height: 1.375rem;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
margin-bottom: .25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.VerifiedIcon {
|
||||
@ -143,10 +144,10 @@
|
||||
|
||||
.status {
|
||||
font-size: 0.875rem;
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.navigation.prev {
|
||||
left: auto;
|
||||
right: 0;
|
||||
@ -161,7 +162,7 @@
|
||||
}
|
||||
|
||||
&.self {
|
||||
margin: 0 -.5rem .75rem;
|
||||
margin: 0 -0.5rem 0.75rem;
|
||||
overflow: hidden;
|
||||
|
||||
&.ghost {
|
||||
@ -173,7 +174,7 @@
|
||||
}
|
||||
|
||||
.info {
|
||||
padding-bottom: .75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.status {
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
border-radius: var(--border-radius-messages-small);
|
||||
background: transparent no-repeat center;
|
||||
background-size: contain;
|
||||
transition: background-color .15s ease, opacity .3s ease !important;
|
||||
transition: background-color 0.15s ease, opacity 0.3s ease !important;
|
||||
position: relative;
|
||||
|
||||
&.interactive {
|
||||
@ -19,7 +19,6 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@ -38,7 +37,9 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.AnimatedSticker, img, video {
|
||||
.AnimatedSticker,
|
||||
img,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -46,7 +47,8 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img, video {
|
||||
img,
|
||||
video {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.WebLink {
|
||||
min-height: 3rem;
|
||||
padding: .25rem 0 0 3.75rem;
|
||||
padding: 0.25rem 0 0 3.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
position: relative;
|
||||
@ -57,7 +57,7 @@
|
||||
.site-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
margin-bottom: .0625rem;
|
||||
margin-bottom: 0.0625rem;
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
@ -74,7 +74,7 @@
|
||||
}
|
||||
|
||||
.sender-name {
|
||||
margin-top: .25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.site-description .emoji {
|
||||
@ -82,8 +82,8 @@
|
||||
height: 1rem !important;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
padding: .25rem 3.75rem 0 0;
|
||||
&[dir="rtl"] {
|
||||
padding: 0.25rem 3.75rem 0 0;
|
||||
|
||||
.Media,
|
||||
&.without-media::before {
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
.left-header {
|
||||
height: var(--header-height);
|
||||
padding: 0.375rem 1rem .5rem 0.8125rem;
|
||||
padding: 0.375rem 1rem 0.5rem 0.8125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
@ -36,7 +36,7 @@
|
||||
height: 2.5rem;
|
||||
|
||||
+ .DropdownMenu {
|
||||
margin-left: .25rem;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,13 +4,13 @@
|
||||
bottom: 1rem;
|
||||
transform: translateY(5rem);
|
||||
|
||||
transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
body.animation-level-0 & {
|
||||
transform: none !important;
|
||||
opacity: 0;
|
||||
|
||||
transition: opacity .15s;
|
||||
transition: opacity 0.15s;
|
||||
|
||||
&.revealed {
|
||||
opacity: 1;
|
||||
@ -22,7 +22,7 @@
|
||||
|
||||
@media (max-width: 600px) {
|
||||
// Force rendering in the composite layer to fix the z-index rendering issue
|
||||
transform: translate3d(0,0,10px);
|
||||
transform: translate3d(0, 0, 10px);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
}
|
||||
@ -35,21 +35,21 @@
|
||||
|
||||
&:not(.active) {
|
||||
.icon-new-chat-filled {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.icon-close {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-new-chat-filled {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.Badge-transition {
|
||||
opacity: 1;
|
||||
transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
|
||||
&:not(.open) {
|
||||
transform: scale(0);
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
&.closing {
|
||||
transition: transform .2s ease-out, opacity .2s ease-out;
|
||||
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
display: flex;
|
||||
|
||||
.Badge {
|
||||
margin-inline-start: .5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
height: 1.5rem;
|
||||
background: var(--color-gray);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0 .4375rem;
|
||||
padding: 0 0.4375rem;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5625rem;
|
||||
@ -45,10 +45,11 @@
|
||||
line-height: 1.375rem;
|
||||
min-width: 1.375rem;
|
||||
height: 1.375rem;
|
||||
padding: 0 .375rem;
|
||||
padding: 0 0.375rem;
|
||||
}
|
||||
|
||||
&.mention, &.unread:not(.muted) {
|
||||
&.mention,
|
||||
&.unread:not(.muted) {
|
||||
background: var(--color-green);
|
||||
color: var(--color-white);
|
||||
}
|
||||
@ -78,10 +79,8 @@
|
||||
padding: 0.25rem;
|
||||
|
||||
i {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -14,15 +14,16 @@
|
||||
|
||||
&.animate-opacity {
|
||||
will-change: opacity;
|
||||
transition: opacity .2s ease-out;
|
||||
transition: opacity 0.2s ease-out;
|
||||
}
|
||||
|
||||
&.animate-transform {
|
||||
will-change: transform;
|
||||
transition: transform .2s ease-out;
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
|
||||
&:hover, &.ListItem.has-menu-open {
|
||||
&:hover,
|
||||
&.ListItem.has-menu-open {
|
||||
.Avatar.online::after {
|
||||
border-color: var(--color-chat-hover);
|
||||
}
|
||||
@ -82,7 +83,7 @@
|
||||
|
||||
.info {
|
||||
.subtitle {
|
||||
margin-top: -.125rem;
|
||||
margin-top: -0.125rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -93,12 +94,12 @@
|
||||
.icon-muted {
|
||||
font-size: 1.25rem;
|
||||
margin-left: 0.25rem;
|
||||
margin-top: -.0625rem;
|
||||
color: #C6C8CA;
|
||||
margin-top: -0.0625rem;
|
||||
color: #c6c8ca;
|
||||
|
||||
body.is-ios & {
|
||||
margin-top: 0;
|
||||
margin-right: .5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -106,18 +107,19 @@
|
||||
margin-left: auto;
|
||||
|
||||
body.is-ios & {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.last-message, .typing-status {
|
||||
.last-message,
|
||||
.typing-status {
|
||||
padding-right: 0.25rem;
|
||||
flex-grow: 1;
|
||||
color: var(--color-text-secondary);
|
||||
unicode-bidi: plaintext;
|
||||
|
||||
&[dir=ltr] {
|
||||
&[dir="ltr"] {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@ -133,43 +135,43 @@
|
||||
.last-message {
|
||||
.draft {
|
||||
&::after {
|
||||
content: ': ';
|
||||
content: ": ";
|
||||
}
|
||||
}
|
||||
|
||||
.colon {
|
||||
margin-inline-end: .25rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
object-fit: cover;
|
||||
border-radius: .125rem;
|
||||
vertical-align: -.25rem;
|
||||
margin-inline-end: .25rem;
|
||||
border-radius: 0.125rem;
|
||||
vertical-align: -0.25rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
|
||||
body.is-ios & {
|
||||
width: 1.125rem;
|
||||
height: 1.125rem;
|
||||
vertical-align: -.1875rem;
|
||||
vertical-align: -0.1875rem;
|
||||
}
|
||||
|
||||
&.round {
|
||||
border-radius: .625rem;
|
||||
border-radius: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-small {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
vertical-align: -.125rem;
|
||||
vertical-align: -0.125rem;
|
||||
}
|
||||
|
||||
.icon-play {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: #fff;
|
||||
margin-inline-start: -1.25rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
@ -183,15 +185,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.info {
|
||||
.LastMessageMeta {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.title, .subtitle {
|
||||
padding-left: .15rem;
|
||||
.title,
|
||||
.subtitle {
|
||||
padding-left: 0.125rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@ -200,7 +203,8 @@
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.last-message, .typing-status {
|
||||
.last-message,
|
||||
.typing-status {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
|
||||
@ -17,11 +17,11 @@
|
||||
|
||||
.title {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: .125rem;
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
body.is-ios &,
|
||||
@ -31,13 +31,13 @@
|
||||
}
|
||||
|
||||
.Button.pill {
|
||||
margin-top: .625rem;
|
||||
margin-top: 0.625rem;
|
||||
font-weight: 500;
|
||||
padding-inline-start: .75rem;
|
||||
padding-inline-start: 0.75rem;
|
||||
unicode-bidi: plaintext;
|
||||
|
||||
i {
|
||||
margin-inline-end: .625rem;
|
||||
margin-inline-end: 0.625rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
.TabList {
|
||||
justify-content: flex-start;
|
||||
padding-left: .5625rem;
|
||||
padding-left: 0.5625rem;
|
||||
padding-bottom: 1px;
|
||||
border-bottom: 0;
|
||||
z-index: 1;
|
||||
@ -51,7 +51,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.RecentContacts, .LeftSearch, .search-content {
|
||||
.RecentContacts,
|
||||
.LeftSearch,
|
||||
.search-content {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../styles/mixins';
|
||||
@import "../../../styles/mixins";
|
||||
|
||||
#LeftMainHeader {
|
||||
position: relative;
|
||||
@ -6,19 +6,22 @@
|
||||
.animated-menu-icon {
|
||||
position: absolute;
|
||||
|
||||
&, &::before, &::after {
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
width: 1.125rem;
|
||||
height: 0.125rem;
|
||||
border-radius: 0.125rem;
|
||||
background-color: var(--color-text-secondary);
|
||||
transition: transform .25s;
|
||||
transition: transform 0.25s;
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::before {
|
||||
@ -44,7 +47,8 @@
|
||||
&.no-animation {
|
||||
transition: none;
|
||||
|
||||
&::before, &::after {
|
||||
&::before,
|
||||
&::after {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@ -56,7 +60,7 @@
|
||||
margin-left: auto;
|
||||
background: var(--color-gray);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0 .45rem;
|
||||
padding: 0 0.4375rem;
|
||||
color: white;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
@ -65,7 +69,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[dir=rtl] .archived-badge {
|
||||
[dir="rtl"] .archived-badge {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
.ChatMessage {
|
||||
&:first-child {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
&:hover, &.selected {
|
||||
&:hover,
|
||||
&.selected {
|
||||
.Avatar.online::after {
|
||||
border-color: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.ListItem-button {
|
||||
padding: .25rem .5rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
}
|
||||
|
||||
.info {
|
||||
@ -27,7 +28,7 @@
|
||||
|
||||
.matching-text-highlight {
|
||||
color: var(--color-text);
|
||||
background: #CAE3F7;
|
||||
background: #cae3f7;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 0.125rem;
|
||||
display: inline-block;
|
||||
@ -48,7 +49,7 @@
|
||||
color: var(--color-text);
|
||||
|
||||
&::after {
|
||||
content: ': ';
|
||||
content: ": ";
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,15 +57,15 @@
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
object-fit: cover;
|
||||
border-radius: .125rem;
|
||||
vertical-align: -.25rem;
|
||||
margin-right: .25rem;
|
||||
border-radius: 0.125rem;
|
||||
vertical-align: -0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.icon-play {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: #fff;
|
||||
margin-inline-start: -1.25rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
@ -78,7 +79,7 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.subtitle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -3,23 +3,22 @@
|
||||
height: 2rem;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-left: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
.date-item {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
min-width: 8rem;
|
||||
margin-top: .375rem;
|
||||
margin-top: 0.375rem;
|
||||
cursor: pointer;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
.icon-calendar {
|
||||
font-size: 1.25rem;
|
||||
margin-right: .25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -26,24 +26,24 @@
|
||||
position: relative;
|
||||
padding-top: 1.25rem;
|
||||
padding-left: 1.25rem;
|
||||
margin: 0 0 1rem -1.25rem !important;
|
||||
margin: 0 0 1rem -1.25rem !important;
|
||||
|
||||
font-weight: 500;
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--color-borders);
|
||||
left: .625rem;
|
||||
left: 0.625rem;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&[dir=rtl],
|
||||
&[dir=auto] {
|
||||
&[dir="rtl"],
|
||||
&[dir="auto"] {
|
||||
padding-left: 0;
|
||||
padding-right: 1.25rem;
|
||||
margin: 0 -1.25rem 0 1rem !important;
|
||||
@ -51,7 +51,7 @@
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: .625rem;
|
||||
right: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -81,7 +81,7 @@
|
||||
}
|
||||
|
||||
.message-date {
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
padding-left: 1rem;
|
||||
white-space: nowrap;
|
||||
@ -89,15 +89,15 @@
|
||||
|
||||
.media-list {
|
||||
display: grid;
|
||||
padding: .5rem;
|
||||
padding: 0.5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: .25rem;
|
||||
grid-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.Audio {
|
||||
.ProgressSpinner {
|
||||
margin: -.1875rem 0 0 -.1875rem;
|
||||
margin: -0.1875rem 0 0 -0.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,24 +108,24 @@
|
||||
color: var(--color-primary);
|
||||
|
||||
&::before {
|
||||
content: '@';
|
||||
html[lang=ar] & {
|
||||
content: ' ،@';
|
||||
margin-inline-end: .25rem;
|
||||
content: "@";
|
||||
html[lang="ar"] & {
|
||||
content: " ،@";
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ', ';
|
||||
content: ", ";
|
||||
color: var(--color-text-secondary);
|
||||
|
||||
html[lang=ar] & {
|
||||
content: '';
|
||||
html[lang="ar"] & {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.status {
|
||||
text-align: right;
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
color: var(--color-text);
|
||||
|
||||
&::after {
|
||||
content: ': ';
|
||||
content: ": ";
|
||||
white-space: pre;
|
||||
}
|
||||
}
|
||||
@ -159,10 +159,10 @@
|
||||
|
||||
.section-heading {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: .875rem;
|
||||
padding-top: 0.875rem;
|
||||
|
||||
.Link {
|
||||
float: right;
|
||||
@ -176,8 +176,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[dir=rtl],
|
||||
&[dir=auto] {
|
||||
&[dir="rtl"],
|
||||
&[dir="auto"] {
|
||||
.Link {
|
||||
float: left;
|
||||
margin-left: 1rem;
|
||||
@ -193,7 +193,7 @@
|
||||
}
|
||||
|
||||
.chat-selection {
|
||||
padding-top: .5rem;
|
||||
padding-top: 0.5rem;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-wrap: nowrap;
|
||||
@ -215,7 +215,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
> .PickerSelectedItem:last-child {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
@ -227,7 +227,7 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
[dir=rtl] {
|
||||
[dir="rtl"] {
|
||||
.message-date {
|
||||
padding-left: 0;
|
||||
padding-right: 1rem;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
}
|
||||
|
||||
.top-peers-section {
|
||||
padding: .5rem 1rem;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.top-peers {
|
||||
@ -78,7 +78,7 @@
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.Button {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../styles/mixins';
|
||||
@import "../../../styles/mixins";
|
||||
|
||||
#Settings {
|
||||
height: 100%;
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.left-header {
|
||||
padding-right: .8125rem;
|
||||
padding-right: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,12 +50,12 @@
|
||||
}
|
||||
|
||||
#monkey {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.AnimatedEmoji {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
@ -86,22 +86,22 @@
|
||||
height: 100%;
|
||||
|
||||
&.hidden {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings-main-menu {
|
||||
padding: 0 0.5rem .75rem;
|
||||
padding: 0 0.5rem 0.75rem;
|
||||
|
||||
> .ChatExtra {
|
||||
padding: 0 .5rem .3125rem;
|
||||
margin: 0 -.5rem .625rem;
|
||||
box-shadow: inset 0 -.0625rem 0 0 var(--color-background-secondary-accent);
|
||||
border-bottom: .625rem solid var(--color-background-secondary);
|
||||
padding: 0 0.5rem 0.3125rem;
|
||||
margin: 0 -0.5rem 0.625rem;
|
||||
box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
|
||||
border-bottom: 0.625rem solid var(--color-background-secondary);
|
||||
|
||||
.ListItem.narrow {
|
||||
margin-bottom: .25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -120,7 +120,7 @@
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -139,7 +139,7 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
text-align: right;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
@ -152,7 +152,7 @@
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -178,7 +178,8 @@
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.title, .subtitle {
|
||||
.title,
|
||||
.subtitle {
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
@ -202,7 +203,7 @@
|
||||
|
||||
&.tight {
|
||||
line-height: 1.3125rem;
|
||||
margin-bottom: .1875rem;
|
||||
margin-bottom: 0.1875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -246,9 +247,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.multiline-menu-item {
|
||||
.title, .subtitle {
|
||||
.title,
|
||||
.subtitle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -265,7 +267,8 @@
|
||||
margin-bottom: 1.0625rem;
|
||||
}
|
||||
|
||||
.Checkbox, .radio-group {
|
||||
.Checkbox,
|
||||
.radio-group {
|
||||
margin: 0 -1rem 0.5rem;
|
||||
}
|
||||
|
||||
@ -275,7 +278,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Radio + .Radio, .Checkbox + .Checkbox {
|
||||
.Radio + .Radio,
|
||||
.Checkbox + .Checkbox {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
@ -309,7 +313,7 @@
|
||||
|
||||
.ReactionStaticEmoji {
|
||||
margin-inline-end: 1rem;
|
||||
width: 1.5rem
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -319,5 +323,4 @@
|
||||
height: 1.5rem;
|
||||
margin-inline-end: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
.SettingsGeneralBackground {
|
||||
.settings-wallpapers {
|
||||
display: grid;
|
||||
padding: .5rem;
|
||||
padding: 0.5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: .25rem;
|
||||
grid-gap: 0.25rem;
|
||||
}
|
||||
|
||||
.Loading {
|
||||
|
||||
@ -3,7 +3,8 @@
|
||||
transition: transform 300ms ease;
|
||||
}
|
||||
|
||||
.color-picker, .hue-picker {
|
||||
.color-picker,
|
||||
.hue-picker {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@ -47,7 +48,7 @@
|
||||
.input-group {
|
||||
margin-bottom: 0;
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
label {
|
||||
transform: scale(0.75) translate(1.25rem, -2.25rem);
|
||||
}
|
||||
@ -65,10 +66,10 @@
|
||||
|
||||
.predefined-colors {
|
||||
display: grid;
|
||||
padding: .5rem;
|
||||
padding: 0.5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: 1fr;
|
||||
grid-gap: .25rem;
|
||||
grid-gap: 0.25rem;
|
||||
|
||||
div {
|
||||
cursor: pointer;
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
.SettingsStickerSet {
|
||||
.settings-item &.ListItem {
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.StickerButton,
|
||||
.Button {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
margin: 0 .5rem 0 0;
|
||||
margin: 0 0.5rem 0 0;
|
||||
padding: 0;
|
||||
flex: 0 0 3rem;
|
||||
}
|
||||
@ -23,10 +23,10 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.StickerButton,
|
||||
.Button {
|
||||
margin: 0 0 0 .5rem;
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,9 +16,10 @@
|
||||
.media-inner {
|
||||
overflow: hidden;
|
||||
transform: scale(1);
|
||||
transition: transform .15s ease;
|
||||
transition: transform 0.15s ease;
|
||||
|
||||
img, canvas {
|
||||
img,
|
||||
canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -33,7 +34,7 @@
|
||||
display: block;
|
||||
border: 2px solid var(--color-primary);
|
||||
opacity: 0;
|
||||
transition: opacity .15s ease;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
.title h3{
|
||||
&[dir="rtl"] {
|
||||
.title h3 {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -58,7 +58,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.Avatar {
|
||||
margin-left: 1.5rem;
|
||||
margin-right: -0.25rem;
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.Checkbox {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
|
||||
@ -112,13 +112,9 @@
|
||||
|
||||
@media (max-width: 600px) {
|
||||
max-width: none;
|
||||
width: 100vw !important;
|
||||
transform: translate3d(-20vw, 0, 0);
|
||||
|
||||
@supports (left: env(safe-area-inset-left)) {
|
||||
left: env(safe-area-inset-left) !important;
|
||||
width: calc(100vw - env(safe-area-inset-left));
|
||||
}
|
||||
left: env(safe-area-inset-left) !important;
|
||||
width: calc(100vw - env(safe-area-inset-left)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .9);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
color: #fff;
|
||||
z-index: var(--z-media-viewer);
|
||||
|
||||
@ -27,13 +27,16 @@
|
||||
}
|
||||
|
||||
body.ghost-animating & {
|
||||
> .pan-wrapper, > button, .MediaViewerContent img, .MediaViewerContent .VideoPlayer {
|
||||
> .pan-wrapper,
|
||||
> button,
|
||||
.MediaViewerContent img,
|
||||
.MediaViewerContent .VideoPlayer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
body.animation-level-2 & {
|
||||
transition-duration: .3s !important;
|
||||
transition-duration: 0.3s !important;
|
||||
}
|
||||
|
||||
&:not(.open),
|
||||
@ -67,10 +70,10 @@
|
||||
.media-viewer-head {
|
||||
display: flex;
|
||||
grid-area: 1 / 1 / 2 / -2;
|
||||
padding: 0.5rem 1.25rem;
|
||||
position: relative;
|
||||
z-index: var(--z-media-viewer-head);
|
||||
min-width: 0;
|
||||
padding: 0.5rem max(1.25rem, env(safe-area-inset-left));
|
||||
|
||||
& > .Transition {
|
||||
width: 100%;
|
||||
@ -78,20 +81,12 @@
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding: 0.5rem;
|
||||
|
||||
@supports (padding: 0 env(safe-area-inset-left)) {
|
||||
padding: 0.5rem #{"max(0.5rem, env(safe-area-inset-left))"};
|
||||
}
|
||||
padding: 0.5rem max(0.5rem, env(safe-area-inset-left));
|
||||
|
||||
.media-viewer-close {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (padding: 0.5rem env(safe-area-inset-left)) {
|
||||
padding: 0.5rem #{"max(1.25rem, env(safe-area-inset-left))"};
|
||||
}
|
||||
}
|
||||
|
||||
& > .Transition,
|
||||
@ -123,7 +118,7 @@
|
||||
background: transparent no-repeat;
|
||||
background-size: 1.25rem;
|
||||
opacity: 0;
|
||||
transition: opacity .15s;
|
||||
transition: opacity 0.15s;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
@ -132,49 +127,33 @@
|
||||
width: 20vw;
|
||||
}
|
||||
|
||||
&:hover, .is-touch-env & {
|
||||
&:hover,
|
||||
.is-touch-env & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.prev {
|
||||
left: 0;
|
||||
background-image: url("../../assets/media_navigation_previous.svg");
|
||||
background-position: 1.25rem calc(50% - 2rem);
|
||||
|
||||
@supports (left: env(safe-area-inset-left)) {
|
||||
left: env(safe-area-inset-left);
|
||||
}
|
||||
left: env(safe-area-inset-left);
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
left: auto;
|
||||
right: 0;
|
||||
right: env(safe-area-inset-right);
|
||||
transform: scaleX(-1);
|
||||
|
||||
@supports (left: env(safe-area-inset-left)) {
|
||||
left: auto;
|
||||
right: env(safe-area-inset-right);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.next {
|
||||
right: 0;
|
||||
right: env(safe-area-inset-right);
|
||||
background-image: url("../../assets/media_navigation_next.svg");
|
||||
background-position: calc(100% - 1.25rem) calc(50% - 2rem);
|
||||
|
||||
@supports (left: env(safe-area-inset-left)) {
|
||||
right: env(safe-area-inset-right);
|
||||
}
|
||||
|
||||
&[dir=rtl]{
|
||||
left: 0;
|
||||
&[dir="rtl"] {
|
||||
right: auto;
|
||||
left: env(safe-area-inset-left);
|
||||
transform: scaleX(-1);
|
||||
|
||||
@supports (left: env(safe-area-inset-left)) {
|
||||
right: auto;
|
||||
left: env(safe-area-inset-left);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -186,7 +165,7 @@
|
||||
|
||||
@media (max-width: 600px) {
|
||||
opacity: 0;
|
||||
transition: opacity .15s ease-in;
|
||||
transition: opacity 0.15s ease-in;
|
||||
pointer-events: none;
|
||||
|
||||
.video-controls-visible & {
|
||||
@ -204,7 +183,7 @@
|
||||
will-change: transform, opacity;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
transition: transform .2s ease, opacity .2s ease;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease;
|
||||
|
||||
&.rounded-corners {
|
||||
border-radius: var(--border-radius-messages);
|
||||
@ -215,7 +194,7 @@
|
||||
}
|
||||
|
||||
body.is-ios & {
|
||||
transition: transform .2s ease, opacity .2s ease, border-radius .2s ease !important;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease, border-radius 0.2s ease !important;
|
||||
}
|
||||
|
||||
img,
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
.MediaViewerActions {
|
||||
display: flex;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: -.375rem;
|
||||
margin-inline-end: -0.375rem;
|
||||
|
||||
.Button {
|
||||
margin-inline-start: .25rem;
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
max-width: 100vw;
|
||||
max-height: calc(100vh - 8.25rem);
|
||||
object-fit: contain;
|
||||
transition: transform .2s;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.spinner-wrapper {
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
bottom: 0;
|
||||
padding: 1rem 0;
|
||||
width: 100%;
|
||||
transition: opacity .15s;
|
||||
transition: opacity 0.15s;
|
||||
|
||||
#MediaViewer.zoomed & {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-height: 640px) {
|
||||
padding: .5rem 0 0;
|
||||
padding: 0.5rem 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@ -37,8 +37,8 @@
|
||||
max-width: var(--messages-container-width);
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
opacity: .5;
|
||||
transition: opacity .15s;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.15s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -56,11 +56,11 @@
|
||||
.media-text {
|
||||
margin-bottom: 0;
|
||||
overflow: auto;
|
||||
padding: 0 .5rem;
|
||||
padding: 0 0.5rem;
|
||||
text-align: center;
|
||||
color: rgba(255, 255, 255, .9);
|
||||
font-size: .9375rem;
|
||||
letter-spacing: .025rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 0.9375rem;
|
||||
letter-spacing: 0.025rem;
|
||||
max-height: 4.25rem;
|
||||
|
||||
@media (max-height: 640px) {
|
||||
@ -68,20 +68,20 @@
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: .9375rem;
|
||||
height: .9375rem;
|
||||
width: 0.9375rem;
|
||||
height: 0.9375rem;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
&.multiline {
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -.75rem;
|
||||
right: -.75rem;
|
||||
top: -.25rem;
|
||||
bottom: -.25rem;
|
||||
background: rgba(0, 0, 0, .75);
|
||||
left: -0.75rem;
|
||||
right: -0.75rem;
|
||||
top: -0.25rem;
|
||||
bottom: -0.25rem;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
border-radius: var(--border-radius-default);
|
||||
z-index: var(--z-below);
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.pan-container {
|
||||
transition: transform .2s ease-in;
|
||||
transition: transform 0.2s ease-in;
|
||||
|
||||
.pan-wrapper.move & {
|
||||
transition: none;
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
opacity: .5;
|
||||
transition: .15s opacity;
|
||||
opacity: 0.5;
|
||||
transition: 0.15s opacity;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
line-height: 1.45rem;
|
||||
line-height: 1.4375rem;
|
||||
font-weight: 500;
|
||||
white-space: pre;
|
||||
overflow: hidden;
|
||||
|
||||
@ -60,13 +60,13 @@
|
||||
height: 3.25rem;
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
body:not(.animation-level-0) & {
|
||||
transition: opacity .3s ease !important;
|
||||
transition: opacity 0.3s ease !important;
|
||||
}
|
||||
|
||||
.icon-play {
|
||||
font-size: 1.75rem;
|
||||
position: relative;
|
||||
left: .125rem;
|
||||
left: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding-top: .625rem;
|
||||
font-size: .875rem;
|
||||
padding-top: 0.625rem;
|
||||
font-size: 0.875rem;
|
||||
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
|
||||
transition: opacity .15s;
|
||||
transition: opacity 0.15s;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
@media (max-width: 600px) {
|
||||
position: fixed;
|
||||
padding: 1.25rem .5rem .75rem;
|
||||
padding: 1.25rem 0.5rem 0.75rem;
|
||||
background: none;
|
||||
z-index: var(--z-media-viewer);
|
||||
}
|
||||
@ -31,7 +31,6 @@
|
||||
&.mobile {
|
||||
.player-file-size {
|
||||
position: static;
|
||||
left: auto;
|
||||
transform: none;
|
||||
margin-left: auto;
|
||||
}
|
||||
@ -48,7 +47,7 @@
|
||||
.Button {
|
||||
width: 2.25rem;
|
||||
padding: 0;
|
||||
margin: .25rem;
|
||||
margin: 0.25rem;
|
||||
height: 1.75rem;
|
||||
@media (max-width: 600px) {
|
||||
height: 2.25rem;
|
||||
@ -93,7 +92,6 @@
|
||||
|
||||
@media (max-width: 600px) {
|
||||
position: static;
|
||||
left: auto;
|
||||
transform: none;
|
||||
margin-left: auto;
|
||||
margin-right: 1rem;
|
||||
@ -115,8 +113,8 @@
|
||||
&-track {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -.25rem;
|
||||
right: -.25rem;
|
||||
left: -0.25rem;
|
||||
right: -0.25rem;
|
||||
height: 5px;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(255, 255, 255, 0.16);
|
||||
@ -141,15 +139,15 @@
|
||||
background: var(--color-primary);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-primary);
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate(.325rem, -50%);
|
||||
transform: translate(0.325rem, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,13 +2,13 @@
|
||||
position: absolute;
|
||||
bottom: 1.25rem;
|
||||
left: 50%;
|
||||
background: rgba(0,0,0,.5);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: var(--border-radius-default);
|
||||
width: 100%;
|
||||
height: 3.375rem;
|
||||
max-width: 274px;
|
||||
transform: translate3d(-50%, 0, 10px);
|
||||
transition: opacity .3s ease-in;
|
||||
transition: opacity 0.3s ease-in;
|
||||
pointer-events: none;
|
||||
|
||||
&.open {
|
||||
@ -30,11 +30,11 @@
|
||||
}
|
||||
|
||||
.zoom-out {
|
||||
left: .5rem;
|
||||
left: 0.5rem;
|
||||
}
|
||||
|
||||
.zoom-in {
|
||||
right: .5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
|
||||
.seekline {
|
||||
@ -47,11 +47,11 @@
|
||||
&-track {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: -.25rem;
|
||||
right: -.25rem;
|
||||
left: -0.25rem;
|
||||
right: -0.25rem;
|
||||
height: 2px;
|
||||
transform: translateY(-50%);
|
||||
background-color: rgba(255, 255, 255, .5);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: var(--border-radius-default);
|
||||
}
|
||||
|
||||
@ -69,22 +69,22 @@
|
||||
transition: width 200ms;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-white);
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate(.325rem, -50%);
|
||||
transform: translate(0.325rem, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-input {
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
top: -.375rem;
|
||||
top: -0.375rem;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
.AudioPlayer {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-top: -.25rem;
|
||||
margin-bottom: -.25rem;
|
||||
margin-top: -0.25rem;
|
||||
margin-bottom: -0.25rem;
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none !important;
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
> .Button {
|
||||
flex-shrink: 0;
|
||||
margin: .125rem;
|
||||
margin: 0.125rem;
|
||||
}
|
||||
|
||||
> .player-button {
|
||||
@ -27,24 +27,25 @@
|
||||
|
||||
i {
|
||||
font-size: 1.625rem;
|
||||
margin-top: -.025rem;
|
||||
margin-top: -0.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
font-size: 1.9375rem;
|
||||
margin-top: -.05rem;
|
||||
margin-top: -0.0625rem;
|
||||
|
||||
&.icon-play {
|
||||
margin-left: .1rem;
|
||||
margin-left: 0.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-play, .icon-pause {
|
||||
.icon-play,
|
||||
.icon-pause {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: opacity .4s, transform .6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: opacity 0.4s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
&.play .icon-pause,
|
||||
@ -52,7 +53,7 @@
|
||||
&.loading .icon-play,
|
||||
&.loading .icon-pause {
|
||||
opacity: 0;
|
||||
transform: scale(.5);
|
||||
transform: scale(0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -70,7 +71,8 @@
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .volume-slider-spacer, .volume-slider-spacer:hover {
|
||||
&:hover .volume-slider-spacer,
|
||||
.volume-slider-spacer:hover {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
@ -91,7 +93,7 @@
|
||||
|
||||
.RangeSlider {
|
||||
margin-bottom: 0;
|
||||
input[type=range] {
|
||||
input[type="range"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@ -116,7 +118,7 @@
|
||||
font-weight: bold;
|
||||
border: 2px solid;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.15rem 0.25rem;
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
}
|
||||
@ -126,7 +128,7 @@
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
flex-shrink: 1;
|
||||
padding: 0 .5rem;
|
||||
padding: 0 0.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
@ -150,22 +152,22 @@
|
||||
text-overflow: ellipsis;
|
||||
|
||||
body.is-ios & {
|
||||
font-size: .9375rem !important;
|
||||
font-size: 0.9375rem !important;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 0.85rem !important;
|
||||
font-size: 0.8125rem !important;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 0.85rem;
|
||||
line-height: 0.8125rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin: .125rem 0 0;
|
||||
margin: 0.125rem 0 0;
|
||||
|
||||
body.is-ios & {
|
||||
font-size: .9375rem !important;
|
||||
font-size: 0.9375rem !important;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
align-items: center;
|
||||
background: var(--pattern-color);
|
||||
width: 14.5rem;
|
||||
padding: .75rem 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 1.5rem;
|
||||
color: #fff;
|
||||
}
|
||||
@ -23,7 +23,7 @@
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
left: var(--start-x);
|
||||
transform: scale(var(--scale), 0);
|
||||
transform-origin: left top;
|
||||
transition: 0.25s cubic-bezier(.29,.81,.27,.99) opacity;
|
||||
transition: 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99) opacity;
|
||||
}
|
||||
|
||||
&.reversed .AnimatedSticker {
|
||||
@ -44,11 +44,11 @@
|
||||
}
|
||||
|
||||
&.playing .AnimatedSticker {
|
||||
animation: show-interaction forwards 0.25s cubic-bezier(.29,.81,.27,.99);
|
||||
animation: show-interaction forwards 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99);
|
||||
}
|
||||
|
||||
&.reversed.playing .AnimatedSticker {
|
||||
animation: show-interaction-reversed forwards 0.25s cubic-bezier(.29,.81,.27,.99);
|
||||
animation: show-interaction-reversed forwards 0.25s cubic-bezier(0.29, 0.81, 0.27, 0.99);
|
||||
}
|
||||
|
||||
&.hiding .AnimatedSticker {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import '../../styles/mixins';
|
||||
@import "../../styles/mixins";
|
||||
|
||||
.MessageList {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
@ -30,15 +30,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
transition: bottom 150ms ease-out, transform var(--layer-transition);
|
||||
body.keyboard-visible & {
|
||||
position: relative;
|
||||
bottom: calc(0px - env(safe-area-inset-bottom));
|
||||
transition: bottom 150ms ease-out, transform var(--layer-transition);
|
||||
body.keyboard-visible & {
|
||||
position: relative;
|
||||
bottom: calc(0px - env(safe-area-inset-bottom));
|
||||
|
||||
body.keyboard-visible.animation-level-0 & {
|
||||
transition: none !important;
|
||||
}
|
||||
body.keyboard-visible.animation-level-0 & {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,7 +74,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.select-mode-active, &.type-pinned {
|
||||
&.select-mode-active,
|
||||
&.type-pinned {
|
||||
margin-bottom: 0;
|
||||
|
||||
.last-in-list {
|
||||
@ -98,10 +97,8 @@
|
||||
.last-in-list {
|
||||
margin-bottom: 4.25rem;
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
body:not(.keyboard-visible) & {
|
||||
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
body:not(.keyboard-visible) & {
|
||||
margin-bottom: calc(4.25rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -113,7 +110,7 @@
|
||||
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: opacity .2s ease, transform .2s ease;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
|
||||
&:not(.open) {
|
||||
transform: scale(0.8);
|
||||
@ -169,7 +166,7 @@
|
||||
opacity: 0.1;
|
||||
|
||||
.theme-dark & {
|
||||
opacity: .6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -191,7 +188,8 @@
|
||||
color: inherit !important;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@ -208,17 +206,17 @@
|
||||
display: inline-block;
|
||||
background: var(--pattern-color);
|
||||
color: white;
|
||||
font-size: calc(var(--message-text-size, 1rem) - .0625rem);
|
||||
font-size: calc(var(--message-text-size, 1rem) - 0.0625rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.75;
|
||||
padding: 0 .5rem;
|
||||
padding: 0 0.5rem;
|
||||
border-radius: var(--border-radius-messages);
|
||||
word-break: break-word;
|
||||
|
||||
body.is-ios &,
|
||||
body.is-macos & {
|
||||
font-size: calc(var(--message-text-size, 1rem) - .125rem);
|
||||
line-height: calc(var(--message-text-size, 1rem) + .5rem);
|
||||
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
|
||||
line-height: calc(var(--message-text-size, 1rem) + 0.5rem);
|
||||
}
|
||||
|
||||
.emoji-small {
|
||||
@ -236,11 +234,11 @@
|
||||
z-index: var(--z-sticky-date);
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: opacity .3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .75rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
body:not(.is-scrolling-messages) &.stuck {
|
||||
@ -348,7 +346,7 @@
|
||||
|
||||
/* Styles for Firefox */
|
||||
@supports (scrollbar-width: none) {
|
||||
padding-right: .6875rem;
|
||||
padding-right: 0.6875rem;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.MessageSelectToolbar {
|
||||
position: absolute;
|
||||
bottom: 0.5rem;
|
||||
bottom: calc(0.5rem + env(safe-area-inset-bottom));
|
||||
left: 0.5rem;
|
||||
right: 0.5rem;
|
||||
width: auto;
|
||||
@ -8,10 +8,6 @@
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
bottom: calc(0.5rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.mask-image-disabled &::before {
|
||||
left: auto !important;
|
||||
right: auto !important;
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
background-size: cover;
|
||||
|
||||
body:not(.animation-level-0) #root & {
|
||||
transition: transform var(--layer-transition), background .2s !important;
|
||||
transition: transform var(--layer-transition), background 0.2s !important;
|
||||
}
|
||||
|
||||
body.animation-level-0 & {
|
||||
@ -29,10 +29,10 @@
|
||||
}
|
||||
|
||||
.theme-light & {
|
||||
background-image: url('../../assets/chat-bg.jpg');
|
||||
background-image: url("../../assets/chat-bg.jpg");
|
||||
|
||||
@media (max-width: 600px) {
|
||||
background-image: url('../../assets/chat-bg-mobile.jpg');
|
||||
background-image: url("../../assets/chat-bg-mobile.jpg");
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -123,13 +123,15 @@
|
||||
}
|
||||
|
||||
body.animation-level-0 & {
|
||||
&, &::before {
|
||||
&,
|
||||
&::before {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-input-wrapper, &::before {
|
||||
.message-input-wrapper,
|
||||
&::before {
|
||||
opacity: 1;
|
||||
transition: opacity var(--select-transition);
|
||||
|
||||
@ -141,14 +143,16 @@
|
||||
> .Button {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s, color 0.15s;
|
||||
transition: opacity var(--select-transition), transform var(--select-transition), background-color 0.15s,
|
||||
color 0.15s;
|
||||
|
||||
body.animation-level-0 & {
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.hover-disabled, &:not(.shown) {
|
||||
&.hover-disabled,
|
||||
&:not(.shown) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@ -174,7 +178,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.message-input-wrapper, &::before {
|
||||
.message-input-wrapper,
|
||||
&::before {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@ -254,25 +259,29 @@
|
||||
}
|
||||
}
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
&:not(.no-composer) {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
top: 0;
|
||||
&:not(.no-composer) {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
top: 0;
|
||||
|
||||
body.keyboard-visible & {
|
||||
top: env(safe-area-inset-bottom);
|
||||
}
|
||||
body.keyboard-visible & {
|
||||
top: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -.5625rem;
|
||||
top: -0.5625rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 2%, rgba(255, 255, 255, 0.4) 98%, rgba(255, 255, 255, 0) 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.4) 2%,
|
||||
rgba(255, 255, 255, 0.4) 98%,
|
||||
rgba(255, 255, 255, 0) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity 350ms ease;
|
||||
|
||||
@ -287,7 +296,13 @@
|
||||
}
|
||||
|
||||
html.theme-dark &::before {
|
||||
background: linear-gradient(90deg, rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0) 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(127, 127, 127, 0) 0%,
|
||||
rgba(127, 127, 127, 0.4) 2%,
|
||||
rgba(127, 127, 127, 0.4) 98%,
|
||||
rgba(127, 127, 127, 0) 100%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -319,7 +334,7 @@
|
||||
.join-subscribe-button,
|
||||
.messaging-disabled {
|
||||
.mask-image-disabled & {
|
||||
box-shadow: 0 .25rem .5rem .125rem var(--color-default-shadow);
|
||||
box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);
|
||||
border-radius: var(--border-radius-messages);
|
||||
}
|
||||
}
|
||||
@ -344,7 +359,8 @@
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
&:active, &:focus {
|
||||
&:active,
|
||||
&:focus {
|
||||
.icon-unpin {
|
||||
color: var(--color-white);
|
||||
}
|
||||
@ -353,10 +369,10 @@
|
||||
|
||||
.icon-unpin {
|
||||
margin-inline-start: -0.4375rem;
|
||||
margin-inline-end: .75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.5rem;
|
||||
transition: color .15s
|
||||
transition: color 0.15s;
|
||||
}
|
||||
}
|
||||
|
||||
@ -364,7 +380,7 @@
|
||||
.unpin-all-button {
|
||||
height: 3.5rem;
|
||||
transform: scaleX(1);
|
||||
transition: transform var(--select-transition), background-color .15s, color .15s;
|
||||
transition: transform var(--select-transition), background-color 0.15s, color 0.15s;
|
||||
|
||||
.select-mode-active + .middle-column-footer & {
|
||||
box-shadow: none;
|
||||
@ -377,11 +393,7 @@
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding-bottom: 0.75rem;
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.mask-image-disabled &::before {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../styles/mixins';
|
||||
@import "../../styles/mixins";
|
||||
|
||||
@mixin mobile-header-styles() {
|
||||
.HeaderPinnedMessage-wrapper,
|
||||
@ -8,34 +8,31 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2.875rem;
|
||||
box-shadow: 0 .125rem .125rem var(--color-light-shadow);
|
||||
box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
|
||||
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0.375rem 0.5rem;
|
||||
padding-left: 0.75rem;
|
||||
padding-top: 0.375rem;
|
||||
padding-bottom: 0.375rem;
|
||||
padding-left: max(0.75rem, env(safe-area-inset-left));
|
||||
padding-right: max(0.5rem, env(safe-area-inset-right));
|
||||
background: var(--color-background);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -.1875rem;
|
||||
top: -0.1875rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: .125rem;
|
||||
box-shadow: 0 .125rem .125rem var(--color-light-shadow);
|
||||
height: 0.125rem;
|
||||
box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
|
||||
}
|
||||
|
||||
.HeaderPinnedMessage {
|
||||
max-width: unset;
|
||||
margin-top: -0.1875rem;
|
||||
}
|
||||
|
||||
@supports (padding-left: env(safe-area-inset-left)) {
|
||||
padding-left: #{"max(0.75rem, env(safe-area-inset-left))"};
|
||||
padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
|
||||
}
|
||||
}
|
||||
|
||||
.AudioPlayer {
|
||||
@ -45,11 +42,11 @@
|
||||
|
||||
&-content {
|
||||
padding: 0 0.5rem;
|
||||
flex-grow: 1
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
> .Button {
|
||||
margin: -.0625rem 0 0;
|
||||
margin: -0.0625rem 0 0;
|
||||
}
|
||||
|
||||
> .player-close {
|
||||
@ -83,23 +80,18 @@
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 2px var(--color-light-shadow);
|
||||
background: var(--color-background);
|
||||
padding: .5rem .8125rem .5rem 1.5rem;
|
||||
position: relative;
|
||||
z-index: var(--z-middle-header);
|
||||
|
||||
@supports (padding-left: env(safe-area-inset-left)) {
|
||||
padding-left: #{"max(1.5rem, env(safe-area-inset-left))"};
|
||||
padding-right: #{"max(.8125rem, env(safe-area-inset-right))"};
|
||||
}
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-left: max(1.5rem, env(safe-area-inset-left));
|
||||
padding-right: max(0.8125rem, env(safe-area-inset-right));
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding: 0.5rem;
|
||||
position: relative;
|
||||
|
||||
@supports (padding-left: env(safe-area-inset-left)) {
|
||||
padding-left: #{"max(.5rem, env(safe-area-inset-left))"};
|
||||
padding-right: #{"max(.5rem, env(safe-area-inset-right))"};
|
||||
}
|
||||
padding-left: max(0.5rem, env(safe-area-inset-left));
|
||||
padding-right: max(0.5rem, env(safe-area-inset-right));
|
||||
}
|
||||
|
||||
.Transition {
|
||||
@ -278,11 +270,12 @@
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-left: 0.25rem;
|
||||
margin-top: 0.05rem;
|
||||
margin-top: 0.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.status, .typing-status {
|
||||
.status,
|
||||
.typing-status {
|
||||
display: inline;
|
||||
unicode-bidi: plaintext;
|
||||
|
||||
@ -307,14 +300,15 @@
|
||||
}
|
||||
|
||||
.Avatar {
|
||||
margin-right: .625rem;
|
||||
margin-right: 0.625rem;
|
||||
// TODO For some reason webpack imports `Audio.scss` second time when loading calls bundle
|
||||
width: 2.5rem !important;
|
||||
height: 2.5rem !important;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
|
||||
.status, .typing-status {
|
||||
.status,
|
||||
.typing-status {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.125rem;
|
||||
margin: 0;
|
||||
@ -365,7 +359,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.HeaderPinnedMessage {
|
||||
min-width: 16rem;
|
||||
}
|
||||
@ -380,8 +373,8 @@
|
||||
right: 0;
|
||||
top: 100%;
|
||||
background: var(--color-background);
|
||||
padding: .25rem .8125rem .25rem 1rem;
|
||||
box-shadow: 0 .125rem .125rem var(--color-light-shadow);
|
||||
padding: 0.25rem 0.8125rem 0.25rem 1rem;
|
||||
box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: opacity 0.15s ease, transform var(--layer-transition);
|
||||
|
||||
@ -389,11 +382,11 @@
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -.1875rem;
|
||||
top: -0.1875rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: .125rem;
|
||||
box-shadow: 0 .125rem .125rem var(--color-light-shadow);
|
||||
height: 0.125rem;
|
||||
box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow);
|
||||
}
|
||||
|
||||
.HeaderPinnedMessage {
|
||||
@ -411,7 +404,7 @@
|
||||
transition: opacity 0.15s ease, transform var(--layer-transition);
|
||||
|
||||
#Main.right-column-open & {
|
||||
padding-left: calc(var(--right-column-width) + 1rem);
|
||||
padding-left: calc(var(--right-column-width) + 1rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -452,7 +445,7 @@
|
||||
background-color: var(--color-primary-opacity);
|
||||
position: relative;
|
||||
will-change: transform;
|
||||
transition: transform .25s ease-in-out;
|
||||
transition: transform 0.25s ease-in-out;
|
||||
}
|
||||
|
||||
.pinned-message-border-mark {
|
||||
@ -463,7 +456,7 @@
|
||||
background: var(--color-primary);
|
||||
border-radius: 0.0625rem;
|
||||
will-change: transform;
|
||||
transition: transform .25s ease-in-out;
|
||||
transition: transform 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -488,7 +481,7 @@
|
||||
text-align: initial;
|
||||
|
||||
body.is-ios & {
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -502,7 +495,7 @@
|
||||
margin: 0;
|
||||
|
||||
body.is-ios & {
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -563,12 +556,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.HeaderPinnedMessage-wrapper, .HeaderActions {
|
||||
.HeaderPinnedMessage-wrapper,
|
||||
.HeaderActions {
|
||||
.Button {
|
||||
margin-left: 0.25rem;
|
||||
|
||||
&.tiny {
|
||||
margin-right: .625rem;
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,12 +8,8 @@
|
||||
background: var(--color-background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0.5rem 0 0.25rem;
|
||||
|
||||
@supports (padding-left: env(safe-area-inset-left)) {
|
||||
padding-left: #{"max(0.25rem, env(safe-area-inset-left))"};
|
||||
padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
|
||||
}
|
||||
padding-left: max(0.25rem, env(safe-area-inset-left));
|
||||
padding-right: max(0.5rem, env(safe-area-inset-right));
|
||||
|
||||
> .SearchInput {
|
||||
margin-left: 0.25rem;
|
||||
@ -31,17 +27,12 @@
|
||||
background: var(--color-background);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 1rem;
|
||||
padding-right: 0.5rem;
|
||||
padding-left: max(1rem, env(safe-area-inset-left));
|
||||
padding-right: max(0.5rem, env(safe-area-inset-right));
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
padding-left: #{"max(1rem, env(safe-area-inset-left))"};
|
||||
padding-right: #{"max(0.5rem, env(safe-area-inset-right))"};
|
||||
|
||||
body:not(.keyboard-visible) & {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
height: calc(3.5rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
body:not(.keyboard-visible) & {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
height: calc(3.5rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
> .counter {
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
flex-direction: column;
|
||||
background: var(--pattern-color);
|
||||
max-width: 20rem;
|
||||
padding: .75rem 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 1.5rem;
|
||||
color: #fff;
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@ -27,13 +27,13 @@
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
margin-bottom: .25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
text-align: center;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
@ -41,16 +41,16 @@
|
||||
}
|
||||
|
||||
.list-checkmarks {
|
||||
font-size: .9375rem;
|
||||
margin: .25rem 0 0;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0.25rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
unicode-bidi: plaintext;
|
||||
line-height: 1.8;
|
||||
|
||||
li::before {
|
||||
content: '✓';
|
||||
margin-inline-end: .5rem;
|
||||
content: "✓";
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,31 +3,25 @@
|
||||
|
||||
position: absolute;
|
||||
bottom: var(--base-bottom-pos);
|
||||
right: 1rem;
|
||||
right: max(1rem, env(safe-area-inset-right));
|
||||
opacity: 0;
|
||||
transform: translateY(4.5rem);
|
||||
transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .2s ease;
|
||||
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
|
||||
z-index: var(--z-scroll-down-button);
|
||||
pointer-events: none;
|
||||
|
||||
@supports (right: env(safe-area-inset-right)) {
|
||||
right: #{"max(1rem, env(safe-area-inset-right))"};
|
||||
}
|
||||
|
||||
body.animation-level-0 & {
|
||||
transform: none !important;
|
||||
|
||||
transition: opacity .15s;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
right: 0.5rem;
|
||||
bottom: 4.5rem;
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
body:not(.keyboard-visible) & {
|
||||
bottom: calc(4.5rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
body:not(.keyboard-visible) & {
|
||||
bottom: calc(4.5rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
|
||||
@ -80,7 +74,7 @@
|
||||
.unread-count {
|
||||
min-width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
padding: 0 .45rem;
|
||||
padding: 0 0.4375rem;
|
||||
border-radius: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
@ -88,8 +82,8 @@
|
||||
text-align: center;
|
||||
|
||||
position: absolute;
|
||||
top: -0.3rem;
|
||||
right: -0.3rem;
|
||||
top: -0.3125rem;
|
||||
right: -0.3125rem;
|
||||
|
||||
background: var(--color-green);
|
||||
color: white;
|
||||
@ -97,7 +91,7 @@
|
||||
pointer-events: none;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
top: -0.7rem;
|
||||
top: -0.6875rem;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,17 +3,17 @@
|
||||
|
||||
.modal-dialog {
|
||||
max-width: 26.25rem;
|
||||
@media(max-width: 600px) {
|
||||
@media (max-width: 600px) {
|
||||
max-height: 100%;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: .5rem 1.25rem 1.875rem;
|
||||
padding: 0.5rem 1.25rem 1.875rem;
|
||||
max-height: calc(100vh - 3.25rem);
|
||||
@media(max-width: 600px) {
|
||||
padding-bottom: .25rem;
|
||||
@media (max-width: 600px) {
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
flex: 1;
|
||||
width: calc(50% - 0.15rem);
|
||||
height: 12rem;
|
||||
margin-bottom: 0.3rem;
|
||||
margin-bottom: 0.3125rem;
|
||||
border-radius: var(--border-radius-default);
|
||||
object-fit: cover;
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-left: 0.3rem;
|
||||
margin-left: 0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -51,7 +51,7 @@
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: .75rem 0 1.75rem;
|
||||
margin: 0.75rem 0 1.75rem;
|
||||
|
||||
.File:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
@ -80,7 +80,7 @@
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -110,7 +110,7 @@
|
||||
|
||||
&.hovered {
|
||||
.drop-target::before {
|
||||
opacity: .95;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.drop-target::after {
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
padding: 0 1rem;
|
||||
|
||||
.subtitle {
|
||||
padding-top: .25rem;
|
||||
padding-top: 0.25rem;
|
||||
line-height: 1.3125;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: .1875rem .625rem;
|
||||
padding: 0.1875rem 0.625rem;
|
||||
max-height: 80vh;
|
||||
overflow: auto;
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
margin-top: .375rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
.Button {
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
.Button + .Button {
|
||||
margin-left: .375rem;
|
||||
margin-left: 0.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../styles/mixins';
|
||||
@import "../../../styles/mixins";
|
||||
|
||||
.Composer {
|
||||
align-items: flex-end;
|
||||
@ -6,11 +6,7 @@
|
||||
.select-mode-active + .middle-column-footer & {
|
||||
position: absolute;
|
||||
padding-right: 2rem;
|
||||
bottom: 0;
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
bottom: env(safe-area-inset-bottom);
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding-right: 1rem;
|
||||
@ -47,7 +43,7 @@
|
||||
|
||||
> .Button {
|
||||
flex-shrink: 0;
|
||||
margin-left: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
|
||||
&:not(.danger) {
|
||||
color: var(--color-composer-button);
|
||||
@ -77,7 +73,8 @@
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
&:hover, &.active {
|
||||
&:hover,
|
||||
&.active {
|
||||
background: var(--color-chat-hover);
|
||||
}
|
||||
}
|
||||
@ -85,54 +82,54 @@
|
||||
&.recording {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
transition: box-shadow .1s;
|
||||
transition: box-shadow 0.1s;
|
||||
}
|
||||
|
||||
&.send {
|
||||
.icon-send {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-microphone-alt,
|
||||
.icon-check,
|
||||
.icon-schedule {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.schedule {
|
||||
.icon-schedule {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-microphone-alt,
|
||||
.icon-check,
|
||||
.icon-send {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.record {
|
||||
.icon-microphone-alt {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-send,
|
||||
.icon-check,
|
||||
.icon-schedule {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.edit {
|
||||
.icon-check {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-send,
|
||||
.icon-microphone-alt,
|
||||
.icon-schedule {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@ -140,8 +137,12 @@
|
||||
animation-duration: 0ms !important;
|
||||
}
|
||||
|
||||
body.animation-level-0 &, body.animation-level-1 & {
|
||||
.icon-send, .icon-microphone-alt, .icon-check, .icon-schedule {
|
||||
body.animation-level-0 &,
|
||||
body.animation-level-1 & {
|
||||
.icon-send,
|
||||
.icon-microphone-alt,
|
||||
.icon-check,
|
||||
.icon-schedule {
|
||||
animation-duration: 0ms !important;
|
||||
}
|
||||
}
|
||||
@ -172,11 +173,12 @@
|
||||
}
|
||||
|
||||
.icon-smile {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-keyboard, .Spinner {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
.icon-keyboard,
|
||||
.Spinner {
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
|
||||
&.not-ready > i {
|
||||
@ -185,21 +187,23 @@
|
||||
|
||||
&.is-loading {
|
||||
.Spinner {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-keyboard, .icon-smile {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
.icon-keyboard,
|
||||
.icon-smile {
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu-opened {
|
||||
.icon-keyboard {
|
||||
animation: grow-icon .4s ease-out;
|
||||
animation: grow-icon 0.4s ease-out;
|
||||
}
|
||||
|
||||
.icon-smile, .Spinner {
|
||||
animation: hide-icon .4s forwards ease-out;
|
||||
.icon-smile,
|
||||
.Spinner {
|
||||
animation: hide-icon 0.4s forwards ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -217,9 +221,10 @@
|
||||
|
||||
.svg-appendix {
|
||||
position: absolute;
|
||||
bottom: -.1875rem;
|
||||
right: -.551rem; // This value is correct. Safari fix
|
||||
width: .5625rem;
|
||||
bottom: -0.1875rem;
|
||||
/* stylelint-disable-next-line plugin/whole-pixel */
|
||||
right: -0.551rem; // This value is correct. Safari fix
|
||||
width: 0.5625rem;
|
||||
height: 1.25rem;
|
||||
transition: opacity 200ms;
|
||||
font-size: 1rem !important;
|
||||
@ -240,7 +245,7 @@
|
||||
> .Spinner {
|
||||
align-self: center;
|
||||
--spinner-size: 1.5rem;
|
||||
margin-right: -.5rem;
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
> .Button {
|
||||
@ -279,20 +284,20 @@
|
||||
}
|
||||
|
||||
&.scheduled-button i::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: .75rem;
|
||||
right: .875rem;
|
||||
border: .1875rem solid var(--color-background);
|
||||
top: 0.75rem;
|
||||
right: 0.875rem;
|
||||
border: 0.1875rem solid var(--color-background);
|
||||
box-sizing: content-box;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--color-green-darker);
|
||||
box-shadow: -.375rem -.25rem 0 -.1875rem var(--color-background);
|
||||
box-shadow: -0.375rem -0.25rem 0 -0.1875rem var(--color-background);
|
||||
@media (max-width: 600px) {
|
||||
top: .5rem;
|
||||
right: .5rem;
|
||||
top: 0.5rem;
|
||||
right: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -311,14 +316,14 @@
|
||||
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
content: "";
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--color-error);
|
||||
border-radius: .375rem;
|
||||
border-radius: 0.375rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -.375rem;
|
||||
margin-top: -0.375rem;
|
||||
right: 1.3125rem;
|
||||
animation: recording-blink-like-macos 1.5s infinite;
|
||||
}
|
||||
@ -335,7 +340,8 @@
|
||||
position: relative;
|
||||
|
||||
.form-control {
|
||||
padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2) calc(.9rem - var(--border-width));
|
||||
padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2)
|
||||
calc(0.9rem - var(--border-width));
|
||||
overflow: hidden;
|
||||
line-height: 1.375;
|
||||
font-family: Roboto, -apple-system, "Apple Color Emoji", "Helvetica Neue", sans-serif;
|
||||
@ -345,7 +351,8 @@
|
||||
|
||||
body.is-ios &,
|
||||
body.is-macos & {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue",
|
||||
sans-serif;
|
||||
}
|
||||
|
||||
&.overflown {
|
||||
@ -353,7 +360,8 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
&.touched, &:focus {
|
||||
&.touched,
|
||||
&:focus {
|
||||
& + .placeholder-text {
|
||||
display: none;
|
||||
}
|
||||
@ -386,7 +394,7 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&[dir=rtl] .placeholder-text {
|
||||
&[dir="rtl"] .placeholder-text {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@ -395,21 +403,24 @@
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:active, &:visited {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:visited {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
background-image: url('../../../assets/spoiler-dots-black.png');
|
||||
background-image: url("../../../assets/spoiler-dots-black.png");
|
||||
background-size: auto min(100%, 1.125rem);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0 0.3125rem 0.125rem 0.3125rem;
|
||||
text-shadow: -2px -2px 0 var(--color-background), 2px -2px 0 var(--color-background), -2px 2px 0 var(--color-background), 2px 2px 0 var(--color-background);
|
||||
text-shadow: -2px -2px 0 var(--color-background), 2px -2px 0 var(--color-background),
|
||||
-2px 2px 0 var(--color-background), 2px 2px 0 var(--color-background);
|
||||
}
|
||||
|
||||
html.theme-dark & .spoiler {
|
||||
background-image: url('../../../assets/spoiler-dots-white.png');
|
||||
background-image: url("../../../assets/spoiler-dots-white.png");
|
||||
}
|
||||
|
||||
.clone {
|
||||
@ -495,14 +506,14 @@
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
bottom: .8125rem;
|
||||
left: .90625rem;
|
||||
bottom: 0.8125rem;
|
||||
left: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.composer-tooltip {
|
||||
position: absolute;
|
||||
bottom: calc(100% + .5rem);
|
||||
bottom: calc(100% + 0.5rem);
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: var(--color-background);
|
||||
@ -540,6 +551,6 @@
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: .3;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,13 +7,13 @@
|
||||
max-width: 43.75rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: .3125rem;
|
||||
margin-bottom: 0.3125rem;
|
||||
display: flex;
|
||||
color: #A4ACB3;
|
||||
color: #a4acb3;
|
||||
box-shadow: 0 1px 2px var(--color-default-shadow);
|
||||
|
||||
@media (max-height: 350px) {
|
||||
padding: .75rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
&.hovered .target-content {
|
||||
@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
& + & {
|
||||
margin-top: .3125rem;
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -32,13 +32,13 @@
|
||||
.target-content {
|
||||
pointer-events: none;
|
||||
background-image: var(--drag-target-border);
|
||||
border-radius: .5rem;
|
||||
border-radius: 0.5rem;
|
||||
flex: 1 1 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: .2s color, .2s background;
|
||||
transition: 0.2s color, 0.2s background;
|
||||
}
|
||||
|
||||
.icon {
|
||||
@ -55,15 +55,15 @@
|
||||
@media (max-height: 450px) {
|
||||
font-size: 2rem;
|
||||
line-height: 1rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-top: .25rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.3125rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -.18px;
|
||||
letter-spacing: -0.18px;
|
||||
|
||||
@media (max-height: 450px) {
|
||||
font-size: 1rem;
|
||||
@ -72,10 +72,10 @@
|
||||
|
||||
.description {
|
||||
font-size: 1rem;
|
||||
letter-spacing: .3px;
|
||||
letter-spacing: 0.3px;
|
||||
|
||||
@media (max-height: 450px) {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.5rem;
|
||||
background-color: transparent;
|
||||
transition: background-color .15s ease;
|
||||
transition: background-color 0.15s ease;
|
||||
|
||||
.mac-os-fix & {
|
||||
line-height: inherit;
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
content: "";
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 0.1px;
|
||||
width: 1px;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.EmojiTooltip {
|
||||
display: flex;
|
||||
padding-left: .25rem;
|
||||
padding-left: 0.25rem;
|
||||
|
||||
overflow-x: auto;
|
||||
@supports (overflow-x: overlay) {
|
||||
@ -9,6 +9,6 @@
|
||||
overflow-y: hidden;
|
||||
|
||||
.EmojiButton {
|
||||
flex: 0 0 2.5rem
|
||||
flex: 0 0 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -35,7 +35,9 @@
|
||||
padding-bottom: 100%;
|
||||
border-radius: 0;
|
||||
|
||||
.AnimatedSticker, img, canvas {
|
||||
.AnimatedSticker,
|
||||
img,
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -43,10 +45,10 @@
|
||||
height: 100% !important;
|
||||
|
||||
@media (min-width: 600px) {
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
width: calc(100% - .5rem) !important;
|
||||
height: calc(100% - .5rem) !important;
|
||||
top: 0.25rem;
|
||||
left: 0.25rem;
|
||||
width: calc(100% - 0.5rem) !important;
|
||||
height: calc(100% - 0.5rem) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-inline-end: .625rem;
|
||||
margin-inline-end: 0.625rem;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&[dir=rtl] {
|
||||
&[dir="rtl"] {
|
||||
.status {
|
||||
width: auto;
|
||||
}
|
||||
@ -47,7 +47,7 @@
|
||||
|
||||
.handle {
|
||||
&::before {
|
||||
content: '@';
|
||||
content: "@";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: .5rem 1.25rem 1.875rem;
|
||||
padding: 0.5rem 1.25rem 1.875rem;
|
||||
min-height: 4.875rem;
|
||||
}
|
||||
|
||||
@ -28,14 +28,15 @@
|
||||
overflow: auto;
|
||||
|
||||
&.overflown {
|
||||
padding: 0 0.4rem 0.5rem 0.75rem;
|
||||
padding: 0 0.4375rem 0.5rem 0.75rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
overflow: hidden;
|
||||
max-height: none;
|
||||
|
||||
&, &.overflown {
|
||||
&,
|
||||
&.overflown {
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
}
|
||||
@ -69,13 +70,13 @@
|
||||
|
||||
.note {
|
||||
font-size: smaller;
|
||||
color: var(--color-text-secondary)
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.error {
|
||||
font-size: smaller;
|
||||
color: var(--color-error);
|
||||
margin: -1rem 0 1rem .25rem;
|
||||
margin: -1rem 0 1rem 0.25rem;
|
||||
}
|
||||
|
||||
.input-group:last-child {
|
||||
|
||||
@ -65,9 +65,8 @@
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.subtitle {
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.3125;
|
||||
}
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
content: "";
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
width: 0.1px;
|
||||
width: 1px;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import '../../../styles/mixins';
|
||||
@import "../../../styles/mixins";
|
||||
|
||||
.SymbolMenu {
|
||||
&.mobile-menu {
|
||||
@ -7,16 +7,17 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--color-background);
|
||||
transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height)), 0);
|
||||
z-index: 1;
|
||||
|
||||
transition: transform var(--layer-transition);
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
padding-right: env(safe-area-inset-right);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
transform: translate3d(0, calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)), 0);
|
||||
}
|
||||
padding-right: env(safe-area-inset-right);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
padding-left: env(safe-area-inset-left);
|
||||
transform: translate3d(
|
||||
0,
|
||||
calc(var(--symbol-menu-height) + var(--symbol-menu-footer-height) + env(safe-area-inset-bottom)),
|
||||
0
|
||||
);
|
||||
|
||||
&.open {
|
||||
transform: translate3d(0, 0, 0);
|
||||
@ -37,10 +38,7 @@
|
||||
|
||||
&-main {
|
||||
height: var(--symbol-menu-height);
|
||||
max-height: calc(100vh - var(--symbol-menu-footer-height));
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
|
||||
}
|
||||
max-height: calc(100vh - var(--symbol-menu-footer-height) - env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
&-footer {
|
||||
@ -56,7 +54,7 @@
|
||||
flex-shrink: 0;
|
||||
width: 2.125rem !important;
|
||||
height: 2.125rem;
|
||||
margin: 0 .25rem;
|
||||
margin: 0 0.25rem;
|
||||
padding: 0;
|
||||
|
||||
&.activated {
|
||||
@ -98,7 +96,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.Button.bot-commands ~ &, .Button.send-as-button ~ & {
|
||||
.Button.bot-commands ~ &,
|
||||
.Button.send-as-button ~ & {
|
||||
.is-pointer-env & > .backdrop {
|
||||
left: 3rem;
|
||||
width: 3.25rem;
|
||||
@ -106,7 +105,7 @@
|
||||
}
|
||||
|
||||
.bubble {
|
||||
width: calc(var(--symbol-menu-width) + .25rem); // Reserve width for scrollbar
|
||||
width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
|
||||
@ -126,13 +125,8 @@
|
||||
.symbol-close-button {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: .25rem;
|
||||
top: .25rem;
|
||||
|
||||
@supports (right: env(safe-area-inset-right)) {
|
||||
right: #{"max(.25rem, env(safe-area-inset-right))"};
|
||||
top: #{"max(.25rem, env(safe-area-inset-top))"};
|
||||
}
|
||||
right: max(calc(0.25rem), env(safe-area-inset-right));
|
||||
top: max(calc(0.25rem), env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
@media (orientation: landscape) {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
.TextFormatter {
|
||||
transform: translate(-50%, -3.25rem);
|
||||
|
||||
&, &-link-control {
|
||||
&,
|
||||
&-link-control {
|
||||
position: absolute;
|
||||
background: var(--color-background);
|
||||
border-radius: var(--border-radius-messages);
|
||||
@ -14,7 +15,7 @@
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
.Modal & {
|
||||
max-width: 100%;
|
||||
@ -33,7 +34,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-buttons, &-link-url-confirm {
|
||||
&-buttons,
|
||||
&-link-url-confirm {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
@ -55,7 +57,8 @@
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
&::before, &::after {
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -64,17 +67,17 @@
|
||||
width: 1rem;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, var(--color-background) .25rem, transparent 1rem)
|
||||
background: linear-gradient(to right, var(--color-background) 0.25rem, transparent 1rem);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, var(--color-background) .25rem, transparent 1rem)
|
||||
background: linear-gradient(to left, var(--color-background) 0.25rem, transparent 1rem);
|
||||
}
|
||||
|
||||
&.mask-left {
|
||||
@ -93,7 +96,7 @@
|
||||
&-link-url-confirm {
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
transition: opacity .3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
&.shown {
|
||||
opacity: 1;
|
||||
@ -123,7 +126,7 @@
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 0.625rem;
|
||||
padding-top: 0.1875rem;
|
||||
padding-top: 0.1875rem;
|
||||
}
|
||||
|
||||
--accent-color: var(--color-primary);
|
||||
@ -48,11 +48,11 @@
|
||||
max-width: calc(100% - 3.375rem);
|
||||
|
||||
&::before {
|
||||
top: .1rem;
|
||||
bottom: .05rem;
|
||||
top: 0.125rem;
|
||||
bottom: 0.0625rem;
|
||||
}
|
||||
|
||||
&.with-video .media-inner { // TODO add support for video in previews in composer
|
||||
&.with-video .media-inner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
|
||||
.site-title {
|
||||
margin-top: .125rem;
|
||||
margin-top: 0.125rem;
|
||||
margin-bottom: 0.1875rem;
|
||||
}
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
display: inline-flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
margin-inline-end: .5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
overflow: hidden;
|
||||
font-size: 1.5rem;
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
img.emoji {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin: .75rem 0 0;
|
||||
margin: 0.75rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -55,8 +55,8 @@
|
||||
text-align: left;
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
&[dir=rtl] .title,
|
||||
&[dir=rtl] .description {
|
||||
&[dir="rtl"] .title,
|
||||
&[dir="rtl"] .description {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,10 +5,12 @@
|
||||
background: transparent no-repeat center;
|
||||
background-size: contain;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease, opacity .3s ease !important;
|
||||
transition: background-color 0.15s ease, opacity 0.3s ease !important;
|
||||
position: relative;
|
||||
|
||||
.AnimatedSticker, img, canvas {
|
||||
.AnimatedSticker,
|
||||
img,
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
@ -6,8 +6,12 @@
|
||||
margin: -0.3125rem -0.5rem 0.3125rem;
|
||||
}
|
||||
|
||||
body.is-ios .Message.own .message-content.has-solid-background & {
|
||||
margin: -0.3125rem -0.5rem 0.3125rem -0.625rem;
|
||||
}
|
||||
|
||||
.forwarded-message & {
|
||||
margin-bottom: .125rem;
|
||||
margin-bottom: 0.125rem;
|
||||
|
||||
.message-content.media.text & {
|
||||
margin: 0 0 0.3125rem;
|
||||
@ -24,7 +28,9 @@
|
||||
}
|
||||
|
||||
> .album-item-select-wrapper .media-inner {
|
||||
&, & img, & video {
|
||||
&,
|
||||
& img,
|
||||
& video {
|
||||
border-radius: 0 !important;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@ -5,19 +5,19 @@
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
padding: .5625rem .25rem .5625rem .625rem;
|
||||
padding-inline-start: .625rem;
|
||||
padding-inline-end: .25rem;
|
||||
padding: 0.5625rem 0.25rem 0.5625rem 0.625rem;
|
||||
padding-inline-start: 0.625rem;
|
||||
padding-inline-end: 0.25rem;
|
||||
background: var(--background-color);
|
||||
border-bottom-right-radius: var(--border-bottom-right-radius);
|
||||
border-bottom-left-radius: var(--border-bottom-left-radius);
|
||||
font-size: .9375rem;
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 500;
|
||||
line-height: 2rem;
|
||||
color: var(--accent-color);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s, color .15s;
|
||||
transition: background-color 0.15s, color 0.15s;
|
||||
user-select: none;
|
||||
|
||||
body.animation-level-0 & {
|
||||
@ -25,20 +25,20 @@
|
||||
}
|
||||
|
||||
.Message .has-appendix &::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -.1875rem;
|
||||
left: -.5625rem;
|
||||
width: .5625rem;
|
||||
bottom: -0.1875rem;
|
||||
left: -0.5625rem;
|
||||
width: 0.5625rem;
|
||||
height: 1.25rem;
|
||||
background-position: bottom left;
|
||||
background-image: url('data:image/svg+xml,%3Csvg width="9" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cdefs%3E%3Cfilter x="-50%25" y="-14.7%25" width="200%25" height="141.2%25" filterUnits="objectBoundingBox" id="a"%3E%3CfeOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/%3E%3CfeGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/%3E%3CfeColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/%3E%3C/filter%3E%3Cpath d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" id="b"/%3E%3C/defs%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cuse fill="%23000" filter="url(%23a)" xlink:href="%23b"/%3E%3Cuse fill="%23FFF" xlink:href="%23b"/%3E%3C/g%3E%3C/svg%3E');
|
||||
opacity: 0;
|
||||
transition: opacity .15s, filter .15s;
|
||||
transition: opacity 0.15s, filter 0.15s;
|
||||
|
||||
.theme-dark #root & {
|
||||
filter: invert(.83);
|
||||
filter: invert(0.83);
|
||||
}
|
||||
|
||||
body.animation-level-0 & {
|
||||
@ -53,20 +53,20 @@
|
||||
bottom: 3rem;
|
||||
height: 3.375rem;
|
||||
border-radius: 1.375rem;
|
||||
padding: 0.375rem .3125rem .25rem;
|
||||
padding: 0.375rem 0.3125rem 0.25rem;
|
||||
align-items: flex-start;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
@media (pointer: coarse) {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, .28);
|
||||
background-color: rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
.Message:hover & {
|
||||
@ -76,7 +76,7 @@
|
||||
&::after {
|
||||
content: attr(data-cnt);
|
||||
position: absolute;
|
||||
bottom: -.0625rem;
|
||||
bottom: -0.0625rem;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
@ -126,15 +126,15 @@
|
||||
}
|
||||
|
||||
.message-content.has-solid-background & {
|
||||
margin: .375rem -.5rem -.375rem;
|
||||
margin: 0.375rem -0.5rem -0.375rem;
|
||||
}
|
||||
|
||||
.message-content.voice & {
|
||||
margin-bottom: -.5rem;
|
||||
margin-bottom: -0.5rem;
|
||||
}
|
||||
|
||||
.message-content.audio & {
|
||||
margin-bottom: -.8125rem;
|
||||
margin-bottom: -0.8125rem;
|
||||
}
|
||||
|
||||
.message-content.audio &,
|
||||
@ -152,7 +152,7 @@
|
||||
.icon-comments {
|
||||
font-size: 1.5625rem;
|
||||
line-height: 2rem;
|
||||
margin-inline-end: .875rem;
|
||||
margin-inline-end: 0.875rem;
|
||||
}
|
||||
|
||||
.icon-next {
|
||||
@ -163,11 +163,11 @@
|
||||
.recent-repliers {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-inline-end: .5rem;
|
||||
margin-inline-start: -.125rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
margin-inline-start: -0.125rem;
|
||||
|
||||
.Avatar {
|
||||
transition: border .15s;
|
||||
transition: border 0.15s;
|
||||
border: 2px solid var(--color-background);
|
||||
margin-inline-end: 0;
|
||||
z-index: 3;
|
||||
@ -187,7 +187,7 @@
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: -.75rem;
|
||||
margin-inline-start: -0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -196,13 +196,13 @@
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: .5rem;
|
||||
height: .5rem;
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-color);
|
||||
margin-inline-start: .75rem;
|
||||
margin-inline-start: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
}
|
||||
|
||||
.Avatar {
|
||||
margin-right: 0.8rem;
|
||||
margin-right: 0.8125rem;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
text-transform: none;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
background-color: var(--color-white);
|
||||
opacity: 0;
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
background: var(--pattern-color) !important;
|
||||
|
||||
&::before {
|
||||
opacity: .4;
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
@ -48,16 +48,16 @@
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
position: absolute;
|
||||
right: .1875rem;
|
||||
top: .1875rem;
|
||||
right: 0.1875rem;
|
||||
top: 0.1875rem;
|
||||
display: block;
|
||||
|
||||
&.icon-arrow-right {
|
||||
font-size: .75rem;
|
||||
top: .125rem;
|
||||
right: .125rem;
|
||||
font-size: 0.75rem;
|
||||
top: 0.125rem;
|
||||
right: 0.125rem;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@ -20,18 +20,17 @@
|
||||
.description-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: .25rem .5rem;
|
||||
margin: .25rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
margin: 0.25rem;
|
||||
background-color: rgba(90, 110, 70, 0.6);
|
||||
border-radius: var(--border-radius-messages-small);
|
||||
color: var(--color-text);
|
||||
font-weight: 500;
|
||||
|
||||
span {
|
||||
margin-left: .5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import 'message-content';
|
||||
@import "message-content";
|
||||
|
||||
// General styles
|
||||
.Message {
|
||||
@ -19,7 +19,9 @@
|
||||
--meta-safe-area-base: 2.25rem;
|
||||
--meta-safe-author-width: 0px;
|
||||
--meta-safe-area-extra-width: 0px;
|
||||
--meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + var(--meta-safe-area-extra-width));
|
||||
--meta-safe-area-size: calc(
|
||||
var(--meta-safe-area-base) + var(--meta-safe-author-width) + var(--meta-safe-area-extra-width)
|
||||
);
|
||||
--deleting-translate-x: -50%;
|
||||
--select-message-scale: 0.9;
|
||||
|
||||
@ -32,7 +34,7 @@
|
||||
--max-width: calc(30vw - 1rem);
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
margin-bottom: .25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
&.is-swiped {
|
||||
@ -104,7 +106,7 @@
|
||||
&.last-in-group {
|
||||
margin-bottom: 0.625rem;
|
||||
@media (max-width: 600px) {
|
||||
margin-bottom: .4375rem;
|
||||
margin-bottom: 0.4375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -142,14 +144,16 @@
|
||||
&:not(.own) {
|
||||
padding-left: 2.5rem;
|
||||
|
||||
.no-avatars &, &.is-thread-top {
|
||||
.no-avatars &,
|
||||
&.is-thread-top {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
padding-left: 2.875rem;
|
||||
|
||||
.no-avatars &, &.is-thread-top {
|
||||
.no-avatars &,
|
||||
&.is-thread-top {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
@ -235,7 +239,7 @@
|
||||
&.is-deleting {
|
||||
> .Avatar,
|
||||
> .message-content-wrapper {
|
||||
transition: opacity .2s ease, transform .2s ease-in;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease-in;
|
||||
opacity: 0;
|
||||
transform: scale(0.3) translateX(var(--deleting-translate-x));
|
||||
transform-origin: bottom;
|
||||
@ -253,7 +257,7 @@
|
||||
--meta-safe-area-extra-width: 7.5rem;
|
||||
}
|
||||
|
||||
html[lang=ru] & {
|
||||
html[lang="ru"] & {
|
||||
--meta-safe-area-extra-width: 3.5rem;
|
||||
|
||||
&.has-views {
|
||||
@ -345,7 +349,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.File {
|
||||
position: relative;
|
||||
|
||||
@ -366,12 +369,13 @@
|
||||
.message-select-control {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0.438rem;
|
||||
right: 0.438rem;
|
||||
top: 0.4375rem;
|
||||
right: 0.4375rem;
|
||||
left: unset;
|
||||
}
|
||||
|
||||
img, video {
|
||||
img,
|
||||
video {
|
||||
transition: transform var(--select-transition), opacity ease 300ms;
|
||||
}
|
||||
|
||||
@ -380,14 +384,15 @@
|
||||
background: var(--color-green);
|
||||
}
|
||||
|
||||
img, video {
|
||||
img,
|
||||
video {
|
||||
transform: scale(var(--select-message-scale));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.is-selected, &.is-forwarding {
|
||||
&.is-selected,
|
||||
&.is-forwarding {
|
||||
.message-select-control {
|
||||
background: var(--color-green);
|
||||
}
|
||||
@ -399,18 +404,18 @@
|
||||
|
||||
&.is-in-document-group {
|
||||
.message-content.document {
|
||||
padding: .25rem .5rem !important;
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
}
|
||||
|
||||
&.last-in-document-group {
|
||||
.message-content.document {
|
||||
padding-bottom: .5rem !important
|
||||
padding-bottom: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.first-in-document-group {
|
||||
.message-content.document {
|
||||
padding-top: .5rem !important
|
||||
padding-top: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -450,10 +455,10 @@
|
||||
background: white;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-radius: 0.688rem;
|
||||
border-radius: 0.6875rem;
|
||||
background: white;
|
||||
border: 0.125rem rgba(0, 0, 0, 0.2) solid;
|
||||
position: absolute;
|
||||
@ -477,7 +482,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.focused,
|
||||
@ -550,7 +554,7 @@
|
||||
}
|
||||
|
||||
.Avatar {
|
||||
margin-right: 0.3rem;
|
||||
margin-right: 0.3125rem;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
@ -571,7 +575,7 @@
|
||||
& + .Album,
|
||||
& + .Audio,
|
||||
& + .File {
|
||||
margin-top: .375rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -592,10 +596,10 @@
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
|
||||
opacity: 0;
|
||||
transition: opacity .2s ease;
|
||||
transition: opacity 0.2s ease;
|
||||
|
||||
@media (pointer: coarse) {
|
||||
opacity: 1 !important;
|
||||
@ -604,7 +608,7 @@
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: rgba(0, 0, 0, .28) !important;
|
||||
background-color: rgba(0, 0, 0, 0.28) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -656,5 +660,5 @@
|
||||
}
|
||||
|
||||
.Message .custom-shape .message-action-button {
|
||||
bottom: .25rem;
|
||||
bottom: 0.25rem;
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
}
|
||||
|
||||
.bubble {
|
||||
transition: opacity .15s cubic-bezier(0.2, 0, 0.2, 1), transform .15s cubic-bezier(0.2, 0, 0.2, 1) !important;
|
||||
transition: opacity 0.15s cubic-bezier(0.2, 0, 0.2, 1), transform 0.15s cubic-bezier(0.2, 0, 0.2, 1) !important;
|
||||
transform: scale(0.7);
|
||||
overflow: initial;
|
||||
padding: 0;
|
||||
@ -31,7 +31,7 @@
|
||||
padding-left: 1rem;
|
||||
|
||||
.Avatar {
|
||||
border: .0625rem solid var(--color-background);
|
||||
border: 0.0625rem solid var(--color-background);
|
||||
margin-right: 0;
|
||||
box-sizing: content-box;
|
||||
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(#999999, 0.6);
|
||||
border-radius: .625rem;
|
||||
padding: 0 .25rem;
|
||||
border-radius: 0.625rem;
|
||||
padding: 0 0.25rem;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
@ -22,22 +22,22 @@
|
||||
.message-time,
|
||||
.message-signature,
|
||||
.message-views {
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.message-time {
|
||||
margin-right: .1875rem;
|
||||
margin-right: 0.1875rem;
|
||||
}
|
||||
|
||||
body.is-ios & {
|
||||
.message-time {
|
||||
margin-right: .25rem;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.message-views {
|
||||
margin-inline-start: .1875rem;
|
||||
margin-inline-start: 0.1875rem;
|
||||
}
|
||||
|
||||
.message-signature {
|
||||
@ -66,11 +66,11 @@
|
||||
--color-accent: white;
|
||||
color: white !important;
|
||||
opacity: 1;
|
||||
bottom: .25rem;
|
||||
right: .25rem;
|
||||
bottom: 0.25rem;
|
||||
right: 0.25rem;
|
||||
left: auto;
|
||||
height: 1.125rem;
|
||||
padding: 0 .3125rem 0 .375rem;
|
||||
padding: 0 0.3125rem 0 0.375rem;
|
||||
|
||||
.MessageOutgoingStatus i {
|
||||
background: transparent;
|
||||
@ -80,17 +80,17 @@
|
||||
.media:not(.text):dir(rtl) &,
|
||||
.Message .custom-shape:dir(rtl) & {
|
||||
right: auto !important;
|
||||
left: .25rem;
|
||||
padding: 0 .375rem 0 .3125rem;
|
||||
left: 0.25rem;
|
||||
padding: 0 0.375rem 0 0.3125rem;
|
||||
}
|
||||
|
||||
.is-forwarded.media:not(.text):dir(rtl) &,
|
||||
.Message .is-forwarded.custom-shape:dir(rtl) & {
|
||||
left: .8125rem;
|
||||
left: 0.8125rem;
|
||||
}
|
||||
|
||||
.is-forwarded.media:not(.text) & {
|
||||
bottom: 0.935rem;
|
||||
bottom: 0.9375rem;
|
||||
right: 0.8125rem;
|
||||
}
|
||||
|
||||
@ -103,9 +103,9 @@
|
||||
}
|
||||
|
||||
.MessageOutgoingStatus {
|
||||
margin-left: -.1875rem;
|
||||
margin-left: -0.1875rem;
|
||||
font-size: 1.1875rem;
|
||||
border-radius: .625rem;
|
||||
border-radius: 0.625rem;
|
||||
|
||||
.Message.own & {
|
||||
color: var(--color-accent-own);
|
||||
@ -133,7 +133,7 @@
|
||||
.Message:not(.own) {
|
||||
.custom-shape .reply-message + .MessageMeta {
|
||||
right: auto;
|
||||
left: 13.2rem;
|
||||
left: 13.25rem;
|
||||
bottom: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.poll-voters-count {
|
||||
margin: .4375rem 0 1.125rem;
|
||||
margin: 0.4375rem 0 1.125rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
padding-left: 2.25rem;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: .75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
@ -116,17 +116,17 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
vertical-align: text-bottom;
|
||||
margin-left: .875rem;
|
||||
margin-right: .5rem;
|
||||
margin-left: 0.875rem;
|
||||
margin-right: 0.5rem;
|
||||
margin-top: -2px;
|
||||
|
||||
.Avatar {
|
||||
border: .0625rem solid var(--color-white);
|
||||
border: 0.0625rem solid var(--color-white);
|
||||
margin-right: 0;
|
||||
box-sizing: content-box;
|
||||
|
||||
.Message.own & {
|
||||
border: .0625rem solid var(--secondary-color);
|
||||
border: 0.0625rem solid var(--secondary-color);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
@ -137,8 +137,8 @@
|
||||
|
||||
.poll-countdown {
|
||||
margin-left: auto;
|
||||
font-size: .75rem;
|
||||
transition: color .2s;
|
||||
font-size: 0.75rem;
|
||||
transition: color 0.2s;
|
||||
|
||||
&.hurry-up {
|
||||
color: var(--color-error);
|
||||
@ -158,11 +158,11 @@
|
||||
fill: transparent;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset 2s, stroke .2s;
|
||||
transition: stroke-dashoffset 2s, stroke 0.2s;
|
||||
}
|
||||
|
||||
.poll-quiz-help {
|
||||
margin: -.625rem 0 -.625rem auto;
|
||||
margin: -0.625rem 0 -0.625rem auto;
|
||||
.Message:not(.own) & {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
@ -185,6 +185,6 @@
|
||||
}
|
||||
|
||||
> .Button {
|
||||
margin-bottom: .625rem;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,18 +13,18 @@
|
||||
|
||||
.poll-option-share {
|
||||
position: relative;
|
||||
margin-top: .125rem;
|
||||
margin-top: 0.125rem;
|
||||
width: 1.75rem;
|
||||
margin-inline-end: .5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
font-weight: 500;
|
||||
font-size: .875rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: right;
|
||||
|
||||
&.limit-width {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,8 +36,8 @@
|
||||
height: 1rem;
|
||||
background: var(--accent-color);
|
||||
color: var(--background-color);
|
||||
border-radius: .5rem;
|
||||
font-size: .75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
|
||||
&.wrong {
|
||||
@ -51,8 +51,8 @@
|
||||
&.animate {
|
||||
opacity: 0;
|
||||
animation-name: PollOptionIconAnimate;
|
||||
animation-delay: .09s;
|
||||
animation-duration: .3s;
|
||||
animation-delay: 0.09s;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
}
|
||||
@ -76,9 +76,8 @@
|
||||
background: var(--accent-color);
|
||||
|
||||
transform-origin: 0 0;
|
||||
transition: transform .3s;
|
||||
transition-delay: .09s;
|
||||
|
||||
transition: transform 0.3s;
|
||||
transition-delay: 0.09s;
|
||||
}
|
||||
|
||||
.poll-line {
|
||||
@ -87,16 +86,16 @@
|
||||
position: absolute;
|
||||
left: -27px;
|
||||
bottom: -5px;
|
||||
transition: stroke-dashoffset .3s, stroke-dasharray .3s;
|
||||
transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-dasharray: 0, 200%
|
||||
stroke-dasharray: 0, 200%;
|
||||
}
|
||||
|
||||
.poll-line path {
|
||||
stroke-width: 4px;
|
||||
stroke-linecap: round;
|
||||
stroke: var(--accent-color);
|
||||
fill:none
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.wrong {
|
||||
@ -111,6 +110,10 @@
|
||||
}
|
||||
|
||||
@keyframes PollOptionIconAnimate {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
stroke: white;
|
||||
fill: transparent;
|
||||
stroke-width: 4;
|
||||
stroke-opacity: .35;
|
||||
stroke-opacity: 0.35;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
|
||||
@ -2,15 +2,15 @@
|
||||
--border-top-left-radius: var(--border-radius-messages) !important;
|
||||
--border-bottom-left-radius: var(--border-radius-messages) !important;
|
||||
|
||||
margin-top: -.5rem;
|
||||
margin-bottom: .5rem;
|
||||
margin-top: -0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__button.secondary {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: var(--border-radius-default-tiny);
|
||||
color: var(--color-primary);
|
||||
|
||||
@ -1,22 +1,22 @@
|
||||
.WebPage {
|
||||
margin-top: 0.25rem;
|
||||
margin-bottom: 0.125rem;
|
||||
padding-left: .625rem;
|
||||
font-size: calc(var(--message-text-size, 1rem) - .125rem);
|
||||
padding-left: 0.625rem;
|
||||
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
|
||||
line-height: 1.125rem;
|
||||
max-width: 29rem;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: .125rem;
|
||||
width: 0.125rem;
|
||||
background: var(--accent-color);
|
||||
border-radius: .125rem;
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
|
||||
&-text {
|
||||
@ -29,7 +29,9 @@
|
||||
margin: 0 !important;
|
||||
margin-bottom: 0.375rem !important;
|
||||
|
||||
&, & img, &.small-image img {
|
||||
&,
|
||||
& img,
|
||||
&.small-image img {
|
||||
border-radius: var(--border-radius-messages-small) !important;
|
||||
}
|
||||
|
||||
@ -77,7 +79,7 @@
|
||||
.site-title,
|
||||
.site-description {
|
||||
&:last-child::after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: var(--meta-safe-area-size);
|
||||
height: 0.75rem;
|
||||
@ -114,7 +116,7 @@
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
padding-inline-start: .625rem;
|
||||
padding-inline-start: 0.625rem;
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
@ -122,5 +124,3 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -3,41 +3,21 @@
|
||||
max-width: var(--max-width);
|
||||
|
||||
@media (max-width: 600px) {
|
||||
max-width: calc(100vw - 6.25rem);
|
||||
|
||||
.Message.own &,
|
||||
max-width: min(29rem, calc(100vw - 6.25rem));
|
||||
.MessageList.no-avatars & {
|
||||
max-width: calc(100vw - 3.75rem);
|
||||
max-width: min(29rem, calc(100vw - 3.75rem));
|
||||
}
|
||||
|
||||
// Workaround for sass function override - we should use CSS min() here
|
||||
@supports (max-width: #{"min(29rem, 100vw - 6.25rem)"}) {
|
||||
max-width: #{"min(29rem, 100vw - 6.25rem)"};
|
||||
.MessageList.no-avatars & {
|
||||
max-width: #{"min(29rem, 100vw - 3.75rem)"};
|
||||
}
|
||||
.Message.own & {
|
||||
max-width: #{"min(30rem, 100vw - 3.75rem)"};
|
||||
}
|
||||
.Message.own & {
|
||||
max-width: min(30rem, calc(100vw - 3.75rem));
|
||||
}
|
||||
|
||||
&.has-action-button {
|
||||
max-width: calc(100vw - 7rem);
|
||||
|
||||
.Message.own &,
|
||||
max-width: min(29rem, calc(100vw - 7rem));
|
||||
.MessageList.no-avatars & {
|
||||
max-width: calc(100vw - 4.5rem);
|
||||
max-width: min(29rem, calc(100vw - 4.5rem));
|
||||
}
|
||||
|
||||
// Workaround for sass function override - we should use CSS min() here
|
||||
@supports (max-width: #{"min(29rem, 100vw - 5.5rem)"}) {
|
||||
max-width: #{"min(29rem, 100vw - 7rem)"};
|
||||
.MessageList.no-avatars & {
|
||||
max-width: #{"min(29rem, 100vw - 4.5rem)"};
|
||||
}
|
||||
.Message.own & {
|
||||
max-width: #{"min(30rem, 100vw - 4.5rem)"};
|
||||
}
|
||||
.Message.own & {
|
||||
max-width: min(30rem, calc(100vw - 4.5rem));
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -70,13 +50,13 @@
|
||||
&.document {
|
||||
& > .MessageMeta {
|
||||
position: relative;
|
||||
top: .375rem;
|
||||
top: 0.375rem;
|
||||
bottom: auto !important;
|
||||
float: right;
|
||||
line-height: 1.35;
|
||||
height: calc(var(--message-meta-height, 1rem));
|
||||
margin-left: .4375rem;
|
||||
margin-right: -.5rem;
|
||||
margin-left: 0.4375rem;
|
||||
margin-right: -0.5rem;
|
||||
|
||||
.MessageOutgoingStatus .Transition {
|
||||
max-height: calc(var(--message-meta-height, 1rem));
|
||||
@ -84,41 +64,41 @@
|
||||
}
|
||||
|
||||
html[data-message-text-size="12"] & {
|
||||
top: .25rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
html[data-message-text-size="17"] & {
|
||||
top: .4375rem;
|
||||
top: 0.4375rem;
|
||||
}
|
||||
|
||||
html[data-message-text-size="18"] &,
|
||||
html[data-message-text-size="19"] & {
|
||||
top: .5rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
html[data-message-text-size="20"] & {
|
||||
top: .5625rem;
|
||||
top: 0.5625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:dir(rtl) {
|
||||
& > .MessageMeta {
|
||||
float: left;
|
||||
margin-left: -.25rem;
|
||||
margin-right: .4375rem;
|
||||
margin-left: -0.25rem;
|
||||
margin-right: 0.4375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.MessageMeta.reactions-offset {
|
||||
position: relative;
|
||||
top: .375rem;
|
||||
top: 0.375rem;
|
||||
bottom: auto !important;
|
||||
float: right;
|
||||
line-height: 1;
|
||||
height: calc(var(--message-meta-height, 1rem));
|
||||
margin-left: auto;
|
||||
margin-right: -.5rem;
|
||||
margin-right: -0.5rem;
|
||||
align-self: flex-end;
|
||||
|
||||
.MessageOutgoingStatus .Transition {
|
||||
@ -127,20 +107,20 @@
|
||||
}
|
||||
|
||||
html[data-message-text-size="12"] & {
|
||||
top: .25rem;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
html[data-message-text-size="17"] & {
|
||||
top: .4375rem;
|
||||
top: 0.4375rem;
|
||||
}
|
||||
|
||||
html[data-message-text-size="18"] &,
|
||||
html[data-message-text-size="19"] & {
|
||||
top: .5rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
html[data-message-text-size="20"] & {
|
||||
top: .5625rem;
|
||||
top: 0.5625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,10 +133,10 @@
|
||||
|
||||
& > .MessageMeta {
|
||||
top: auto !important;
|
||||
bottom: -.5rem !important;
|
||||
margin-top: -.25rem;
|
||||
bottom: -0.5rem !important;
|
||||
margin-top: -0.25rem;
|
||||
|
||||
&:not([dir=rtl]) {
|
||||
&:not([dir="rtl"]) {
|
||||
margin-top: -1.25rem;
|
||||
}
|
||||
}
|
||||
@ -186,7 +166,7 @@
|
||||
|
||||
.matching-text-highlight {
|
||||
color: var(--color-text);
|
||||
background: #CAE3F7;
|
||||
background: #cae3f7;
|
||||
border-radius: 0.25rem;
|
||||
padding: 0 0.125rem;
|
||||
|
||||
@ -199,7 +179,7 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
font-size: calc(var(--message-text-size, 1rem) - .125rem);
|
||||
font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
color: var(--accent-color);
|
||||
@ -211,7 +191,8 @@
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.interactive, & > .interactive {
|
||||
&.interactive,
|
||||
& > .interactive {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
@ -252,16 +233,16 @@
|
||||
}
|
||||
|
||||
& + .File {
|
||||
margin-top: .25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.via {
|
||||
padding-right: .25rem;
|
||||
padding-right: 0.25rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
span + .via {
|
||||
padding-left: .25rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
.admin-title {
|
||||
@ -270,7 +251,7 @@
|
||||
text-align: right;
|
||||
font-weight: 400;
|
||||
font-size: 0.75rem;
|
||||
margin-top: -0.1rem;
|
||||
margin-top: -0.125rem;
|
||||
color: rgba(var(--color-text-meta-rgb), 0.75);
|
||||
|
||||
.Message.own & {
|
||||
@ -283,15 +264,17 @@
|
||||
box-shadow: 0 1px 2px var(--color-default-shadow);
|
||||
}
|
||||
|
||||
&.has-solid-background, &.has-background, .is-album & {
|
||||
&.has-solid-background,
|
||||
&.has-background,
|
||||
.is-album & {
|
||||
background: var(--background-color);
|
||||
}
|
||||
|
||||
&.has-solid-background {
|
||||
padding: .3125rem .5rem .375rem;
|
||||
padding: 0.3125rem 0.5rem 0.375rem;
|
||||
|
||||
.forwarded-message > .text-content:not(.with-meta):last-child::after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: var(--meta-safe-area-size);
|
||||
height: 1rem;
|
||||
@ -313,8 +296,8 @@
|
||||
.svg-appendix {
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
bottom: -.0625rem;
|
||||
width: .5625rem;
|
||||
bottom: -0.0625rem;
|
||||
width: 0.5625rem;
|
||||
height: 1.125rem;
|
||||
font-size: 1rem !important;
|
||||
|
||||
@ -323,11 +306,13 @@
|
||||
}
|
||||
|
||||
.Message.own & {
|
||||
right: -.551rem; // This value is correct. Safari fix
|
||||
/* stylelint-disable-next-line plugin/whole-pixel */
|
||||
right: -0.551rem; // This value is correct. Safari fix
|
||||
}
|
||||
|
||||
.Message:not(.own) & {
|
||||
left: -.562rem; // This value is correct. Safari fix
|
||||
/* stylelint-disable-next-line plugin/whole-pixel */
|
||||
left: -0.562rem; // This value is correct. Safari fix
|
||||
}
|
||||
}
|
||||
|
||||
@ -348,7 +333,7 @@
|
||||
}
|
||||
|
||||
&.document {
|
||||
padding: .5rem !important;
|
||||
padding: 0.5rem !important;
|
||||
|
||||
.File {
|
||||
.theme-dark & {
|
||||
@ -357,7 +342,7 @@
|
||||
}
|
||||
|
||||
.File + .text-content {
|
||||
margin-top: .3125rem;
|
||||
margin-top: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -365,29 +350,29 @@
|
||||
&.audio {
|
||||
.message-title,
|
||||
.Embedded {
|
||||
margin-top: -.1875rem;
|
||||
margin-bottom: .1875rem;
|
||||
margin-top: -0.1875rem;
|
||||
margin-bottom: 0.1875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.voice {
|
||||
padding: .5rem !important;
|
||||
padding: 0.5rem !important;
|
||||
|
||||
.Voice + .text-content {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.audio {
|
||||
min-width: 20rem;
|
||||
padding: .5rem .5rem .8125rem !important;
|
||||
padding: 0.5rem 0.5rem 0.8125rem !important;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
min-width: 17rem;
|
||||
}
|
||||
|
||||
.Audio + .text-content {
|
||||
margin-top: .25rem;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
&:not(.has-replies) {
|
||||
@ -428,10 +413,10 @@
|
||||
.content-inner > .message-title {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
top: .125rem;
|
||||
top: 0.125rem;
|
||||
max-width: calc(100% - 3rem);
|
||||
margin-left: calc(100% - 3rem);
|
||||
padding: 0 .5rem;
|
||||
padding: 0 0.5rem;
|
||||
background-color: var(--background-color);
|
||||
border-radius: var(--border-radius-messages);
|
||||
|
||||
@ -444,10 +429,10 @@
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.message-content.media, .WebPage {
|
||||
.message-content.media,
|
||||
.WebPage {
|
||||
.media-inner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -518,11 +503,12 @@
|
||||
&:not(.open) {
|
||||
opacity: 0.5;
|
||||
transform: scale(0);
|
||||
transition: opacity .3s ease, transform .3s ease;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-large-play, .icon-download {
|
||||
.icon-large-play,
|
||||
.icon-download {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -546,7 +532,7 @@
|
||||
}
|
||||
|
||||
&.opacity-transition {
|
||||
transition: opacity .15s ease;
|
||||
transition: opacity 0.15s ease;
|
||||
|
||||
&:not(.open) {
|
||||
opacity: 0;
|
||||
@ -564,22 +550,22 @@
|
||||
|
||||
.message-media-duration,
|
||||
.message-transfer-progress {
|
||||
background: rgba(0, 0, 0, .25);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
font-size: 0.75rem;
|
||||
position: absolute;
|
||||
left: .1875rem;
|
||||
top: .1875rem;
|
||||
left: 0.1875rem;
|
||||
top: 0.1875rem;
|
||||
z-index: 1;
|
||||
padding: 0 .375rem;
|
||||
border-radius: .75rem;
|
||||
padding: 0 0.375rem;
|
||||
border-radius: 0.75rem;
|
||||
line-height: 1.125rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.message-media-duration .icon-muted {
|
||||
vertical-align: -.1875rem;
|
||||
margin-left: .375rem;
|
||||
vertical-align: -0.1875rem;
|
||||
margin-left: 0.375rem;
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
}
|
||||
@ -661,7 +647,8 @@
|
||||
margin-bottom: 0;
|
||||
text-shadow: 1px 1px 0 white, -1px -1px 0 white, -1px 1px 0 white, 1px -1px 0 white;
|
||||
img.emoji {
|
||||
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px -1px 0 white);
|
||||
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(1px -1px 0 white)
|
||||
drop-shadow(-1px -1px 0 white);
|
||||
}
|
||||
|
||||
.MessageMeta {
|
||||
@ -695,10 +682,10 @@
|
||||
|
||||
&.emoji-only-2 {
|
||||
font-size: 4rem;
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
min-width: 10rem;
|
||||
@media (max-width: 600px) {
|
||||
margin-top: .375rem;
|
||||
margin-top: 0.375rem;
|
||||
}
|
||||
|
||||
&.has-comments {
|
||||
@ -775,12 +762,12 @@
|
||||
padding-left: 0.625rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0.05rem;
|
||||
left: 0.0625rem;
|
||||
width: 2px;
|
||||
background: var(--accent-color);
|
||||
border-radius: 2px;
|
||||
@ -791,7 +778,7 @@
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 0.05rem;
|
||||
right: 0.0625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -818,12 +805,15 @@
|
||||
cursor: pointer;
|
||||
unicode-bidi: initial;
|
||||
|
||||
&:hover, &:active, &:visited {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:visited {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-entity-code, .text-entity-pre {
|
||||
.text-entity-code,
|
||||
.text-entity-pre {
|
||||
color: var(--color-code);
|
||||
background: var(--color-code-bg);
|
||||
white-space: pre-wrap;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
.left-addon {
|
||||
position: absolute;
|
||||
top: .8rem;
|
||||
top: 0.8125rem;
|
||||
left: 1rem;
|
||||
z-index: 8;
|
||||
|
||||
|
||||
@ -8,17 +8,17 @@
|
||||
|
||||
img {
|
||||
height: 6rem;
|
||||
margin: .5rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.text {
|
||||
h5 {
|
||||
margin-top: .5rem;
|
||||
margin-top: 0.5rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
@ -29,17 +29,17 @@
|
||||
margin: 1rem;
|
||||
|
||||
.price-info-item {
|
||||
margin: 1rem .5rem;
|
||||
margin: 1rem 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: space-between;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
|
||||
&-main{
|
||||
|
||||
&-main {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
flex: 1 auto;
|
||||
@ -53,7 +53,7 @@
|
||||
|
||||
.checkout-info-item {
|
||||
display: flex;
|
||||
padding: .75rem .5rem 1rem;
|
||||
padding: 0.75rem 0.5rem 1rem;
|
||||
text-align: left;
|
||||
|
||||
i {
|
||||
@ -64,7 +64,7 @@
|
||||
}
|
||||
|
||||
i.stripe-provider {
|
||||
background: url('../../assets/stripe-logo.png') no-repeat center;
|
||||
background: url("../../assets/stripe-logo.png") no-repeat center;
|
||||
background-size: 2rem;
|
||||
border-radius: 1rem;
|
||||
height: 1.5rem;
|
||||
@ -89,5 +89,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,9 +2,9 @@
|
||||
padding: 0.5rem 1rem;
|
||||
|
||||
h5 {
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: 1rem 0 1.1rem;
|
||||
margin: 1rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.inline-inputs {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user