From 7a24d483f4658f874a663fee7730b974ccc5e100 Mon Sep 17 00:00:00 2001 From: Hironsan Date: Thu, 19 Jul 2018 13:51:07 +0900 Subject: [PATCH] Add annotation base template --- app/server/static/css/annotation.css | 190 ++++++++++++++++++ .../templates/annotation/annotation_base.html | 103 ++++++++++ app/server/templates/base.html | 2 +- 3 files changed, 294 insertions(+), 1 deletion(-) create mode 100644 app/server/static/css/annotation.css create mode 100644 app/server/templates/annotation/annotation_base.html diff --git a/app/server/static/css/annotation.css b/app/server/static/css/annotation.css new file mode 100644 index 00000000..183ec434 --- /dev/null +++ b/app/server/static/css/annotation.css @@ -0,0 +1,190 @@ +html, +body { + font-family: 'Open Sans', serif; + font-size: 14px; + line-height: 1.5; + height: 100%; + background-color: #f3f3f3; +} +.navbar { + background-color: #2a2e2f; +} +.navbar.has-shadow { + box-shadow: 0 1px 4px rgba(0, 0, 0, .3); +} +.nav.is-dark { + background-color: #232B2D; + color: #F6F7F7; +} +.nav.is-dark .nav-item a, +.nav.is-dark a.nav-item { + color: #F6F7F7; +} +.nav.is-dark .nav-item a.button.is-default { + color: #F6F7F7; + background-color: transparent; + border-width: 2px; +} +.nav.menu { + border-bottom: 1px solid #e1e1e1; +} +.nav.menu .nav-item .icon-btn { + border: 3px solid #B7C6C9; + border-radius: 90px; + padding: 5px 7px; + color: #B7C6C9; +} +.nav.menu .nav-item.is-active .icon-btn { + color: #2EB398; + border: 3px solid #2EB398; +} +.nav.menu .nav-item .icon-btn .fa { + font-size: 20px; + color: #B7C6C9; +} +.nav.menu .nav-item.is-active .icon-btn .fa { + color: #2EB398; +} + +.aside { + display: block; + background-color: #2a2e2f; + border-right: 1px solid #DEDEDE; +} + +.messages { + display: block; + background-color: #fff; + border-right: 1px solid #DEDEDE; +} + +.message { + display: block; + background-color: #f3f3f3; +} + +.aside .compose { + height: 95px; + margin: 0 -10px; + padding: 25px 30px; +} + +.aside .compose .button { + color: #F6F7F7; +} + +.aside .compose .button .compose { + font-size: 14px; + font-weight: 700; +} + +.aside .main { + padding: 20px 40px; + color: #6F7B7E; +} + +.aside .title { + color: #6F7B7E; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; +} + +.aside .main .item { + display: flex; + padding: 10px 0; + color: #6F7B7E; +} + +.aside .main .item.active { + background-color: #F1F1F1; + margin: 0 -50px; + padding-left: 50px; +} + +.aside .main .item:active, +.aside .main .item:hover { + background-color: #5a5e5f; + margin: 0 -50px; + padding-left: 50px; +} + +.aside .main .icon { + font-size: 19px; + padding-right: 30px; + color: #f3f3f3; +} + +.aside .main .name { + font-size: 15px; + color: #f3f3f3; + font-weight: 500; +} + +.messages { + padding: 40px 20px; +} + +.message { + padding: 40px 20px; +} + +.progress-bar { + margin-bottom:20px; + width: 150px; +} + +.pg { + display: inline-block; + top: 10px; +} + +.is-grouped .button { + background-image: linear-gradient(#F8F8F8, #F1F1F1); +} + +.is-grouped .button .fa { + font-size: 15px; + color: #AAAAAA; +} + +.inbox-messages { + margin-top: 60px; +} + +.message-preview { + margin-top: 60px; +} + +.inbox-messages .card { + width: 100%; +} + +.inbox-messages strong { + color: #5D5D5D; +} + +.inbox-messages .msg-check { + padding: 0 20px; +} + +.inbox-messages .msg-subject { + padding: 10px 0; + color: #5D5D5D; +} + +.inbox-messages .msg-attachment { + float: right; +} + +.inbox-messages .msg-snippet { + padding: 5px 20px 0px 5px; +} + +.inbox-messages .msg-subject .fa { + font-size: 14px; + padding: 3px 0; +} +.card.active { + background-color: #F5F5F5; +} diff --git a/app/server/templates/annotation/annotation_base.html b/app/server/templates/annotation/annotation_base.html new file mode 100644 index 00000000..c20151f7 --- /dev/null +++ b/app/server/templates/annotation/annotation_base.html @@ -0,0 +1,103 @@ + + + + + + + + Inbox - Free Bulma template + + + + + + + + + +
+ +
+ +
+ 15% +
+ +
+
+
+ Person + Location + Organization + Date +
+
+
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy + text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make + a type specimen book. It has survived not only five centuries, but also the leap into electronic + typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of + Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software + like Aldus PageMaker including versions of Lorem Ipsum. +
+
+
+ +
+ + + + + Prev + + + + Next + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/app/server/templates/base.html b/app/server/templates/base.html index 0feda635..a8c67e3d 100644 --- a/app/server/templates/base.html +++ b/app/server/templates/base.html @@ -21,7 +21,7 @@ -