Example/autocstyleExmpl.css - main - nude/Auto-Table-Of-Contents

Example/autocstyleExmpl.css
298 строк5 KB
evgeniu
added files
08 ноя 2024, 17:35
08 ноя 2024, 17:35d8c53c6
:root {

	--mainContentWidth:900px;

	--tableOfContentsHpadd:10px;

	--baseFontSize: 18rem;
	--baseLineHeight: 20rem;
	--baseFontSizeMultiplier: 0.35vw;
	--baseLineHeightMultiplier: 0.5vw;
	--menuFontSizeMultiplier: 0.55vw;
	--menuLineHeightMultiplier: 1vw;
	
	--BackgrColorLight: #ddd;
	--TextColorLight: #222;
	--BackgrColorDark: #222;
	--TextColorDark: hsl(0, 0%, 85%);
	--TextColorDarkHover: hsl(0, 0%, 65%);
	--TextColorDarkActive: hsl(0, 0%, 50%);

	--borderColor:hsl(0, 0%, 25%);
	--borderRadius:8px;

	color-scheme: dark light;
	scroll-behavior: smooth;
	scrollbar-width: var(--scrollbarWidth);
	scrollbar-color: hsl(0 0% 40%) hsl(0 0% 30%);
}

.dark {
	color-scheme: dark;
	color: var(--TextColorDark);
	background-color: var(--BackgrColorDark);
}
.dark pre {
	color: var(--TextColorLight);
}
.dark a{
	color: var(--TextColorDark);
}
.dark a:hover{
	color: var(--TextColorDarkHover);
}
.dark a:active{
	color: var(--TextColorDarkActive);
}

.light {
	color-scheme: light;
	color: var(--TextColorLight) !important;
	background-color: var(--BackgrColorLight) !important;
}
.light .codeWrapper100{
	background: hsl(160 30% 10%);
	color: var(--TextColorDark);
}
.light a{
	color: var(--TextColorLight);
}
.light a:hover{
	color: var(--mainAccentColor);
}

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
	text-decoration: none;

	color: var(--TextColorDark);
}

:root,
html,
body {
	/* postcss-scrollbar will add the -webkit version automatically! */
}

a:hover,
a:active {
	outline-width: 0;
}
a:hover {
	color: var(--TextColorDarkHover);
}
a:active{
	color: var(--TextColorDarkActive);
}

*,
*:after,
*:before {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
	scrollbar-width: var(--scrollbarWidth);
}

html {
	box-sizing: border-box;
	font-size: 1px !important;
	overflow-x: hidden;
}

body {
	font: normal 16rem/23rem 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	font-size: calc(var(--baseFontSize) + var(--baseFontSizeMultiplier));
	line-height: calc(var(--baseLineHeight) + var(--baseLineHeightMultiplier));
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	padding: 20px 10px 20px 10px;
	font-weight: 400;
}

h1 {
	font-size: calc(var(--baseFontSize) + 2vw);
}
h2 {
	font-size: calc(var(--baseFontSize) + 1.6vw);
}
h3 {
	font-size: calc(var(--baseFontSize) + 1.4vw);
}
h4 {
	font-size: calc(var(--baseFontSize) + 1.2vw);
}
h5 {
	font-size: calc(var(--baseFontSize) + 0.8vw);
}
h6 {
	font-size: calc(var(--baseFontSize) + 0.4vw);
}


.row {
	display: flex;
	flex-flow: row wrap;
}

.column {
	display: flex;
	flex-flow: column wrap;
}

.flex1 {
	flex: 1 0;
}

.flex10 {
	flex: 10 0;
}

.justifyCentr {
	justify-content: center;
	align-items: center;
}

.justifyBetw {
	justify-content: space-between;
	align-items: center;
}
.justifySpcEvenly {
	justify-content: space-evenly;
	align-items: center;
}
.justifySpcEvenlyO {
	justify-content: space-evenly;
}

.alignCentr {
	align-items: center;
}

.txtAlgnC {
	text-align: center;
}

.txtAlgnL {
	text-align: left;
}

.txtAlgnR {
	text-align: right;
}

.visible{
	display: inherit !important;
}
.hidden{
	display: none;
}
.wrapper100{
	width: 100%;
}


.main{
	max-width: calc(var(--mainContentWidth) + 10vw);
	margin: 0 auto;
	display: flex;
	flex-flow: column wrap;
}




/*	tableOfContents	*/

.tableOfContents{
	max-width: calc(1800px + 10vw);
	padding: 20px 1em;
	margin: 0 auto;
}

.tableOfContents-list{
	display: flex;
	padding: 20px;
	overflow: hidden;
	border: 1px solid var(--borderColor);
	border-radius: var(--borderRadius);
}

.tableOfContents-btn{
	width: 100%;
	padding: 10px 10px;
	cursor:pointer;

}

.tableOfContents-anchor{
	color: hsl(200 80% 60%) !important;
	cursor: pointer;
}
.tableOfContents-anchor:hover{
	color: hsl(200 80% 40%) !important;
}
.tableOfContents-anchor{
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0 10px;
}
.tocH1{}
.tocH2{
	padding-left: calc(var(--tableOfContentsHpadd) * 2);
}
.tocH3{
	padding-left: calc(var(--tableOfContentsHpadd) * 3);
}
.tocH4{
	padding-left: calc(var(--tableOfContentsHpadd) * 4);
}
.tocH5{
	padding-left: calc(var(--tableOfContentsHpadd) * 5);
}
.tocH6{
	padding-left: calc(var(--tableOfContentsHpadd) * 6);
}


/*----------------*/



@media (prefers-color-scheme: dark) {
	:root {
		color: var(--TextColorDark);
		background-color: var(--BackgrColorDark);
	}
}


@media (prefers-reduced-motion: no-preference) {
	:root {
		scroll-behavior: smooth;
	}
}

@media (min-width: 4000px) {

	
}
@media (min-width: 2500px) {

	.tableOfContents{
		max-width: calc(1800px + 20vw);
	}
	.main{
		max-width: calc(900px + 20vw);
	}

}