1
0
Fork 0
mirror of https://github.com/YunoHost-Apps/lionwiki-t2t_ynh.git synced 2024-09-03 19:36:27 +02:00
lionwiki-t2t_ynh/conf/minimaxing.less
2021-12-04 14:42:37 +01:00

1327 lines
27 KiB
Text
Executable file
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*-----------------------
--------------
- Minimaxing -
--------------
a template for Lionwiki-t2t
https://lionwiki-t2t.sourceforge.io/
based on
https://html5up.net/minimaxing
licence Creative Commons Attribution 3.0 Unported
http://creativecommons.org/licenses/by/3.0/
----------------------------*/
/* This CSS file was generated from the minimaxing.less template.
See http://lesscss.org/
*/
@MainFontCode: Monospace;
@fontEdit: @font;
/*
Use the part above to customise your fonts.
You can create your own manuscript / handwriting font on http://www.myscriptfont.com/ or http://www.paintfont.com/
*/
/* we use this for random theme color. You can also choose only one color below. */
@all-background-colors: "#7B8AA8,#56A3B5,#B1494D,#465E7C,#549136,#D07732,#754496,#847457";
/*
#8B9AB8 : lighter grey blue
#7B8AA8 : light grey blue
#56A3B5 : turquoise blue
#B1494D : brick red
#465E7C : dark blue
#549136 : green
#799037 : grass green
#D07732 : orange
#754496 : purple
#847457 : brown
*/
@button-radius: 6px;
/* define mixin */
/* we disable it as it's sometimes a problem with lesscss
.generateColor() {
@background-color: color(~`@{all-background-colors}.split(',')[Math.floor(Math.random()*@{all-background-colors}.split(',').length)]`);
}
.generateColor();
*/
/* This line below will use a random main color: */
/* @fg: @background-color; */
/* if you prefer to select a fixed background color, just uncomment one color from below */
// @fg: #549136; /* Green */
// @fg: #7E2434; /* Bordeaux */
// @fg: #7e3821; /* Brick Red (darker) */
// @fg: #D17732; /* Orange */
// @fg: #328cc1; /* Light Blue */
// @fg: #847457; /* Marron */
/* For YunoHost config */
/* @fg: #__YNH_COLOR__; */
/* Header color */
/* You can use a shade of MainColor: */
@HeaderColor: (@fg - #111);
/* or a complementary color: */
/*@HeaderColor: (#ffffff - @fg - (#ffffff - @fg)/3); */
@HeaderColor: spin(@fg, 180);
@MainFontColor: (#878e83 - #222);
@MainFontSize: (14pt - 2);
@RedBrick: #7F4736;
@fg-light: (@fg + #111);
@Main2Color: @fg;
@LinkColor: (@fg-light + #010101);
@BackgroundHead: @fg-light;
@Background2Head: @fg;
@Background3Head: @fg;
@Background4Head: @fg;
@BackgroundNav: @fg;
@fg-light: @fg;
@shadow: @fg;
@buttonboxshadow: 0.0;
/* templates */
@fg: #7e3821; /* Brick Red (darker) Default color 2021 */
@bg: #fff;
@bg2: @fg;
@glow: none;
@link: @fg;
@link-hover: @bg;
@link-visited: @fg;
@heading: @fg;
@heading-weight: bold; /* normal or bold */
@font: Ubuntu;
@font-heading: Fengardo Neue;
@Bg-dark: (@fg - #121212);
@Bg-light: (@fg + #121212);
@Bg-extra-light: (#999 + (@fg/6) + #343434 + #121212);
/* overriding default values above */
@import "minimaxing_temp.less";
/*@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700,300italic);
*/
@import "../css/font_ubuntu.less"; /* Ubuntu */
@import "../css/font_fengardo.less"; /* Fengardo Neue */
// @import "../css/font_opensans.less"; /* Open Sans */
// @import "../css/font_archivo.less"; /* Archivo Narrow */
// @import "../css/font_loveya.less"; /* LoveYaLikeASister */
// @import "../css/font_myfont.less"; /* MyFont */ /* MyManuscript */
/*
Minimaxing 1.0 by nodethirtythree design
http://nodethirtythree.com | @nodethirtythree
Released under the Creative Commons Attribution 3.0 license (nodethirtythree.com/license)
* http://html5up.net/minimaxing/
Based also on the work from http://wiki.lapetitesissone.fr/index.php?page=Lionwiki
*/
/* LionWiki specific */
a.pending {
color: @RedBrick;
}
h2 span.par-edit, h3 span.par-edit, h4 span.par-edit, h5 span.par-edit, h6 span.par-edit {
float: right;
display: none;
}
h2:hover span.par-edit, h3:hover span.par-edit, h4:hover span.par-edit, h5:hover span.par-edit, h6:hover span.par-edit {
display: inline;
font-size: small;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
background-color: transparent;
}
.pageLinks {
padding-left: 1em;
padding-right: 1em;
margin-top: 0;
margin-bottom: 0;
}
.pageLinks a {
font-weight: bold;
text-decoration: none;
}
#headerLinks td {
border-bottom: 1px dashed #ccc !important;
}
#footerLinks td {
border-top: 1px dashed #ccc !important;
}
#mainContent {
padding: 1em;
background-color: white;
}
#mainContent h2:first-child {
margin-top: 0px;
}
.error {
color: #F25A5A;
font-weight: bold;
}
.contentTextarea {
width: 90%;
font-family: @fontEdit;
font-size: 105%;
}
.markItUpEditor
{
width: 90%;
font-family: @fontEdit;
color: #444;
font-size: 140%;
}
#diff {
white-space: pre-wrap;
word-wrap: break-word;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
width: 97%;
}
#diff ins {
color: green;
text-decoration: none;
font-weight: bold;
}
#diff del {
color: red;
text-decoration: line-through;
}
#diff .orig {
color: #666;
}
#toc {
border: 1px dashed #11141A;
padding: 5px 5px 5px 5px;
float: right;
padding-right: 2em;
list-style: none;
background: #eee;
clear: right;
}
#toc ul {
list-style: none;
padding-left: 10px;
}
#toc li {
font-size: 11px;
padding-left: 10px;
}
/* Plugins LionWiki*/
.tagList {
padding: 0.2em 0.4em 0.2em 0.4em;
margin-top: 0.5em;
border: 1px dashed #31343A;
background: #eee;
clear: right;
}
.tagCloud {
float: right;
width: 200px;
padding: 0.5em;
margin: 1em;
border: 1px dashed #31343A;
background: #eee;
clear: right;
}
.pageVersionsList {
letter-spacing: 0px;
font-variant: normal;
font-size: 12px;
}
table.wikitable {
border-collapse: collapse;
border: 1px solid #ccc;
}
table.wikitable td {
border: 1px solid #ccc;
text-align: center;
vertical-align: middle;
padding: 2px;
}
table.wikitable td.em {
background: #ccc;
font-weight: bold;
}
table, #previewPane table {
border-collapse: collapse;
empty-cells: show;
border-spacing: 0;
border: 1px solid #999;
}
.form table {
border-collapse: collapse;
empty-cells: hide;
border-spacing: 0;
border: 0px solid #fff;
}
th, td, #previewPane th, #previewPane td {
padding: .3em .5em;
margin: 0;
vertical-align: top;
border: 1px solid #999;
text-align: left;
}
.form th, td {
padding: .3em .5em;
margin: 0;
vertical-align: top;
border: 0px solid #999;
text-align: left;
}
th, thead, #previewPane th, #previewPane thead {
font-weight: bold;
background-color: #ddd;
}
[dir=rtl] td, [dir=rtl] th {
text-align: right;
}
.resizeTextarea a {
text-decoration: none;
}
/******************************************************************/
/* Global */
/******************************************************************/
/* Mixin Macro */
.break {
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
body {
font-size: @MainFontSize;
/*font-family: sans-serif;*/
/*background-color: (@Bg-extra-light/1.1 + #111);*/
background-color: @bg;
font-family: @font;
color: @MainFontColor;
}
#header h1 {
color: #fff;
margin: 2px;
padding: 2px;
border: none;
}
h1, h2, h3, h4 {
font-family: @font-heading;
text-transform: uppercase;
color: @HeaderColor;
font-weight: bold;
margin-left: 0.1em;
margin-right: 0.1em;
padding-left: 2px;
padding-right: 2px;
}
h2 {
border-bottom: 1px solid grey;
}
h1 {
/*font-size: 2.6em;*/
font-size: clamp(2em, 4vw, 6em);
text-align: center;
text-decoration: none;
}
h1 a {
color: @HeaderColor;
}
#header-wrapper h1 {
color: @bg;
line-height: 1.3em;
border-bottom: none;
}
#header-wrapper {
color: (@fg-light + #111);
}
#header-wrapper a {
color: (@fg-light + #222);
}
#header-wrapper a:hover, #header-wrapper a:hover{
background-color: @fg-light;
color: (@fg - #444);
}
#header nav {
color: @bg;
text-transform: lowercase;
}
#header nav a, #header nav li a {
display: inline-block;
text-decoration: none;
color: @bg;
}
#header nav li a:hover, #header nav li a:active {
background-color: #fff;
border-radius: @button-radius;
color: @fg;
}
h2 {
font-size: 1.6em;
letter-spacing: 1px;
margin-bottom: 0.0em;
margin-top: 1.8em;
}
h3, h4 {
color: #283121;
margin-bottom: 0.0em;
margin-top: 1.4em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1em;
}
p, ul {
margin-bottom: 1.0em;
.break();
}
p {
line-height: 1.7em;
margin-left: 0.25em;
margin-right: 0.25em;
padding-left: 5px;
padding-right: 5px;
}
#main-row strong, b {
/*color: #555;*/
}
s {
color: #aaa;
}
::selection {
background: @fg;
color: @bg;
}
::-moz-selection {
background: @fg;
color: @bg;
}
pre {
background-color: (@Bg-extra-light + #121212);
line-height: 1.5em;
font-family: @MainFontCode;
font-size: @MainFontSize - 1em;
margin: 1.0em;
overflow:auto;
}
code, blockquote, dt {
background-color: (@Bg-extra-light + #121212);
//background-color: (@bg + #121212);
//line-height: 1.5em;
font-family: @MainFontCode;
font-size: @MainFontSize - 1em;
/*margin: 1.0em;*/
overflow:auto;
}
dd {
line-height: 1.5em;
font-family: @MainFontCode;
font-size: 0.9em;
}
pre, blockquote {
padding-left: 20px;
}
img {
/*float: center;*/ /* note: we can already center with txt2tags, just add a space before the image */
/*float: left;*/
/*margin: 2px 1.25em 0 0;*/
margin: 1.5em;
max-width: 50%;
max-height: 500px;
padding:1px;
border: solid 1px (@fg + #222);
/*display: block;*/
/*margin: 0 auto;*/
}
img.left {
float: left;
margin: 2px 1.25em 0 0;
}
img.top {
margin: 4px 0 2.25em 0;
}
img.noborder {
display: block;
margin: 0.1em;
border: 0;
position: absolute;
z-index: 10;
}
.img-circle {
border-radius: 50%;
border: solid 0px ;
min-width:100px;
max-width:200px;
background: @HeaderColor;
}
ol, ul {
}
li {
line-height: 1.5em;
}
/* If you don't like color highlight when you're over a list, comment the next 2 entries */
#main ul:hover {
// background-color: (@Bg-extra-light + #343434);
background-color: @bg;
}
#main ul li:hover, ul li:active {
// background-color: (@Bg-light + #343434);
background-color: (@bg + #111);
background-color: @Bg-extra-light;
}
a {
color: @LinkColor;
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: (@Bg-light + #232323);
//background-color: @bg;
//border-radius: (@button-radius - 2);
color: @bg;
}
* > p:last-child {
}
ul.small-image-list {
}
ul.small-image-list li {
margin-bottom: 1.5em;
}
ul.big-image-list {
}
ul.big-image-list li {
margin-bottom: 2em;
}
ul.link-list {
}
ul.link-list li {
border-top: solid 1px #ced0b7;
padding: 0.75em 0 0 0;
margin: 0.75em 0 0 0;
}
ul.link-list li:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.button, a.toolbarTextareaItem {
display: inline-block;
padding: 5px 10px 5px 10px;
background-color: @Background2Head;
border-radius: @button-radius;
text-transform: lowercase;
text-decoration: none;
color: @bg;
font-size: 1.0em;
letter-spacing: -1px;
border: solid 1px @fg;
box-shadow: inset 0px 0px 0px 1px @fg-light;
}
.button:hover, a.toolbarTextareaItem:hover {
background-color: (@fg + #111);
color: @bg;
}
a.toolbarTextareaItem b {
color: @bg;
}
#copyright {
font-size: 0.6em;
text-align: center;
color: (@Bg-light - #121212);
border-top: solid 1px #ced0b7;
line-height: 1.1em;
padding: 3em 0 0 0;
margin: 1% 0 0 0;
}
#copyright a {
color: (@Bg-light - #232323);
}
#copyright a:hover {
color: (@Bg-extra-light + #343434);
background-color: (@Bg-light);
}
.txt2tagsMenu, input {
background-color: (@Bg-extra-light/1.1);
}
.txt2tagsMenu:hover, input.submit:hover {
background-color: (@Bg-extra-light/1.1 + #111);
}
.button_txt2tags_true, input.submit {
background-color: @fg;
color: #fff;
}
.button_txt2tags_true:hover, input.submit:hover {
background-color: (@fg + #222);
}
.button_txt2tags_false {
background-color: @HeaderColor;
color: #fff;
}
.button_txt2tags_false:hover {
background-color: (@HeaderColor + #222);
}
.valide {
color: @fg;
background-color: (@Bg-extra-light/1.1);
}
.refuse {
color: @HeaderColor;
background-color: (@Bg-extra-light/1.1);
}
/********************************/
/* 1000px (>= 1000px) */
/********************************/
@media only screen and (min-width:1000px) {
body {
font-size: (@MainFontSize + 0);
}
section, article {
margin: 0 0 60px 0;
}
section p + p {
margin-top: 1.5em;
}
#header-wrapper {
background-color: @BackgroundHead;
}
#header-wrapper h1 {
margin-top: 0;
text-decoration: none;
border-bottom: 0px;
}
#header {
position: relative;
margin: 2.5% 0 2.5% 0;
margin-top: 40px;
padding: 0 40px 0 40px;
border-radius: @button-radius;
//border: solid 1px @fg;
box-shadow: inset 0px 0px 0px 1px @fg-light,0px 1px 4px 0px rgba(0,0,0,@buttonboxshadow);
height: 66px;
}
#header h1 {
position: absolute;
left: 10px;
top: -28px;
font-size: 2.4em;
letter-spacing: 3px;
/*line-height: 6px;*/ /* pb in konqueror*/
}
#header h1 a {
text-decoration: none;
}
#header nav {
/*position: absolute;*/
float: right;
clear: both;
right: 0px;
top: 1px;
line-height: 64px;
font-size: 1.3em;
letter-spacing: -1px;
}
#header nav li {
float: left;
list-style: none;
position: relative;
}
#header nav a, #header nav li a {
border: 0 none;
padding: 10px 35px 10px 35px;
}
#banner-wrapper h2 {
border-bottom: none;
color: white;
font-size: 2.0em;
text-align: center;
}
#banner-wrapper a {
border-bottom: none;
color: (@HeaderColor);
}
#banner-wrapper {
margin-top: -20px;
margin-bottom: -20px;
}
#banner-wrapper h1 {
text-align: center;
font-size: 2.2em;
letter-spacing: 1px;
text-decoration: none;
border-top: 0px;
border-bottom: 15px;
}
#banner {
position: relative;
width: 1160px;
height: 240px;
margin: 2% 0 2% 0;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.10);
border-radius: @button-radius;
padding: 20px;
background-size: 1160px 265px;
}
#banner h2 {
position: absolute;
z-index: 1;
width: 100%;
top: 100px;
left: 0;
font-size: 3.3em;
color: #fff;
text-align: center;
letter-spacing: 1px;
}
#banner span {
display: block;
position: absolute;
z-index: 1;
width: 100%;
bottom: 105px;
left: 0;
font-size: 1.6em;
color: #fff;
text-align: center;
letter-spacing: -1px;
text-transform: lowercase;
opacity: 0.8;
}
#main {
background-color: @bg;
padding: 2% 0 2% 0;
padding-top: -20px;
}
#main .main-row {
margin: 2% 0 2% 0;
/*overflow: hidden;*/
margin-top: -10px;
}
#footer-wrapper {
padding: 3% 0 3% 0;
}
}
/*********************************************************************************/
/* 1000px (> 600px && < 1000px) */
/*********************************************************************************/
@media only screen and (max-width:999px) and (min-width:601px) {
body {
font-size: (@MainFontSize + 1);
}
section, article {
margin: 10px 10px 50px 10px;
}
section:last-child, article:last-child {
margin-bottom: 0;
}
section.left-content {
padding-right: 15px;
}
section.right-content {
padding-left: 15px;
}
section.middle-content {
padding: 0 15px 0 15px;
}
ul.small-image-list img {
width: 50px;
}
ul.big-image-list img {
width: 75px;
}
.blog-post-image {
width: 490px;
}
#header-wrapper {
background-color: @BackgroundHead;
}
#header {
position: relative;
margin: 3.5% 0 1.5% 0;
margin-top: 40px;
padding: 0 40px 0 40px;
border-radius: @button-radius;
// border: solid 1px @fg-light;
box-shadow: inset 0px 0px 0px 1px @fg-light,0px 1px 4px 0px rgba(0,0,0,@buttonboxshadow);
//background-color: @Background4Head;
height: 66px;
}
#header h1 {
position: absolute;
left: 10px;
top: -28px;
font-size: 2.4em;
letter-spacing: 1px;
/*line-height: 6px;*/ /* pb in konqueror*/
}
#header h1 a {
text-decoration: none;
}
#header nav {
/*position: absolute;*/
float: right;
clear: both;
right: 20px;
top: 1px;
line-height: 64px;
font-size: 1.3em;
letter-spacing: -1px;
}
#header nav li {
float: left;
list-style: none;
position: relative;
}
#header nav a, #header nav li a {
border: 0 none;
padding: 10px 35px 10px 35px;
}
#banner-wrapper {
background: #fff;
margin-bottom: -20px;
}
#banner-wrapper h1 {
font-size: 2.1em;
letter-spacing: 0px;
}
#banner {
position: relative;
width: 60px;
height: 140px;
margin: 2% 0 2% 0;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.10);
border-radius: @button-radius;
padding: 20px;
/*background: #fff url(images/banner.jpg) no-repeat 20px 20px;*/
background-size: 960px 220px;
}
#banner h2 {
position: absolute;
z-index: 1;
width: 100%;
top: 80px;
left: 0;
font-size: 3em;
color: #fff;
text-align: center;
letter-spacing: 1px;
}
#banner span {
display: block;
position: absolute;
z-index: 1;
width: 100%;
bottom: 85px;
left: 0;
font-size: 1.4em;
color: #fff;
text-align: center;
letter-spacing: -1px;
text-transform: lowercase;
opacity: 0.8;
}
#main {
background-color: @bg;
padding: 3% 0 3% 0;
margin-left: 8px;
margin-right: 4px;
}
#main .controls {
}
#main .main-row {
margin: 2% 0 2% 0;
/*overflow: hidden;*/
margin-top: -10px;
}
#footer-wrapper {
padding: 5% 0 5% 0;
}
}
/*********************************************************************************/
/* Mobile (<= 600px) */
/*********************************************************************************/
@media only screen and (max-width:600px) {
body {
font-size: (@MainFontSize + 1);
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1em;
}
ul.small-image-list img {
width: 75px;
}
ul.big-image-list img {
width: 75px;
}
ul.link-list {
margin: 0 0 2em 0;
}
section, article {
padding: 40px 20px 40px 20px;
}
#main section, #main article {
background: #fff;
}
article.blog-post .comments {
display: block;
position: relative;
top: -0.5em;
margin: 0 0 0.5em 0;
}
.button {
font-size: 1em;
}
.blog-post-image {
width: 100%;
}
#header-wrapper {
background-color: @BackgroundHead;
}
#header-wrapper h1 {
margin-top: 0px;
text-decoration: none;
text-align: center;
border-bottom: 0px;
}
#header {
text-align: center;
padding: 5px 0 5px 0;
}
#header h1 {
font-size: 2.4em;
text-align: center;
margin: 0 0 20px 0;
}
#header h1 a {
text-decoration: none;
}
#header nav {
font-size: 1em;
margin: 0 auto;
}
#header nav ul {
float: center;
list-style: none;
position: relative;
right: 25px;
}
#header nav li {
display: inline-block;
}
#header nav li:hover {
text-decoration: none;
}
#header nav a, #header nav li a {
border: 0 none;
padding: 10px 25px 10px 25px;
}
#banner-wrapper {
background: @fg url(images/bg1.png);
display: none;
}
#banner {
position: relative;
width: 100%;
height: 240px;
/*background: #fff url(images/banner.jpg) no-repeat;*/
background-size: 100% 100%;
}
#banner {
position: relative;
}
#banner h2 {
position: absolute;
z-index: 1;
width: 100%;
bottom: 80px;
left: 0;
font-size: 2em;
color: #fff;
text-align: center;
letter-spacing: 1px;
}
#banner span {
display: block;
position: absolute;
z-index: 1;
width: 100%;
top: 135px;
left: 0;
font-size: 1em;
color: #fff;
text-align: center;
letter-spacing: -1px;
text-transform: lowercase;
opacity: 0.8;
}
#footer-wrapper section, #footer-wrapper article {
border-bottom: solid 1px #ced0b7;
}
/* important for markitup : */
.contentTextarea {
width: 96%;
font-family: @font;
font-size: 105%;
padding: 0px;
margin-left: -0.25px;
}
#main {
/*overflow: auto;*/
background-color: @bg;
margin-left: 8px;
margin-right: 4px;
}
/* from 5grid/core.css */
.\35 grid {
/*overflow: hidden;*/ /* prevent horizontal scroll */
overflow: visible;
}
}
/* Use main color for tables */
@TableColor: @fg ;
/* Use complementary color for tables */
/*@TableColor: @HeaderColor;*/
.mycontent table {
width:98%;
margin:1%;
/*box-shadow:-1px 2px 5px 1px #105070*/
border:2px solid (@TableColor + #444);
}
.mycontent td, .mycontent
th {
padding:4px;
border:1px solid #fff;
text-align:left
}
.mycontent th {
background: (@TableColor - #444); /*#105070;*/
color:#fff;
font-weight:bold
}
.mycontent tr {
background:(@TableColor + #787878); /*rgba(16,80,112,0.2);*/
color:#111
}
.mycontent tr a:hover, .mycontent #header-wrapper a:hover{
background-color: (@TableColor );
color: (@TableColor + #444);
}
.mycontent tr a { color: (@TableColor - #444);
font-weight: bold;
}
.mycontent tr:nth-child(even) {
background:(@TableColor + #555) /*rgba(16,80,112,0.1)*/
}
.mycontent tr:hover,
.mycontent tr:hover td {
background-color: (@TableColor + #111) /*rgba(16,80,112,0.3)*/
}
/* Progress bar */
progress {
color: @HeaderColor;
background-color: white;
/*border-radius: 4px; */
border-radius: 0px;
border: solid 1px;
width: 10em;
height: 1em;
-webkit-appearance: none;
}
progress::-moz-progress-bar {
background: @HeaderColor;
}
progress::-webkit-progress-value {
background: @HeaderColor;
}
progress::-webkit-progress-bar {
background: white;
}
/* Big buttons */
.block {
display: inline-block;
width: 65%;
border: 2px solid @HeaderColor;
background-color: @HeaderColor;
height: 50px;
margin-top: 8px;
margin-bottom: 8px;
font-family: @font;
padding-left: 2px;
padding-right: 2px;
font-size: 16px;
color: @Bg-extra-light;
/*cursor: pointer;*/
text-align: center;
vertical-align: middle;
/*transition: box-shadow 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, border-color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, transform 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s, background-color 0.25s cubic-bezier(0.08, 0.59, 0.29, 0.99) 0s;*/
border-radius: 0px;
}
.block a {
display: inline-block;
min-width: 100%;
padding: 0px;
padding-top : 0px;
height: 46px;
line-height:46px;
color: #fff;
text-decoration: none;
border-radius: 0px;
}
/*.block:hover, */
.block a:hover {
/*border: 2px solid @HeaderColor;*/
background-color: #fff;
color: @HeaderColor;
margin-left: -2px;
margin-right: -2px;
padding-left: 2px;
padding-right: 2px;
}
@media only screen and (max-width:999px) and (min-width:01px) {
.block { width: 90%;}
}
/* Todotxt support */
.todotxt_A { color: darken(@fg,5%);}
.todotxt_B { color: desaturate(lighten(spin(@fg, 30),5%),20%); }
.todotxt_C { color: desaturate(lighten(spin(@fg, 60),10%),30%); }
.todotxt_D { color: desaturate(lighten(spin(@fg, 90),15%),40%); }
.todotxt_E { color: desaturate(lighten(spin(@fg, 120),20%),45%); }
.todotxt_F { color: desaturate(lighten(@fg,25%),50%); }
.todotxt_context { color: spin(@fg, 180); }
.todotxt_tag { color: spin(@fg, 90); }
.todotxt_deleted {opacity: 0.4; }
.todotxt_date {background-color:darken(@bg,5%); }
@media (prefers-color-scheme: dark) {
/* Invert all elements on the body while attempting to not alter the hue substantially. */
body {
filter: invert(100%) hue-rotate(180deg);
}
/* Workarounds and optical adjustments. */
/* Firefox workaround: Set the background colour for the html
element separately because, unlike other browsers, Firefox
doesnt apply the filter to the root elements background. */
html {
background-color: #111;
}
/* Do not invert media (revert the invert). */
img, video, iframe {
filter: invert(100%) hue-rotate(180deg);
}
#header-wrapper {
filter: invert(100%) hue-rotate(180deg);
}
h1, h2, h3, h4 {
color: @fg;
}
/* Improve contrast on icons. */
.icon {
filter: invert(15%) hue-rotate(180deg);
}
/* Re-enable code block backgrounds. */
pre {
filter: invert(6%);
}
/* Improve contrast on list item markers. */
li::marker {
color: #555;
}
}