cleanwhite | web.telegram.org by quaritexa

/* ==UserStyle==
@name         cleanwhite | web.telegram.org
@version      2022.07.14
@namespace    userstyles.world/user/quaritexa
@description  just clean and wihte
@author       quaritexa
@license      No License
==/UserStyle== */
@-moz-document domain("web.telegram.org") {

	.SymbolMenu {
		scale: 1.3;
		position: absolute;
		left: 0;
	}
	
	:root {
		--qCorner: 6px;
		--qNoCorner: 0;

		--qColor: --color-text;

		--qFont: Georgia;
		--qSize: 1.3rem;

		--qMsgWidth: 50vw;
		--qOwnMsgWidth: 35vw;

		--qFrame: #fff2;
		--qHighlight: #5555;

		--border-radius-default: var(--qCorner);
		--border-radius-messages: var(--qCorner);

		--border-radius-default-small: var(--qNoCorner);
		--border-radius-messages-small: var(--qNoCorner);
		/*
		--border-bottom-left-radius: var(--qCorner);
		--border-bottom-right-radius: var(--qCorner);
		--border-top-left-radius: var(--qCorner);
		--border-top-right-radius: var(--qCorner); 
		*/
	}

	.src-components-middle-FloatingActionButtons-module__root {
		--base-bottom-pos: 4rem !important;
	}

	/* INIT: */
	/* bold */
	strong {
		font-weight: bold;
	}
	
	/* hide */
	.svg-appendix {
		display: none;
	}

	/* bg, border */
	.Button.secondary,
	.SearchInput,
	#message-compose,
	#MiddleColumn {
		background: none;
		border: none;
		box-shadow: none;
	}

	/* shadow */
	.MiddleHeader,
	.TabList,
	.message-content.has-shadow {
		box-shadow: none;
	}

	/* avatars */
	.Avatar {
		background: #555;
		font-weight: normal;
	}
		
	/* CONF: */
	/* page/bg */
	.src-components-common-UiLoader-module__root::before,
	.src-components-middle-MiddleColumn-module__background::before,
	.src-components-middle-MiddleColumn-module__background::after,
	_ {
		_background-image: none !important;
		opacity: .5;
	}

	/* all/border radius */
	.Badge,
	.MiddleHeader .back-button .unread-count,
	.MiddleHeader .HeaderPinnedMessage .inline-button,
	.Reactions .Button,
	.SearchInput,
	.Tab .badge,
	_ {
		border-radius: var(--qCorner);
	}

	.Avatar.size-meduim,
	.Avatar.size-medium > .Avatar__media,
	.Avatar.size-large,
	.Avatar.size-large > .Avatar__media,
	.MiddleHeader .Avatar,
	.Avatar.size-micro,
	.Avatar.size-micro > .Avatar__media,
	_ {
		border-radius: calc(var(--qCorner)/2);
	}
	
	/* sidebar/folders */
	.chat-list {
		padding: 0;
	}
	
	#LeftColumn-main .ChatFolders {
		flex-direction: row;
		margin: 0 !important;
	}

	#LeftColumn-main .ChatFolders .TabList {
		align-items: stretch;
		flex-direction: column;
		margin: 0;
		padding: 0;
		width: auto;
		display: inline-flex;
	}
	
	#LeftColumn-main .ChatFolders .Tab {
		justify-content: left;
		padding: .3rem .3rem .3rem calc(.3rem + 2px);	
		border-left: 2px solid transparent;
		line-height: 1.5rem;
	}
	
	#LeftColumn-main .ChatFolders .Tab > span {
		font-size: .8rem;
		padding: 0;
		padding-right: .8rem;
		width: 100%;
	}

	#LeftColumn-main .ChatFolders .TabList .Tab--active {
		border-left: 2px solid var(--color-primary);
	}
	
	.Tab__badge--active {
		background: none !important;
		color: var(--color-primary) !important;
	}
	
	.Tab .badge {
		background: none;
		border-radius: calc(var(--qCorner) / 3);
		color: var(--color-gray);
		height: auto;
		line-height: .3rem;
		margin: 0;
		min-width: auto;
		padding: 0;
		position: absolute;
		right: 0;
	}
	
	#LeftColumn-main .ChatFolders .Tab .platform {
		border-radius: var(--qNoCorner);
		bottom: 0;
		display: none;
		height: 1px;
	}
	
	/* sidebar/icon */
	.Chat .info .icon-muted {
		opacity: .5;
		scale: .8;
	}

	/* messages/header */
	.MiddleHeader,
	.MiddleHeader .HeaderPinnedMessage-wrapper {
		background: initial;
	}

	/* messages/message */
	.text-content {
		font-family: var(--qFont);
		font-size: var(--qSize);
		opacity: .8;
	}

	#MiddleColumn .middle-column-footer,
	.MessageList .messages-container {
		margin: 0;
		max-width: 100%;
		width: 100%;
	}

	.Message,
	.MessageList {
		--max-width: var(--qMsgWidth);
		margin-bottom: 1px;
	}
	
	.Message > .message-content-wrapper {
		transform: initial;
	}
	
	.message-content {
  	background-color: var(--color-background); 
		_border: 1px solid var(--qFrame);
		width: 50vw !important;
	}
	.full-media,
	.message-content.media {
		border-radius: var(--qNoCorner) !important;
	}

	/* messages/avatar */
	.Message .Avatar__media,
	.Message .Avatar.size-small {
		border-bottom-right-radius: 0;
	}

	.Message > .Avatar,
	.Message .message-select-control {
		_top: 0;
	}

	/* messages/quote */
	.WebPage::before,
	.EmbeddedMessage::before,
	.message-content:not(.custom-shape) .forwarded-message::before {
		opacity: .3;
		width: 1px;
	}
	.EmbeddedMessage {
		font-size: .8rem;
	}

	/* messages/own */
	.own .message-content {
		/* background-color: transparent !important; */
	  /* border: 1px solid var(--qFrame); */
		max-width: var(--qOwnMsgWidth);
	}

	/* messages/reaction */
	.Reactions .Button {
		border-width: 1px;
	}
	
	/* messages/input */
	.MessageList {
		margin: 0;
	}

	#message-compose .svg-appendix {
		display: none;
	}

	.Composer {
		margin-bottom: 0;
	}

	#MiddleColumn .middle-column-footer::before {
		display: none;
	}

	/* messages/code */
	.text-entity-code {
		font-family: "PragmataPro Mono", var(--font-family-monospace);
		font-size-adjust: initial;
	}
}