fix link colors so they are visible with the cursor
[apps/outliner/.git] / public / assets / style.css
1 /**
2  * Sections
3  *
4  * SEARCH
5  * OUTLINER
6  * TEXTSTYLES
7  */
8
9 body {
10   background-color: #eee;
11   font-size: 1rem;
12   margin: 4rem;
13   margin: 0 auto;
14   width: 780px;
15   padding: 2rem 1rem;
16 }
17
18 footer {
19   text-align: center;
20 }
21
22 .modal {
23   position: absolute;
24   top: 0;
25   left: 0;
26   width: 100%;
27 }
28 .modal-content {
29   position: relative;
30   top: 5px;
31   margin: 5rem auto;
32   width: 50%;
33   background-color: #fff;
34   border: solid 1px #ddd;
35   padding: 1rem;
36   box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
37 }
38 .modal-content > h1 {
39   margin-bottom: 1rem;
40 }
41
42 /** SEARCH **/
43 #search-query {
44   width: 100%;
45   border: solid 1px #888;
46   padding: 0.5rem;
47   box-sizing: border-box;
48 }
49 .search-results {
50   margin: 1rem 0;
51 }
52 .search-result {
53   margin: 0.6rem 0;
54   padding: 0.6rem;
55   line-height: 1.6rem;
56 }
57 .search-result.selected {
58   color: #fff;
59   background-color: #000;
60 }
61
62 /** OUTLINER **/
63 #outliner {
64   background-color: #fff;
65   border: solid 1px #ddd;
66   padding: 2rem 1rem;
67   margin: 2rem 0;
68 }
69 .node {
70   margin: 0 1rem;
71   color: #222;
72 }
73 .node.collapsed::before, .node.expanded::before {
74   float: left;
75   padding-top: 6px;
76   padding-right: 5px;
77 }
78 .node.collapsed::before {
79   color: #222;
80   content: '\25B8';
81 }
82 .node.expanded::before {
83   color: #aaa;
84   content: '\25B9';
85 }
86
87 .node.collapsed > .node {
88   display: none;
89 }
90
91 .nodeContent {
92   padding: 2px 1rem;;
93   line-height: 1.7rem;
94 }
95 .node.cursor.expanded::before {
96   color: #000;
97   content: '\25B8';
98 }
99 .node.cursor.collapsed::before {
100   color: #fff;
101 }
102 .node.cursor > .nodeContent {
103   color: #fff;
104   background-color: #000;
105 }
106 .nodeContent img {
107   width: 100%;
108 }
109
110 .cursor.hidden-cursor > .nodeContent {
111   color: #000;
112   background-color: #fff; }
113 .strikethrough, .strikethrough .node {
114   text-decoration: line-through;
115   color: #808080;
116 }
117
118 a {
119   color: #098bd9;
120 }
121 .cursor > .nodeContent a {
122   color: #098bd9;
123 }
124 a:visited {
125   color: #b26be4;
126 }
127 .cursor > .nodeContent a:visited {
128   color: #b26be4;
129 }
130
131
132
133
134 /* TEXTSTYLES */
135
136 em {
137   font-style: italic;
138 }
139 strong, b {
140   font-weight: bold;
141 }
142 h1 {
143   font-size: 1.7rem;
144 }
145 table {
146   border: solid 1px #ddd;
147 }
148 th {
149   font-weight: bold;
150   background-color: #666;
151   color: #fff;
152 }
153 th, td {
154   padding: 0.7rem;
155 }
156 tr:nth-child(even) {
157   background-color: #eee;
158 }
159 kbd {
160   border: solid 1px #aaa;
161   background-color: #d2d2d2;
162   padding: 0 5px;
163   line-height: 1rem;
164   white-space: nowrap;
165 }