From 2dbea30842ec63a68055245fe26633bb7913daf3 Mon Sep 17 00:00:00 2001 From: Maxime Quandalle Date: Tue, 12 May 2015 19:20:58 +0200 Subject: Renaissance _,,ad8888888888bba,_ ,ad88888I888888888888888ba, ,88888888I88888888888888888888a, ,d888888888I8888888888888888888888b, d88888PP"""" ""YY88888888888888888888b, ,d88"'__,,--------,,,,.;ZZZY8888888888888, ,8IIl'" ;;l"ZZZIII8888888888, ,I88l;' ;lZZZZZ888III8888888, ,II88Zl;. ;llZZZZZ888888I888888, ,II888Zl;. .;;;;;lllZZZ888888I8888b ,II8888Z;; `;;;;;''llZZ8888888I8888, II88888Z;' .;lZZZ8888888I888b II88888Z; _,aaa, .,aaaaa,__.l;llZZZ88888888I888 II88888IZZZZZZZZZ, .ZZZZZZZZZZZZZZ;llZZ88888888I888, II88888IZZ<'(@@>Z| |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I ,II88888; `""" ;| |ZZ; `""" ;;llZ8888888888I888 II888888l `;; .;llZZ8888888888I888, ,II888888Z; ;;; .;;llZZZ8888888888I888I III888888Zl; .., `;; ,;;lllZZZ88888888888I888 II88888888Z;;...;(_ _) ,;;;llZZZZ88888888888I888, II88888888Zl;;;;;' `--'Z;. .,;;;;llZZZZ88888888888I888b ]I888888888Z;;;;' ";llllll;..;;;lllZZZZ88888888888I8888, II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888 II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888 `II8888888888888Zl;. ,;;lllZZZZZZZZWMZ88888888888I88888 II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888, `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888 `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888, II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b, ,II8888888888888888b .;;lllllll;;;.;..88888888I88888888b, II888888888888888PZI;. .`;;;.;;;..; ...88888888I8888888888, II888888888888PZ;;';;. ;. .;. .;. .. Y8888888I88888888888b, ,II888888888PZ;;' `8888888I8888888888888b, II888888888' 888888I8888888888888888 ,II888888888 ,888888I8888888888888888 ,d88888888888 d888888I8888888888ZZZZZZ ,ad888888888888I 8888888I8888ZZZZZZZZZZZZ 888888888888888' 888888IZZZZZZZZZZZZZZZZZ 8888888888P'8P' Y888ZZZZZZZZZZZZZZZZZZZZ 888888888, " ,ZZZZZZZZZZZZZZZZZZZZZZZ 8888888888, ,ZZZZZZZZZZZZZZZZZZZZZZZZZZ 888888888888a, _ ,ZZZZZZZZZZZZZZZZZZZZ88888888 888888888888888ba,_d' ,ZZZZZZZZZZZZZZZZZ8888888888888 8888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ88888888888888888 88888888888888888888888888888888888ZZZZZZZZZZZZZZZ88888888888888888888 8888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888 888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888 8888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888 88888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888888 8888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand 8 88888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 8 8888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888888 --- client/styles/main.styl | 814 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 814 insertions(+) create mode 100644 client/styles/main.styl (limited to 'client/styles/main.styl') diff --git a/client/styles/main.styl b/client/styles/main.styl new file mode 100644 index 00000000..0f12e35e --- /dev/null +++ b/client/styles/main.styl @@ -0,0 +1,814 @@ +@import 'nib' + +html, body, input, select, textarea, button + font: 14px "Helvetica Neue", Arial, Helvetica, sans-serif + line-height: 18px + color: #4d4d4d + +html + font-size: 100% + -webkit-text-size-adjust: 100% + +p + margin: 0 + +ol, +ul + list-style: none + margin: 0 + padding: 0 + +blockquote, q + quotes: none + + &:before, + &:after + content: none + +ins + text-decoration: none + +del + text-decoration: line-through + +table + border-collapse: collapse + border-spacing: 0 + width: 100% + +hr + height: 1px + border: 0 + border: none + width: 100% + background: #dbdbdb + color: #dbdbdb + margin: 15px 0 + padding: 0 + +article, +aside, +figure, +footer, +header, +hgroup, +nav, +section + display: block + +caption, th, td + text-align: left + font-weight: 400 + +a img + border: none + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +nav, +section, +summary + display: block + +html + max-height: 100% + +body + background: darken(white, 10%) + margin: 0 + position: relative + z-index: 0 + overflow-y: auto + +#surface + display: flex + flex-direction: column + min-height: 100vh + +#content + position: relative + flex: 1 + +div::selection + background: transparent + +h1 + font-size: 22px + line-height: 1.2em + margin: 0 0 10px + +h2 + font-size: 18px + line-height: 1.2em + margin: 0 0 9px + +h3, h4, h5, h6 + font-size: 16px + line-height: 1.25em + margin: 0 0 6px + +.quiet, .quiet a + color: #8c8c8c + +.error, .error a + color: #eb3800 + +.warning + background: #f0ecdb + border-radius: 3px + color: #aa8f09 + padding: 6px 8px + + a + color: #aa8f09 + +a + color: #444 + cursor: pointer + text-decoration: none + + &:hover + color: #111 + + &.disabled, + &.disabled:hover + color: #8c8c8c + cursor: default + text-decoration: none + +table, p + margin-bottom: 8px + +pre + margin: 15px 0 + white-space: pre + max-height: 516px + +pre, +code, +tt + font-family: bitstream vera sans mono, andale mono, lucida console, monospace + line-height: 1.25em + +blockquote + margin: 8px 0 8px 8px + border-left: 1px solid #ccc + color: #666 + padding: 0 0 0 8px + +table, td, th + vertical-align: top + border-top: 1px solid #ccc + border-left: 1px solid #ccc + +td, th + padding: 5px + border-right: 1px solid #ccc + border-bottom: 1px solid #ccc + +th + font-weight: 700 + +thead + background: #fff + background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%) + +tbody + background-color: #fff + +dl, dt + margin-bottom: 8px + +dd + margin: 0 0 16px 24px + +.emoji + height: 18px + width: 18px + vertical-align: text-bottom + +.edit + display: none + position: relative + +.editable .current + cursor: pointer + +.editable.editing + cursor: auto + +.edits-warning, .edits-error + display: none + clear: both + +.editing .edit + display: block + float: left + padding-bottom: 9px + z-index: 100 + width: 100% + +.editing .edits-warning + display: none!important + +.editing .edit .field, +.editing .edit .field:active + background: rgba(0, 0, 0, .03) + box-shadow: inset 0 1px 6px rgba(0, 0, 0, .1) + border-color: rgba(0, 0, 0, .15) + margin-bottom: 4px + +.edit-heavy .field + font-size: 15px + font-weight: 700 + line-height: 18px + + +.board-backgrounds-list + + .board-background-select + box-sizing: border-box + display: block + float: left + width: 50% + padding-top: 12px + position: relative + z-index: 1 + + &:nth-child(-n + 2) + padding-top: 0 + + &:nth-child(2n) + padding-left: 6px + + &:nth-child(2n+1) + padding-right: 6px + + .background-box + border-radius: 3px + background-size: cover + display: block + height: 74px + position: relative + width: 100% + cursor: pointer + display: flex + align-items: center + justify-content: center + + i.fa-check + font-size: 25px + color: white + +.new-comment + position: relative + margin: 0 0 20px 38px + + .member + opacity: .7 + position: absolute + top: 1px + left: -38px + + .helper + bottom: 0 + display: none + position: absolute + right: 9px + + &.focus + + .member + opacity: 1 + + .helper + display: inline-block + + .new-comment-input + min-height: 108px + color: #4d4d4d + cursor: auto + overflow: hidden + word-wrap: break-word + + .too-long + margin-top: 8px + +.new-comment-input + background-color: #fff + border: 0 + box-shadow: 0 1px 2px rgba(0, 0, 0, .23) + color: #8c8c8c + height: 36px + margin: 4px 4px 6px 0 + padding: 9px 11px + width: 100% + + &:hover, + &:focus + background-color: #fff + box-shadow: 0 1px 3px rgba(0, 0, 0, .33) + border: 0 + cursor: pointer + + &:focus + cursor: auto + +.editing-members + float: right + + .edit-in-progress + display: inline-block + border: 1px solid #ccc + background: #ddd + margin: 0 4px + border-radius: 2px + + .inline-member + cursor: default + + .inline-member-av + width: 18px + height: 18px + margin: 0 0 -4px 0 + + .initials + margin-left: 3px + + .icon + animation: pulsate 1s ease-in alternate + animation-iteration-count: infinite + +@keyframes pulsate + 0% + opacity: 1 + + to + opacity: .4 + +.list-voters.compact .voter + position: relative + min-height: 36px + + .member + left: 0 + position: absolute + top: 0 + + .title + display: block + line-height: 30px + left: 0 + overflow: hidden + padding-left: 38px + position: absolute + text-overflow: ellipsis + top: 0 + white-space: nowrap + width: 230px + +.list-voters .title + display: none + +.card-composer + padding-bottom: 8px + +.cc-controls + margin-top: 1px + + input[type="submit"] + float: left + margin-top: 0 + padding: 5px 18px + + .icon-lg + float: left + + .cc-opt + float: right + +.minicard-placeholder, +.minicard.placeholder + background: silver + border: none + min-height: 18px + + .hook + height: 18px + position: absolute + right: 0 + top: 0 + width: 18px + +.chrome .minicard.ui-sortable-helper, +.safari .minicard.ui-sortable-helper + box-shadow: -2px 2px 6px rgba(0, 0, 0, .2) + +input[type="text"].attachment-add-link-input + float: left + margin: 0 0 8px + width: 80% + +input[type="submit"].attachment-add-link-submit + float: left + margin: 0 0 8px 4px + padding: 6px 12px + width: 18% + +.card-detail-badge + background-color: #dbdbdb + border-radius: 3px + color: #737373 + cursor: default + display: block + height: 20px + line-height: 20px + margin: 0 4px 4px 0 + padding: 5px 10px + text-align: center + text-decoration: none + + &:hover + color: #737373 + + &.badge-state-clickable + text-decoration: underline + +.badge-state-clickable:hover + color: #262626 + cursor: pointer + text-decoration: underline + +.card-detail-badge-aging:first-letter + text-transform: uppercase + +.badge + color: #8c8c8c + float: left + height: 18px + margin: 0 3px 3px 0 + padding: 0 4px 0 0 + position: relative + text-decoration: none + +.badge-icon + float: left + +.badge-text + float: left + font-size: 12px + +.badge-state-image-only + padding: 0 + + .badge-icon + margin-right: 0 + +.badge-state-clickable + cursor: pointer + + .badge-text + text-decoration: underline + +.badge-state-complete + background-color: #4aba12 + border-radius: 3px + color: #fff + + .badge-icon + color: #fff + +.badge-state-unread-notification + background-color: #990f0f + border-radius: 3px + color: #fff + + .badge-icon + color: #fff + +.badge-state-voted + background-color: #dbdbdb + border-radius: 3px + color: #8c8c8c + + .badge-icon + color: #999 + +.badge-state-due-soon, .badge-state-due-soon:hover + background-color: #e6bf00 + border-radius: 3px + color: #fff + + .badge-icon + color: #fff + +.badge-state-due-now, .badge-state-due-now:hover + background-color: #990f0f + border-radius: 3px + color: #fff + + .badge-icon + color: #fff + +.badge-state-due-past, .badge-state-due-past:hover + background-color: #ad8585 + border-radius: 3px + color: #fff + + .badge-icon + color: #fff + +.checklist-list:empty + display: none + +.checklist + margin-bottom: 16px + +.checklist.placeholder + background: #dcdcdc + border-radius: 3px + +.checklist.ui-sortable-helper + background: rgba(240, 240, 240, .85) + border-radius: 3px + + .checklist-title, + .current, + .window-module-title + cursor: grabbing + + .icon-menu + visibility: hidden + +.checklist-items-list + min-height: 2px + +.checklist-item + clear: both + margin: 0 0 6px + padding: 0 0 4px 38px + position: relative + transform-origin: left bottom + transition-property: transform, opacity, height, padding, margin + transition-duration: .14s + transition-timing-function: ease-in + + &.placeholder + background: #dcdcdc + border-radius: 3px + margin: -5px -5px 5px 5px + padding: 5px 0 + + &.ui-sortable-helper + background: rgba(240, 240, 240, .85) + border-radius: 3px + margin: -3px -3px -3px 7px + padding: 3px 3px 3px 33px + + .checklist-item-checkbox + top: 2px + left: 2px + +.hide-completed-items .checklist-item-fade-out + height: 0 + margin: 0 + opacity: 0 + padding: 0 + transform: rotate(-5deg) translateX(-10px) translateY(-10px) + +.checklist-item-checkbox + background: #fff + border-radius: 3px + box-shadow: 0 2px 3px rgba(0, 0, 0, .1) + border: 1px solid #ccc + border-bottom-color: #b3b3b3 + font-weight: 700 + position: absolute + left: 6px + line-height: 18px + overflow: hidden + text-align: center + text-indent: 100% + top: -2px + height: 18px + width: 18px + white-space: nowrap + + &.enabled:hover + background-color: #f0f0f0 + border-color: #ccc + box-shadow: 0 1px 2px rgba(0, 0, 0, .1) + color: #8c8c8c + cursor: pointer + text-indent: 0 + + &.enabled:active + background-color: #e3e3e3 + border-color: #ccc + box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1) + color: #4d4d4d + text-indent: 0 + +.checklist-item-details-text + min-height: 18px + margin-bottom: 0 + + &.enabled:hover + color: #4d4d4d + cursor: pointer + + &:empty + content: "No name" + color: #8c8c8c + +.checklist-item-state-complete + + .checklist-item-details-text + color: #8c8c8c + font-style: italic + text-decoration: line-through + + img + opacity: .3 + + .checklist-item-checkbox + background-color: #f0f0f0 + border-color: #dbdbdb + border-bottom-color: #ccc + box-shadow: none + text-indent: 0 + + &.enabled:hover + background-color: #e6e6e6 + border-color: #ccc + box-shadow: none + + &.enabled:active + background-color: #dbdbdb + box-shadow: inset 0 3px 6px rgba(0, 0, 0, .1) + +.hide-completed-items .checklist-item-state-complete + display: none + +.checklist-new-item-text, +.checklist-new-item-text:hover + background: transparent + border-color: transparent + box-shadow: none + color: #8c8c8c + cursor: pointer + margin-bottom: 4px + max-height: 32px + overflow: hidden + resize: none + text-decoration: none + + .checklist-new-item.focus & + background: #fff + border-color: #2b7cab + box-shadow: 0 0 3px #2b7cab + color: #4d4d4d + cursor: text + max-height: none + resize: vertical + +.checklist-progress + margin-bottom: 12px + position: relative + +.checklist-progress-percentage + color: #8c8c8c + font-size: 11px + line-height: 10px + position: absolute + left: 0 + top: -1px + text-align: center + width: 38px + +.checklist-progress-bar + background: #dbdbdb + border-radius: 3px + clear: both + height: 8px + margin: 0 0 0 38px + overflow: hidden + position: relative + +.checklist-progress-bar-current + background: #479fd1 + background: linear-gradient(to bottom, #479fd1 0, #2288c3 100%) + bottom: 0 + left: 0 + position: absolute + top: 0 + transition: width .14s ease-in, background .14s ease-in + +.checklist-progress-bar-current-complete + background: #24a828 + +.checklist-completed-text + display: block + margin: 8px 0 0 38px + +.checklist .edit + clear: both + margin-top: -5px + +.explorer .av-btn + background: url(about:blank) + +.atMention + background: #dbdbdb + border-radius: 3px + padding: 1px 4px + margin: -1px 0 + display: inline-block + + &.me + background: #cfdfe8 + +.helper + background-color: #e6e6e6 + border-radius: 3px + color: #8c8c8c + font-size: 13px + line-height: 15px + margin: 4px 0 0 + padding: 6px 8px + width: auto + + a + color: #8c8c8c + + &:hover + color: #666 + +.empty-list, .empty + background: #e6e6e6 + border: 1px dashed #ccc + border-radius: 3px + color: #8c8c8c + display: block + padding: 6px + text-align: center + +.empty-list + border-radius: 6px + padding: 25px 6px + +.search-results-page-contents .empty-list + margin: 12px 0 0 52px + +.window-module .empty-list + margin: 8px 0 0 38px + +.loading + margin: 19px auto + text-align: center + +.big-message + display: block + margin: 75px auto + text-align: center + max-width: 600px + + h1 + font-size: 26px + margin-bottom: 24px + + p + font-size: 18px + line-height: 22px + + &.with-picture + margin-top: 35px + + h1 + margin-top: 20px + + .callout + margin: 20px 0 + +.callout + background: #e3e3e3 + border-radius: 5px + padding: 20px + + ol + text-align: left + list-style-type: decimal + margin-left: 25px + font-size: 16px + + li + margin: 10px 0 + +.gutter + margin-left: 38px -- cgit v1.2.3-1-g7c22