mirror of
https://github.com/discourse/discourse.git
synced 2024-12-09 17:23:44 +08:00
0a5f548635
As part of this move, we are also renaming `discourse-chat` to `chat`.
235 lines
3.8 KiB
SCSS
235 lines
3.8 KiB
SCSS
.chat-emoji-picker {
|
|
border-top: 1px solid var(--primary-low);
|
|
transition: height 125ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
background: var(--secondary);
|
|
|
|
.emoji {
|
|
padding: 6px;
|
|
width: 32px;
|
|
height: 32px;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
cursor: pointer;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: var(--primary-very-low);
|
|
border-radius: 5px;
|
|
transform: scale(1.25);
|
|
}
|
|
}
|
|
|
|
&__filter-container {
|
|
top: 0;
|
|
position: sticky;
|
|
background: var(--secondary);
|
|
display: flex;
|
|
height: 50px;
|
|
}
|
|
|
|
&__filter {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
margin: 0.25rem;
|
|
|
|
input {
|
|
background: none;
|
|
width: 100%;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
&.dc-filter-input-container {
|
|
border-color: transparent;
|
|
background: var(--primary-very-low);
|
|
}
|
|
}
|
|
|
|
&__scrollable-content {
|
|
height: 100%;
|
|
overflow-y: scroll;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
&__no-reults {
|
|
padding: 1em;
|
|
}
|
|
|
|
&__sections-nav {
|
|
top: 0;
|
|
position: sticky;
|
|
background: var(--secondary);
|
|
border-bottom: 1px solid var(--primary-low);
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
&__indicator {
|
|
background: var(--tertiary);
|
|
height: 4px;
|
|
transition: transform 0.3s cubic-bezier(0.1, 0.82, 0.25, 1);
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
&__section-btn {
|
|
padding: 0.25rem;
|
|
|
|
&:hover {
|
|
.emoji {
|
|
background: none;
|
|
}
|
|
}
|
|
|
|
&:focus,
|
|
&.active {
|
|
background: none;
|
|
}
|
|
|
|
.emoji {
|
|
width: 21px;
|
|
height: 21px;
|
|
}
|
|
}
|
|
|
|
&__section-emojis {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
&__backdrop {
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.75);
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
&__section-title {
|
|
margin: 0;
|
|
padding: 0.5rem;
|
|
color: var(--primary-very-high);
|
|
font-size: var(--font-up-0);
|
|
font-weight: 700;
|
|
background: rgba(var(--secondary-rgb), 0.95);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&__fitzpatrick-modifier-btn {
|
|
min-width: 21px;
|
|
width: 21px;
|
|
height: 21px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
background: none;
|
|
margin-right: 0.5rem;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
|
|
.d-icon {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&.current {
|
|
min-width: 25px;
|
|
width: 25px;
|
|
height: 25px;
|
|
}
|
|
|
|
&:not(.current):hover,
|
|
&:not(.current):focus {
|
|
.d-icon {
|
|
visibility: visible;
|
|
color: white;
|
|
filter: drop-shadow(0.5px 1.5px 0 rgba(0, 0, 0, 0.3));
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.t1 {
|
|
background: #ffcc4d;
|
|
}
|
|
&.t2 {
|
|
background: #f7dece;
|
|
}
|
|
&.t3 {
|
|
background: #f3d2a2;
|
|
}
|
|
&.t4 {
|
|
background: #d5ab88;
|
|
}
|
|
&.t5 {
|
|
background: #af7e57;
|
|
}
|
|
&.t6 {
|
|
background: #7c533e;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
forced-color-adjust: none;
|
|
}
|
|
}
|
|
|
|
&__fitzpatrick-scale {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.chat-message-emoji-picker-anchor {
|
|
z-index: z("header") + 1;
|
|
|
|
.chat-emoji-picker {
|
|
border: 1px solid var(--primary-low);
|
|
width: 320px;
|
|
|
|
.emoji {
|
|
width: 22px;
|
|
height: 22px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mobile-view {
|
|
.chat-message-emoji-picker-anchor.-opened {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
box-shadow: shadowcreatePopper("card");
|
|
|
|
.chat-emoji-picker {
|
|
height: 50vh;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.chat-composer-container.with-emoji-picker {
|
|
background: var(--primary-very-low);
|
|
|
|
.chat-emoji-picker {
|
|
border-bottom: 1px solid var(--primary-low);
|
|
|
|
&.closing {
|
|
height: 0;
|
|
}
|
|
}
|
|
}
|