WebSVN – Moodle – Autoría – /theme/universe/scss/moodle/message.scss

Rev	Autor	Línea Nro.	Línea
1	efrain	1	`/ The message area /`
		2	`@mixin setSelectedContact() {`
		3	`background-color: var(--primary-color-100) !important;`
		4	`color: #fff !important;`
		5	`border: 0 !important;`
		6
		7	`.information {`
		8	`.lastmessage {`
		9	`color: #fff;`
		10	`}`
		11	`}`
		12
		13	`.picture {`
		14	`border: 0;`
		15	`}`
		16	`}`
		17
		18	`.message-app {`
		19	`display: flex;`
		20	`flex-direction: column;`
		21	`height: 100%;`
		22	`z-index: 1;`
		23
		24	`.icon-back-in-drawer {`
		25	`display: none;`
		26	`}`
		27
		28	`.overflow-y {`
		29	`overflow-y: auto;`
		30	`}`
		31
		32	`@media (max-height: 320px) {`
		33	`.header-container [data-region="view-overview"]:not(.hidden) {`
		34	`display: flex;`
		35	`align-items: center;`
		36	`}`
		37	`.footer-container [data-region="view-overview"] {`
		38	`display: none;`
		39	`}`
		40	`.overflow-y {`
		41	`overflow-y: unset;`
		42	`}`
		43	`}`
		44
		45	`.header-container {`
		46	`flex-shrink: 0;`
		47	`}`
		48
		49	`&.main {`
		50	`min-height: 400px;`
		51	`}`
		52
		53	`.rui-icon-container .icon {`
		54	`filter: invert(1);`
		55	`}`
		56	`}`
		57
		58	`#page-message-index {`
		59	`#page-header {`
		60	`display: none;`
		61	`}`
		62	`#region-main {`
		63	`height: 100%;`
		64	`margin-top: 0;`
		65	`.conversationcontainer {`
		66	`.section {`
		67	`max-height: calc(100vh - 50px);`
		68	`}`
		69	`}`
		70	`div[role="main"] {`
		71	`height: 100%;`
		72	`#maincontent {`
		73	`margin-top: -1px;`
		74	`}`
		75	`.message-app.main {`
		76	`height: 100%;`
		77	`}`
		78	`}`
		79	`}`
		80	`}`
		81
		82	`.hidden {`
		83	`display: none;`
		84	`}`
		85
		86	`.conversationcontainer {`
		87	`width: 340px;`
		88	`}`
		89
		90	`.messaging-area-container {`
		91
		92	`.status {`
		93	`.online-text {`
		94	`display: none;`
		95	`color: var(--primary-color-100);`
		96	`}`
		97
		98	`.offline-text {`
		99	`color: $red-800;`
		100	`}`
		101
		102	`&.online {`
		103	`.online-text {`
		104	`display: inherit;`
		105	`}`
		106
		107	`.offline-text {`
		108	`display: none;`
		109	`}`
		110	`}`
		111	`}`
		112
		113	`.messaging-area {`
		114	`width: calc(100% + 80px);`
		115	`margin: 0 -40px -40px;`
		116	`clear: both;`
		117
		118	`border-top: 1px solid $border-color;`
		119
		120	`img {`
		121	`max-width: 100%;`
		122	`}`
		123
		124	`.contacts-area {`
		125	`border-right: 1px solid $border-color;`
		126	`height: 630px;`
		127
		128	`width: 280px;`
		129	`display: inline-block;`
		130
		131
		132
		133	`.searchtextarea {`
		134	`padding: 0.5rem;`
		135	`text-align: center;`
		136
		137
		138	`background-color: #fff;`
		139	`transition: background-color linear 0.2s;`
		140
		141	`&.searching {`
		142	`background-color: $gray-100;`
		143	`transition: background-color linear 0.2s;`
		144
		145	`input {`
		146	`background-color: #fff;`
		147	`transition: background-color linear 0.2s;`
		148	`}`
		149	`}`
		150
		151	`.searchfilterarea {`
		152	`line-height: 20px;`
		153	`cursor: pointer;`
		154
		155	`.searchfilter {`
		156	`float: left;`
		157	`}`
		158
		159	`.searchfilterdelete {`
		160	`float: left;`
		161	`margin-left: 5px;`
		162	`}`
		163	`}`
		164	`}`
		165
		166	`.searcharea {`
		167
		168	`.heading {`
		169	`text-align: center;`
		170	`border-top: 1px solid black;`
		171	`border-bottom: 1px solid black;`
		172	`font-size: 14px;`
		173	`font-weight: bold;`
		174	`}`
		175
		176	`.course {`
		177	`text-align: center;`
		178
		179	`&:hover {`
		180	`background-color: #4f94cd;`
		181	`color: #fff;`
		182	`border: 0;`
		183	`cursor: pointer;`
		184	`}`
		185	`}`
		186
		187	`.noresults {`
		188	`padding-top: 20px;`
		189	`text-align: center;`
		190	`}`
		191	`}`
		192
		193	`.contacts {`
		194	`height: 420px;`
		195	`overflow-y: auto;`
		196	`-webkit-overflow-scrolling: touch;`
		197
		198	`.nocontacts {`
		199	`padding-top: 20px;`
		200	`text-align: center;`
		201	`}`
		202
		203	`.contact {`
		204	`height: 66px;`
		205	`cursor: pointer;`
		206	`border-radius: $btn-border-radius;`
		207	`margin: 0.5rem;`
		208
		209
		210	`&.unread {`
		211	`background-color: #f1f1f1;`
		212
		213	`.picture {`
		214	`border-color: #f1f1f1;`
		215	`}`
		216
		217	`.information {`
		218	`width: 60%;`
		219	`}`
		220
		221	`.unread-count-container {`
		222	`display: inline-block;`
		223	`width: 15%;`
		224	`}`
		225	`}`
		226
		227	`&:hover {`
		228	`@include setSelectedContact();`
		229	`}`
		230
		231	`&.selected {`
		232	`@include setSelectedContact();`
		233	`}`
		234
		235	`.picture {`
		236	`line-height: 66px;`
		237	`text-align: center;`
		238	`height: 66px;`
		239	`border-bottom: 1px solid #fff;`
		240	`width: 25%;`
		241	`display: inline-block;`
		242
		243
		244	`img {`
		245	`border-radius: 50%;`
		246	`height: 34px;`
		247	`}`
		248	`}`
		249
		250	`.information {`
		251	`padding: 6px 0;`
		252	`height: 66px;`
		253	`width: 75%;`
		254	`display: inline-block;`
		255
		256
		257	`.name {`
		258	`font-weight: bold;`
		259
		260	`img {`
		261	`vertical-align: baseline;`
		262	`}`
		263	`}`
		264
		265	`.lastmessage {`
		266	`word-wrap: break-word;`
		267	`margin: 0;`
		268	`height: 40px;`
		269	`line-height: 17px;`
		270	`overflow: hidden;`
		271	`text-overflow: ellipsis;`
		272	`white-space: nowrap;`
		273	`color: #a1a1a1;`
		274	`padding-right: 10px;`
		275	`}`
		276	`}`
		277
		278	`.unread-count-container {`
		279	`display: none;`
		280	`line-height: 66px;`
		281	`text-align: center;`
		282
		283	`}`
		284	`}`
		285	`}`
		286
		287	`@mixin setSelectedTab() {`
		288	`color: #4f94cd;`
		289	`}`
		290
		291	`.tabs {`
		292	`border-top: 1px solid $border-color;`
		293
		294
		295	`.tab {`
		296	`cursor: pointer;`
		297	`height: 100%;`
		298	`background-color: $gray-100;`
		299	`margin: 0;`
		300	`width: 50%;`
		301	`text-align: center;`
		302	`float: left;`
		303
		304	`&:hover {`
		305	`@include setSelectedTab();`
		306	`}`
		307
		308	`.tabimage {`
		309	`height: 30px;`
		310	`line-height: 30px;`
		311
		312	`img {`
		313	`height: 20px;`
		314	`}`
		315	`}`
		316	`}`
		317
		318	`.tab.selected {`
		319	`@include setSelectedTab();`
		320	`}`
		321	`}`
		322	`}`
		323
		324	`.messages-area {`
		325	`width: calc(100% - 280px);`
		326	`height: 600px;`
		327
		328
		329	`margin: 0;`
		330	`position: relative;`
		331	`float: right;`
		332
		333	`.btn-container {`
		334	`position: absolute;`
		335	`top: 0;`
		336	`left: 0;`
		337	`padding-left: 15px;`
		338	`font-weight: normal;`
		339
		340	`&.view-toggle {`
		341	`display: none;`
		342	`}`
		343
		344	`&.delete-all {`
		345	`display: none;`
		346	`}`
		347	`}`
		348
		349	`.profile-header {`
		350	`height: 50px;`
		351	`line-height: 50px;`
		352	`display: none;`
		353
		354	`.btn-container {`
		355	`display: block;`
		356
		357	`.btn-link {`
		358	`padding: 0;`
		359	`line-height: inherit;`
		360	`}`
		361	`}`
		362	`}`
		363
		364	`.profile {`
		365	`padding: 30px;`
		366	`font-size: 16px;`
		367	`height: 600px;`
		368
		369
		370	`overflow-y: auto;`
		371	`-webkit-overflow-scrolling: touch;`
		372
		373	`.user-container {`
		374	`height: 100px;`
		375
		376	`.profile-picture {`
		377	`border-radius: 50%;`
		378	`max-height: 100px;`
		379	`display: inline-block;`
		380	`}`
		381
		382	`.name-container {`
		383	`display: inline-block;`
		384	`vertical-align: top;`
		385	`margin-top: 20px;`
		386	`margin-left: 10px;`
		387
		388	`.name {`
		389	`font-weight: bold;`
		390	`display: block;`
		391	`}`
		392
		393	`.status {`
		394	`display: block;`
		395	`font-size: 14px;`
		396	`}`
		397	`}`
		398	`}`
		399
		400	`.information {`
		401	`margin: 0;`
		402	`display: inline-block;`
		403	`margin-top: 20px;`
		404	`font-size: 14px;`
		405	`list-style: none;`
		406
		407	`.name {`
		408	`display: inline-block;`
		409	`font-weight: bold;`
		410	`text-align: right;`
		411	`margin-right: 10px;`
		412	`}`
		413
		414	`.value {`
		415	`display: inline-block;`
		416	`}`
		417	`}`
		418
		419	`.actions {`
		420	`padding-top: 80px;`
		421
		422	`.separator {`
		423	`border-bottom: 1px solid $border-color;`
		424	`margin-bottom: 20px;`
		425	`padding-bottom: 5px;`
		426
		427	`a {`
		428	`&.danger {`
		429	`color: #ff6961;`
		430	`}`
		431	`}`
		432	`}`
		433	`}`
		434	`}`
		435
		436	`.messages-header {`
		437	`font-weight: bold;`
		438
		439	`border-bottom: 1px solid $border-color;`
		440	`position: relative;`
		441
		442	`.btn-link {`
		443	`padding: 0;`
		444	`line-height: inherit;`
		445	`}`
		446
		447	`.delete-instructions {`
		448	`display: none;`
		449	`}`
		450
		451	`.name-container {`
		452	`padding: 2rem;`
		453	`display: inline-block;`
		454
		455	`.name {`
		456	`line-height: 20px;`
		457	`}`
		458
		459	`.status {`
		460	`position: absolute;`
		461	`top: -10px;`
		462
		463	`font-weight: $font-weight-bold;`
		464	`font-size: $font-size-xs;`
		465	`font-weight: normal;`
		466	`}`
		467	`}`
		468
		469	`.actions {`
		470	`position: absolute;`
		471	`top: 2rem;`
		472	`right: 2rem;`
		473	`font-weight: normal;`
		474
		475	`.cancel-messages-delete {`
		476	`display: none;`
		477	`}`
		478	`}`
		479	`}`
		480
		481	`.messages {`
		482	`height: 360px;`
		483	`width: 100%;`
		484	`overflow-y: auto;`
		485	`overflow-x: hidden;`
		486	`-webkit-overflow-scrolling: touch;`
		487
		488	`padding: 2.5rem;`
		489
		490	`&.hidden {`
		491	`right: -360px;`
		492	`}`
		493
		494	`.blocktime {`
		495	`clear: both;`
		496	`text-align: center;`
		497	`color: $gray-500;`
		498	`font-size: $font-size-xs;`
		499	`font-weight: $font-weight-bold;`
		500	`margin: $spacer 0;`
		501	`}`
		502
		503	`.message {`
		504
		505	`.deletemessagecheckbox {`
		506	`display: none;`
		507	`text-align: center;`
		508	`padding-top: 5px;`
		509	`}`
		510
		511	`.content {`
		512	`padding: 1.5rem;`
		513	`border-radius: $btn-border-radius;`
		514
		515	`margin-bottom: 0.5rem;`
		516	`font-size: $font-size-sm;`
		517	`word-wrap: break-word;`
		518	`max-width: 55%;`
		519	`position: relative;`
		520
		521	`&.right {`
		522	`background-color: $gray-100;`
		523	`}`
		524
		525	`&.left {`
		526	`background-color: var(--main-theme-color);`
		527	`}`
		528
		529	`.text {`
		530	`display: block;`
		531
		532	`p {`
		533	`margin: 0;`
		534	`}`
		535	`}`
		536
		537	`.timesent {`
		538	`font-size: 10px;`
		539	`color: #a1a1a1;`
		540	`float: right;`
		541	`}`
		542	`}`
		543
		544	`.content.left {`
		545	`margin-left: auto;`
		546	`}`
		547
		548	`.content.right {`
		549	`margin-right: auto;`
		550	`}`
		551	`}`
		552	`}`
		553
		554	`.response {`
		555	`display: table;`
		556	`padding: 1.5rem;`
		557	`position: absolute;`
		558	`bottom: -31px;`
		559	`left: 0;`
		560	`width: 100%;`
		561	`line-height: 28px;`
		562	`text-align: center;`
		563	`border-top: 1px solid $border-color;`
		564
		565	`background-color: #fff;`
		566	`transition: background-color linear 0.2s;`
		567
		568	`.delete-confirmation {`
		569	`display: none;`
		570
		571	`.btn.btn-link.confirm {`
		572	`border: 1px solid #4f94cd;`
		573	`height: 30px;`
		574
		575	`&:hover {`
		576	`background-color: #4f94cd;`
		577	`color: #fff;`
		578	`text-shadow: none;`
		579	`}`
		580	`}`
		581	`}`
		582
		583	`.message-box {`
		584	`display: table-row;`
		585
		586	`.message-text-container {`
		587
		588	`textarea {`
		589	`padding: 1.5rem;`
		590	`vertical-align: middle;`
		591	`width: 100%;`
		592	`height: 120px;`
		593	`margin: 0;`
		594	`resize: none;`
		595	`border: 0;`
		596	`box-shadow: none;`
		597
		598	`background-color: $gray-100;`
		599	`border-radius: $btn-border-radius;`
		600	`font-size: $font-size-sm;`
		601	`transition: background-color linear 0.2s;`
		602
		603	`direction: ltr;`
		604
		605	`&:focus {`
		606	`box-shadow: none;`
		607	`}`
		608	`}`
		609	`}`
		610	`}`
		611
		612	`&.messaging {`
		613	`background-color: $gray-100;`
		614	`transition: background-color linear 0.2s;`
		615
		616	`.message-box {`
		617	`.message-text-container {`
		618	`textarea {`
		619	`background-color: #fff;`
		620	`transition: background-color linear 0.2s;`
		621	`}`
		622	`}`
		623	`}`
		624	`}`
		625	`}`
		626
		627	`&.editing {`
		628	`.messages-header {`
		629	`.btn-container {`
		630	`&.view-all {`
		631	`display: none;`
		632	`}`
		633
		634	`&.delete-all {`
		635	`display: block;`
		636	`}`
		637	`}`
		638
		639	`.delete-instructions {`
		640	`display: block;`
		641	`}`
		642
		643	`.name-container {`
		644	`display: none;`
		645	`}`
		646
		647	`.actions {`
		648	`.messages-delete {`
		649	`display: none;`
		650	`}`
		651
		652	`.cancel-messages-delete {`
		653	`display: block;`
		654	`}`
		655	`}`
		656	`}`
		657
		658	`.messages {`
		659	`.message {`
		660	`cursor: pointer;`
		661
		662	`&[aria-checked="true"] {`
		663	`.content {`
		664	`background-color: $red-600;`
		665	`border-color: $red-600;`
		666	`color: #fff;`
		667
		668	`.timesent {`
		669	`color: #fff;`
		670	`}`
		671	`}`
		672	`}`
		673
		674	`&[aria-checked="false"] {`
		675	`.content {`
		676	`&:hover {`
		677	`background-color: $red-600;`
		678	`color: #fff;`
		679
		680	`.timesent {`
		681	`color: #fff;`
		682	`}`
		683	`}`
		684	`}`
		685	`}`
		686	`}`
		687	`}`
		688
		689	`.response {`
		690	`.delete-confirmation {`
		691	`display: block;`
		692	`}`
		693
		694	`.message-box {`
		695	`display: none;`
		696	`}`
		697	`}`
		698	`}`
		699	`}`
		700	`}`
		701	`}`
		702
		703	`.preferences-container {`
		704
		705	`@include media-breakpoint-down(md) {`
		706	`overflow-x: auto;`
		707	`width: 100%;`
		708	`}`
		709
		710
		711	`.table {`
		712	`width: 100%;`
		713
		714	`@include media-breakpoint-down(md) {`
		715	`width: max-content;`
		716	`}`
		717	`}`
		718
		719	`.container-fluid {`
		720	`padding: 0;`
		721
		722	`.span6 {`
		723	`min-height: 20px;`
		724	`}`
		725	`}`
		726
		727	`.align-bottom {`
		728	`vertical-align: bottom;`
		729	`}`
		730
		731	`.preference-table {`
		732	`thead {`
		733	`th {`
		734	`text-align: center;`
		735
		736	`h4 {`
		737	`margin: 0;`
		738	`}`
		739
		740	`.config-warning {`
		741	`display: none;`
		742	`}`
		743
		744	`&.unconfigured {`
		745	`.config-warning {`
		746	`display: inline-block;`
		747	`}`
		748	`}`
		749	`}`
		750	`}`
		751
		752	`tr {`
		753	`td {`
		754	`&:not(:first-child) {`
		755	`text-align: center;`
		756	`}`
		757
		758	`&:nth-child(even) {`
		759	`background-color: $gray-100;`
		760
		761	`.theme-dark & {`
		762	`background-color: $dm-gray-100;`
		763	`}`
		764	`}`
		765	`}`
		766
		767	`th:nth-child(even) {`
		768	`background-color: $gray-100;`
		769
		770	`.theme-dark & {`
		771	`background-color: $dm-gray-100;`
		772	`}`
		773	`}`
		774	`}`
		775
		776	`h4 {`
		777	`margin: 0;`
		778	`font-weight: $font-weight-bold;`
		779	`font-size: $font-size-sm;`
		780
		781	`color: $table-head-color;`
		782	`}`
		783
		784	`.preference-row {`
		785	`.hover-tooltip-container {`
		786	`display: inline-block;`
		787	`}`
		788
		789	`.preference-name {`
		790	`vertical-align: middle;`
		791	`}`
		792
		793	`.disabled-message {`
		794	`text-align: center;`
		795	`height: 30px;`
		796	`line-height: 30px;`
		797	`}`
		798
		799	`.preference-state {`
		800	`margin: 0;`
		801	`padding: 0;`
		802	`display: inline-block;`
		803	`vertical-align: middle;`
		804
		805	`input[type="checkbox"]:checked+.preference-state-status-container {`
		806	`background-color: $green-600;`
		807
		808	`.on-text {`
		809	`display: inline-block;`
		810	`}`
		811
		812	`.off-text {`
		813	`display: none;`
		814	`}`
		815	`}`
		816
		817	`.preference-state-status-container {`
		818	`width: auto;`
		819	`height: 30px;`
		820	`line-height: 30px;`
		821	`text-align: center;`
		822	`padding: 0 20px;`
		823	`border-radius: $btn-border-radius-xl;`
		824	`background-color: #d9534f;`
		825	`font-weight: $font-weight-bold;`
		826	`font-size: $font-size-xs;`
		827	`color: #fff;`
		828	`cursor: pointer;`
		829
		830	`.loading-icon {`
		831	`display: none;`
		832	`}`
		833
		834	`.on-text {`
		835	`display: none;`
		836	`}`
		837
		838	`.off-text {`
		839	`display: inline-block;`
		840	`}`
		841	`}`
		842
		843	`&.loading {`
		844	`input[type="checkbox"]:checked+.preference-state-status-container {`
		845
		846	`.on-text,`
		847	`.off-text {`
		848	`display: none;`
		849	`}`
		850	`}`
		851
		852	`.preference-state-status-container {`
		853
		854	`.on-text,`
		855	`.off-text {`
		856	`display: none;`
		857	`}`
		858
		859	`.loading-icon {`
		860	`display: block;`
		861	`}`
		862	`}`
		863	`}`
		864	`}`
		865
		866	`&.loading {`
		867	`.preference-name {`
		868	`.loading-icon {`
		869	`display: block;`
		870	`}`
		871	`}`
		872	`}`
		873	`}`
		874	`}`
		875	`}`
		876
		877	`.disabled-message {`
		878	`display: none;`
		879	`}`
		880
		881	`.disabled {`
		882	`.disabled-message {`
		883	`display: block;`
		884
		885	`+form {`
		886	`display: none;`
		887	`}`
		888	`}`
		889	`}`
		890
		891	`.general-settings-container {`
		892	`.loading-icon {`
		893	`display: none;`
		894	`}`
		895
		896	`.loading {`
		897	`.loading-icon {`
		898	`display: inline-block;`
		899	`}`
		900	`}`
		901
		902	`label {`
		903	`display: inline-block;`
		904	`}`
		905	`}`
		906
		907	`.processor-container {`
		908	`position: relative;`
		909
		910	`.loading-container {`
		911	`display: none;`
		912	`position: absolute;`
		913	`width: 100%;`
		914	`height: 100%;`
		915	`text-align: center;`
		916	`background-color: rgba(255, 255, 255, 0.5);`
		917
		918	`.vertical-align {`
		919	`height: 100%;`
		920	`width: 0%;`
		921	`display: inline-block;`
		922	`vertical-align: middle;`
		923	`}`
		924	`}`
		925
		926	`&.loading {`
		927	`.loading-container {`
		928	`display: block;`
		929	`}`
		930	`}`
		931	`}`
		932
		933	`.preferences-page-container {`
		934	`.checkbox-container {`
		935	`margin: 30px 5px;`
		936	`line-height: 20px;`
		937
		938	`.loading-icon {`
		939	`display: none;`
		940	`}`
		941
		942	`&.loading {`
		943	`.loading-icon {`
		944	`display: inline-block;`
		945	`}`
		946	`}`
		947	`}`
		948	`}`
		949
		950	`#page-message-output-popup-notifications #region-main {`
		951	`background-color: transparent !important;`
		952	`}`
		953
		954	`.notification-area {`
		955	`width: 100%;`
		956	`display: flex;`
		957	`flex-wrap: wrap;`
		958	`justify-content: flex-start;`
		959	`height: auto;`
		960	`color: $body-color;`
		961
		962	`.theme-dark & {`
		963	`color: $dm-body-color;`
		964	`}`
		965
		966	`.content-item-body {`
		967	`display: inline-flex;`
		968	`align-content: flex-start;`
		969	`}`
		970
		971	`.control-area {`
		972	`padding: 0;`
		973	`margin-right: $page-padding-global;`
		974
		975	`display: inline-flex;`
		976	`width: 300px;`
		977	`max-height: 600px;`
		978	`overflow-y: auto;`
		979	`-webkit-overflow-scrolling: touch;`
		980	`border-right: 1px solid $border-color;`
		981
		982	`.theme-dark & {`
		983	`border-color: $dm-border-color;`
		984	`}`
		985
		986	`@include media-breakpoint-down(md) {`
		987	`height: auto;`
		988	`width: 100%;`
		989	`display: block;`
		990
		991	`margin: 0 auto;`
		992	`padding: 0;`
		993	`border-right: 0;`
		994	`}`
		995
		996	`.content {`
		997	`padding: 0 20px 0 0;`
		998	`position: relative;`
		999
		1000	`&:empty {`
		1001	`display: none;`
		1002	`}`
		1003
		1004	`.content-item-container {`
		1005	`cursor: pointer;`
		1006	`}`
		1007
		1008	`&:empty+.empty-text {`
		1009	`display: block;`
		1010	`font-size: $font-size-sm;`
		1011	`}`
		1012	`}`
		1013
		1014	`.loading-icon {`
		1015	`display: none;`
		1016	`}`
		1017
		1018	`.empty-text {`
		1019	`display: none;`
		1020	`font-size: $font-size-sm;`
		1021	`padding: 10px 20px;`
		1022	`}`
		1023
		1024	`&.loading {`
		1025	`.loading-icon {`
		1026	`display: block;`
		1027	`text-align: center;`
		1028
		1029	`padding: 5px;`
		1030	`}`
		1031
		1032	`.content:empty+.empty-text {`
		1033	`display: none;`
		1034	`}`
		1035	`}`
		1036	`}`
		1037
		1038	`.content-area {`
		1039	`display: block;`
		1040
		1041	`@include media-breakpoint-up(lmd) {`
		1042	`width: calc(100% - 340px);`
		1043	`}`
		1044
		1045	`.toggle-mode {`
		1046	`display: none;`
		1047	`}`
		1048
		1049	`.header {`
		1050	`@include media-breakpoint-up(lmd) {`
		1051	`padding: 0 0 0 30px;`
		1052	`}`
		1053	`@include media-breakpoint-between(xs,md) {`
		1054	`margin-top: 30px;`
		1055	`padding: 10px;`
		1056	`}`
		1057
		1058	`.image-container {`
		1059	`display: inline-block;`
		1060	`width: 60px;`
		1061
		1062	`img {`
		1063	`width: 65%;`
		1064	`background-color: $gray-100;`
		1065	`border-radius: $btn-border-radius;`
		1066	`}`
		1067	`}`
		1068
		1069	`.subject-container {`
		1070	`margin-bottom: 10px;`
		1071	`display: inline-flex;`
		1072	`width: calc(100% - 70px);`
		1073
		1074	`font-size: 1.125rem;`
		1075	`font-weight: $font-weight-medium;`
		1076
		1077	`@include media-breakpoint-up(lmd) {`
		1078	`font-size: 1.125rem;`
		1079	`}`
		1080	`@include media-breakpoint-between(xs,md) {`
		1081	`font-size: 1rem;`
		1082	`}`
		1083
		1084	`}`
		1085
		1086	`.timestamp {`
		1087	`margin: 0 0 0 65px;`
		1088	`font-size: $font-size-sm;`
		1089	`color: $body-color-light;`
		1090	`}`
		1091
		1092	`&:empty {`
		1093	`display: none;`
		1094	`}`
		1095	`}`
		1096
		1097	`>.content {`
		1098	`height: auto;`
		1099	`font-weight: $font-weight-normal;`
		1100
		1101	`overflow: auto;`
		1102	`-webkit-overflow-scrolling: touch;`
		1103
		1104	`@include media-breakpoint-up(lmd) {`
		1105	`margin: $page-padding-global 0 0 95px;`
		1106	`font-size: $font-size-md;`
		1107	`}`
		1108
		1109	`@include media-breakpoint-between(xs,md) {`
		1110	`margin: 10px;`
		1111	`font-size: $font-size-sm;`
		1112	`}`
		1113
		1114	`&:empty {`
		1115	`display: none;`
		1116
		1117	`&+.empty-text {`
		1118	`display: block;`
		1119	`text-align: left;`
		1120	`padding: 10px 20px;`
		1121	`}`
		1122	`}`
		1123	`}`
		1124
		1125	`.empty-text {`
		1126	`display: none;`
		1127	`}`
		1128
		1129	`.footer {`
		1130	`padding: 10px 30px;`
		1131	`background-color: $gray-100;`
		1132	`border-radius: $btn-border-radius;`
		1133
		1134	`font-size: $font-size-sm;`
		1135	`font-weight: $font-weight-medium;`
		1136	`color: $body-color-secondary;`
		1137
		1138	`@include media-breakpoint-up(md) {`
		1139	`margin: $page-padding-global 0 0 95px;`
		1140	`}`
		1141
		1142	`@include media-breakpoint-between(xs,md) {`
		1143	`margin: 10px;`
		1144	`}`
		1145
		1146	`.theme-dark & {`
		1147	`background-color: $dm-gray-100;`
		1148	`color: $dm-gray-800;`
		1149	`}`
		1150
		1151	`&:empty {`
		1152	`display: none;`
		1153	`}`
		1154
		1155	`a {`
		1156	`color: $body-color-secondary;`
		1157
		1158	`.theme-dark & {`
		1159	`color: $dm-body-color-secondary;`
		1160	`}`
		1161	`}`
		1162	`}`
		1163	`}`
		1164	`}`
		1165
		1166
		1167	`div.disabled {`
		1168	`opacity: 0.5;`
		1169	`}`
		1170
		1171
		1172	`// New styles for the messaging UI. Once MDL-63303 is done all CSS above this line should be removed.`
		1173
		1174	`.drawer.message-drawer {`
		1175	`background-color: $container-bg;`
		1176	`top: 10px;`
		1177	`height: calc(100vh - 20px);`
		1178	`z-index: 9999;`
		1179
		1180	`.theme-dark & {`
		1181	`background-color: $dm-container-bg;`
		1182	`}`
		1183
		1184	`@include media-breakpoint-up(md) {`
		1185	`width: 420px;`
		1186	`}`
		1187
		1188	`@include media-breakpoint-only(sm) {`
		1189	`width: 100%;`
		1190	`height: 100%;`
		1191	`top: 0;`
		1192	`right: 0;`
		1193	`}`
		1194
		1195	`&.hidden {`
		1196	`display: block;`
		1197	`right: -100%;`
		1198	`}`
		1199
		1200	`.nav {`
		1201	`.nav-item {`
		1202	`font-size: $font-size-sm;`
		1203	`font-weight: $font-weight-medium;`
		1204
		1205	`a:hover {`
		1206	`color: var(--primary-color-300);`
		1207	`}`
		1208
		1209	`.active {`
		1210	`&:before {`
		1211	`width: 100%;`
		1212	`}`
		1213	`}`
		1214	`}`
		1215	`}`
		1216
		1217	`}`
		1218
		1219	`[data-region="send-message-txt"] {`
		1220	`height: 120px;`
		1221	`}`
		1222
		1223	`.message-drawer,`
		1224	`.message-app {`
		1225
		1226	`[data-region="no-results-container"] {`
		1227	`font-size: $font-size-xs;`
		1228	`color: $body-color-secondary;`
		1229
		1230	`.theme-dark & {`
		1231	`color: $dm-body-color-secondary;`
		1232	`}`
		1233	`}`
		1234
		1235	`.message-title {`
		1236	`max-width: 120px;`
		1237	`font-size: $font-size-sm;`
		1238	`font-weight: $font-weight-bold;`
		1239	`color: $body-color;`
		1240
		1241	`.theme-dark & {`
		1242	`color: $dm-body-color;`
		1243	`}`
		1244	`}`
		1245
		1246	`.rui-message-subname {`
		1247	`max-width: 120px;`
		1248	`font-size: $font-size-xs;`
		1249	`font-weight: $font-weight-medium;`
		1250	`color: $body-color-secondary;`
		1251
		1252	`.theme-dark & {`
		1253	`color: $dm-body-color-secondary;`
		1254	`}`
		1255	`}`
		1256
		1257	`.close {`
		1258	`position: absolute;`
		1259	`top: 7px;`
		1260	`right: 6px;`
		1261	`z-index: $zindex-tooltip;`
		1262	`}`
		1263
		1264	`.section.expanded {`
		1265	`overflow: hidden;`
		1266	`border-radius: $btn-border-radius;`
		1267	`box-shadow: $box-shadow;`
		1268	`border: 2px solid var(--main-theme-color);`
		1269	`}`
		1270
		1271	`.header-container {`
		1272	`flex-shrink: 0;`
		1273	`}`
		1274
		1275	`.body-container {`
		1276	`flex: 1;`
		1277	`overflow: hidden;`
		1278
		1279	`#page-message-index & {`
		1280	`min-height: 360px;`
		1281	`}`
		1282
		1283	`&>* {`
		1284	`position: absolute;`
		1285	`right: 0;`
		1286	`left: 0;`
		1287	`top: 0;`
		1288	`bottom: 0;`
		1289	`}`
		1290	`}`
		1291
		1292	`.footer-container {`
		1293	`flex-shrink: 0;`
		1294	`}`
		1295
		1296	`.contact-status {`
		1297	`position: absolute;`
		1298	`left: 5px;`
		1299	`top: 5px;`
		1300	`width: 12px;`
		1301	`height: 12px;`
		1302	`border-radius: 50%;`
		1303
		1304	`&.online {`
		1305	`border: 3px solid $container-bg;`
		1306	`background-color: $green-500;`
		1307
		1308	`.theme-dark & {`
		1309	`border-color: $dm-container-bg;`
		1310	`}`
		1311	`}`
		1312	`}`
		1313
		1314	`.message-txt {`
		1315	`padding: 0 60px 0 0;`
		1316
		1317	`display: inline-flex;`
		1318	`align-items: flex-start;`
		1319
		1320	`font-size: $font-size-xs;`
		1321	`color: $body-color-secondary;`
		1322
		1323	`word-break: break-word;`
		1324
		1325	`.theme-dark & {`
		1326	`color: $dm-body-color-secondary;`
		1327	`}`
		1328	`}`
		1329
		1330	`.message {`
		1331	`img {`
		1332	`max-width: 100%;`
		1333	`width: auto;`
		1334	`height: auto;`
		1335	`border-radius: $btn-border-radius;`
		1336	`}`
		1337	`}`
		1338
		1339	`.clickable {`
		1340	`margin-left: 5px;`
		1341	`padding: .35rem 0;`
		1342	`cursor: pointer;`
		1343	`transition: $transition-base;`
		1344	`border-radius: $btn-border-radius;`
		1345
		1346	`&.border-danger {`
		1347	`padding: .35rem;`
		1348	`border: 2px dashed $red-600 !important;`
		1349
		1350
		1351	`.rui-last-message-date-icon {`
		1352	`display: none;`
		1353	`}`
		1354	`}`
		1355
		1356	`&:hover {`
		1357	`&:before {`
		1358	`content: '';`
		1359	`background-color: $border-color;`
		1360	`width: 5px;`
		1361	`height: 5px;`
		1362
		1363	`border-radius: $btn-border-radius;`
		1364
		1365	`position: absolute;`
		1366	`top: 0;`
		1367	`left: -3px;`
		1368
		1369	`animation: pulse 2s infinite;`
		1370
		1371	`.theme-dark & {`
		1372	`border-color: $dm-border-color;`
		1373	`}`
		1374	`}`
		1375	`}`
		1376
		1377	`}`
		1378
		1379	`.icon {`
		1380	`margin: 0;`
		1381
		1382	`.theme-dark & {`
		1383	`filter: invert(1);`
		1384	`}`
		1385	`}`
		1386
		1387	`[data-region="content-container"] {`
		1388	`font-size: $font-size-sm;`
		1389	`color: $body-color-secondary;`
		1390
		1391	`.theme-dark & {`
		1392	`color: $dm-body-color-secondary;`
		1393	`}`
		1394	`}`
		1395
		1396	`.overview-section-toggle {`
		1397	`.collapsed-icon-container {`
		1398	`display: none;`
		1399	`}`
		1400
		1401	`.expanded-icon-container {`
		1402	`display: inline-block;`
		1403	`}`
		1404
		1405	`&.collapsed {`
		1406	`.collapsed-icon-container {`
		1407	`display: inline-block;`
		1408	`}`
		1409
		1410	`.expanded-icon-container {`
		1411	`display: none;`
		1412	`}`
		1413	`}`
		1414	`}`
		1415
		1416
		1417	`.rui-view-overview-body {`
		1418	`.section {`
		1419	`display: block;`
		1420	`margin: 0 0 0.5rem !important;`
		1421
		1422	`&.expanded {`
		1423	`display: flex;`
		1424	`}`
		1425	`}`
		1426	`}`
		1427
		1428
		1429	`.section {`
		1430	`.collapsing {`
		1431	`overflow: hidden;`
		1432	`}`
		1433	`}`
		1434
		1435	`.lazy-load-list {`
		1436	`overflow-y: auto;`
		1437	`}`
		1438	`}`
		1439
		1440	`.dir-rtl {`
		1441	`.message-drawer {`
		1442	`box-shadow: $box-shadow;`
		1443	`}`
		1444	`}`
		1445
		1446	`.message-search-results-content {`
		1447	`border-bottom: 1px solid $border-color;`
		1448	`padding-bottom: 1.5rem;`
		1449
		1450	`.theme-dark & {`
		1451	`border-color: $dm-border-color;`
		1452	`}`
		1453	`}`
		1454
		1455	`.rui-message-header-info {`
		1456	`color: $body-color;`
		1457
		1458	`.theme-dark & {`
		1459	`color: $dm-body-color;`
		1460	`}`
		1461	`}`
		1462
		1463	`.rui-message-name {`
		1464	`display: block;`
		1465	`font-weight: $font-weight-medium;`
		1466	`font-size: .85rem;`
		1467	`}`
		1468
		1469	`.rui-message-user-status,`
		1470	`[data-action="view-group-info"] small {`
		1471	`display: block;`
		1472	`width: 100%;`
		1473
		1474	`font-size: .65rem;`
		1475	`font-weight: $font-weight-medium;`
		1476	`color: $body-color-light;`
		1477
		1478	`.theme-dark & {`
		1479	`color: $dm-body-color-light;`
		1480	`}`
		1481	`}`
		1482
		1483	`.rui-message-user-status {`
		1484	`margin-top: .35rem;`
		1485	`}`
		1486
		1487	`.rui-message-name-favorite {`
		1488	`position: absolute;`
		1489
		1490	`top: -8px;`
		1491	`left: -10px;`
		1492
		1493	`width: 20px;`
		1494	`height: 20px;`
		1495
		1496	`background-color: $container-bg;`
		1497	`border-radius: $btn-border-radius;`
		1498
		1499	`color: $yellow-700;`
		1500
		1501	`display: flex;`
		1502	`align-content: center;`
		1503	`justify-content: center;`
		1504
		1505	`.theme-dark & {`
		1506	`background-color: $dm-container-bg;`
		1507	`}`
		1508	`}`
		1509
		1510	`.rui-additional-info {`
		1511	`background-color: $container-bg;`
		1512	`padding-left: 72px;`
		1513	`padding-bottom: 5px;`
		1514
		1515	`.theme-dark & {`
		1516	`color: $dm-container-bg;`
		1517	`}`
		1518	`}`
		1519
		1520	`[data-action="view-contact"] div,`
		1521	`[data-action="view-group-info"] {`
		1522	`position: relative;`
		1523	`}`
		1524
		1525	`[data-region="last-message-date"] {`
		1526	`right: 0;`
		1527	`}`
		1528
		1529	`.rui-message-app-bg {`
		1530	`width: 80%;`
		1531	`margin: 10px 0 20px;`
		1532
		1533	`.rui-message-txt {`
		1534	`background-color: $gray-200;`
		1535
		1536	`padding: 10px 20px 30px 10px;`
		1537
		1538	`border-radius: $btn-border-radius;`
		1539	`font-size: $font-size-sm;`
		1540	`color: $body-color;`
		1541
		1542	`.theme-dark & {`
		1543	`background-color: $dm-gray-200;`
		1544	`color: $dm-body-color;`
		1545	`}`
		1546	`}`
		1547	`}`
		1548
		1549	`.rui-message-app-bg-secondary {`
		1550	`width: 80%;`
		1551	`margin: 10px 0 20px;`
		1552
		1553	`.rui-message-txt {`
		1554	`background-color: var(--primary-color-100);`
		1555
		1556	`padding: 10px 20px;`
		1557	`margin-top: 0.25rem;`
		1558	`margin-left: 7px;`
		1559
		1560	`border-radius: $btn-border-radius;`
		1561	`font-size: $font-size-sm;`
		1562	`color: $body-color;`
		1563
		1564	`.theme-dark & {`
		1565	`color: $dm-body-color;`
		1566	`}`
		1567	`}`
		1568	`}`
		1569
		1570	`.rui-message-author-avatar {`
		1571	`position: absolute;`
		1572	`bottom: -15px;`
		1573	`left: 15px;`
		1574
		1575	`border: 4px solid $container-bg;`
		1576
		1577	`.theme-dark & {`
		1578	`border-color: $dm-container-bg;`
		1579	`}`
		1580	`}`
		1581
		1582	`.rui-message-author-name {`
		1583	`font-size: $font-size-xs;`
		1584	`}`
		1585
		1586	`.rui-message-author-date {`
		1587	`font-size: $font-size-xs;`
		1588	`color: $body-color-light;`
		1589
		1590	`.theme-dark & {`
		1591	`color: $dm-body-color-light;`
		1592	`}`
		1593	`}`
		1594
		1595	`#page-message-output-popup-notifications {`
		1596	`[role="main"] {`
		1597	`h2 {`
		1598	`margin-bottom: 2rem;`
		1599	`}`
		1600
		1601	`hr {`
		1602	`margin: 20px 0;`
		1603	`}`
		1604	`}`
		1605
		1606	`#region-main {`
		1607	`background-color: $drawer-bg;`
		1608	`color: $body-color-secondary;`
		1609
		1610	`.theme-dark & {`
		1611	`background-color: $dm-drawer-bg;`
		1612	`color: $dm-body-color-secondary;`
		1613	`}`
		1614	`}`
		1615
		1616	`}`
		1617
		1618	`/* Header of the messages app */`
		1619	`.btn-msg,`
		1620	`.btn-msg-special,`
		1621	`.btn-msg-danger {`
		1622	`display: inline-flex;`
		1623	`align-items: center;`
		1624	`justify-content: center;`
		1625
		1626	`position: relative;`
		1627
		1628	`min-width: 40px;`
		1629	`height: 40px;`
		1630
		1631	`border-radius: $btn-border-radius;`
		1632	`border: none;`
		1633	`transition: $transition-base;`
		1634
		1635	`.theme-dark & {`
		1636	`background-color: #24262b;`
		1637	`}`
		1638	`}`
		1639
		1640	`.btn-msg {`
		1641	`background-color: transparent;`
		1642	`color: $gray-900;`
		1643
		1644	`.theme-dark & {`
		1645	`color: $dm-gray-900;`
		1646	`}`
		1647
		1648	`&:hover {`
		1649	`background-color: $gray-200;`
		1650	`color: $gray-900;`
		1651	`text-decoration: none;`
		1652
		1653	`.theme-dark & {`
		1654	`background-color: $dm-gray-200;`
		1655	`color: $dm-gray-900;`
		1656	`}`
		1657	`}`
		1658	`}`
		1659
		1660	`.btn-msg-special {`
		1661	`background-color: var(--primary-color-100);`
		1662	`color: var(--main-theme-color);`
		1663
		1664	`.theme-dark & {`
		1665	`background-color: $dm-gray-100;`
		1666	`color: $white;`
		1667	`}`
		1668
		1669	`&:hover {`
		1670	`background-color: var(--primary-color-200);`
		1671	`color: var(--main-theme-color);`
		1672	`text-decoration: none;`
		1673
		1674	`.theme-dark & {`
		1675	`background-color: $dm-gray-100;`
		1676	`color: $white;`
		1677	`}`
		1678	`}`
		1679
		1680	`.btn-msg--text:not(:empty) {`
		1681	`margin-left: .35rem;`
		1682	`font-size: 12px;`
		1683	`font-weight: $font-weight-bold;`
		1684	`text-decoration: none;`
		1685	`}`
		1686	`}`
		1687
		1688	`.btn-msg-danger {`
		1689	`background-color: transparent;`
		1690	`color: $gray-900;`
		1691
		1692	`.theme-dark & {`
		1693	`color: $dm-gray-900;`
		1694	`}`
		1695
		1696	`&:hover {`
		1697	`background-color: $red-100;`
		1698	`color: $red-700;`
		1699	`}`
		1700	`}`
		1701
		1702
		1703	`[data-region="unread-count"] {`
		1704	`position: absolute;`
		1705	`top: 28px;`
		1706	`right: 10px;`
		1707
		1708	`padding: 2px 6px;`
		1709
		1710	`font-size: $font-size-xs;`
		1711	`font-weight: $font-weight-bold;`
		1712
		1713	`background-color: $green-100;`
		1714	`border-radius: $btn-border-radius;`
		1715	`color: $green-600;`
		1716	`}`
		1717
		1718
		1719
		1720	`[data-region="empty-message-container"] {`
		1721	`.text-muted {`
		1722	`margin-bottom: 1rem;`
		1723	`}`
		1724	`}`
		1725
		1726	`.alert {`
		1727	`.text-muted {`
		1728	`color: inherit !important;`
		1729	`margin-bottom: 0.5rem;`
		1730	`}`
		1731	`}`
		1732
		1733	`.emoji-picker-container {`
		1734	`position: absolute;`
		1735	`top: 25px;`
		1736	`right: 0;`
		1737	`transform: translateY(-100%);`
		1738	`z-index: $zindex-tooltip;`
		1739
		1740	`@include media-breakpoint-down(xs) {`
		1741	`right: -1 * map-get($spacers, 2);`
		1742	`}`
		1743	`}`
		1744
		1745	`.emoji-auto-complete-container {`
		1746	`overflow: auto;`
		1747	`// Add a 50px buffer to account for scroll bars.`
		1748	`max-height: $picker-row-height + 50px;`
		1749	`transition: max-height .15s ease-in-out;`
		1750	`visibility: visible;`
		1751	`padding-bottom: 10px;`
		1752
		1753	`&.hidden {`
		1754	`display: block;`
		1755	`max-height: 0;`
		1756	`visibility: hidden;`
		1757	`overflow: hidden;`
		1758	`transition: max-height .15s ease-in-out, visibility 0s linear .15s, overflow 0s linear .15s;`
		1759	`}`
		1760	`}`
		1761
		1762	`.emoji-picker .emojis-container,`
		1763	`.emoji-picker .search-results-container {`
		1764	`max-height: 300px !important;`
		1765	`overflow-y: scroll;`
		1766	`padding: 0 16px;`
		1767	`}`
		1768
		1769
		1770
		1771	`//New Design`
		1772	`.rui-message-app-title {`
		1773	`font-size: 14px;`
		1774	`font-weight: $font-weight-medium;`
		1775	`color: $body-color;`
		1776
		1777	`.theme-dark & {`
		1778	`color: $dm-body-color;`
		1779	`}`
		1780	`}`
		1781
		1782	`.rui-message-container-md {`
		1783	`margin-left: 72px;`
		1784	`margin-right: 15px;`
		1785	`}`
		1786
		1787	`.rui-message-header-container {`
		1788	`padding: 15px;`
		1789	`}`
		1790
		1791	`.rui-message-hr {`
		1792	`margin: 0;`
		1793	`}`
		1794
		1795	`.rui-message-header-margin {`
		1796	`margin: 1rem .5rem 1rem 0;`
		1797	`}`
		1798
		1799	`.rui-message-search-wrapper {`
		1800	`position: relative;`
		1801	`}`
		1802
		1803	`.rui-message-search-input {`
		1804	`display: block;`
		1805	`padding: 10px 50px 10px 60px;`
		1806	`height: 56px;`
		1807
		1808	`background-color: $gray-200;`
		1809	`background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z'%3E%3C/path%3E%3C/svg%3E%0A");`
		1810	`background-position: left 19px top 50%;`
		1811	`background-repeat: no-repeat;`
		1812	`background-size: 24px;`
		1813
		1814	`border-radius: $btn-border-radius;`
		1815	`border: none;`
		1816	`box-shadow: none;`
		1817
		1818	`font-size: $font-size-base;`
		1819	`font-weight: $font-weight-medium;`
		1820	`color: $body-color-secondary;`
		1821
		1822	`.dir-rtl & {`
		1823	`background-position: right 19px top 50%;`
		1824	`}`
		1825
		1826	`.theme-dark & {`
		1827	`background-color: $dm-gray-200;`
		1828	`background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 19.25L15.5 15.5M4.75 11C4.75 7.54822 7.54822 4.75 11 4.75C14.4518 4.75 17.25 7.54822 17.25 11C17.25 14.4518 14.4518 17.25 11 17.25C7.54822 17.25 4.75 14.4518 4.75 11Z'%3E%3C/path%3E%3C/svg%3E%0A");`
		1829	`color: $dm-body-color-secondary;`
		1830	`}`
		1831	`}`
		1832
		1833	`.rui-message-search-input-btn {`
		1834	`display: flex;`
		1835	`position: absolute;`
		1836	`top: calc(50% - 15px);`
		1837	`right: 25px;`
		1838	`width: 30px;`
		1839	`height: 30px;`
		1840
		1841	`background-color: $white;`
		1842	`border-radius: $btn-border-radius;`
		1843	`border: none;`
		1844	`color: $body-color-secondary;`
		1845
		1846	`transition: $transition-base;`
		1847
		1848	`.theme-dark & {`
		1849	`background-color: $black;`
		1850	`color: $dm-body-color-secondary;`
		1851	`}`
		1852
		1853	`&:hover {`
		1854	`background-color: var(--main-theme-color);`
		1855	`color: var(--primary-color-100);`
		1856	`}`
		1857
		1858	`&.dir-rtl {`
		1859	`transform: rotate(-180deg);`
		1860	`}`
		1861	`}`
		1862
		1863	`.rui-message-accordion-wrapper {`
		1864	`position: relative;`
		1865	`transition: $transition-base;`
		1866
		1867	`&:after {`
		1868	`position: absolute;`
		1869	`width: calc(100% - 4px);`
		1870	`height: calc(100% - 4px);`
		1871	`top: 2px;`
		1872	`left: 2px;`
		1873	`border-radius: $btn-border-radius;`
		1874	`z-index: -1;`
		1875	`}`
		1876	`}`
		1877
		1878	`.rui-message-accordion-wrapper.expanded:after {`
		1879	`content: '';`
		1880	`box-shadow: 0 1px 1px rgb(0 0 0 / 4%), 0 2px 2px rgb(0 0 0 / 4%), 0 4px 4px rgb(0 0 0 / 4%), 0 8px 8px rgb(0 0 0 / 4%), 0 16px 16px rgb(0 0 0 / 4%);`
		1881	`}`
		1882
		1883	`.rui-message-accordion {`
		1884	`padding: 10px 15px 10px 20px;`
		1885
		1886	`height: 56px;`
		1887
		1888	`display: inline-flex;`
		1889	`justify-content: space-between;`
		1890	`align-items: center;`
		1891
		1892	`font-size: .875rem;`
		1893	`font-weight: $font-weight-medium;`
		1894	`color: $body-color;`
		1895	`text-align: left;`
		1896
		1897	`background-color: transparent;`
		1898	`border-width: 0 0 2px 0;`
		1899	`border-style: solid;`
		1900	`border-color: $border-color;`
		1901
		1902	`.theme-dark & {`
		1903	`color: $dm-body-color;`
		1904	`border-color: $dm-border-color;`
		1905	`}`
		1906
		1907	`&[aria-expanded="true"] {`
		1908	`border-color: transparent;`
		1909	`}`
		1910
		1911	`.rui-message-accordion-title {`
		1912	`margin-left: 40px;`
		1913	`}`
		1914
		1915	`.rui-message-accordion-toggle-icon {`
		1916	`color: $body-color-light;`
		1917	`transition: $transition-base;`
		1918
		1919	`.theme-dark & {`
		1920	`color: $dm-body-color-light;`
		1921	`}`
		1922
		1923	`.expanded & {`
		1924	`transform: rotate(180deg);`
		1925	`}`
		1926	`}`
		1927	`}`
		1928
		1929	`.rui-message-section-starred,`
		1930	`.rui-message-section-group,`
		1931	`.rui-message-section-private {`
		1932	`.rui-message-accordion-toggle .rui-message-accordion {`
		1933	`background-repeat: no-repeat;`
		1934	`background-size: 18px;`
		1935	`background-position: 45px;`
		1936	`}`
		1937	`}`
		1938
		1939	`.rui-message-section-starred .rui-message-accordion-toggle .rui-message-accordion {`
		1940	`background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 4.75L13.75 10.25H19.25L14.75 13.75L16.25 19.25L12 15.75L7.75 19.25L9.25 13.75L4.75 10.25H10.25L12 4.75Z'%3E%3C/path%3E%3C/svg%3E%0A");`
		1941
		1942	`.theme-dark & {`
		1943	`background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 4.75L13.75 10.25H19.25L14.75 13.75L16.25 19.25L12 15.75L7.75 19.25L9.25 13.75L4.75 10.25H10.25L12 4.75Z'%3E%3C/path%3E%3C/svg%3E%0A");`
		1944	`}`
		1945	`}`
		1946
		1947	`.rui-message-section-group .rui-message-accordion-toggle .rui-message-accordion {`
		1948	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.78168 19.25H13.2183C13.7828 19.25 14.227 18.7817 14.1145 18.2285C13.804 16.7012 12.7897 14 9.5 14C6.21031 14 5.19605 16.7012 4.88549 18.2285C4.773 18.7817 5.21718 19.25 5.78168 19.25Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.75 14C17.8288 14 18.6802 16.1479 19.0239 17.696C19.2095 18.532 18.5333 19.25 17.6769 19.25H16.75'%3E%3C/path%3E%3Ccircle cx='9.5' cy='7.5' r='2.75' stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/circle%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.75 10.25C16.2688 10.25 17.25 9.01878 17.25 7.5C17.25 5.98122 16.2688 4.75 14.75 4.75'%3E%3C/path%3E%3C/svg%3E%0A");
		1949
		1950	`.theme-dark & {`
		1951	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.78168 19.25H13.2183C13.7828 19.25 14.227 18.7817 14.1145 18.2285C13.804 16.7012 12.7897 14 9.5 14C6.21031 14 5.19605 16.7012 4.88549 18.2285C4.773 18.7817 5.21718 19.25 5.78168 19.25Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15.75 14C17.8288 14 18.6802 16.1479 19.0239 17.696C19.2095 18.532 18.5333 19.25 17.6769 19.25H16.75'%3E%3C/path%3E%3Ccircle cx='9.5' cy='7.5' r='2.75' stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3C/circle%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.75 10.25C16.2688 10.25 17.25 9.01878 17.25 7.5C17.25 5.98122 16.2688 4.75 14.75 4.75'%3E%3C/path%3E%3C/svg%3E%0A");
		1952	`}`
		1953	`}`
		1954
		1955	`.rui-message-section-private .rui-message-accordion-toggle .rui-message-accordion {`
		1956	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5'%3E%3C/path%3E%3C/svg%3E%0A");
		1957
		1958	`.theme-dark & {`
		1959	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5.75 11.75C5.75 11.1977 6.19772 10.75 6.75 10.75H17.25C17.8023 10.75 18.25 11.1977 18.25 11.75V17.25C18.25 18.3546 17.3546 19.25 16.25 19.25H7.75C6.64543 19.25 5.75 18.3546 5.75 17.25V11.75Z'%3E%3C/path%3E%3Cpath stroke='#{url-friendly-colour($dm-body-color)}' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M7.75 10.5V10.3427C7.75 8.78147 7.65607 7.04125 8.74646 5.9239C9.36829 5.2867 10.3745 4.75 12 4.75C13.6255 4.75 14.6317 5.2867 15.2535 5.9239C16.3439 7.04125 16.25 8.78147 16.25 10.3427V10.5'%3E%3C/path%3E%3C/svg%3E%0A");
		1960	`}`
		1961	`}`
		1962
		1963	`.rui-message-badge {`
		1964	`background-color: $gray-100;`
		1965	`border-radius: $btn-border-radius;`
		1966
		1967	`display: inline-flex;`
		1968	`align-items: center;`
		1969
		1970	`color: $gray-700;`
		1971
		1972	`overflow: hidden;`
		1973
		1974	`.theme-dark & {`
		1975	`background-color: $dm-gray-100;`
		1976	`color: $dm-gray-700;`
		1977	`}`
		1978
		1979	`.rui-message-badge-icon {`
		1980	`padding: 4px 6px;`
		1981	`background-color: $gray-200;`
		1982	`color: $gray-700;`
		1983
		1984	`.theme-dark & {`
		1985	`background-color: $dm-gray-200;`
		1986	`color: $dm-gray-700;`
		1987	`}`
		1988	`}`
		1989
		1990	`.rui-message-total-unread,`
		1991	`.rui-message-total-count {`
		1992	`padding: 5px 12px;`
		1993	`font-weight: $font-weight-medium;`
		1994	`}`
		1995
		1996	`.rui-message-total-unread {`
		1997	`background-color: $green-100;`
		1998	`color: $green-600;`
		1999	`}`
		2000	`}`
		2001
		2002
		2003	`.rui-message-list-item {`
		2004	`margin: 10px 0;`
		2005	`position: relative;`
		2006	`border-radius: $btn-border-radius;`
		2007
		2008	`&:first-of-type {`
		2009	`margin-top: 0;`
		2010	`}`
		2011
		2012	`&:after {`
		2013	`content: '';`
		2014	`background-color: $border-color;`
		2015
		2016	`height: 1px;`
		2017	`width: calc(100% + 12px);`
		2018
		2019	`position: absolute;`
		2020	`left: -6px;`
		2021	`bottom: -10px;`
		2022
		2023	`.theme-dark & {`
		2024	`background-color: $dm-border-color;`
		2025	`}`
		2026	`}`
		2027
		2028	`&:last-child {`
		2029	`&:after {`
		2030	`display: none;`
		2031	`}`
		2032	`}`
		2033
		2034	`&:hover {`
		2035	`background-color: $gray-100;`
		2036	`text-decoration: none;`
		2037
		2038	`.theme-dark & {`
		2039	`background-color: $dm-gray-100;`
		2040	`}`
		2041	`}`
		2042	`}`
		2043
		2044	`.rui-msg-fullname {`
		2045	`font-size: $font-size-sm;`
		2046	`color: $body-color;`
		2047	`font-weight: $font-weight-medium;`
		2048
		2049	`.theme-dark & {`
		2050	`color: $dm-body-color;`
		2051	`}`
		2052	`}`
		2053
		2054	`.rui-last-message-date {`
		2055	`margin-right: 10px;`
		2056	`display: inline-flex;`
		2057	`align-items: flex-start;`
		2058
		2059	`font-size: $font-size-xs;`
		2060	`font-weight: $font-weight-normal;`
		2061	`color: $body-color-light;`
		2062
		2063	`line-height: 1;`
		2064
		2065	`.theme-dark & {`
		2066	`color: $dm-body-color-light;`
		2067	`}`
		2068
		2069	`.rui-last-message-date-icon {`
		2070	`line-height: 1;`
		2071	`margin-right: .25rem;`
		2072	`}`
		2073	`}`
		2074
		2075	`.rui-last-message-user-you,`
		2076	`.rui-last-message-user-sender {`
		2077	`margin-right: .35rem;`
		2078	`padding: 3px;`
		2079
		2080	`display: inline-flex;`
		2081
		2082	`border-radius: $btn-border-radius;`
		2083	`}`
		2084
		2085	`.rui-last-message-user-you {`
		2086	`background-color: var(--primary-color-100);`
		2087	`color: var(--main-theme-color);`
		2088	`}`
		2089
		2090	`.rui-last-message-user-sender {`
		2091	`background-color: $gray-100;`
		2092	`color: $gray-600;`
		2093
		2094	`.theme-dark & {`
		2095	`background-color: $dm-gray-100;`
		2096	`color: $dm-gray-600;`
		2097	`}`
		2098	`}`
		2099
		2100	`.rui-message-heading {`
		2101	`margin: 0;`
		2102	`font-size: 1.125rem;`
		2103	`color: $body-color;`
		2104
		2105	`.theme-dark & {`
		2106	`color: $dm-body-color;`
		2107	`}`
		2108	`}`
		2109
		2110	`.badge-msg {`
		2111	`margin-left: 5px;`
		2112	`padding: 3px 0 3px 5px;`
		2113	`font-size: 12px;`
		2114	`font-weight: $font-weight-bold;`
		2115	`color: $green-600;`
		2116	`}`
		2117
		2118	`.rui-contact-blocked {`
		2119	`position: absolute;`
		2120	`right: 5px;`
		2121	`top: 5px;`
		2122	`}`
		2123
		2124	`.rui-contact-icon-blocked {`
		2125	`display: flex;`
		2126	`align-items: center;`
		2127	`justify-content: center;`
		2128
		2129	`width: 24px;`
		2130	`height: 24px;`
		2131
		2132	`border-radius: $btn-border-radius;`
		2133	`background-color: $red-100;`
		2134	`color: $red-700;`
		2135
		2136	`.icon {`
		2137	`display: flex;`
		2138	`align-items: center;`
		2139	`justify-content: center;`
		2140
		2141	`font-size: 13px;`
		2142	`}`
		2143	`}`
		2144
		2145	`.rui-contact-request-count {`
		2146	`position: absolute;`
		2147	`right: 2px;`
		2148	`top: 2px;`
		2149
		2150	`background-color: $red-600;`
		2151	`width: 6px;`
		2152	`height: 6px;`
		2153	`border-radius: 6px;`
		2154
		2155	`animation-name: alertDot;`
		2156	`animation-duration: 2s;`
		2157	`animation-iteration-count: infinite;`
		2158	`animation-timing-function: ease-in-out;`
		2159	`}`
		2160
		2161	`.list-group-item-blocked {`
		2162	`background-color: $red-100;`
		2163	`border-color: $red-200;`
		2164
		2165	`&:hover {`
		2166	`border-color: $red-300;`
		2167	`}`
		2168	`}`
		2169
		2170	`// Message Conversation`
		2171	`.rui-message-date {`
		2172	`display: block;`
		2173
		2174	`position: relative;`
		2175	`padding: 20px 0;`
		2176
		2177	`font-weight: $font-weight-medium;`
		2178	`font-size: $font-size-xs;`
		2179	`color: $body-color-light;`
		2180	`text-align: center;`
		2181
		2182
		2183	`.theme-dark & {`
		2184	`color: $dm-body-color-light;`
		2185	`}`
		2186
		2187	`&:before {`
		2188	`content: '';`
		2189	`background-color: $border-color;`
		2190	`width: 40px;`
		2191	`height: 1px;`
		2192
		2193	`position: absolute;`
		2194	`top: 0;`
		2195	`right: calc(50% - 20px);`
		2196
		2197
		2198	`.theme-dark & {`
		2199	`background-color: $dm-border-color;`
		2200	`}`
		2201	`}`
		2202	`}`
		2203
		2204	`.rui-day-container {`
		2205	`padding: 15px;`
		2206	`}`
		2207
		2208	`.rui-message-text {`
		2209	`margin-right: 2rem;`
		2210	`margin-left: 52px;`
		2211	`margin-top: .35rem;`
		2212	`padding: .5rem.75rem;`
		2213	`background-color: $gray-100;`
		2214	`border-radius: 0 $border-radius $border-radius $border-radius;`
		2215	`color: $body-color;`
		2216
		2217	`.theme-dark & {`
		2218	`background-color: $dm-gray-100;`
		2219	`color: $dm-body-color;`
		2220	`}`
		2221
		2222	`p {`
		2223	`word-break: break-word;`
		2224
		2225	`img {`
		2226	`max-width: 100%;`
		2227	`}`
		2228	`}`
		2229
		2230	`.send & {`
		2231	`margin-left: 20px;`
		2232	`margin-right: 0;`
		2233	`background-color: var(--primary-color-100);`
		2234	`border-radius: $border-radius 0 $border-radius $border-radius;`
		2235
		2236	`.theme-dark & {`
		2237	`background-color: $dm-gray-300;`
		2238	`color: $dm-body-color;`
		2239	`}`
		2240	`}`
		2241	`}`
		2242
		2243	`.rui-message-footer-container {`
		2244	`padding: 15px;`
		2245	`}`
		2246
		2247	`.rui-messageselected {`
		2248	`padding: .25rem;`
		2249	`border: 2px dashed $border-color;`
		2250	`border-radius: $btn-border-radius;`
		2251
		2252
		2253	`.theme-dark & {`
		2254	`border-color: $dm-border-color;`
		2255	`}`
		2256	`}`
		2257
		2258	`.rui-textarea {`
		2259	`padding: 20px;`
		2260	`box-shadow: none;`
		2261	`border: 0!important;`
		2262	`background-color: transparent!important;`
		2263	`font-size: $font-size-base;`
		2264	`}`
		2265
		2266	`@keyframes alertDot {`
		2267	`0% {`
		2268	`opacity: 1;`
		2269	`}`
		2270
		2271	`50% {`
		2272	`opacity: .4;`
		2273	`}`
		2274
		2275	`100% {`
		2276	`opacity: 1;`
		2277	`}`
		2278	`}`

Proyectos de Subversion Moodle

(root)/theme/universe/scss/moodle/message.scss – Rev 1