f3ef7db088
* Resolved D0003: Add day separators.
* Created ``daySeparatorTemplate`` for ICanHaz templating.
* Refactored ``EntryListView.render`` to spit out day separators in between
days on the timeline. Fixed the "Today" separator to the top of the entry
container. We no longer prepend entries to the entry container, we now put
them after the top separator in the entry container.
* Created ``EntryListView.formatDaySeparator`` to format the labels
according to the relative time to today: "Yesterday", "Last Monday",
"Friday, May 28" for example.
* Removed the cludgier ``toWords``, ``daysApart``, and `` capitalize``
functions that were going to serve the same purpose.
* Resolved D0021: Constrain notes width to mark.
370 lines
8.9 KiB
CSS
370 lines
8.9 KiB
CSS
/*
|
|
* author: Jonathan Bernard
|
|
* TimeStamper main CSS for screen media types
|
|
*/
|
|
/* _rounded.scss */
|
|
* {
|
|
color: inherit; }
|
|
|
|
body {
|
|
color: #222222;
|
|
width: 75%;
|
|
margin: auto;
|
|
padding: 0; }
|
|
|
|
input {
|
|
border: solid thin #555555;
|
|
-webkit-box-shadow: inset 0px 2px 4px #CCC;
|
|
box-shadow: inset 0px 2px 4px #CCC;
|
|
margin: 0;
|
|
margin-bottom: 0.5em;
|
|
padding: 0;
|
|
font-family: Cantarell; }
|
|
|
|
#top {
|
|
background: #222222;
|
|
color: #eeeeee;
|
|
margin: 0;
|
|
opacity: 1;
|
|
padding: 0.5em 0;
|
|
padding: 0.5rem 0;
|
|
position: fixed;
|
|
top: 0px;
|
|
width: 75%;
|
|
z-index: 1; }
|
|
#top * {
|
|
margin: 0;
|
|
padding: 0; }
|
|
#top #fade-bar {
|
|
background: url("img/fade.png") repeat-x;
|
|
height: 32px;
|
|
width: 100%; }
|
|
|
|
#timeline {
|
|
border-bottom: thin solid #eeeeee;
|
|
font-family: Arvo;
|
|
font-size: 1.5em;
|
|
padding: 0 2em;
|
|
padding: 0 2rem; }
|
|
#timeline .timeline-desc {
|
|
display: inline-block;
|
|
width: 70%; }
|
|
#timeline .timeline-desc-input {
|
|
width: 70%; }
|
|
#timeline .timeline-id {
|
|
display: inline-block; }
|
|
#timeline .timeline-desc-input, #timeline .timeline-id-input {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: #222222;
|
|
display: none; }
|
|
#timeline.edit-id .timeline-id-input {
|
|
display: inline-block; }
|
|
#timeline.edit-id .timeline-id {
|
|
display: none; }
|
|
#timeline.edit-desc .timeline-desc-input {
|
|
display: inline-block; }
|
|
#timeline.edit-desc .timeline-desc {
|
|
display: none; }
|
|
#timeline .drop-menu {
|
|
text-align: right;
|
|
display: inline-block;
|
|
width: 29%; }
|
|
#timeline .drop-menu .drop-menu-items {
|
|
text-align: right;
|
|
right: 0;
|
|
width: 172.41%; }
|
|
#timeline .drop-menu .drop-menu-items .new-timeline-link {
|
|
padding-right: 0.5em;
|
|
font-size: medium; }
|
|
#timeline .drop-menu .drop-menu-items .new-timeline-link a {
|
|
text-decoration: underline; }
|
|
#timeline .drop-menu .drop-menu-items .new-timeline-link img {
|
|
position: relative;
|
|
top: 4px;
|
|
left: -4px; }
|
|
#timeline .drop-menu .drop-menu-items .timeline-link {
|
|
padding: 0 0.5em;
|
|
font-size: medium;
|
|
border-left: thin solid white; }
|
|
|
|
.dialog {
|
|
background: white;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
color: #eeeeee;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
height: 100em;
|
|
z-index: 10; }
|
|
.dialog * {
|
|
margin: 0;
|
|
padding: 0; }
|
|
.dialog div.container {
|
|
background: #222222;
|
|
border-radius: 10px;
|
|
font-family: Cantarell;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 4em;
|
|
padding: 1em;
|
|
width: 20em; }
|
|
.dialog div.container h2 {
|
|
border-bottom: thin solid #eeeeee;
|
|
font-family: Arvo;
|
|
padding-bottom: 0.5em;
|
|
margin-bottom: 0.5em; }
|
|
.dialog div.container label {
|
|
display: inline-block;
|
|
width: 6em; }
|
|
.dialog div.container input {
|
|
color: #222222; }
|
|
.dialog div.container .button-panel {
|
|
margin-top: 0.5em;
|
|
overflow: hidden; }
|
|
.dialog div.container .button-panel .validate-tips {
|
|
font-size: 1em; }
|
|
.dialog div.container .button-panel .dialog-button {
|
|
float: right;
|
|
padding-left: 1em;
|
|
font-family: Arvo;
|
|
font-size: 1.2em; }
|
|
.dialog div.container .button-panel .dialog-button a {
|
|
color: #eeeeee; }
|
|
|
|
#login.dialog {
|
|
background: white;
|
|
opacity: 1; }
|
|
|
|
/*#login {
|
|
|
|
background: white;
|
|
color: $lightTxt;
|
|
margin: 0;
|
|
padding: 0;
|
|
opacity: 1;
|
|
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
|
|
width: 100%;
|
|
height: 100em;
|
|
|
|
z-index: 10;
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
div.container {
|
|
|
|
background: $darkBg;
|
|
border-radius: 10px;
|
|
font-family: Cantarell;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 4em;
|
|
padding: 1em;
|
|
width: 20em;
|
|
|
|
h2 {
|
|
border-bottom: thin solid $lightBg;
|
|
font-family: Arvo;
|
|
padding-bottom: 0.5em;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
label {
|
|
display: inline-block;
|
|
width: 6em;
|
|
}
|
|
|
|
input {
|
|
color: $darkTxt;
|
|
}
|
|
|
|
#login-button {
|
|
|
|
text-align: right;
|
|
margin-top: 0.5em;
|
|
|
|
font-family: Arvo;
|
|
font-size: 1.2em;
|
|
|
|
.validate-tips { font-size: 1em; }
|
|
|
|
a { color: $lightBg; }
|
|
}
|
|
}
|
|
}*/
|
|
#user {
|
|
font-family: "Josefin Sans";
|
|
margin-top: -0.3em;
|
|
padding: 0 2em;
|
|
margin-top: -0.3rem;
|
|
padding: 0 2rem;
|
|
width: 100%; }
|
|
#user .fullname, #user .username {
|
|
display: inline-block;
|
|
font-size: larger; }
|
|
#user .fullname-input {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
color: #222222;
|
|
display: none; }
|
|
#user.edit-fullname .fullname-input {
|
|
display: inline-block; }
|
|
#user.edit-fullname .fullname {
|
|
display: none; }
|
|
#user .user-menu {
|
|
display: inline-block; }
|
|
#user .user-menu .user-menu-items {
|
|
list-style: none;
|
|
display: none; }
|
|
#user .user-menu .user-menu-items li {
|
|
display: inline-block;
|
|
padding-left: 0.5em; }
|
|
#user .user-menu .user-menu-items a {
|
|
text-decoration: none; }
|
|
#user .user-menu .user-menu-items a:hover {
|
|
text-decoration: underline; }
|
|
#user .user-menu:hover .user-menu-items, #user .user-menu-items:hover {
|
|
display: inline-block; }
|
|
|
|
#entry-list {
|
|
margin: 6em 0 0 0;
|
|
margin: 6rem 0 0 0;
|
|
padding-bottom: 1em 0 0 0;
|
|
padding-bottom: 1rem 0 0 0; }
|
|
#entry-list .day-seperator {
|
|
background: #cccccc;
|
|
color: #222222;
|
|
font-family: Cantarell;
|
|
font-weight: bold;
|
|
margin: 1em 0 0 0;
|
|
margin: 1rem 0 0 0;
|
|
padding: 0 2em;
|
|
padding: 0 2rem; }
|
|
#entry-list .day-seperator * {
|
|
margin: 0;
|
|
padding: 0; }
|
|
#entry-list .day-seperator h4, #entry-list .day-seperator h5 {
|
|
display: inline-block; }
|
|
#entry-list .day-seperator h5 {
|
|
color: #667; }
|
|
#entry-list #new-entry {
|
|
margin: 0.5em 0 0 0;
|
|
padding: 0 2em;
|
|
margin: 0.5rem 0 0 0;
|
|
padding: 0 2rem; }
|
|
#entry-list #new-entry * {
|
|
margin: 0;
|
|
padding: 0; }
|
|
#entry-list .timestamp, #entry-list .timestamp-input, #entry-list .duration {
|
|
text-align: right;
|
|
width: 14%; }
|
|
#entry-list .mark, #entry-list .mark-input {
|
|
width: 70%; }
|
|
#entry-list .entry {
|
|
font-family: Cantarell;
|
|
padding: 0 2em;
|
|
padding: 0 2rem; }
|
|
#entry-list .entry div {
|
|
display: inline-block; }
|
|
#entry-list .entry .mark {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative; }
|
|
#entry-list .entry .mark * {
|
|
margin: 0;
|
|
padding: 0; }
|
|
#entry-list .entry .mark img.expand-entry, #entry-list .entry .mark img.collapse-entry {
|
|
display: none;
|
|
left: -20px;
|
|
position: absolute;
|
|
top: 6px; }
|
|
#entry-list .entry:hover .mark img.expand-entry, #entry-list .entry.show-notes img.collapse-entry {
|
|
display: inline; }
|
|
#entry-list .entry .mark-input, #entry-list .entry .timestamp-input, #entry-list .entry.show-notes:hover img.expand-entry {
|
|
display: none; }
|
|
#entry-list .entry .notes {
|
|
display: none;
|
|
font-family: Cantarell;
|
|
font-size: small;
|
|
margin: 0;
|
|
padding: 0 0 0 1em;
|
|
width: 70%; }
|
|
#entry-list .entry .notes :first-child {
|
|
margin-top: 0; }
|
|
#entry-list .entry .notes .notes-input, #entry-list .entry .notes pre, #entry-list .entry .notes code {
|
|
font-family: 'Anonymous Pro'; }
|
|
#entry-list .entry .notes * {
|
|
width: 100%; }
|
|
#entry-list .entry.edit-mark .mark-input {
|
|
display: inline-block; }
|
|
#entry-list .entry.edit-mark .mark {
|
|
display: none; }
|
|
#entry-list .entry.edit-timestamp .timestamp-input {
|
|
display: inline-block; }
|
|
#entry-list .entry.edit-timestamp .timestamp {
|
|
display: none; }
|
|
#entry-list .entry .notes-input {
|
|
display: none; }
|
|
#entry-list .entry.edit-notes .notes-input {
|
|
display: block; }
|
|
#entry-list .entry.edit-notes .notes-text {
|
|
display: none; }
|
|
|
|
.drop-menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative; }
|
|
.drop-menu * {
|
|
margin: 0;
|
|
padding: 0; }
|
|
.drop-menu .drop-menu-items {
|
|
display: none;
|
|
list-style: none;
|
|
position: absolute; }
|
|
.drop-menu .drop-menu-items li {
|
|
display: inline-block;
|
|
padding-left: 0.5em; }
|
|
.drop-menu:hover .drop-menu-items, .drop-menu .drop-menu-items:hover {
|
|
display: block; }
|
|
.drop-menu a {
|
|
display: inline-block;
|
|
text-decoration: none; }
|
|
.drop-menu a:hover {
|
|
text-decoration: underline; }
|
|
|
|
.footer {
|
|
background: #222222;
|
|
color: #eeeeee;
|
|
font-family: Bentham;
|
|
margin: 0;
|
|
padding: 1em 0;
|
|
padding: 1rem 0;
|
|
text-align: center;
|
|
width: 100%; }
|
|
.footer * {
|
|
margin: 0;
|
|
padding: 0; }
|
|
.footer a {
|
|
color: white;
|
|
text-decoration: none; }
|
|
.footer a:hover {
|
|
text-decoration: underline; }
|
|
|
|
.logo {
|
|
font-family: Bentham;
|
|
text-decoration: overline underline;
|
|
color: inherit; }
|
|
|
|
.hidden {
|
|
display: none; }
|