mirror of https://github.com/doccano/doccano.git
Hironsan
6 years ago
3 changed files with 294 additions and 1 deletions
Split View
Diff Options
-
190app/server/static/css/annotation.css
-
103app/server/templates/annotation/annotation_base.html
-
2app/server/templates/base.html
@ -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; |
|||
} |
|||
@ -0,0 +1,103 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<title>Inbox - Free Bulma template</title> |
|||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css"> |
|||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> |
|||
<!-- Bulma Version 0.7.1--> |
|||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" /> |
|||
<link rel="stylesheet" type="text/css" href="../../static/css/annotation.css"> |
|||
</head> |
|||
|
|||
<body> |
|||
<nav class="navbar has-shadow"></nav> |
|||
<div class="columns" id="mail-app"> |
|||
<aside class="column is-3 aside hero is-fullheight"> |
|||
<div> |
|||
<div class="main"> |
|||
<div class="field"> |
|||
<div class="control"> |
|||
<input class="input" type="text" placeholder="Search document"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="main"> |
|||
<a href="#" class="item"> |
|||
<span class="icon"> |
|||
<i class="fa fa-check"></i> |
|||
</span> |
|||
<span class="name">We must respect the will of the individual...</span> |
|||
</a> |
|||
<a href="#" class="item"> |
|||
<span class="icon"> |
|||
<i class="fa fa-check"></i> |
|||
</span> |
|||
<span class="name">Starred</span> |
|||
</a> |
|||
<a href="#" class="item"> |
|||
<span class="icon"> |
|||
<i class="fa fa-check"></i> |
|||
</span> |
|||
<span class="name">Sent Mail</span> |
|||
</a> |
|||
<a href="#" class="item"> |
|||
<span class="icon"> |
|||
<i class="fa"></i> |
|||
</span> |
|||
<span class="name">Folders</span> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</aside> |
|||
<div class="column is-7 is-offset-1 message hero is-fullheight" id="message-pane"> |
|||
|
|||
<div class="progress-bar"> |
|||
<progress class="progress is-primary" value="15" max="100">15%</progress> |
|||
</div> |
|||
|
|||
<div class="card"> |
|||
<header class="card-header"> |
|||
<div class="card-header-title tags" style="padding:1.5rem;"> |
|||
<span class="tag is-info">Person</span> |
|||
<span class="tag is-warning">Location</span> |
|||
<span class="tag is-black">Organization</span> |
|||
<span class="tag is-primary">Date</span> |
|||
</div> |
|||
</header> |
|||
<div class="card-content"> |
|||
<div class="content"> |
|||
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. |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="level" style="margin-top:30px;"> |
|||
<a class="button level-left"> |
|||
<span class="icon"> |
|||
<i class="fas fa-chevron-left"></i> |
|||
</span> |
|||
<span>Prev</span> |
|||
</a> |
|||
|
|||
<a class="button level-right"> |
|||
<span>Next</span> |
|||
<span class="icon"> |
|||
<i class="fas fa-chevron-right"></i> |
|||
</span> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script> |
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save