documon/template/assets/css/pages.less

A documentation system for mortals. Use with any language.

/*
Part of Documon.
Copyright (c) Michael Gieson.
www.documon.net
 */

/*

337ab7  bootstrap blue
A3A3A3  light grey
5B5B5B  medium grey 
FF00E3	hot pink

*/

@grey-text : #b6b6b6;
@grey-block : #8e8e8e;
@light-grey-line: #ECECEC;

html,
body {
    width: 100%;
    height: 100%;
    /*font-family: "Inconsolata", "Monoco", "Lucida Grande", "Courier New", Courier, monospace;
    font-family: Helvetica, Arial, sans-serif;
    font-family: 'FiraSans';*/

    font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
    color : #333333;
}

a {
	color : #4100C5;
}
a:link {
	/*text-decoration: underline;
	text-decoration-color : #CCCCCC;*/
	text-decoration: none;
	border-bottom: 1px solid @light-grey-line;
}
a:hover {
	color : #D200FE;
	/*text-decoration-color : #D200FE; */
	border-bottom-color: #D200FE;
}

hr {
	background-color: @light-grey-line; /* find border-bottom elsewhere */
  	height : 1px;
	border: 0;
}

p {
    margin: 0 0 1em 0;
}

h1, h2, h3, h4, h5, h6 {
	margin-top : 2em;
	font-weight: 200;
}

h1 {
	font-size : 2em;
}

h2 {
	font-size : 1.7em;
}

h3 {
	font-size : 1.5em;
}

h4 {
	font-size : 1.4em;
}

h5 {
	font-size : 1.3em;
}

h6 {
	font-size : 1.2em;
}

ul, li, table tr {
    margin: 0;
    padding: 0;
}

ul {
    padding-left: 1em;
    padding-bottom: 1em;
    list-style: none;
    /*text-indent: -1.5em;*/
}

ul li {
    padding-left: 1em;
}

ul li:before {
    content: '\2022  ';
}


table {
    border-collapse: collapse;
    border: none;
    outline: none;
}

/* head cells */
table th {
	white-space : nowrap;
	background-color : #EFEFEF;
	border : 1px solid @light-grey-line;
	padding : 0 10px 0 10px;
	text-align : left;
}

p > code {
    background-color: #EFEFEF;
    font-size: 12px;
    color: #0036c5;
    padding: 2px 5px 2px 5px;
    border-radius: 3px;
}

// table td {
// 	padding : 0 0px 0 10px;
//     border: 0;
//     vertical-align: top;
//     text-align: left;
// }

/* prevents evenly spaced cells (horizontially), and makes the last cell the largest */
// table td:last-child {
//     width: 100%;
// }

/* pick alternating or underline */
/* underline */
table tr {
    border-bottom: solid 1px @light-grey-line;
}
/* alternating 
table tr:nth-child(even) {
   background-color: #F9F9F9;
}
*/

table tr:last-child {
    border-bottom: none;
}

pre {
	white-space : pre !important; /* over-rule prettyprint */
	overflow-x : auto;
    font-size: 11.5px;
    line-height: 1.3em;
    padding : 1em;
	font-family : Monaco, Consolas, "Andale Mono WT", "Lucida Console", "Lucida Sans Typewriter", "DejaVu SansMono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
}

/* give some space after (couldn't just add to pre because prettyprint is consuming css? )*/
pre + p, pre + span, pre + div {
	margin-top : 1em;
}
	

dl {
	margin : 1em 1em 1em 2em;
}
dl dt {
	font-weight : bold;
}
dl dd {
	margin-left: 2em;
	margin-bottom: 1em;
}

blockquote {
    border: 1px solid #f3d97b;
    background-color: #fffdeb;
    border-radius: 3px;
    padding: 10px;
    margin: 0 0 10px 0;
    p {
        margin-bottom : 0px;
    }
}

/* -----------------------------------------------------------------
Page
----------------------------------------------------------------- */
.page {
	padding : 0 20px 200px 20px; /* white space please */
	min-height: 100%;
  	margin-bottom: -100px;  /* equal to footer height */
}
.page:after {
  content: "";
  display: block;
}
.footer, .page:after {
  height: 100px; /* equal to page margin-bottom */
}
.footer {
	border-top : 1px solid #000000;
	background: #444;
	width : 100%;
	padding-top : 40px;
	text-align : center;
	font-size : 12px;
	color : #949494;
}

.footer a {
	color : #949494;
}


/* -----------------------------------------------------------------
Headings -- for each kind of section
----------------------------------------------------------------- */

.part-properties > .heading-part,
.part-events > .heading-part,
.part-methods > .heading-part
 {

	/*
	background-color : #FDFDFD;
	border-radius : 10px;
	*/
	font-size : 2em;
	border-bottom : 1px solid @light-grey-line;
	padding : 0 0 0.3em 0;
	margin-top : 1em;
	color: #909090;
	font-weight: bold;
}


.heading-returns,
.heading-seeAlso,
.source-file,
.heading-example,
.part-parameters > .heading-part {
	margin : 2em 0 2em 0;
	/* background-color: #F6FBFF; */
	// border-bottom: 1px solid #e6e6e6;
	padding: 2px;
	/* border-radius: 3px; */
	color: #a2a2a2;
    text-transform: uppercase;
    font-weight : bold;
    font-size : 0.8em;
	
}
.heading-returns, .heading-seeAlso, .heading-example, {
    margin : 2em 0 0em 0;
}


.heading-example {
	margin : 2em 0 1em -2em;
}

/* method parameter that is an object with sub.props */
.part-parameters > .heading-part {
	display : block;
}

.part-parameters > .member {
	display : block;
	padding-top :0;
}

/*
.heading-example {
	font-weight : bold;
}

.example-block {
    margin-bottom: 2em;
}
*/

/* "Extendish" stuff (e.g. inherits, extends, requires, etc) */
.meta-block {
	color : #B5B5B5;
	margin-bottom : 20px;
}
.meta-block a {
	color : #B5B5B5;
	border-bottom : 0;
}
.meta-block-klass {
	color : #3294DF;
}
.meta-line {}

.meta-line:before {
	font-size : 1em;
	line-height : 1.6em;
	content : "\21B3  "; /* \25BA */
}

/* Each meta-line and meta-lable has the kind in the className definition (e.g. "meta-line extends" */
.overrides, .impliments, .extends, .inherits, .requires {}

/* The word "inherits, extnds", etc */
.meta-label {
	display : inline-block;
	min-width : 70px;
}

/* The super class (e.g. the link) */
.meta-target {}


/* -----------------------------------------------------------------
The "main" class definition
----------------------------------------------------------------- */
.main-method {
	background-color : #FBFBFB;
	border : 1px solid @light-grey-line;
	border-radius : 10px;
}

.main-method {
	margin-top : 30px;
	padding : 0 20px 20px 20px;
}

/* Make the "class" constructor large liek a heading */
.main-method > .part-methods > .member > .member-name {
    margin-bottom: 0.5em;
    margin-top: 0.8em;
    font-size: 2em;
}

.main-method > .part-methods > .member .member-description {
	padding-left : 0
}


/* A wrapper for all the sub-parts (Properties, Events, Methods) */

.parts {}


/* wrapper divs for each kind of member */

.part-properties {}

.part-events {}

.part-methods {}

.part-parameters {
}




.part-properties .member-name {
    //color: #248885;
    color: #000000;
}

.part-events .member-name {
    color: #936A17;
}

.part-methods .member-name {
    color: #000000;
    //color: #D311DC;
    /*  1E67D7  146BC5  0391F9  B847E4  633372  B847E4 */
}

.part-parameters .member-name {
	color: #0F6DC3;
}

.method-arguments {
    color: #0F6DC3;
}

.method-arg-optional {
	color : #5080B5;
}

.method-arg-optional:before {
	content : '[';
}
.method-arg-optional:after {
	content : ']';
}

/* Uuuuhhh, couldn't get first-child 
.method-arg-optional:first-child:before {
	content : '[';
}
.method-arg-optional:last-child:after {
	content : ']';
}
*/


/* ----------------------------------------------------------------- 
members
- include properties, methods and events 
----------------------------------------------------------------- */

.member {
    padding-left: 20px;
    padding-top: 1.5em;
    /*padding-bottom: 2em;*/
    border-bottom : 1px solid @light-grey-line;
}

/* remove the line from the last one */
.part-methods > .member:last-child, .member:last-child {
    border-bottom: 0;
}

/* A little seperation in the table cells is nicer */
// .member table td {
// 	padding-top : 5px;
// 	padding-right : 10px;
// 	/*padding-bottom : 2px; */
// }

/* Gives some space between methods. Attemptign to do this on regular .member whacks out a lot of thigns singe .member is used extensively everywhere. */
.part-methods > .member {
	padding-bottom : 40px;
    border-bottom: 1px solid @light-grey-line;
}

/*
.member table td p:first-of-type, .member table td div {
	display : inline;
}


.member table td p:last-of-type {
	padding : 0;
	margin : 0;
}
*/

/* mem-des > mem-des covers "Returns", which is the second mem-des */
.member > .member-description, .member-description > .member-description {
	padding-left : 20px;
}




/* the function shown as it would appear in code */

.member-name {  
	//-webkit-font-smoothing: antialiased;
    //-moz-osx-font-smoothing: grayscale;
    /*font-family: "Inconsolata", "Monoco", "Lucida Grande", "Courier New", Courier, monospace;*/
    //font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    //font-weight: normal;
    //font-size : 1.5em;
    font-weight: bold;
    color: #337ab7;
    margin-bottom: 1em;
    //margin-top: 1em;
    white-space: nowrap;
    /*border-bottom : 1px solid @light-grey-line;*/
}

.member-name a {
	text-decoration : none;
}

.clearfix::after { 
  content: "";
  display: block; 
  clear: both;
}

.member-name-left {
	float : left;
}
.member-name-right {
	float : right;
}

.member-file, .member-line-number {
	font-size : 10px;
	color : #8C8C8C;
}
.member-line-number:before {
	font-weight : bold;
	content : ' - line: ';
}
.member-file {
	font-weight : normal;
	font-size : 10px;
	color : #8C8C8C;
}

.param-description {
	border-bottom: 1px solid @light-grey-line;
    margin-bottom: 1em;
}
.param-meta {
	display : block;
}

.member-block-group {

    // display: grid;
    // grid-template-columns: max-content 1fr max-content; /* Left column adjusts to the widest content, center auto-expands */
    // gap: 0px 10px; /* Adjust as needed for spacing between columns */
    // width: 100%;

    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0px 10px;
    width: 100%;
    
    .member-block {

        display: contents; /* Allows each row to have its own content */
        .member-block-left {
            grid-column: 1;
            //border : 1px solid @light-grey-line;
            white-space: nowrap;
        }
        .member-block-center {
            grid-column: 2;
            //border : 1px solid @light-grey-line;
        }
        // .member-block-right {
            
        //     grid-column: 3;
        //     //border : 1px solid #FF0000;
        //     white-space: nowrap;
        //     span {
        //         display : inline-block;
        //         position : relative;
        //         // right : 0px;
        //     }
        // }
        
    }
}


/* -----------------------------------------------------------------
flags + type (a span inside the member-name)
- Used to identify variable definitions such as static, public, private, protected, inheretence.
----------------------------------------------------------------- */
.flag, .type {
	display:inline;
    margin-right : 0.5em;
	//vertical-align : text-top;
    text-align : center;
}
.flag, .type {
    color: #FFFFFF;
	font-weight : bold;
    border-radius: 2px;
    font-size: 9.5px;
    text-transform: uppercase;
    padding: 1px 3px 1px 3px;
    text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*font-family: "Inconsolata", "Monoco", "Lucida Grande", "Courier New", Courier, monospace;*/
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    
}

/* magic to get the box to center vertically */
.flag:after, .type:after {
	content : ' ';
	font-size : 5px;
	line-height : 0;
}



.type {
    background : @grey-block;
}
// .type {
//   /* -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale; */
// 	/*font-family: "Inconsolata", "Monoco", "Lucida Grande", "Courier New", Courier, monospace;*/
//     /* font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; */
//     white-space: nowrap;
//     text-transform: uppercase;
// 	color: #ffffff;
//     border-radius : 3px;
//     background : @grey-block;

//     padding : 2px 5px 2px 5px;
//     font-size : 0.7em;

// 	/*vertical-align : text-bottom;
//      capitalize  uppercase  lowercase */
// }

// .type:before {
//     content: '<';
// }

// .type:after {
//     content: '>';
// }

.type a {
    color: #FF8AFC;
}

.constructor,
.final,
.public,
.private,
.protected,
.deprecated {
    /* trbl */
    background-color: #a7a7a7;
}

.constructor {
    background-color: #3C72DF;
}

.final {}

.public {}

.private {
    background-color: #5D5D5D;
}

.protected {
    background-color: #FC9417;
}

.deprecated {
    background-color: #D18ED2;
}

.inherited {
	background-color: #AAAAAA;
}

.readonly {
	background-color: #B0702D;
}

.optional {
	background-color: #bc740e;
}



/* A div that shows a property's default value */

.default-value {
	color : #CA7923;
	white-space : nowrap;
}
.default-value:before {
	color : @grey-text;
	content : 'default = ';
}
.list-filepath {
	color : @grey-text;
	white-space : nowrap;
}

/* -----------------------------------------------------------------
See Also
- Used to identify variable definitions such as static, public, private, protected, inheretence.
----------------------------------------------------------------- */

.seeAlsoBlock ul {
    padding: 0.5em 0 0 1em;
}

.seeAlsoBlock li {
    list-style: none;
    white-space: nowrap;
}


/* markdown processor wraps links in a paragraph, and automatically inserts a dash in the li */

.seeAlsoBlock p {
    display: inline-block;
    white-space: nowrap;
    margin : 0;
    padding : 0 0 0 5px;
}





/* ---------------------
More Pages
------------------------ */
.more {
	padding-top : 20px;
}
.more h1, .more h2, .more h3, .more h4, .more h5, .more h6 {
	font-weight: 600;
}