├── img ├── sample1.png └── sample2.png ├── src ├── img │ ├── document.png │ ├── off_sync.png │ ├── on_sync.png │ ├── closed-folder.png │ └── opened-folder.png └── doxygen-style.css ├── README.md └── LICENSE /img/sample1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kcwongjoe/doxygen_theme_flat_design/HEAD/img/sample1.png -------------------------------------------------------------------------------- /img/sample2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kcwongjoe/doxygen_theme_flat_design/HEAD/img/sample2.png -------------------------------------------------------------------------------- /src/img/document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kcwongjoe/doxygen_theme_flat_design/HEAD/src/img/document.png -------------------------------------------------------------------------------- /src/img/off_sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kcwongjoe/doxygen_theme_flat_design/HEAD/src/img/off_sync.png -------------------------------------------------------------------------------- /src/img/on_sync.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kcwongjoe/doxygen_theme_flat_design/HEAD/src/img/on_sync.png -------------------------------------------------------------------------------- /src/img/closed-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kcwongjoe/doxygen_theme_flat_design/HEAD/src/img/closed-folder.png -------------------------------------------------------------------------------- /src/img/opened-folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kcwongjoe/doxygen_theme_flat_design/HEAD/src/img/opened-folder.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Doxygen Theme - Flat Design 2 | 3 | See [Example 1](https://kcwongjoe.com/directshow_camera/), [Example 2](https://kcwongjoe.com/serial_port/) 4 | 5 | ## Sample image 1 6 | 7 | ![](img/sample1.png) 8 | 9 | ## Sample image 2 10 | 11 | ![](img/sample2.png) 12 | 13 | # Requirements 14 | 15 | Doxygen 1.8.20 16 | 17 | # How to use 18 | 19 | 1. Download Doxywizard 20 | 2. Go to Expert > HTML > HTML_EXTRA_STYLESHEET 21 | 22 | Add **src/doxygen-style.css** 23 | 24 | 3. Go to Expert > HTML > HTML_EXTRA_FILES 25 | 26 | Add all the images from the **src/img** folder 27 | 28 | # How to change the color pattern and style 29 | 30 | 1. Open **src/doxygen-style.css** 31 | 32 | 2. Modifiy variables in **.root**. 33 | 34 | # License 35 | This project is licensed under [MIT](LICENSE) license. -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Joe Wong 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/doxygen-style.css: -------------------------------------------------------------------------------- 1 | /* This doxygen theme is free to use. If you like this, please Star https://github.com/kcwongjoe/doxygen_theme_flat_design */ 2 | 3 | /* Color Pattern. You can change this pattern to design your theme. */ 4 | 5 | :root { 6 | /* Content */ 7 | --bgcolor: #ffffff; 8 | --bgfont: #303030; 9 | --bgfont2: #f3c60a; 10 | --bgfont-hover: #f3c60a; 11 | --bgfont-hover-text-decoration: none; 12 | --bgborder: #7d7d7d; 13 | --bgborder2: #f6f6f6; 14 | /* Main Header */ 15 | --bg1color: #303030; 16 | --bg1font: #ffffff; 17 | --bg1font2: #f3c60a; 18 | /* Second header */ 19 | --bg2color: #E2E2E2; 20 | --bg2font: #7D7D7D; 21 | --bg2-hover-bg: #ffffff; 22 | --bg2-hover-font: #303030; 23 | --bg2-hover-topborder: #f3c60a; 24 | /* Third header */ 25 | --bg3color: #f6f6f6; 26 | --bg3font: #303030; 27 | --bg3font2: #7D7D7D; 28 | /* Code */ 29 | --code-bg: #f6f6f6; 30 | --code-comment: #7D7D7D; 31 | --code-keyword: #d73a49; 32 | --code-preprocessor: #d73a49; 33 | --code-keywordtype: #d73a49; 34 | --code-text: #303030; 35 | --code-code: #6f42c1; 36 | --code-line: #7D7D7D; 37 | --code-line-bg: #D8D8D8; 38 | /* Namespace List, Class List icon */ 39 | --icon-bg: #303030; 40 | --icon-font: #f3c60a; 41 | /* Class Index */ 42 | --qindex-menu-bg: #303030; 43 | --qindex-menu-font: #ffffff; 44 | --qindex-menu-font-hover: #f3c60a; 45 | --qindex-icon-bg: #f3c60a; 46 | --qindex-icon-font: #303030; 47 | /* Member table */ 48 | --mem-title-bg: #303030; 49 | --mem-title-font: #ffffff; 50 | --mem-subtitle-bg: #f3c60a; 51 | --mem-subtitle-font: #303030; 52 | --mem-subtitle-font-hover: #303030; 53 | --mem-content-bg: #ffffff; 54 | --mem-content-font: #303030; 55 | --mem-content-border: #f6f6f6; 56 | /* Nav Tree */ 57 | --nav-tree-bg: #E2E2E2; 58 | --nav-tree-bg-hover: #ffffff; 59 | --nav-tree-font: #7D7D7D; 60 | --nav-tree-font-hover: #303030; 61 | --nav-tree-bg-selected: #f3c60a; 62 | --nav-tree-font-selected: #303030; 63 | } 64 | 65 | body, table, div, p, dl { 66 | color: var(--bgfont); 67 | background-color: var(--bgcolor); 68 | line-height: 150%; 69 | font: 14px/22px, Roboto, Arial; 70 | } 71 | 72 | div.contents { 73 | margin: 20px 40px; 74 | } 75 | 76 | div.contents ul { 77 | line-height: 200%; 78 | } 79 | 80 | /***********************************/ 81 | 82 | /********** Project header *********/ 83 | 84 | /***********************************/ 85 | 86 | #titlearea { 87 | border-bottom: none; 88 | padding-bottom: 20px; 89 | padding-top: 20px; 90 | } 91 | 92 | #titlearea, #titlearea * { 93 | color: var(--bg1font); 94 | background-color: var(--bg1color); 95 | } 96 | 97 | #projectname { 98 | padding: 0px 40px !important; 99 | } 100 | 101 | #projectbrief { 102 | padding: 0px 40px !important; 103 | } 104 | 105 | #projectalign { 106 | padding: 0px !important; 107 | } 108 | 109 | /***********************************/ 110 | 111 | /************ Main Menu ************/ 112 | 113 | /***********************************/ 114 | 115 | /* Margin */ 116 | 117 | #main-menu { 118 | padding: 0px 30px; 119 | } 120 | 121 | #main-menu a, #main-menu a:hover { 122 | padding-top: 10px; 123 | padding-bottom: 10px; 124 | } 125 | 126 | /* Menu button */ 127 | 128 | #main-menu li a { 129 | background-image: none; 130 | font-family: Arial; 131 | text-transform: uppercase; 132 | text-shadow: none; 133 | font-size: 14px; 134 | font-weight: 700; 135 | } 136 | 137 | #main-menu, #main-menu>li>a { 138 | background-image: none; 139 | background-color: var(--bg2color); 140 | color: var(--bg2font); 141 | transition: 0.2s; 142 | } 143 | 144 | /* hover Effect */ 145 | 146 | #main-menu>li { 147 | border-top: 5px solid var(--bg2color); 148 | } 149 | 150 | #main-menu>li:hover { 151 | color: var(--bg2-hover-font); 152 | background-color: var(--bg2-hover-bg); 153 | border-top: 5px solid var(--bg2-hover-topborder); 154 | } 155 | 156 | #main-menu>li:hover, #main-menu>li>a:hover, #main-menu>li>a.highlighted { 157 | color: var(--bg2-hover-font); 158 | background-color: var(--bg2-hover-bg); 159 | } 160 | 161 | /* Search Bar */ 162 | 163 | #MSearchBox { 164 | border-radius: 0; 165 | box-shadow: none; 166 | } 167 | 168 | #MSearchBox>span { 169 | margin: 10px; 170 | } 171 | 172 | #main-menu>li:last-child { 173 | padding: 25px 0px; 174 | } 175 | 176 | /* Reset search hover color*/ 177 | 178 | #main-menu>li:last-child:hover { 179 | color: var(--bg2font); 180 | background-color: var(--bg2color); 181 | border-top: 5px solid var(--bg2color); 182 | } 183 | 184 | #MSearchResultsWindow { 185 | border: 1px solid var(--bg3font2); 186 | background-color: var(--bg3color); 187 | padding: 10px; 188 | } 189 | 190 | body.SRPage, body.SRPage * { 191 | font-family: Arial; 192 | } 193 | 194 | /* Sub Menu */ 195 | 196 | #main-menu>li ul { 197 | transition: max-height 0.2s ease-in-out; 198 | padding: 0px; 199 | border-radius: 0px !important; 200 | } 201 | 202 | #main-menu>li ul:before, #main-menu>li ul:after { 203 | border-width: 0px; 204 | } 205 | 206 | #main-menu>li>ul li a, #main-menu>li>ul li { 207 | background-color: var(--bgcolor); 208 | color: var(--bgfont); 209 | background-image: none; 210 | } 211 | 212 | #main-menu>li>ul li a:hover, #main-menu>li>ul li:hover { 213 | background-color: var(--bgfont2); 214 | color: var(--bgfont); 215 | } 216 | 217 | /***********************************/ 218 | 219 | /************** Header *************/ 220 | 221 | /***********************************/ 222 | 223 | div.headertitle { 224 | padding: 5px 40px; 225 | } 226 | 227 | div.header, div.header * { 228 | color: var(--bg3font); 229 | background-color: var(--bg3color); 230 | border-bottom: none; 231 | } 232 | 233 | div.summary { 234 | padding-right: 40px; 235 | } 236 | 237 | /***********************************/ 238 | 239 | /************** Link *************/ 240 | 241 | /***********************************/ 242 | 243 | a, a:visited, a:active, .contents a:visited, body.SRPage a, body.SRPage a:visited, body.SRPage a:active { 244 | color: var(--bgfont); 245 | text-decoration: none; 246 | } 247 | 248 | a:hover, .contents a:hover, body.SRPage a:hover { 249 | color: var(--bgfont-hover); 250 | text-decoration: var(--bgfont-hover-text-decoration); 251 | } 252 | 253 | /***********************************/ 254 | 255 | /************ Nav-path ************/ 256 | 257 | /***********************************/ 258 | 259 | #nav-path, #nav-path ul { 260 | background-image: none; 261 | } 262 | 263 | #nav-path ul { 264 | padding: 5px 30px; 265 | } 266 | 267 | #nav-path, #nav-path * { 268 | color: var(--bg3font2); 269 | background-color: var(--bg3color); 270 | border: none; 271 | font-family: Arial; 272 | } 273 | 274 | li.navelem { 275 | background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnN2Z2pzPSJodHRwOi8vc3ZnanMuY29tL3N2Z2pzIiB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgeD0iMCIgeT0iMCIgdmlld0JveD0iMCAwIDI5Mi4zNTkgMjkyLjM1OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgY2xhc3M9IiI+PGc+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+Cgk8cGF0aCBkPSJNMjIyLjk3OSwxMzMuMzMxTDk1LjA3Myw1LjQyNEM5MS40NTYsMS44MDcsODcuMTc4LDAsODIuMjI2LDBjLTQuOTUyLDAtOS4yMzMsMS44MDctMTIuODUsNS40MjQgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuODk4LTUuNDI0LDEyLjg0N3YyNTUuODEzYzAsNC45NDgsMS44MDcsOS4yMzIsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4ICAgYzQuOTQ5LDAsOS4yMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNi0xMjcuOTA3YzMuNjE0LTMuNjEzLDUuNDI4LTcuODk3LDUuNDI4LTEyLjg0NyAgIEMyMjguNDA3LDE0MS4yMjksMjI2LjU5NCwxMzYuOTQ4LDIyMi45NzksMTMzLjMzMXoiIGZpbGw9IiM3ZDdkN2QiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIHN0eWxlPSIiIGNsYXNzPSIiPjwvcGF0aD4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8L2c+CjxnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjwvZz4KPGcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPC9nPgo8L2c+PC9zdmc+); 276 | background-size: 9px; 277 | } 278 | 279 | li.navelem a { 280 | margin-right: 20px; 281 | } 282 | 283 | /***********************************/ 284 | 285 | /*************** mem ***************/ 286 | 287 | /***********************************/ 288 | 289 | .memtitle { 290 | padding: 15px; 291 | margin-top: 30px; 292 | border-top-left-radius: 0px; 293 | border-top-right-radius: 0px; 294 | } 295 | 296 | .memtitle, .memtitle *, .memtitle a:visited { 297 | border: none; 298 | background-image: none; 299 | color: var(--mem-title-font); 300 | background-color: var(--mem-title-bg); 301 | } 302 | 303 | .memproto { 304 | padding: 10px; 305 | text-shadow: none; 306 | padding: 20px; 307 | border-top-right-radius: 0px; 308 | -moz-border-radius-topright: 0px; 309 | -webkit-border-top-right-radius: 0px; 310 | } 311 | 312 | .memproto, .memproto *, .memproto a:visited { 313 | border: none; 314 | background-image: none; 315 | background-color: var(--mem-subtitle-bg); 316 | color: var(--mem-subtitle-font); 317 | font-size: inherit; 318 | line-height: 100% 319 | } 320 | 321 | .memproto a:hover { 322 | color: var(--mem-subtitle-font-hover); 323 | } 324 | 325 | .memdoc { 326 | border-bottom: 1px solid var(--mem-content-border); 327 | border-left: 1px solid var(--mem-content-border); 328 | border-right: 1px solid var(--mem-content-border); 329 | background-color: var(--mem-content-bg); 330 | color: var(--mem-content-font); 331 | border-bottom-left-radius: 0px; 332 | border-bottom-right-radius: 0px; 333 | -moz-border-radius-bottomleft: 0px; 334 | -moz-border-radius-bottomright: 0px; 335 | -webkit-border-bottom-left-radius: 0px; 336 | -webkit-border-bottom-right-radius: 0px; 337 | } 338 | 339 | .memdoc p, .memdoc dt { 340 | padding: 0px 20px; 341 | } 342 | 343 | /***********************************/ 344 | 345 | /************* Contents ************/ 346 | 347 | /***********************************/ 348 | 349 | a.anchor { 350 | padding-top: 20px; 351 | } 352 | 353 | /***********************************/ 354 | 355 | /************* fragment ************/ 356 | 357 | /***********************************/ 358 | 359 | h2.groupheader { 360 | color: #303030; 361 | font-size: 200%; 362 | font-weight: bold; 363 | border-bottom: none; 364 | padding-top: 20px; 365 | padding-bottom: 20px; 366 | } 367 | 368 | div.fragment, pre.fragment { 369 | border: none; 370 | padding: 20px; 371 | margin: none; 372 | background-color: var(--code-bg); 373 | } 374 | 375 | div.line { 376 | background-color: var(--code-bg); 377 | } 378 | 379 | span.comment { 380 | color: var(--code-comment); 381 | } 382 | 383 | span.keyword { 384 | color: var(--code-keyword); 385 | } 386 | 387 | span.preprocessor { 388 | color: var(--code-preprocessor); 389 | } 390 | 391 | span.keywordtype { 392 | color: var(--code-keywordtype); 393 | } 394 | 395 | span.mlabel { 396 | background-color: var(--code-text); 397 | color: var(--code-bg); 398 | border-top: none; 399 | border-left: none; 400 | border-right: none; 401 | border-bottom: none; 402 | padding: 10px; 403 | border-radius: 0px; 404 | } 405 | 406 | a.code { 407 | color: var(--code-code); 408 | } 409 | 410 | span.lineno, span.lineno>* { 411 | color: var(--code-line); 412 | border-right: none; 413 | background-color: var(--code-bg); 414 | } 415 | 416 | span.lineno a { 417 | background-color: var(--code-line-bg); 418 | } 419 | 420 | span.lineno a:hover { 421 | color: var(--bg3font); 422 | background-color: var(--code-line-bg); 423 | } 424 | 425 | /***********************************/ 426 | 427 | /************* directory ***********/ 428 | 429 | /***********************************/ 430 | 431 | .directory tr.even { 432 | background-color: inherit; 433 | } 434 | 435 | .iconfclosed { 436 | background-image: url(closed-folder.png); 437 | margin-right: 10px; 438 | } 439 | 440 | .iconfopen { 441 | background-image: url(opened-folder.png); 442 | margin-right: 10px; 443 | } 444 | 445 | .icondoc { 446 | background-image: url(document.png); 447 | margin-right: 10px; 448 | } 449 | 450 | .arrow { 451 | color: #7d7d7d; 452 | } 453 | 454 | .icona { 455 | vertical-align: middle; 456 | margin-right: 5px; 457 | } 458 | 459 | .icon { 460 | background-color: var(--icon-bg); 461 | color: var(--icon-font); 462 | display: table-cell; 463 | vertical-align: middle; 464 | height: 20px; 465 | width: 20px; 466 | } 467 | 468 | div.ah { 469 | background-color: var(--qindex-icon-bg); 470 | color: var(--qindex-icon-font); 471 | text-align: center; 472 | background-image: none; 473 | -webkit-box-shadow: none; 474 | box-shadow: none; 475 | -webkit-border-radius: 0px; 476 | border-radius: 0px; 477 | border: none; 478 | } 479 | 480 | div.qindex { 481 | background-color: var(--qindex-menu-bg); 482 | border: none; 483 | padding: 20px; 484 | } 485 | 486 | a.qindex { 487 | color: var(--qindex-menu-font); 488 | font-weight: normal; 489 | font-size: 20px; 490 | } 491 | 492 | a:hover.qindex { 493 | color: var(--qindex-menu-font-hover); 494 | } 495 | 496 | a:visited.qindex { 497 | color: var(--qindex-menu-font); 498 | } 499 | 500 | table.classindex { 501 | margin-top: 30px; 502 | margin-bottom: 30px; 503 | } 504 | 505 | table.classindex a.el { 506 | font-weight: normal; 507 | } 508 | 509 | /***********************************/ 510 | 511 | /************** footer *************/ 512 | 513 | /***********************************/ 514 | 515 | div.directory { 516 | border-top: 1px solid var(--bgborder); 517 | border-bottom: none; 518 | margin: 20px 0px; 519 | } 520 | 521 | div.directory a.el { 522 | font-weight: normal; 523 | } 524 | 525 | div.directory>table { 526 | margin: 20px 0px; 527 | } 528 | 529 | hr.footer { 530 | border: none; 531 | } 532 | 533 | .contents>hr { 534 | border-top: 0px; 535 | } 536 | 537 | /***********************************/ 538 | 539 | /*********** memberdecls ***********/ 540 | 541 | /***********************************/ 542 | 543 | .memItemLeft, .memItemRight { 544 | padding: 15px 30px; 545 | background-color: inherit; 546 | } 547 | 548 | .mdescRight { 549 | padding: 0px 30px 10px 30px; 550 | } 551 | 552 | .memberdecls * { 553 | background-color: inherit; 554 | } 555 | 556 | .memSeparator { 557 | border-bottom: 1px solid var(--bgborder2); 558 | } 559 | 560 | .memTemplParams { 561 | color: var(--bgfont); 562 | } 563 | 564 | /***********************************/ 565 | 566 | /*********** nav-tree ***********/ 567 | 568 | /***********************************/ 569 | 570 | #nav-tree-contents { 571 | background-color: var(--nav-tree-bg); 572 | margin: 0px; 573 | } 574 | 575 | #side-nav, #nav-tree { 576 | background-image: none; 577 | background-color: var(--nav-tree-bg); 578 | } 579 | 580 | #nav-tree .item { 581 | background-color: var(--nav-tree-bg); 582 | font-family: Arial; 583 | text-transform: uppercase; 584 | text-shadow: none; 585 | font-size: 14px; 586 | font-weight: 700; 587 | padding: 10px; 588 | color: var(--nav-tree-font); 589 | } 590 | 591 | #nav-tree .arrow { 592 | color: var(--nav-tree-font); 593 | } 594 | 595 | #nav-tree .selected { 596 | background-image: none; 597 | background-color: var(--nav-tree-bg-selected); 598 | } 599 | 600 | #nav-tree .selected a { 601 | color: var(--nav-tree-font-selected); 602 | } 603 | 604 | #nav-tree .item:hover { 605 | background-color: var(--nav-tree-bg-hover); 606 | color: var(--nav-tree-font-hover); 607 | } 608 | 609 | #nav-tree .item a:hover { 610 | color: var(--nav-tree-font-hover); 611 | } 612 | 613 | #side-nav .ui-resizable-e { 614 | background-image: none; 615 | background-color: var(--nav-tree-bg); 616 | } 617 | 618 | #nav-sync { 619 | background-color: transparent; 620 | } 621 | 622 | #nav-sync>img { 623 | content: url(off_sync.png); 624 | } 625 | 626 | #nav-sync.sync>img { 627 | content: url(on_sync.png); 628 | } 629 | 630 | /***********************************/ 631 | 632 | /*********** Plant UML ***********/ 633 | 634 | /***********************************/ 635 | 636 | .plantumlgraph > img { 637 | width: 80%; 638 | } --------------------------------------------------------------------------------