mirror of
https://github.com/maxpozdeev/mytinytodo.git
synced 2026-03-11 08:55:27 +00:00
polish css structures
This commit is contained in:
Max Pozdeev
parent
a6afdc4279
commit
8ad3362693
3 changed files with 68 additions and 38 deletions
|
|
@ -120,7 +120,7 @@ $().ready(function(){
|
|||
|
||||
|
||||
|
||||
<h3>
|
||||
<h3 class="page-title">
|
||||
<span id="taskview" class="mtt-menu-button"><span class="btnstr"><?php _e('tasks');?></span> (<span id="total">0</span>) <span class="arrdown"></span></span>
|
||||
<span class="mtt-notes-showhide"><?php _e('notes');?> <a href="#" id="mtt-notes-show"><?php _e('notes_show');?></a> / <a href="#" id="mtt-notes-hide"><?php _e('notes_hide');?></a></span>
|
||||
<span id="tagcloudbtn" class="mtt-menu-button"><?php _e('tagcloud');?> <span class="arrdown2"></span></span>
|
||||
|
|
@ -136,8 +136,8 @@ $().ready(function(){
|
|||
|
||||
<div><a href="#" class="mtt-back-button"><?php _e('go_back');?></a></div>
|
||||
|
||||
<h3 class="mtt-inadd"><?php _e('add_task');?></h3>
|
||||
<h3 class="mtt-inedit"><?php _e('edit_task');?>
|
||||
<h3 class="page-title mtt-inadd"><?php _e('add_task');?></h3>
|
||||
<h3 class="page-title mtt-inedit"><?php _e('edit_task');?>
|
||||
<div id="taskedit-date" class="mtt-inedit">
|
||||
(<span class="date-created" title="<?php _e('taskdate_created');?>"><span></span></span><span class="date-completed" title="<?php _e('taskdate_completed');?>"> — <span></span></span>)
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,9 +14,8 @@ body { margin:0px; padding:0px; height:100%; background-color:#fff; font-family
|
|||
|
||||
td, th, input, textarea, select { font-family:"Helvetica Neue",helvetica,arial,sans-serif; font-size:1rem; }
|
||||
form { display: inline; }
|
||||
h2,h3 { margin:0; }
|
||||
h2 { font-size:1.5rem; padding-right:10px; }
|
||||
h3 { border-bottom:2px solid #B5D5FF; margin-bottom:10px; padding:0.6rem 0; font-size:1.1rem; }
|
||||
.topblock h2 { margin:0; font-size:1.5rem; padding-right:10px; }
|
||||
h3.page-title { margin:0; border-bottom:2px solid #B5D5FF; margin-bottom:10px; padding:0.6rem 0; font-size:1.1rem; }
|
||||
a { color:#0000ff; cursor:pointer; text-decoration:underline; }
|
||||
|
||||
.topblock { display:flex; align-items:flex-start; margin-bottom:1rem; }
|
||||
|
|
@ -164,9 +163,19 @@ li.task-expanded .task-toggle { transform:rotate(90deg); }
|
|||
/* #tasklist input[type="checkbox"] { vertical-align:-1px; } /* Chrome */
|
||||
|
||||
#tasklist { list-style-type: none; margin: 0; padding: 0;}
|
||||
#tasklist li { padding:0px 2px; border-bottom:1px solid #DEDEDE; min-height:18px; margin-bottom:1px; background-color:#fff; }
|
||||
#tasklist li.task-row {
|
||||
padding:1px 2px;
|
||||
border-bottom:1px solid #DEDEDE;
|
||||
min-height:20px;
|
||||
background-color:#fff;
|
||||
position:relative; /* for z-index */
|
||||
}
|
||||
#tasklist li.task-row:hover,
|
||||
#tasklist li.task-row.menu-active {
|
||||
background-color:#f6f6f6;
|
||||
/* box-shadow:1px 0 2px rgba(0,0,0,0.2), -1px 0 2px rgba(0,0,0,0.2); z-index: 1; */
|
||||
}
|
||||
#tasklist .task-container { display:flex; justify-content:flex-start; align-items:baseline; }
|
||||
#tasklist li:hover, #tasklist li.menu-active { background-color:#f6f6f6; }
|
||||
.task-left { display:inline-block; }
|
||||
.task-middle { flex-grow:1; margin:0.6rem 0px; margin-left:5px; min-width:0; /*for long text*/ flex-basis:0; /* IE11 */}
|
||||
.task-middle-top { display:flex; align-items:baseline; }
|
||||
|
|
@ -179,26 +188,24 @@ li.task-expanded .task-toggle { transform:rotate(90deg); }
|
|||
.show-inline-date li.task-completed .task-date-completed { display:inline; }
|
||||
.show-inline-date li.task-completed .task-date { display:none; }
|
||||
.task-through { overflow:hidden; flex-grow:1; }
|
||||
.task-through-right { }
|
||||
.task-title a { color:#000000; }
|
||||
.task-title a:hover { color:#af0000; }
|
||||
#mtt_body.readonly #tasklist li .task-actions { display:none; }
|
||||
#mtt_body.readonly #tasklist li.task-row .task-actions { display:none; }
|
||||
.task-listname { background-color:#eee; color:#555; padding:0px 3px; }
|
||||
.task-tags { padding:0px 2px; }
|
||||
.task-tags .tag { font-size:0.9rem; font-weight:bold; color:#333333; text-decoration:underline; }
|
||||
.task-tags .tag:hover { }
|
||||
.duedate { color:#333333; padding:0px; padding-left:1px; margin-left:5px; white-space:nowrap; }
|
||||
.duedate:before { content:'\2192\20'; }
|
||||
li.task-completed .duedate { /*font-size:0.8rem;*/ display:none; }
|
||||
#tasklist li.soon .duedate { color:#008000; }
|
||||
#tasklist li.today .duedate { color:#FF0000; }
|
||||
#tasklist li.past .duedate { color:#A52A2A; }
|
||||
#tasklist li.task-row.soon .duedate { color:#008000; }
|
||||
#tasklist li.task-row.today .duedate { color:#FF0000; }
|
||||
#tasklist li.task-row.past .duedate { color:#A52A2A; }
|
||||
li.task-completed .task-middle { color:#777777;}
|
||||
li.task-completed .task-through { text-decoration:line-through; }
|
||||
li.task-completed .task-title a { color:#777777; }
|
||||
#tasklist li.task-completed { opacity:0.6; }
|
||||
#tasklist li.task-completed:hover { opacity:1.0; }
|
||||
#tasklist li.not-in-tagpreview { opacity:0.1; }
|
||||
#tasklist li.task-row.not-in-tagpreview { opacity:0.1; }
|
||||
#tasklist .mtt-task-placeholder {
|
||||
min-height:0px; padding:0px; height:18px; line-height:18px;
|
||||
background-color:#ddd; border:1px solid #aaa;
|
||||
|
|
@ -208,16 +215,39 @@ li.task-completed .task-title a { color:#777777; }
|
|||
.taskactionbtn { height:1rem; width:1rem; background:url(images/task-menu2.svg) center no-repeat; background-size:1rem; visibility:hidden; /* allocate space */
|
||||
opacity:0.45; transition:opacity .1s ease-in; }
|
||||
.taskactionbtn::after { content:'0'; color:transparent; } /* for baseline */
|
||||
li:hover .taskactionbtn { visibility:visible; }
|
||||
li.task-row:hover .taskactionbtn { visibility:visible; }
|
||||
.taskactionbtn:hover, .taskactionbtn.mtt-menu-button-active { opacity:0.7; cursor:pointer; visibility:visible; }
|
||||
|
||||
#tasklist.filter-past li, #tasklist.filter-today li, #tasklist.filter-soon li { display:none; }
|
||||
#tasklist.filter-past li.past, #tasklist.filter-today li.today, #tasklist.filter-soon li.soon { display:block; }
|
||||
#tasklist.filter-past li.task-completed, #tasklist.filter-today li.task-completed, #tasklist.filter-soon li.task-completed { display:none; }
|
||||
#tasklist.filter-past li.task-row,
|
||||
#tasklist.filter-today li.task-row,
|
||||
#tasklist.filter-soon li.task-row {
|
||||
display:none;
|
||||
}
|
||||
#tasklist.filter-past li.task-row.past,
|
||||
#tasklist.filter-today li.task-row.today,
|
||||
#tasklist.filter-soon li.task-row.soon {
|
||||
display:block;
|
||||
}
|
||||
#tasklist.filter-past li.task-completed,
|
||||
#tasklist.filter-today li.task-completed,
|
||||
#tasklist.filter-soon li.task-completed {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.task-note-block { margin-left:2px; color:#777777; background:url(images/note.svg) left 0px no-repeat; background-size:16px 16px;
|
||||
padding-left:19px; min-height:16px; margin-top:6px; display:none; white-space:normal; word-wrap:break-word; }
|
||||
.task-note-block {
|
||||
margin-left:2px;
|
||||
color:#444;
|
||||
background:url(images/note.svg) left 0px no-repeat;
|
||||
background-size:16px 16px;
|
||||
padding-left:19px;
|
||||
min-height:16px;
|
||||
margin-top:6px;
|
||||
display:none;
|
||||
white-space:normal;
|
||||
word-wrap:break-word;
|
||||
}
|
||||
li.task-expanded .task-note-block { display:block; }
|
||||
/*li.task-expanded { box-shadow:1px 0 2px rgba(0,0,0,0.2), -1px 0 2px rgba(0,0,0,0.2); }*/
|
||||
li.task-completed .task-note-block .task-note { text-decoration:line-through; }
|
||||
.task-note-area { display:none; margin-bottom:5px; }
|
||||
.task-note-area textarea { color:#999999; width:100%; display:block; height:65px; }
|
||||
|
|
@ -244,7 +274,7 @@ li.task-completed .task-note-block .task-note { text-decoration:line-through; }
|
|||
#page_taskedit select.form-input { padding:2px; }
|
||||
#page_taskedit .form-bottom-buttons input { padding:4px; border:1px solid #ccc; border-radius:3px; background-color:#efefef; margin:2px; }
|
||||
#page_taskedit .form-row .in500 { width:100%; box-sizing:border-box; }
|
||||
#page_taskedit .form-row textarea.in500 { height:200px; /*resize:none;*/ }
|
||||
#page_taskedit .form-row textarea.in500 { height:300px; font-family: monospace; }
|
||||
#page_taskedit .form-row-short { float:left; margin-right:12px; }
|
||||
#page_taskedit .form-bottom-buttons { text-align:center; margin-top:1rem; }
|
||||
#alltags .tag { font-weight:bold; color:#333333; }
|
||||
|
|
@ -346,9 +376,10 @@ a.mtt-back-button { font-size:1rem; }
|
|||
position:relative;
|
||||
overflow:hidden; text-overflow:ellipsis;
|
||||
}
|
||||
.mtt-menu-container li:hover, .mtt-menu-container li.mtt-menu-item-active {
|
||||
.mtt-menu-container li:hover,
|
||||
.mtt-menu-container li.mtt-menu-item-active {
|
||||
background-color:#5a8df0; color:white;
|
||||
}
|
||||
}
|
||||
.mtt-menu-container li.mtt-item-disabled, .mtt-menu-container li.mtt-item-disabled a { color:#ACA899; }
|
||||
.mtt-menu-container a {
|
||||
display:block;
|
||||
|
|
@ -392,7 +423,7 @@ li.mtt-item-hidden { display:none; }
|
|||
|
||||
|
||||
/* font for small screens */
|
||||
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
|
||||
@media only screen and (max-width: 600px), only screen and (max-height: 600px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
-webkit-text-size-adjust: 100%; /* Dont increase font-size in horizontal orientation on ios */
|
||||
|
|
@ -424,22 +455,21 @@ li.mtt-item-hidden { display:none; }
|
|||
#toolbar.mtt-insearch .searchbox-c { width:100%; max-width:100%; }
|
||||
#search { padding:5px 20px; border-radius:15px; }
|
||||
|
||||
#tasklist li { padding:0px 3px; }
|
||||
.task-actions { display:none; }
|
||||
#tasklist li.task-row { padding:0px 3px; }
|
||||
.task-actions { display:none; }
|
||||
.task-date { display:none; }
|
||||
.task-note-actions { display:block; padding-top:8px; }
|
||||
.task-note-block { margin-left:0px; border-left:1px solid #777777; background:none; padding-left:4px; display:none; }
|
||||
body[dir="rtl"] .task-note-block { border-left:none; border-right:1px solid #777777; padding-left:0; padding-right:4px; }
|
||||
.task-note-block { margin-left:0px; background:none; display:none; padding-left:0px; padding-right:0px; border-top:1px solid #f0f0f0; }
|
||||
.task-note-area textarea { width:95%; }
|
||||
|
||||
#tasklist li .task-through { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
#tasklist li:hover { background-color:#ffffff; }
|
||||
#tasklist li.task-row .task-through { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||||
#tasklist li.task-row:hover { background-color:#ffffff; }
|
||||
#tasklist li.task-expanded .task-note-block { display:none; }
|
||||
#tasklist li.clicked { background-color:#f6f6f6; }
|
||||
#tasklist li.clicked .task-actions { display:block; }
|
||||
#tasklist li.clicked .task-through { white-space:normal; display:inline; }
|
||||
#tasklist li.clicked.task-has-note .task-note-block { display:block; }
|
||||
#tasklist li.clicked.doubleclicked.task-has-note .task-note-block { display:none; }
|
||||
#tasklist li.task-row.clicked { /*background-color:#f6f6f6;*/ box-shadow:1px 0 2px rgba(0,0,0,0.2), -1px 0 2px rgba(0,0,0,0.2); z-index: 1; }
|
||||
#tasklist li.task-row.clicked .task-actions { display:block; }
|
||||
#tasklist li.task-row.clicked .task-through { white-space:normal; display:inline; }
|
||||
#tasklist li.task-row.clicked.task-has-note .task-note-block { display:block; }
|
||||
/*#tasklist li.task-row.clicked.doubleclicked.task-has-note .task-note-block { display:none; }*/
|
||||
.task-toggle { display:none; }
|
||||
#tasklist .mtt-task-placeholder { line-height:1rem; padding-top:0.6rem; padding-bottom:0.6rem; }
|
||||
#tasklist .ui-sortable-helper { box-shadow:0px 0px 3px #333; }
|
||||
|
|
@ -455,6 +485,6 @@ li.mtt-item-hidden { display:none; }
|
|||
.mtt-settings-table .in350 { min-width:50px; }
|
||||
.mtt-notes-showhide { display:none; }
|
||||
|
||||
.mtt-menu-container li { padding-top:0.3rem; padding-bottom:0.3rem; }
|
||||
.mtt-menu-container li { padding-top:0.3rem; padding-bottom:0.3rem; }
|
||||
|
||||
} /* end of @media min 600px */
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ header('Content-type:text/html; charset=utf-8');
|
|||
|
||||
<div><a href="#" class="mtt-back-button"><?php _e('go_back');?></a></div>
|
||||
|
||||
<h3><?php _e('set_header');?></h3>
|
||||
<h3 class="page-title"><?php _e('set_header');?></h3>
|
||||
|
||||
<div id="settings_msg" style="display:none"></div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue