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

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

Proyectos de Subversion Moodle

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