feat: sync UI with lottie.github.io (#12)

* chore: update .gitignore

* docs(editing/schema): macos graphviz note

* ci: deploy pages to temp branch

* feat: adjust UI with lottie.github.io

* fix(gitignore): dont list tools/schema_tools

* fix: bring back cinder theme and style it

* ci: bring back main branch

.github/workflows/pages.yml

@@ -3,7 +3,6 @@ on:
     push:
         branches:
             - main
-            - docs-setup
     workflow_dispatch:
 
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.

.gitignore

@@ -1,2 +1,6 @@
 docs/lottie.schema.json
 site/
+__pycache__
+
+# Operating system
+.DS_Store

docs/editing/schema.md

@@ -76,6 +76,8 @@ There are several Python scripts that are used in the build process,
 ensure the requirements listed under `/tools/requirements.txt` are
 installed in your Python environment.
 
+> If you facing errors on MacOS - you might need to install `graphviz` [differently]((https://graphviz.org/download/#mac))
+
 The first step is to build the combined schema:
 
 ```bash

docs/static/css/lottie-theme.css

@@ -0,0 +1,113 @@
+body {
+  color: #1a1c1c;
+}
+
+.navbar {
+  font-size: 16px;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
+}
+
+.navbar-default {
+  background-color: white;
+  border-bottom: 0;
+}
+
+.navbar-default .navbar-brand {
+  color: #006a5f;
+  font-weight: 600;
+}
+
+.navbar-default .navbar-nav > li > a {
+  color: #006a5f;
+  font-weight: 600;
+}
+
+.navbar-default .navbar-nav > .active > a,
+.navbar-default .navbar-nav > .active > a:hover,
+.navbar-default .navbar-nav > .active > a:focus {
+  color: #1a1c1c;
+  background-color: white;
+}
+
+.navbar-default .navbar-nav > li > a:hover,
+.navbar-default .navbar-nav > li > a:focus {
+  color: #1a1c1c;
+  background-color: white;
+}
+
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .open > a:hover,
+.navbar-default .navbar-nav > .open > a:focus {
+  color: #1a1c1c;
+  background-color: white;
+}
+
+.navbar-default .dropdown-menu {
+  background-color: white;
+}
+
+.navbar-default .dropdown-menu > li > a,
+.navbar-default .dropdown-menu > li > a:focus {
+  color: #1a1c1c;
+  font-weight: 600;
+}
+
+.navbar-default .dropdown-menu > li > a:hover,
+.navbar-default .dropdown-menu > .active > a,
+.navbar-default .dropdown-menu > .active > a:hover {
+  background-color: #ebfbfa;
+}
+
+.navbar-default .navbar-nav > .disabled > a,
+.navbar-default .navbar-nav > .disabled > a:hover,
+.navbar-default .navbar-nav > .disabled > a:focus {
+  color: rgba(0, 106, 95, 0.5);
+}
+
+.navbar-dark .navbar-brand {
+  color: #006a5f;
+}
+
+.navbar-default .navbar-brand:hover,
+.navbar-default .navbar-brand:focus {
+  color: #006a5f;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+  background-color: #006a5f;
+}
+
+.navbar-default .navbar-collapse,
+.navbar-default .navbar-form {
+  border-color: rgba(0, 0, 0, 0.075);
+}
+
+.navbar-default .navbar-nav .open .dropdown-menu > li > a {
+  color: #006a5f !important;
+}
+
+a {
+  color: #006a5f;
+}
+
+a:hover {
+  color: #1a1c1c;
+}
+
+.dropdown-item {
+  color: #1a1c1c;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+  color: #1a1c1c;
+  text-decoration: none;
+  background-color: #ebfbfa;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  color: #fff;
+  text-decoration: none;
+  background-color: #006a5f;
+}

tools/theme/main.html

@@ -24,6 +24,7 @@
     <script src="/lottie-spec/static/js/lottie_raw_utils.js"></script>
     <script src="/lottie-spec/static/js/value_editors.js"></script>
     <link rel="stylesheet" href="/lottie-spec/static/css/style.css" />
+    <link rel="stylesheet" href="/lottie-spec/static/css/lottie-theme.css" />
 {% endblock %}