Migrate to Sass for Doxygen custom stylesheets

Closes #1759.

docs/extra.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["extra.scss"],"names":[],"mappings":"AA8EA,4GACI,gBACA,iBAGJ,yBACC,yDAGD,6HACC,sDAGD,yIACC,sDAGD,mBACI,WA9EuB,KA+EvB,iBAGJ,uBACC,MAzFoB,QA0FjB,iBAGJ,6UACC,gBAGD,mJACC,YAGD,yHACC,iBAGD,sBACC,gBAGD,4LACC,UAGD,yCACC,aAGD,kMACC,WAnHgC,QAsHjC,KACC,MA1HoB,QA6HrB,sDACC,MA/Ge,QAgHf,mBAGD,GACE,iBACA,eAGF,GACE,iBACA,gBACA,eAGF,GACE,iBACA,gBACA,eAGF,YACC,eACA,gBACA,gBACA,eACA,cAEA,aACA,mBACA,eACA,2BACA,mBACA,sBAGD,UACC,iBACA,mBACA,MA/J0B,KAgK1B,gBACA,qEAGD,YACC,qBACA,kBACA,YAGD,yBACC,WAGD,oCACC,iBACA,gBACA,cACA,MAlL0B,KAqL3B,YACC,eAGD,8CACC,qBAGD,mBACC,MA9L0B,KAiM3B,eACC,kBACA,YACA,eAGD,KACC,WAxM0B,KA2M3B,UACC,gBACA,cACA,eAGD,WACC,gBACA,cACA,eAGD,UACI,aAGJ,mBACI,iBACA,iBAGJ,WACC,gBACA,aACA,mBACA,eACA,2BACA,mBACA,sBAGD,mEACC,MA9OgC,QAiPjC,gCACC,MArPoB,QAwPrB,sCACC,MAjOoB,KAoOrB,yBACC,kBAGD,UACC,iBAGD,wBACC,gBACA,cACA,eACA,qBAGD,uDACC,gEACA,+BACA,+BACA,gBACA,MArPgB,KAwPjB,mBACC,MA5PoB,KA6PpB,aACA,kBACA,yBAGD,QACC,WACA,WAGD,WACC,iBAGD,WACC,mBAGD,WACC,cACA,eACA,qBAGD,oCACC,gEACA,kCACA,2BACA,MAlSe,QAmSf,yBACA,kBAGD,WACC,MA3QuB,QA8QxB,cACC,sBACA,2BACA,4BACA,mBAGD,cACC,sBACA,+BACA,8BACA,gBAGD,mCACC,wBACA,iBACA,sBACA,kBAGD,gIACC,MAxToB,KAyTpB,qBAGD,cACC,wBACA,iBACA,sBACA,kBAGD,iBACC,WACA,4EAGD,oCApSC,gEACA,kCACA,cACA,yBAqSD,wBAxSC,gEACA,kCACA,cACA,yBAySD,qBA5SC,gEACA,kCACA,cACA,yBA6SD,gBAhTC,gEACA,kCACA,cACA,yBAiTD,iGACC,kBACA,YACA,2BACA,aAGD,kRACC,cAGD,SACC,oBAGD,0BACC,mBACA,kBACA,YACA,YACA,cACA,2BACA,aAGD,+CACC,MA1YoB,QA6YrB,+BACC,cAGD,sBACC,cAGD,+CACC,cACA,iBAGD,mBACC,cAGD,KACC,aACA","file":"extra.css"}

docs/extra.less → docs/extra.scss

@@ -1,79 +1,79 @@
 // NOTE: Please use this file to perform modifications on default style sheets.
 //
-// You need to install a few Ruby gems to generate extra.css from this file:
-// gem install less therubyracer
+// You need to install the official Sass CLI tool:
+// npm install -g sass
 //
 // Run this command to regenerate extra.css after you're finished with changes:
-// lessc --compress extra.less > extra.css
+// sass --style=compressed extra.scss extra.css
 //
 // Alternatively you can use online services to regenerate extra.css.
 
 
 // Default text color for page contents
-@default-text-color: hsl(0,0%,30%);
+$default-text-color: hsl(0,0%,30%);
 
 // Page header, footer, table rows, inline codes and definition lists
-@header-footer-background-color: hsl(0,0%,95%);
+$header-footer-background-color: hsl(0,0%,95%);
 
 // Page header, footer links and navigation bar background
-@header-footer-link-color: hsl(0,0%,40%);
+$header-footer-link-color: hsl(0,0%,40%);
 
 // Doxygen navigation bar links
-@navbar-link-color: @header-footer-background-color;
+$navbar-link-color: $header-footer-background-color;
 
 // Page content background color
-@content-background-color: hsl(0,0%,100%);
+$content-background-color: hsl(0,0%,100%);
 
 // Bold, italic, h1, h2, ... and table of contents
-@heading-color: hsl(0,0%,10%);
+$heading-color: hsl(0,0%,10%);
 
 // Function, enum and macro definition separator
-@def-separator-color: @header-footer-background-color;
+$def-separator-color: $header-footer-background-color;
 
 // Base color hue
-@base-hue: 24;
+$base-hue: 24;
 
 // Default color used for links
-@default-link-color: hsl(@base-hue,100%,50%);
+$default-link-color: hsl($base-hue,100%,50%);
 
 // Doxygen navigation bar active tab
-@tab-text-color: hsl(0,0%,100%);
-@tab-background-color1: @default-link-color;
-@tab-background-color2: lighten(spin(@tab-background-color1, 10), 10%);
+$tab-text-color: hsl(0,0%,100%);
+$tab-background-color1: $default-link-color;
+$tab-background-color2: lighten(adjust-hue($tab-background-color1, 10), 10%);
 
 // Table borders
-@default-border-color: @default-link-color;
+$default-border-color: $default-link-color;
 
 // Table header
-@table-text-color: @tab-text-color;
-@table-background-color1: @tab-background-color1;
-@table-background-color2: @tab-background-color2;
+$table-text-color: $tab-text-color;
+$table-background-color1: $tab-background-color1;
+$table-background-color2: $tab-background-color2;
 
 // Table of contents, data structure index and prototypes
-@toc-background-color1: hsl(0,0%,90%);
-@toc-background-color2: lighten(@toc-background-color1, 5%);
+$toc-background-color1: hsl(0,0%,90%);
+$toc-background-color2: lighten($toc-background-color1, 5%);
 
 // Function prototype parameters color
-@prototype-param-color: darken(@default-link-color, 25%);
+$prototype-param-color: darken($default-link-color, 25%);
 
 // Message box color: note, pre, post and invariant
-@box-note-color: hsl(103,80%,85%);
+$box-note-color: hsl(103,80%,85%);
 
 // Message box color: warning and attention
-@box-warning-color: hsl(34,80%,85%);
+$box-warning-color: hsl(34,80%,85%);
 
 // Message box color: deprecated and bug
-@box-bug-color: hsl(333,80%,85%);
+$box-bug-color: hsl(333,80%,85%);
 
 // Message box color: todo and test
-@box-todo-color: hsl(200,80%,85%);
+$box-todo-color: hsl(200,80%,85%);
 
 // Message box helper function
-.message-box(@base-color) {
-	background:linear-gradient(to bottom,lighten(@base-color, 5%) 0%,@base-color 100%);
-	box-shadow:inset 0 0 32px darken(@base-color, 5%);
-	color:darken(@base-color, 67%);
-	border:2px solid desaturate(darken(@base-color, 10%), 20%);
+@mixin message-box($base-color){
+	background:linear-gradient(to bottom,lighten($base-color, 5%) 0%,$base-color 100%);
+	box-shadow:inset 0 0 32px darken($base-color, 5%);
+	color:darken($base-color, 67%);
+	border:2px solid desaturate(darken($base-color, 10%), 20%);
 }
 
 .sm-dox,.sm-dox a,.sm-dox a:focus,.sm-dox a:active,.sm-dox a:hover,.sm-dox a.highlighted,.sm-dox ul a:hover {
@@ -82,24 +82,24 @@
 }
 
 .sm-dox a span.sub-arrow {
-	border-color:@navbar-link-color transparent transparent transparent;
+	border-color:$navbar-link-color transparent transparent transparent;
 }
 
 .sm-dox a span.sub-arrow:active,.sm-dox a span.sub-arrow:focus,.sm-dox a span.sub-arrow:hover,.sm-dox a:hover span.sub-arrow {
-	border-color:@default-link-color transparent transparent transparent;
+	border-color:$default-link-color transparent transparent transparent;
 }
 
 .sm-dox ul a span.sub-arrow:active,.sm-dox ul a span.sub-arrow:focus,.sm-dox ul a span.sub-arrow:hover,.sm-dox ul a:hover span.sub-arrow {
-	border-color:transparent transparent transparent @default-link-color;
+	border-color:transparent transparent transparent $default-link-color;
 }
 
 .sm-dox ul a:hover {
-    background:@header-footer-link-color;
+    background:$header-footer-link-color;
     text-shadow:none;
 }
 
 .sm-dox ul.sm-nowrap a {
-	color:@default-text-color;
+	color:$default-text-color;
     text-shadow:none;
 }
 
@@ -128,15 +128,15 @@ div.headertitle,.note code,.pre code,.post code,.invariant code,.warning code,.a
 }
 
 html,#titlearea,.footer,tr.even,.directory tr.even,.doxtable tr:nth-child(even),tr.markdownTableBody:nth-child(even),.mdescLeft,.mdescRight,.memItemLeft,.memItemRight,code,.markdownTableRowEven {
-	background:@header-footer-background-color;
+	background:$header-footer-background-color;
 }
 
 body {
-	color:@default-text-color;
+	color:$default-text-color;
 }
 
 h1,h2,h2.groupheader,h3,div.toc h3,h4,h5,h6,strong,em {
-	color:@heading-color;
+	color:$heading-color;
 	border-bottom:none;
 }
 
@@ -175,7 +175,7 @@ h3 {
 #glfwhome {
 	line-height:64px;
 	padding-right:48px;
-	color:@header-footer-link-color;
+	color:$header-footer-link-color;
 	font-size:2.5em;
 	background:url("https://www.glfw.org/css/arrow.png") no-repeat right;
 }
@@ -194,7 +194,7 @@ h3 {
 	line-height:64px;
 	margin-left:2em;
 	display:block;
-	color:@header-footer-link-color;
+	color:$header-footer-link-color;
 }
 
 .glfwnavbar {
@@ -206,7 +206,7 @@ h3 {
 }
 
 #titlearea,.footer {
-	color:@header-footer-link-color;
+	color:$header-footer-link-color;
 }
 
 address.footer {
@@ -216,7 +216,7 @@ address.footer {
 }
 
 #top {
-	background:@header-footer-link-color;
+	background:$header-footer-link-color;
 }
 
 #main-nav {
@@ -251,15 +251,15 @@ address.footer {
 }
 
 #main-menu a,#main-menu a:visited,#main-menu a:hover,#main-menu li {
-	color:@navbar-link-color;
+	color:$navbar-link-color;
 }
 
 #main-menu li ul.sm-nowrap li a {
-	color:@default-text-color;
+	color:$default-text-color;
 }
 
 #main-menu li ul.sm-nowrap li a:hover {
-	color:@default-link-color;
+	color:$default-link-color;
 }
 
 #main-menu > li:last-child {
@@ -274,22 +274,22 @@ div.contents,div.header {
 	max-width:920px;
 	margin:0 auto;
 	padding:0 32px;
-	background:@content-background-color none;
+	background:$content-background-color none;
 }
 
 table.doxtable th,table.markdownTable th,dl.reflist dt {
-	background:linear-gradient(to bottom,@table-background-color2 0%,@table-background-color1 100%);
-	box-shadow:inset 0 0 32px @table-background-color1;
-	text-shadow:0 -1px 1px darken(@table-background-color1, 15%);
+	background:linear-gradient(to bottom,$table-background-color2 0%,$table-background-color1 100%);
+	box-shadow:inset 0 0 32px $table-background-color1;
+	text-shadow:0 -1px 1px darken($table-background-color1, 15%);
 	text-align:left;
-	color:@table-text-color;
+	color:$table-text-color;
 }
 
 dl.reflist dt a.el {
-	color:@default-link-color;
+	color:$default-link-color;
 	padding:.2em;
 	border-radius:4px;
-	background-color:lighten(@default-link-color, 40%);
+	background-color:lighten($default-link-color, 40%);
 }
 
 div.toc {
@@ -312,27 +312,27 @@ div.toc li {
 }
 
 div.toc,.memproto,div.qindex,div.ah {
-	background:linear-gradient(to bottom,@toc-background-color2 0%,@toc-background-color1 100%);
-	box-shadow:inset 0 0 32px @toc-background-color1;
-	text-shadow:0 1px 1px lighten(@toc-background-color2, 10%);
-	color:@heading-color;
-	border:2px solid @toc-background-color1;
+	background:linear-gradient(to bottom,$toc-background-color2 0%,$toc-background-color1 100%);
+	box-shadow:inset 0 0 32px $toc-background-color1;
+	text-shadow:0 1px 1px lighten($toc-background-color2, 10%);
+	color:$heading-color;
+	border:2px solid $toc-background-color1;
 	border-radius:4px;
 }
 
 .paramname {
-	color:@prototype-param-color;
+	color:$prototype-param-color;
 }
 
 dl.reflist dt {
-	border:2px solid @default-border-color;
+	border:2px solid $default-border-color;
 	border-top-left-radius:4px;
 	border-top-right-radius:4px;
 	border-bottom:none;
 }
 
 dl.reflist dd {
-	border:2px solid @default-border-color;
+	border:2px solid $default-border-color;
 	border-bottom-right-radius:4px;
 	border-bottom-left-radius:4px;
 	border-top:none;
@@ -341,41 +341,41 @@ dl.reflist dd {
 table.doxtable,table.markdownTable {
 	border-collapse:inherit;
 	border-spacing:0;
-	border:2px solid @default-border-color;
+	border:2px solid $default-border-color;
 	border-radius:4px;
 }
 
 a,a:hover,a:visited,a:visited:hover,.contents a:visited,.el,a.el:visited,#glfwhome:hover,#main-menu a:hover,span.lineno a:hover {
-	color:@default-link-color;
+	color:$default-link-color;
 	text-decoration:none;
 }
 
 div.directory {
 	border-collapse:inherit;
 	border-spacing:0;
-	border:2px solid @default-border-color;
+	border:2px solid $default-border-color;
 	border-radius:4px;
 }
 
 hr,.memSeparator {
 	height:2px;
-	background:linear-gradient(to right,@def-separator-color 0%,darken(@def-separator-color, 10%) 50%,@def-separator-color 100%);
+	background:linear-gradient(to right,$def-separator-color 0%,darken($def-separator-color, 10%) 50%,$def-separator-color 100%);
 }
 
 dl.note,dl.pre,dl.post,dl.invariant {
-	.message-box(@box-note-color);
+	@include message-box($box-note-color);
 }
 
 dl.warning,dl.attention {
-	.message-box(@box-warning-color);
+	@include message-box($box-warning-color);
 }
 
 dl.deprecated,dl.bug {
-	.message-box(@box-bug-color);
+	@include message-box($box-bug-color);
 }
 
 dl.todo,dl.test {
-	.message-box(@box-todo-color);
+	@include message-box($box-todo-color);
 }
 
 dl.note,dl.pre,dl.post,dl.invariant,dl.warning,dl.attention,dl.deprecated,dl.bug,dl.todo,dl.test {
@@ -404,7 +404,7 @@ div.fragment,pre.fragment {
 }
 
 .lineno a,.lineno a:visited,.line,pre.fragment {
-	color:@default-text-color;
+	color:$default-text-color;
 }
 
 span.preprocessor,span.comment {
@@ -416,7 +416,7 @@ a.code,a.code:visited {
 }
 
 span.keyword,span.keywordtype,span.keywordflow {
-	color:darken(@default-text-color, 5%);
+	color:darken($default-text-color, 5%);
 	font-weight:bold;
 }