Color Variables

OpenProject Colors

• -
• $colors-black
• $colors-white
• -
• -
• $colors-blue
• $colors-mint
• $colors-lime
• $colors-green-neon
• $colors-green
• $colors-orange
• $colors-red-bright
• $colors-red
• $colors-yellow
• $colors-purple
• -
• $colors-grey-dark
• $colors-grey-light
• -
• -

Global Color Variables

• -
• $global_font_color
• -
• -
• -
• $header_bg_color
• -
• $header_logo_bg_colorgray
• -

Button Color Variables

• -
• $button_bg_color
• -
• $button_bg_hover_color
• -
• -
• $button_font_color
• -
• $button_font_hover_color
• -
• -
• $button_highlight_font_color
• -
• $button_highlight_font_hover_color
• -

Fonts

Lato

Lato for headlines:

Lato for normal/small text:

OpenProject Icon Font

OpenProject Icon Font for icons:

<i class="icon-add"></i>
<i class="icon-add-folder"></i>
<i class="icon-added"></i>
<i class="icon-align-center"></i>
<i class="icon-align-justify"></i>
<i class="icon-align-left"></i>
<i class="icon-align-right"></i>
<i class="icon-anchor"></i>
<i class="icon-arrow-circle1"></i>
<i class="icon-arrow-circle2"></i>
<i class="icon-arrow-circle3"></i>
<i class="icon-arrow-left-right"></i>
<i class="icon-arrow-right1"></i>
<i class="icon-arrow-right2"></i>
<i class="icon-arrow-right3"></i>
<i class="icon-arrow-right4"></i>
<i class="icon-arrow-right5"></i>
<i class="icon-arrow-right5-1"></i>
<i class="icon-arrow-right5-2"></i>
<i class="icon-arrow-right5-3"></i>
<i class="icon-arrow-right6"></i>
<i class="icon-arrow-right6-1"></i>
<i class="icon-arrow-right6-2"></i>
<i class="icon-arrow-right6-3"></i>
<i class="icon-arrow-right7"></i>
<i class="icon-arrow-right8"></i>
<i class="icon-rss2"></i>
<i class="icon-attachment"></i>
<i class="icon-attention1"></i>
<i class="icon-attention2"></i>
<i class="icon-backlogs-icon"></i>
<i class="icon-badge"></i>
<i class="icon-battery1"></i>
<i class="icon-battery2"></i>
<i class="icon-battery3"></i>
<i class="icon-bold"></i>
<i class="icon-book1"></i>
<i class="icon-book2"></i>
<i class="icon-book3"></i>
<i class="icon-bubble"></i>
<i class="icon-bubble2"></i>
<i class="icon-bubble3"></i>
<i class="icon-budget"></i>
<i class="icon-bulb1"></i>
<i class="icon-calendar"></i>
<i class="icon-calendar2"></i>
<i class="icon-camera"></i>
<i class="icon-cancel"></i>
<i class="icon-cart"></i>
<i class="icon-changeset"></i>
<i class="icon-changeset2"></i>
<i class="icon-changeset3"></i>
<i class="icon-clock-reminder"></i>
<i class="icon-close"></i>
<i class="icon-code-tag"></i>
<i class="icon-color-text"></i>
<i class="icon-color-underline"></i>
<i class="icon-columns"></i>
<i class="icon-column-left"></i>
<i class="icon-column-right"></i>
<i class="icon-console"></i>
<i class="icon-contacts"></i>
<i class="icon-copy"></i>
<i class="icon-copy2"></i>
<i class="icon-copy3"></i>
<i class="icon-cup"></i>
<i class="icon-cut"></i>
<i class="icon-delete"></i>
<i class="icon-delete-folder"></i>
<i class="icon-delete2"></i>
<i class="icon-dependency"></i>
<i class="icon-double-arrow-left"></i>
<i class="icon-double-arrow-right"></i>
<i class="icon-download1"></i>
<i class="icon-duplicate"></i>
<i class="icon-edit"></i>
<i class="icon-error"></i>
<i class="icon-faq"></i>
<i class="icon-filter"></i>
<i class="icon-filter-big"></i>
<i class="icon-fire"></i>
<i class="icon-flag"></i>
<i class="icon-folder"></i>
<i class="icon-fullscreen"></i>
<i class="icon-grid-view1"></i>
<i class="icon-grid-view2"></i>
<i class="icon-group"></i>
<i class="icon-group-by"></i>
<i class="icon-group-by2"></i>
<i class="icon-headline1"></i>
<i class="icon-headline2"></i>
<i class="icon-headline3"></i>
<i class="icon-headphone"></i>
<i class="icon-heart"></i>
<i class="icon-help"></i>
<i class="icon-help1"></i>
<i class="icon-help2"></i>
<i class="icon-home1"></i>
<i class="icon-home2"></i>
<i class="icon-image1"></i>
<i class="icon-image2"></i>
<i class="icon-info"></i>
<i class="icon-info2"></i>
<i class="icon-issue-assignedtome"></i>
<i class="icon-issue-reportedbyme"></i>
<i class="icon-issue-watched"></i>
<i class="icon-italic"></i>
<i class="icon-key"></i>
<i class="icon-line-through"></i>
<i class="icon-link"></i>
<i class="icon-list-bullet1"></i>
<i class="icon-list-num"></i>
<i class="icon-list-view1"></i>
<i class="icon-list-view2"></i>
<i class="icon-loading"></i>
<i class="icon-loading2"></i>
<i class="icon-location"></i>
<i class="icon-locked"></i>
<i class="icon-locked-folder"></i>
<i class="icon-logout"></i>
<i class="icon-log_time"></i>
<i class="icon-export"></i>
<i class="icon-mail"></i>
<i class="icon-mail2"></i>
<i class="icon-map"></i>
<i class="icon-message"></i>
<i class="icon-microphone"></i>
<i class="icon-minus"></i>
<i class="icon-minus2"></i>
<i class="icon-mobile1"></i>
<i class="icon-mobile2"></i>
<i class="icon-more"></i>
<i class="icon-move"></i>
<i class="icon-movie1"></i>
<i class="icon-music"></i>
<i class="icon-mute1"></i>
<i class="icon-new-planning-element"></i>
<i class="icon-not-supported"></i>
<i class="icon-not-watch"></i>
<i class="icon-notes1"></i>
<i class="icon-notice"></i> <i class="icon-yes"></i>
<i class="icon-open-folder"></i>
<i class="icon-outline"></i>
<i class="icon-page-atom"></i>
<i class="icon-page-csv"></i>
<i class="icon-page-pdf"></i>
<i class="icon-page-pdf-descr"></i>
<i class="icon-page-xls"></i>
<i class="icon-page-xls-descr"></i>
<i class="icon-paint"></i>
<i class="icon-paragraph"></i>
<i class="icon-paragraph-left"></i>
<i class="icon-paragraph-right"></i>
<i class="icon-phone"></i>
<i class="icon-pin"></i>
<i class="icon-play"></i>
<i class="icon-plus"></i>
<i class="icon-pre"></i>
<i class="icon-print"></i>
<i class="icon-priority"></i>
<i class="icon-process-arrow1"></i>
<i class="icon-process-arrow2"></i>
<i class="icon-process-arrow3"></i>
<i class="icon-process-arrow4"></i>
<i class="icon-project"></i>
<i class="icon-project-tree"></i>
<i class="icon-projects"></i>
<i class="icon-publish"></i>
<i class="icon-pulldown-arrow1"></i>
<i class="icon-pulldown-arrow2"></i>
<i class="icon-pulldown-arrow3"></i>
<i class="icon-pulldown-arrow4"></i>
<i class="icon-quote"></i>
<i class="icon-quote2"></i>
<i class="icon-redo"></i>
<i class="icon-reload1"></i>
<i class="icon-reload2"></i>
<i class="icon-rename"></i>
<i class="icon-reply"></i>
<i class="icon-rss"></i>
<i class="icon-rubber"></i>
<i class="icon-save1"></i>
<i class="icon-screen1"></i>
<i class="icon-search"></i>
<i class="icon-search2"></i>
<i class="icon-server-key"></i>
<i class="icon-settings"></i>
<i class="icon-settings2"></i>
<i class="icon-settings3"></i>
<i class="icon-settings4"></i>
<i class="icon-shortcuts"></i>
<i class="icon-sort-ascending"></i>
<i class="icon-sort-descending"></i>
<i class="icon-sort-by"></i>
<i class="icon-sort-by2"></i>
<i class="icon-square"></i>
<i class="icon-star1"></i>
<i class="icon-star2"></i>
<i class="icon-stats"></i>
<i class="icon-stats1"></i>
<i class="icon-stats2"></i>
<i class="icon-stats3"></i>
<i class="icon-stats4"></i>
<i class="icon-status"></i>
<i class="icon-status-reporting"></i>
<i class="icon-table-view"></i>
<i class="icon-table-detail-view"></i>
<i class="icon-timeline-view"></i>
<i class="icon-toggle"></i>
<i class="icon-text"></i>
<i class="icon-thumb-down"></i>
<i class="icon-thumb-up"></i>
<i class="icon-ticket"></i>
<i class="icon-ticket-checked"></i>
<i class="icon-ticket-down"></i>
<i class="icon-ticket-edit"></i>
<i class="icon-ticket-minus"></i>
<i class="icon-ticket-note"></i>
<i class="icon-ticket2"></i>
<i class="icon-time"></i>
<i class="icon-time-1"></i>
<i class="icon-time-entry"></i>
<i class="icon-tone1"></i>
<i class="icon-tone2"></i>
<i class="icon-tracker"></i>
<i class="icon-underline"></i>
<i class="icon-undo"></i>
<i class="icon-unit"></i>
<i class="icon-unit2"></i>
<i class="icon-unlocked"></i>
<i class="icon-user-guide-admin"></i>
<i class="icon-user-guide-user"></i>
<i class="icon-user-minus"></i>
<i class="icon-user-plus"></i>
<i class="icon-user1"></i>
<i class="icon-version"></i>
<i class="icon-view1"></i>
<i class="icon-view2"></i>
<i class="icon-view3"></i>
<i class="icon-warning"></i>
<i class="icon-watch-1"></i>
<i class="icon-wiki"></i>
<i class="icon-wiki-edit"></i>
<i class="icon-wiki-page"></i>
<i class="icon-wiki2"></i>
<i class="icon-work_package"></i>
<i class="icon-work_package-closed"></i>
<i class="icon-work_package-edit"></i>
<i class="icon-work_package-note"></i>
<i class="icon-yes2"></i>
<i class="icon-yes3"></i>
<i class="icon-zoom-in"></i>
<i class="icon-zoom-out"></i>

Accounts

Forms

<label class="checkbox-label">
  <input type="checkbox">
  <div class="styled-checkbox"></div>
</label>

<br>
<br>

<label class="checkbox-label">
  checkbox label
  <input type="checkbox">
  <div class="styled-checkbox"></div>
</label>

<br>
<br>

<label class="checkbox-label">
  <input type="checkbox">
  <div class="styled-checkbox"></div>
  checkbox label
</label>

[Form elements] - Input, Textarea

<div id="work-packages-index">

    <input class="wide"></input>
    <br /><br />
    <input class="small"></input>
    <br /><br / >
    <textarea rows="4"></textarea>
    <br /><br />
    <input placeholder="with placeholder text"></input>
    <br /><br />
    <textarea rows="4" placeholder="with placeholder text"></textarea>

</div>

Flash messages

<div class='flash warning' style="display: block">
Do you really want to do this? <a href="#">Yes</a>
<i class="icon-close close-handler"></i>
</div>

<div class='flash error' style="display: block">
Something bad happened. <a href="#">Find out more…</a>
<i class="icon-close close-handler"></i>
</div>

<div class='flash notice' style="display: block">
Something unexpected happened. <a href="#">Find out more…</a>
<i class="icon-close close-handler"></i>
</div>

Calendar

<table class="cal">
  <thead>
    <th class="week-number"></th>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </thead>
  <tbody>
    <td class="even">
      <p class="day-num">1</p>
      <div class="tooltip">
      </div>
    </td>
    <td class="even">
      <p class="day-num">text</p>
      <div class="tooltip">
      </div>
    </td>
    <td class="even">
      <p class="day-num">text</p>
      <div class="tooltip">
      </div>
    </td>
    <td class="even">
      <p class="day-num">text</p>
      <div class="tooltip">
      </div>
    </td>
    <td class="even">
      <p class="day-num">text</p>
      <div class="tooltip">
      </div>
    </td>
    <td class="even">
      <p class="day-num">text</p>
      <div class="tooltip">
      </div>
    </td>
    <td class="even">
      <p class="day-num">text</p>
      <div class="tooltip">
      </div>
    </td>
    <td class="even">
      <p class="day-num">text</p>
      <div class="tooltip">
      </div>
    </td>
  </tbody>
</table>

Wiki

Links

<a href="#">A normal link</a>

<div>
  <a href="#" class="sort asc">Sort link</a>
  <a href="#" class="sort desc">Sort link</a>
</div>

<a href="#" class="issue">#2999 open issue</a>
<a href="#" class="issue closed">#2999 closed issue</a>

<a href="#" class="icon">&nbsp;</a>
<a href="#" class="icon-context">&nbsp;</a>

Action menu

<div class="action-menu">
    <ul class="menu">
        <li>
            <a href="#"><i class="icon-edit icon-action-menu"></i>menu item for modal...</a>
        </li>
        <li>
            <a href="#"><i class="icon-yes icon-action-menu"></i>menu item</a>
        </li>
        <li>
            <a href="#"><i class="icon-copy icon-action-menu"></i>menu item</a>
        </li>
        <li>
            <a href="#"><i class="icon-priority icon-action-menu"></i>menu item with sub</a>
            <i class="icon-pulldown-arrow4 icon-sub-menu"></i>
                <ul class="sub-menu">
                    <li>
                        <a href="#"><i class="icon-edit icon-action-menu"></i>menu item</a>
                    </li>
                    <li>
                        <a href="#"><i class="icon-yes icon-action-menu"></i>menu item</a>
                    </li>
                    <li>
                        <a href="#"><i class="icon-copy icon-action-menu"></i>menu item</a>
                    </li>
                </ul>
        </li>
        <li>
            <a href="#"><i class="icon-delete icon-action-menu"></i>menu item</a>
        </li>
        <li class="has-no-icon">
            <a href="#">menu item no icon</a>
        </li>
        <li class="dropdown-divider"></li>
        <li>
            <a href="#"><i class="icon-time icon-action-menu"></i>menu item</a>
        </li>
    </ul>
</div>

My page

Buttons

<a href="#" class="button">Click me</a>
<a href="#" class="button_highlight">Click me</a>

<input type="submit" class="button" value="Submit me"/>
<input type="submit" class="button" value="Do not submit" disabled />

<input type="submit" class="button_highlight" value="Submit me"/>
<input type="submit" class="button_highlight" value="Do not submit" disabled />

<input type="submit" class="button_active" value="Submit me"/>
<input type="submit" class="button_active" value="Do not submit" disabled />

Boxes

<div class="content-box">
  <h3>Latest news</h3>
  <p><a href="#" class="button_highlight">Read more…</a></p>
</div>

Tabular

Work packages

Work packages filters

Work packages table

with work packages

<div class="work-packages-table--container">
  <div class="work-packages-table--results-container">
    <table class="workpackages-table">
      <thead>
        <tr>
          <th>
            <div class="work-packages-table--header-outer">
              <input type="checkbox">
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                #
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th class="active-column">
            <div class="sort-header-outer">
              <span class="sort-header">
                Subject
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Type
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Status
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Priority
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
          <th>
            <div class="sort-header-outer">
              <span class="sort-header">
                Assignee
                <span class="icon-context icon-button icon-pulldown-arrow1 dropdown-indicator"></span>
              </span>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
            <td class="checkbox">
                  <p><input type="checkbox"></p>
              </td>
              <td class="id">
                <p>1234</p>
            </td>
            <td>
                <p>Lorem ipsum</p>
            </td>
            <td>
                <p>User Story</p>
                <div class="active-column"></div>
            </td>
            <td>
                <p>In Progress</p>
            </td>
            <td>
                <p>Normal</p>
            </td>
            <td>
                <p>John Doe</p>
            </td>
          </tr>
        <tr>
          <td class="checkbox">
            <p><input type="checkbox"></p>
          </td>
          <td class="id">
            <p>1234</p>
          </td>
          <td>
            <p>Lorem ipsum</p>
          </td>
          <td>
            <p>User Story</p>
            <div class="active-column"></div>
          </td>
          <td>
            <p>In Progress</p>
          </td>
          <td>
            <p>Normal</p>
          </td>
          <td>
            <p>John Doe</p>
          </td>
        </tr>
        <tr>
          <td class="checkbox">
            <p><input type="checkbox"></p>
          </td>
          <td class="id">
            <p>1234</p>
          </td>
          <td>
            <p>Lorem ipsum</p>
          </td>
          <td>
            <p>User Story</p>
            <div class="active-column"></div>
          </td>
          <td>
            <p>In Progress</p>
          </td>
          <td>
            <p>Normal</p>
          </td>
          <td>
            <p>John Doe</p>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="work-packages-table--header-background"></div>
  </div>
</div>

with no work packages

<div class="work-packages-table--container" style="height:150px">
  <div class="work-packages-table--no-results-container">
    <h2 class="work-packages-table--no-results-title">
      <i class="icon-info"></i>
      No work packages to display
    </h2>
    <div class="work-packages-table--no-results-description">
      <p>Either none have been created or all work packages are filtered out.</p>
    </div>
  </div>
</div>

Work Packages - [Details Pane] - Tables

<table class="detail-pane-table">
    <thead>
        <tr>
            <td>Subject</td>
            <td>Status</td>
            <td>Assignee</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href="#">Lorem ipsum</a></td>
            <td>Resolved</td>
            <td><a href="#">John Doe</a></td>
            <td><i title="Delete relation" class="delete-item icon-delete"></i></td>
        </tr>
        <tr>
            <td><a href="#">Lorem ipsum evvrevrevrevrebrebreberberbrebbreevrvrevrebre</a></td>
            <td>Resolved</td>
            <td><a href="#">John Doe</a></td>
            <td><i title="Delete relation" class="delete-item icon-delete"></i></td>
        </tr>
        <tr>
            <td><a href="#">Lorem ipsum</a></td>
            <td>Resolved</td>
            <td><a href="#">John Doe</a></td>
            <td><i title="Delete relation" class="delete-item icon-delete"></i></td>
        </tr>
    </tbody>
</table>

Work Packages - [Details Pane] - Activities

<ul class='work-package-details-activities-list'>
  <li class='work-package-details-activities-activity'>
    <h3 class='activity-date'>March 19, 2014</h3>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#1' name='1'>#1</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='03/19/2014 4:38 PM'>
          <span  title=''>03/19/2014</span>
          <span  title=''>4:38 PM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Custom Integer</strong>
            changed from
            <i title='12442234'>12442234</i>
            to
            <i title='34'>34</i>
          </span>
        </li>
      </ul>
    </div>
  </li>
  <li class='work-package-details-activities-activity'>
    <h3 class='activity-date'>April 30, 2014</h3>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#2' name='2'>#2</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/_shahedk/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='04/30/2014 9:40 AM'>
          <span  title=''>04/30/2014</span>
          <span  title=''>9:40 AM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Type</strong>
            changed from
            <i title='Support'>Support</i>
            to
            <i title='Bug'>Bug</i>
          </span>
        </li>
      </ul>
    </div>
  </li>
  <li class='work-package-details-activities-activity'>
    <h3 class='activity-date'>July 11, 2014</h3>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#3' name='3'>#3</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/ateneupopular/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='07/11/2014 4:27 PM'>
          <span  title=''>07/11/2014</span>
          <span  title=''>4:27 PM</span>
        </span>
        <span class='comment wiki'>
          <span class='message'>
            <h2>Wiki text</h2>
          </span>
        </span>
      </span>
  </li>
  <li class='work-package-details-activities-activity'>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#4' name='4'>#4</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/jamesslock/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='07/11/2014 4:27 PM'>
          <span  title=''>07/11/2014</span>
          <span  title=''>4:27 PM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Description</strong>
            set (<a class='description-details' href='/journals/5520/diff/description'>Details</a>)
          </span>
        </li>
      </ul>
    </div>
  </li>
  <li class='work-package-details-activities-activity'>
    <h3 class='activity-date'>August 21, 2014</h3>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#5' name='5'>#5</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/5key/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='08/21/2014 11:03 AM'>
          <span  title=''>08/21/2014</span>
          <span  title=''>11:03 AM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Parent</strong>
            set to
            <i title='molestias officia beatae aut et sunt ut labore'>molestias officia beatae aut et sunt ut labore</i>
          </span>
        </li>
      </ul>
    </div>
  </li>
  <li class='work-package-details-activities-activity'>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#6' name='6'>#6</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/nikkitaftw/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='08/21/2014 11:05 AM'>
          <span  title=''>08/21/2014</span>
          <span  title=''>11:05 AM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Parent</strong>
            deleted (<strike>
              <i title='molestias officia beatae aut et sunt ut labore'>molestias officia beatae aut et sunt ut labore</i>
            </strike>)
          </span>
        </li>
      </ul>
    </div>
  </li>
  <li class='work-package-details-activities-activity'>
    <h3 class='activity-date'>September 2, 2014</h3>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#12' name='12'>#12</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/manugamero/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='09/02/2014 8:50 AM'>
          <span  title=''>09/02/2014</span>
          <span  title=''>8:50 AM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Subject</strong>
            changed from
            <i title='Nothing important'>Nothing important</i>
            to
            <i title='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis metus, lobortis eget nisi id, scelerisque sagittis eros. Duis eget tempor risus, id sagittis nisi. In accumsan sapien sed scelerisque mattis. Sed bibendum condimentum magna eget vestibulum. Etiam bibendum, justo vitae efficitur placerat, justo lorem bibendum eros, et mattis diam diam eget urna. Aenean id magna pharetra, auctor dui ut, ultrices turpis. Duis eu massa non libero dictum vestibulum et consectetur diam. Sed varius nisl leo, vitae auctor velit imperdiet in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at odio lorem. In at iaculis dui, a convallis nibh. Vivamus rhoncus arcu quis purus euismod rutrum. Morbi a metus vitae metus finibus venenatis.'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis metus, lobortis eget nisi id, scelerisque sagittis eros. Duis eget tempor risus, id sagittis nisi. In accumsan sapien sed scelerisque mattis. Sed bibendum condimentum magna eget vestibulum. Etiam bibendum, justo vitae efficitur placerat, justo lorem bibendum eros, et mattis diam diam eget urna. Aenean id magna pharetra, auctor dui ut, ultrices turpis. Duis eu massa non libero dictum vestibulum et consectetur diam. Sed varius nisl leo, vitae auctor velit imperdiet in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse at odio lorem. In at iaculis dui, a convallis nibh. Vivamus rhoncus arcu quis purus euismod rutrum. Morbi a metus vitae metus finibus venenatis.</i>
          </span>
        </li>
      </ul>
    </div>
  </li>
  <li class='work-package-details-activities-activity'>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#13' name='13'>#13</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/raquelwilson/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='09/02/2014 8:51 AM'>
          <span  title=''>09/02/2014</span>
          <span  title=''>8:51 AM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Custom User</strong>
            set to
            <i title='Zena Labadie'>Zena Labadie</i>
          </span>
        </li>
        <li>
          <span class='message'>
            <strong>Custom Description</strong>
            changed from
            <i title='QUAS'>QUAS</i>
            to
            <i title='QUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUAS  QUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUAS'>QUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUAS  QUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUASQUAS</i>
          </span>
        </li>
      </ul>
    </div>
  </li>
  <li class='work-package-details-activities-activity'>
    <h3 class='activity-date'>September 12, 2014</h3>
    <div class='work-package-details-activities-activity-contents'>
      <div class='comments-number'>
        <span>
          <a href='#14' name='14'>#14</a>
        </span>
        <div class='comments-icons ng-hide'>
          <i class='icon-quote action-icon'></i>
          <i class='icon-edit action-icon'></i>
        </div>
      </div>
      <img alt='Avatar' class='avatar' src='https://s3.amazonaws.com/uifaces/faces/twitter/teeragit/128.jpg' title='OpenProject Admin'>
      <span class='user'>
        <a href='/users/1' name=''>OpenProject Admin</a>
      </span>
      <span class='date'>
        commented on
        <span  title='09/12/2014 8:49 AM'>
          <span  title=''>09/12/2014</span>
          <span  title=''>8:49 AM</span>
        </span>
        <span class='comment wiki'>
          <span class='message ng-hide'></span>
        </span>
      </span>
      <ul class='work-package-details-activities-messages'>
        <li>
          <span class='message'>
            <strong>Description</strong>
            changed (<a class='description-details' href='/journals/5543/diff/description'>Details</a>)
          </span>
        </li>
        <li>
          <span class='message'>
            <strong>Assignee</strong>
            set to
            <i title='Deron Feil'>Deron Feil</i>
          </span>
        </li>
        <li>
          <span class='message'>
            <strong>Responsible</strong>
            set to
            <i title='Zena Labadie'>Zena Labadie</i>
          </span>
        </li>
      </ul>
    </div>
  </li>
</ul>

Work Packages - [Details Pane] - Attachments

Work Packages - [Details Pane] - Overview

Attributes

<div class="detail-panel-attributes">
  <ul>
    <li>
      <div class="work-package-attributes--label">Status</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -text">
          <span title="New">New</span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Assignee</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -user">
          <span class="user-avatar--container">
            <img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
            <span class="user-avatar--user-with-role">
              <span class="user-avatar--user">
                <a class="user-avatar--user-link" href="#">testing.long.emails@openproject.org</a>
              </span>
            </span>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Responsible</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -user">
          <span class="user-avatar--container">
            <img class="user-avatar--avatar" alt="Avatar" title="testing.long.emails+filter-junk-away@openproject.org" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
            <span class="user-avatar--user-with-role">
              <span class="user-avatar--user">
                <a class="user-avatar--link" href="#">Karl-Theodor zu Guttenberg (copy)</a>
              </span>
              <span class="user-avatar--role">
                Distinguished Statesman.
                Former Minister for Economics and Technology.
              </span>
            </span>
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Date</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -text">
          <span title="">-</span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Percentage done</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -text">
          <span title="0">0</span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Priority</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -text">
          <span title="Normal">Normal</span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Custom Float</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -float">
          <span title="12.00">12.00</span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Custom Integer</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -int">
          <span title="69">69</span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Custom Description</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -text">
          <span title="Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.">
          Praesent id est eu velit molestie tincidunt. Quisque non dolor diam. Mauris vitae nunc felis. Integer vehicula molestie vehicula. Aliquam in magna eu lorem interdum tincidunt. Fusce egestas, enim vel luctus vulputate, augue tellus aliquam sem, tincidunt lacinia ante mauris at nisi. Vestibulum a magna et magna viverra efficitur. Vestibulum rhoncus ac ligula eget tristique. Vestibulum enim urna, varius eu turpis eget, pretium placerat neque. Vivamus et facilisis eros. Sed gravida lectus ac velit rutrum euismod. Etiam at ex condimentum, vestibulum elit non, aliquam ex.
          </span>
        </div>
      </div>
    </li>
    <li>
      <div class="work-package-attributes--label">Custom User</div>
      <div class="work-package-attributes--value-container">
        <div class="work-package-attributes--value -user">
          <span class="user-avatar--container">
            <img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
            <span class="user-avatar--user-with-role">
              <span class="user-avatar--user">
                <a class="user-avatar--user-link" href="#">Max Mustermann</a>
              </span>
              <span class="user-avatar--role">
                Fully Generic Person
              </span>
            </span>
          </span>
        </div>
      </div>
    </li>
  </ul>
</div>

Work Packages - [Details Pane] - Relations

Work Packages - [Details Pane] - Watchers

<div id="detail-panel-watchers">
  <ul>
    <li>
      <span class="user-avatar--container">
        <img alt="Avatar" class="user-avatar--avatar" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false" title="Deron Feil">
        <span class="user-avatar--user-with-role">
          <span class="user-avatar--user">
            <a class="user-field-user-link" href="/users/25">Deron Feil</a>
          </span>
        </span>
      </span>
      <a class="detail-panel-watchers-delete-watcher-link" href=""><span><span class="detail-panel-watchers-delete-watcher-icon icon-context icon-button icon-close icon-context icon-button icon-close" title="Delete watcher"><span class="hidden-for-sighted">Delete watcher</span></span></span></a>
    </li>
    <li>
      <span class="user-avatar--container">
        <img alt="Avatar" class="user-avatar--avatar" src="http://gravatar.com/avatar/4a261f6edb9ed1de10076982663bffec?default=wavatar&amp;secure=false" title="Loraine Runolfsdottir">
        <span class="user-avatar--user-with-role">
          <span class="user-avatar--user">
            <a class="user-field-user-link" href="/users/20">Loraine Runolfsdottir</a>
          </span>
        </span>
      </span>
      <a class="detail-panel-watchers-delete-watcher-link" href=""><span><span class="detail-panel-watchers-delete-watcher-icon icon-context icon-button icon-close icon-context icon-button icon-close" title="Delete watcher"><span class="hidden-for-sighted">Delete watcher</span></span></span></a>
    </li>
    <li>
      <span class="user-avatar--container">
        <img alt="Avatar" class="user-avatar--avatar" src="http://gravatar.com/avatar/1ac321aa9afb93ad78b52697c93d34f2?default=wavatar&amp;secure=false" title="Zena Labadie">
        <span class="user-avatar--user-with-role">
          <span class="user-avatar--user">
            <a class="user-field-user-link" href="/users/15">Zena Labadie</a>
          </span>
        </span>
      </span>
      <a class="detail-panel-watchers-delete-watcher-link" href=""><span><span class="detail-panel-watchers-delete-watcher-icon icon-context icon-button icon-close icon-context icon-button icon-close" title="Delete watcher"><span class="hidden-for-sighted">Delete watcher</span></span></span></a>
    </li>
  </ul>
</div>

Expandable group content

Control colors

<div class="delete-ctrl">
</div>

Components - Add comments - default

<div class="activity-comment">
<textarea class="add-comment-text" placeholder="Add your comments here" rows=1></textarea>
</div>

Components - Add comments - onclick

<div class="activity-comment">
<textarea class="add-comment-text-big" placeholder="Add your comments here" rows=4></textarea>
<button class="button"><i class="icon-yes icon-left"></i>Add comment</button><button class="button"><i class="icon-close icon-left"></i>Cancel</button>
</div>

Headings

<h1>Headline H1</h1>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>
<h2>Headline H2</h2>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>
<h3>Headline H3</h3>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>
<h4>Headline H4</h4>
<span class="sample-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br /><br /></span>

Timelines

User Avatars

Default:


Default Mini:


Gravatar:


Gravatar Mini:

Default:<br />
<img class="avatar" src="/assets/default-avatar.png" />
<br /><br />
Default Mini:<br />
<img class="avatar-mini" src="/assets/default-avatar.png" />
<br /><br />
Gravatar:<br />
<img src="http://gravatar.com/avatar/cb4f282fed12016bd18a879c1f27ff97" class="avatar" />
<br /><br />
Gravatar Mini:<br />
<img src="http://gravatar.com/avatar/cb4f282fed12016bd18a879c1f27ff97" class="avatar-mini" />

User Avatar with Container

with a user

Max Mustermann Fully Generic Person

<div class="user-avatar--container">
  <img class="user-avatar--avatar" alt="Avatar" title="Max Mustermann" src="http://gravatar.com/avatar/ae4878114ca94594589106efaad8890e?default=wavatar&amp;secure=false">
  <span class="user-avatar--user-with-role">
    <span class="user-avatar--user">
      <a class="user-avatar--user-link" href="#">Max Mustermann</a>
    </span>
    <span class="user-avatar--role">
      Fully Generic Person
    </span>
  </span>
</div>

without a user

<div class="user-avatar--container">
  <span class="user-avatar--user-with-role">
    <span class="user-avatar--user"> - </span>
  </span>
</div>

Preview

Modal

<div class="modal-container">
  <div class="modal-header"><i class="icon-close"></i></div>
  <div class="modal-content">
    <h3>Modal Headline</h3>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
  </div>
</div><br /><br />
<h3>Export</h3>
    <ul class="export-options">
      <li>
        <a>
          <i class="icon-page-atom icon-big"></i>
          <span class="export-label">ATOM</span>
        </a>
      </li>
       <li>
        <a>
          <i class="icon-page-xls icon-big"></i>
          <span class="export-label">XLS</span>
        </a>
      </li>
       <li>
        <a>
          <i class="icon-page-xls-descr icon-big"></i>
          <span class="export-label">XLS with description</span>
        </a>
      </li>
       <li>
        <a>
          <i class="icon-page-pdf icon-big"></i>
          <span class="export-label">PDF</span>
        </a>
      </li>
       <li>
        <a>
          <i class="icon-page-pdf-descr icon-big"></i>
         <span class="export-label">PDF with description</span>
        </a>
      </li>
       <li>
        <a>
          <i class="icon-page-csv icon-big"></i>
          <span class="export-label">CSV</span>
        </a>
      </li>
    </ul>

Grid table

Pagination

<div class="pagination">
  <nav class="pagination--pages">
    <ul class="pagination--items">
      <li class="pagination--item -prev"><a>Previous</a></li>
      <li class="pagination--item"><a>1</a></li>
      <li class="pagination--item"><a>2</a></li>
      <li class="pagination--item -current">3</li>
      <li class="pagination--item"><a>4</a></li>
      <li class="pagination--item"><a>5</a></li>
      <li class="pagination--space">…</span>
      <li class="pagination--item"><a>34</a></li>
      <li class="pagination--item"><a>35</a></li>
      <li class="pagination--item -next"><a>Next</a></li>
      <li class="pagination--range" title="(1 - 50/820)">(1 - 50/820)</li>
    </ul>
  </nav>
  <div class="pagination--options">
    <ul class="pagination--items">
      <li class="pagination--label" title="Per page:">Per page:</li>
      <li class="pagination--item"><a>10</a></li>
      <li class="pagination--item"><a>20</a></li>
      <li class="pagination--item -current">50</li>
      <li class="pagination--item"><a>100</a></li>
      <li class="pagination--item"><a>200</a></li>
    </ul>
  </div>
</div>

Progress Bar

<span>
  <span style="width: 100px" class="progress-bar">
    <span style="width: 40%" class="inner-progress closed"></span>
    <span style="width: 20%" class="inner-progress done"></span>
  </span>
  <span class="progress-bar-legend">60% Total progress</span>
</span>