Browse Source

Refactor css files

Change indent size
pull/10/head
Hironsan 6 years ago
parent
commit
fdbdbeee83
3 changed files with 201 additions and 167 deletions
  1. 76
      app/server/static/css/admin.css
  2. 244
      app/server/static/css/annotation.css
  3. 48
      app/server/static/css/forum.css

76
app/server/static/css/admin.css

@ -1,80 +1,80 @@
.aside { .aside {
display: block;
background-color: #2a2e2f;
border-right: 1px solid #DEDEDE;
display: block;
background-color: #2a2e2f;
border-right: 1px solid #DEDEDE;
} }
.messages { .messages {
display: block;
background-color: #f3f3f3;
border-right: 1px solid #DEDEDE;
display: block;
background-color: #f3f3f3;
border-right: 1px solid #DEDEDE;
} }
.message { .message {
display: block;
background-color: #f3f3f3;
display: block;
background-color: #f3f3f3;
} }
.aside .main { .aside .main {
padding: 20px 40px;
color: #6F7B7E;
padding: 20px 40px;
color: #6F7B7E;
} }
.aside .title { .aside .title {
color: #6F7B7E;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #6F7B7E;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
} }
.aside .main .item { .aside .main .item {
display: flex;
padding: 10px 0;
color: #6F7B7E;
display: flex;
padding: 10px 0;
color: #6F7B7E;
} }
.aside .main .item.active { .aside .main .item.active {
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
} }
.aside .main .item:active, .aside .main .item:active,
.aside .main .item:hover { .aside .main .item:hover {
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
} }
.aside .main .icon { .aside .main .icon {
font-size: 19px;
padding-right: 30px;
color: #f3f3f3;
font-size: 19px;
padding-right: 30px;
color: #f3f3f3;
} }
.aside .main .name { .aside .main .name {
font-size: 15px;
color: #f3f3f3;
font-weight: 500;
font-size: 15px;
color: #f3f3f3;
font-weight: 500;
} }
.messages { .messages {
padding: 40px 20px;
padding: 40px 20px;
} }
.message { .message {
padding: 40px 20px;
padding: 40px 20px;
} }
.content { .content {
font-size: 16pt;
line-height: 250%;
font-size: 16pt;
line-height: 250%;
} }
.bordered-row { .bordered-row {
border-color: #dfe8f1;
border-top-width: 1px;
border-top-style: dashed;
align-items: center;
padding-top: .75rem;
border-color: #dfe8f1;
border-top-width: 1px;
border-top-style: dashed;
align-items: center;
padding-top: .75rem;
} }

244
app/server/static/css/annotation.css

@ -1,264 +1,266 @@
html, html,
body { body {
font-family: arial, 'Open Sans', serif;
line-height: 1.5;
height: 100%;
background-color: #f3f3f3;
font-family: arial, 'Open Sans', serif;
line-height: 1.5;
height: 100%;
background-color: #f3f3f3;
} }
.aside { .aside {
display: block;
background-color: #2a2e2f;
border-right: 1px solid #DEDEDE;
display: block;
background-color: #2a2e2f;
border-right: 1px solid #DEDEDE;
} }
.messages { .messages {
display: block;
background-color: #fff;
border-right: 1px solid #DEDEDE;
display: block;
background-color: #fff;
border-right: 1px solid #DEDEDE;
} }
.message { .message {
display: block;
background-color: #f3f3f3;
display: block;
background-color: #f3f3f3;
} }
.aside .main { .aside .main {
padding: 20px 40px;
color: #6F7B7E;
padding: 20px 40px;
color: #6F7B7E;
} }
.aside .title { .aside .title {
color: #6F7B7E;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #6F7B7E;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
} }
.aside .main .item { .aside .main .item {
display: flex;
padding: 10px 0;
color: #6F7B7E;
display: flex;
padding: 10px 0;
color: #6F7B7E;
} }
.aside .main .item.active { .aside .main .item.active {
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
} }
.aside .main .item:active, .aside .main .item:active,
.aside .main .item:hover { .aside .main .item:hover {
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
background-color: #5a5e5f;
margin: 0 -50px;
padding-left: 50px;
} }
.aside .main .icon { .aside .main .icon {
font-size: 19px;
padding-right: 30px;
color: #f3f3f3;
font-size: 19px;
padding-right: 30px;
color: #f3f3f3;
} }
.aside .main .name { .aside .main .name {
font-size: 15px;
color: #f3f3f3;
font-weight: 500;
font-size: 15px;
color: #f3f3f3;
font-weight: 500;
} }
.messages { .messages {
padding: 40px 20px;
padding: 40px 20px;
} }
.message { .message {
padding: 40px 20px;
padding: 40px 20px;
} }
.progress-bar { .progress-bar {
margin-bottom:20px;
width: 150px;
margin-bottom: 20px;
width: 150px;
} }
.pg { .pg {
display: inline-block;
top: 10px;
display: inline-block;
top: 10px;
} }
.is-grouped .button { .is-grouped .button {
background-image: linear-gradient(#F8F8F8, #F1F1F1);
background-image: linear-gradient(#F8F8F8, #F1F1F1);
} }
.is-grouped .button .fa { .is-grouped .button .fa {
font-size: 15px;
color: #AAAAAA;
font-size: 15px;
color: #AAAAAA;
} }
.inbox-messages { .inbox-messages {
margin-top: 60px;
margin-top: 60px;
} }
.message-preview { .message-preview {
margin-top: 60px;
margin-top: 60px;
} }
.inbox-messages .card { .inbox-messages .card {
width: 100%;
width: 100%;
} }
.inbox-messages strong { .inbox-messages strong {
color: #5D5D5D;
color: #5D5D5D;
} }
.inbox-messages .msg-check { .inbox-messages .msg-check {
padding: 0 20px;
padding: 0 20px;
} }
.inbox-messages .msg-subject { .inbox-messages .msg-subject {
padding: 10px 0;
color: #5D5D5D;
padding: 10px 0;
color: #5D5D5D;
} }
.inbox-messages .msg-attachment { .inbox-messages .msg-attachment {
float: right;
float: right;
} }
.inbox-messages .msg-snippet { .inbox-messages .msg-snippet {
padding: 5px 20px 0px 5px;
padding: 5px 20px 0px 5px;
} }
.inbox-messages .msg-subject .fa { .inbox-messages .msg-subject .fa {
font-size: 14px;
padding: 3px 0;
font-size: 14px;
padding: 3px 0;
} }
.card.active { .card.active {
background-color: #F5F5F5;
background-color: #F5F5F5;
} }
.content { .content {
font-size: 16pt;
line-height: 250%;
font-size: 16pt;
line-height: 250%;
} }
.content .tag { .content .tag {
font-size: 16pt;
height: 1.5em;
padding-left: .5em;
padding-right: .5em;
font-size: 16pt;
height: 1.5em;
padding-left: .5em;
padding-right: .5em;
} }
:focus { :focus {
outline: 0;
outline: 0;
} }
.hidden { .hidden {
display: none;
display: none;
} }
.todoapp { .todoapp {
background: #fff;
margin: 30px 0 0 0;
position: relative;
box-shadow: 0 2px 3px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.1)
background: #fff;
margin: 30px 0 0 0;
position: relative;
box-shadow: 0 2px 3px rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .1)
} }
.todoapp input::-webkit-input-placeholder { .todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
font-style: italic;
font-weight: 300;
color: #e6e6e6;
} }
.todoapp input::-moz-placeholder { .todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
font-style: italic;
font-weight: 300;
color: #e6e6e6;
} }
.todoapp input::input-placeholder { .todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
font-style: italic;
font-weight: 300;
color: #e6e6e6;
} }
.new-todo, .new-todo,
.edit { .edit {
position: relative;
margin: 0;
width: 100%;
font-size: 16pt;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
margin: 0;
width: 100%;
font-size: 16pt;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
.new-todo { .new-todo {
padding: 1.5rem;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
padding: 1.5rem;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
} }
.todo-list { .todo-list {
margin: 0;
padding: 0;
list-style: none;
margin: 0;
padding: 0;
list-style: none;
} }
.todo-list li { .todo-list li {
position: relative;
font-size: 16pt;
border-bottom: 1px solid #ededed;
position: relative;
font-size: 16pt;
border-bottom: 1px solid #ededed;
} }
.todo-list li:last-child { .todo-list li:last-child {
border-bottom: none;
border-bottom: none;
} }
.todo-list li.editing { .todo-list li.editing {
border-bottom: none;
padding: 0;
border-bottom: none;
padding: 0;
} }
.todo-list li.editing .edit { .todo-list li.editing .edit {
display: block;
padding: 12px 16px;
display: block;
padding: 12px 16px;
} }
.todo-list li.editing .view { .todo-list li.editing .view {
display: none;
display: none;
} }
.todo-list li label { .todo-list li label {
word-break: break-all;
padding: 1.5rem 60px 1.5rem 1.5rem;
display: block;
line-height: 1.2;
transition: color 0.4s;
word-break: break-all;
padding: 1.5rem 60px 1.5rem 1.5rem;
display: block;
line-height: 1.2;
transition: color 0.4s;
} }
.todo-list li .destroy { .todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto 0;
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto 0;
} }
.todo-list li:hover .destroy { .todo-list li:hover .destroy {
display: block;
display: block;
} }
.todo-list li .edit { .todo-list li .edit {
display: none;
display: none;
} }
.todo-list li.editing:last-child { .todo-list li.editing:last-child {
margin-bottom: -1px;
margin-bottom: -1px;
} }

48
app/server/static/css/forum.css

@ -1,48 +1,64 @@
html,body {
html,
body {
font-family: 'Open Sans', serif; font-family: 'Open Sans', serif;
background: #F9F9F9; background: #F9F9F9;
} }
footer { footer {
background-color: #2a2e2f !important; background-color: #2a2e2f !important;
padding: 2rem 1.5rem 3rem !important; padding: 2rem 1.5rem 3rem !important;
} }
.footer a { .footer a {
color: white; color: white;
} }
.footer h2 { .footer h2 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.footer p, strong {
.footer p,
strong {
color: lemonchiffon; color: lemonchiffon;
} }
.navbar { .navbar {
background-color: #2a2e2f; background-color: #2a2e2f;
} }
.navbar.has-shadow { .navbar.has-shadow {
box-shadow: 0 1px 4px rgba(0, 0, 0, .3); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
} }
.navbar-item { .navbar-item {
color: white; color: white;
} }
.topNav { .topNav {
border-top: 5px solid #3498DB; border-top: 5px solid #3498DB;
} }
.topNav .container { .topNav .container {
border-bottom: 1px solid #E6EAEE; border-bottom: 1px solid #E6EAEE;
} }
.container .columns { .container .columns {
margin: 2rem 0; margin: 2rem 0;
} }
aside.menu { aside.menu {
padding-top: 3rem; padding-top: 3rem;
} }
aside.menu .menu-list { aside.menu .menu-list {
line-height: 1.5; line-height: 1.5;
} }
aside.menu .menu-label { aside.menu .menu-label {
padding-left: 10px; padding-left: 10px;
font-weight: 700; font-weight: 700;
} }
.button.is-primary.is-alt { .button.is-primary.is-alt {
background: #00c6ff; background: #00c6ff;
background: -webkit-linear-gradient(to bottom, #0072ff, #00c6ff); background: -webkit-linear-gradient(to bottom, #0072ff, #00c6ff);
@ -52,44 +68,53 @@ aside.menu .menu-label {
height: 3rem; height: 3rem;
line-height: 2.8; line-height: 2.8;
} }
.media-left img { .media-left img {
border-radius: 50%; border-radius: 50%;
} }
.media-content p { .media-content p {
font-size: 14px; font-size: 14px;
line-height: 2.3; line-height: 2.3;
font-weight: 700; font-weight: 700;
color: #8F99A3; color: #8F99A3;
} }
article.post { article.post {
margin: 1rem; margin: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
border-bottom: 1px solid #E6EAEE; border-bottom: 1px solid #E6EAEE;
} }
article.post:last-child { article.post:last-child {
padding-bottom: 0; padding-bottom: 0;
border-bottom: none; border-bottom: none;
} }
.menu-list li{
.menu-list li {
padding: 5px; padding: 5px;
} }
.tag:not(body).is-grey { .tag:not(body).is-grey {
background-color: #eee;
color: #666;
background-color: #eee;
color: #666;
} }
p { p {
font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif; font-family: "游ゴシック体", YuGothic, "YuGothic M", sans-serif;
} }
.tabs-details { .tabs-details {
margin-right: 1px; margin-right: 1px;
} }
.project-image { .project-image {
background-image: url('/static/images/cat.png'); background-image: url('/static/images/cat.png');
background-size: cover;
background-repeat: no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; background-position: center center;
} }
.is-shady { .is-shady {
animation: flyintoright .4s backwards; animation: flyintoright .4s backwards;
background: #fff; background: #fff;
@ -100,21 +125,28 @@ p {
position: relative; position: relative;
transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} }
.is-shady:hover { .is-shady:hover {
box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19); box-shadow: 0 10px 16px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .19);
} }
.menu-list a.active { .menu-list a.active {
background-color: #3273dc; background-color: #3273dc;
color: #fff; color: #fff;
} }
.select-height { .select-height {
height: 100% !important; height: 100% !important;
max-height: 200px !important; max-height: 200px !important;
} }
.pagination-link, .pagination-next, .pagination-previous {
.pagination-link,
.pagination-next,
.pagination-previous {
background-color: white; background-color: white;
margin-top: 20px; margin-top: 20px;
} }
.card-header-title { .card-header-title {
padding: 1.5rem; padding: 1.5rem;
} }
Loading…
Cancel
Save