diff options
Diffstat (limited to 'src/styles/projects.less')
| -rw-r--r-- | src/styles/projects.less | 391 |
1 files changed, 391 insertions, 0 deletions
diff --git a/src/styles/projects.less b/src/styles/projects.less new file mode 100644 index 00000000..926ea8ec --- /dev/null +++ b/src/styles/projects.less @@ -0,0 +1,391 @@ +@import "main.less"; + +/* Buttons */ +.new-project-btn { + @button-height: 35px; + + display: inline-block; + position: absolute; + bottom: 40px; + right: 40px; + padding: 0 20px; + height: @button-height; + line-height: @button-height; + font-size: 12pt; + + background: #679436; + color: #eee; + border: 1px solid #507830; + + .border-radius-def(@standard-border-radius); + .clickable; + .transition-def(all, @transition-length); +} + +.new-project-btn:hover { + background: #73ac45; +} + +.new-project-btn:active { + background: #5c8835; +} + +/* Side menu */ +.filter-menu { + display: block; + + background: #0761b1; + border: 1px solid #06326b; + color: #eee; + + text-align: center; + + .border-radius-def(@standard-border-radius); + overflow: hidden; + + margin-bottom: 20px; + + .project-filters { + display: block; + overflow: hidden; + margin-left: -2px; + + div { + display: inline-block; + width: 33.3%; + margin-right: -4px; + padding: 10px @global-padding; + + font-size: 12pt; + border-right: 1px solid #06326b; + + .clickable; + .transition-def(background, @transition-length); + } + + div:last-of-type { + border: 0; + } + + div:hover { + background: #0c60bf; + } + + div:active, div.active { + background: #073d7d; + } + } +} + +/* Message shown when no projects present */ +.no-projects-alert { + display: none; + position: relative; + padding-left: 50px; + span { + position: absolute; + top: 11px; + left: 10px; + bottom: 10px; + font-size: 20pt; + } +} + +/* List of simulation projects */ +.project-list { + display: block; + font-size: 12pt; + border: 0; + + .list-head, .list-body .project-row { + display: block; + position: relative; + } + + .list-head div, .list-body .project-row div { + padding: 0 10px; + display: inline-block; + } + + .list-head { + font-weight: bold; + + div { + margin-right: -4px; // Address default margin between inline-blocks + } + } + + .project-row { + background: #f8f8f8; + border: 1px solid #b6b6b6; + height: 40px; + line-height: 40px; + clear: both; + + .transition-def(background, @transition-length); + .clickable; + } + + .project-row:hover { + background: #fff; + } + + .project-row:active { + background: #cccccc; + } + + .project-row:not(:first-of-type) { + margin-top: -1px; + } + + // Sizing of table columns + .project-row, .list-head { + div:first-of-type { + width: 50%; + } + + div:nth-of-type(2) { + width: 30%; + } + + div:last-of-type { + width: 20%; + + span { + margin-right: 10px; + } + } + } + + .project-row.active { + border-bottom: 0; + background: #3442b1; + color: #eee; + } + + .project-row.active::before { + //noinspection CssNoGenericFontName + font-family: 'Glyphicons Halflings'; + content: "\2212"; + font-size: 14pt; + position: absolute; + top: 0; + right: 10px; + } + + .project-view { + padding: 10px; + overflow: hidden; + border: 1px solid #b6b6b6; + border-top: 0; + + background: #3442b1; + color: #eee; + + .participants { + display: inline-block; + float: left; + } + + .access-buttons { + display: inline-block; + float: right; + + .inline-btn { + margin-left: 10px; + } + + .open { + background: #e38829; + } + + .open:hover { + background: #ff992e; + } + + .open:active { + background: #ba6f21; + } + + .edit { + background: #2c3897; + } + + .edit:hover { + background: #3a4ac8; + } + + .edit:active { + background: #242d7a; + } + } + } +} + +.inline-btn { + display: inline-block; + height: 30px; + line-height: 30px; + font-size: 10pt; + width: 70px; + + text-transform: uppercase; + text-align: center; + + color: #eee; + + .clickable; + .transition-def(background, @transition-length); +} + +.projects-window { + width: 600px; + height: 400px; + + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + margin: auto; + + .border-radius-def(5px); + overflow: hidden; + + .window-body { + width: 100%; + height: 340px; + + padding: 10px; + + background: rgba(230, 230, 230, 0.9); + + .window-heading { + font-size: 20pt; + color: #000000; + + .user-select-def; + + font-weight: bold; + + padding-left: 5px; + } + + .project-name-form, .participant-add-form { + margin: 20px; + + input { + width: 300px; + } + + label { + padding-right: 5px; + width: 40px; + text-align: right; + + .user-select-def; + } + } + + .participants-table-label { + display: block; + padding-left: 20px; + margin-bottom: 5px; + + .user-select-def; + } + + .participants-table { + background: #ffffff; + .border-radius-def(5px); + + margin: 0 20px; + + max-height: 135px; + overflow: auto; + + .participant-row { + height: 40px; + line-height: 40px; + + div { + display: inline-block; + margin-right: -4px; // Address default margin between inline-blocks + } + + .participant-name { + padding-left: 10px; + width: 60%; + } + + .participant-level { + width: 30%; + + .user-select-def; + + div { + display: inline-block; + + width: 25px; + height: 25px; + + padding: 5px; + + margin-right: 3px; + + cursor: pointer; + + .border-radius-def(5px); + .transition-def(all, @transition-length); + } + + div.active, div:hover { + background-color: #415973; + color: #eeeeee; + } + } + + .participant-remove { + position: relative; + width: 10%; + text-align: right; + padding-right: 10px; + } + + .participant-remove div { + top: 2px; + right: 5px; + cursor: pointer; + } + } + } + + .participant-add-form { + margin-top: 10px; + } + + .participant-email-alert, .project-name-alert { + position: absolute; + bottom: 0; + left: 20px; + display: none; + } + } + + .window-footer { + width: 100%; + height: 60px; + + background: rgba(56, 56, 56, 0.9); + + padding: 12px 10px; + + .btn.pull-left { + margin-right: 5px; + } + + .btn.pull-right { + margin-left: 5px; + } + } +} |