split UI to 3 different font sizes #326

This commit is contained in:
azivner 2019-01-13 21:16:51 +01:00
parent 5c223dfd12
commit 424c22dcde
3 changed files with 17 additions and 6 deletions

View file

@ -1,3 +1,7 @@
body {
font-size: var(--main-font-size);
}
#container { #container {
margin: 0 auto; /* center */ margin: 0 auto; /* center */
height: 100vh; height: 100vh;
@ -26,6 +30,7 @@
flex-shrink: 1; flex-shrink: 1;
flex-basis: 60%; flex-basis: 60%;
margin-top: 10px; margin-top: 10px;
font-size: var(--tree-font-size);
} }
#left-pane { #left-pane {
@ -86,3 +91,7 @@
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
} }
#note-detail-wrapper {
font-size: var(--detail-font-size);
}

View file

@ -1,4 +1,8 @@
:root { :root {
--main-font-size: normal;
--tree-font-size: normal;
--detail-font-size: normal;
--main-background-color: white; --main-background-color: white;
--main-text-color: black; --main-text-color: black;
--accented-background-color: #eee; --accented-background-color: #eee;
@ -20,7 +24,7 @@
--menu-background-color: white; --menu-background-color: white;
} }
html.theme-black { body.theme-black {
--main-background-color: black; --main-background-color: black;
--main-text-color: white; --main-text-color: white;
--accented-background-color: #222; --accented-background-color: #222;
@ -42,7 +46,7 @@ html.theme-black {
--menu-background-color: #222; --menu-background-color: #222;
} }
html.theme-black .CodeMirror { body.theme-black .CodeMirror {
filter: invert(100%) hue-rotate(180deg); filter: invert(100%) hue-rotate(180deg);
} }
@ -167,8 +171,6 @@ ul.fancytree-container {
display: none; display: none;
} }
#note-detail-text { font-size: 1.1em; }
#note-detail-text h1 { font-size: 2.0em; } #note-detail-text h1 { font-size: 2.0em; }
#note-detail-text h2 { font-size: 1.8em; } #note-detail-text h2 { font-size: 1.8em; }
#note-detail-text h3 { font-size: 1.6em; } #note-detail-text h3 { font-size: 1.6em; }

View file

@ -1,10 +1,10 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="theme-<%= theme %>"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Trilium Notes</title> <title>Trilium Notes</title>
</head> </head>
<body class="desktop"> <body class="desktop theme-<%= theme %>">
<div id="container" style="display: none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) <%= rightPaneWidthPercent %>fr"> <div id="container" style="display: none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) <%= rightPaneWidthPercent %>fr">
<div id="header" class="hide-toggle"> <div id="header" class="hide-toggle">
<div id="history-navigation" style="display: none;"> <div id="history-navigation" style="display: none;">