@import url(vendor/ui.css); @font-face { font-family: 'Source_Regular'; src: url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot"); /* IE9 Compat Modes */ src: url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.woff") format("woff"), url("../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: 'Source_Semibold'; src: url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot"); /* IE9 Compat Modes */ src: url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.woff") format("woff"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf") format("truetype"); /* Safari, Android, iOS */ } @font-face { font-family: 'Source_Bold'; src: url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot"); /* IE9 Compat Modes */ src: url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.woff") format("woff"), url("../font/sourcesanspro_bold/SourceSansPro-Bold-webfont.ttf") format("truetype"); /* Safari, Android, iOS */ } /* Vertical spacing */ /* Horizontal spacing */ html, body { height: 100%; font-family: "Source_Regular", sans-serif; overflow-y: hidden; } body { overflow-y: hidden; overflow-x: auto; margin: 0; min-width: 980px; padding: 0; color: #FFF; font-size: 12px; background-color: #f5f5fa; } a { text-decoration: none; color: #919095; } a:link { color: #919095; } a:visited { color: #919095; } a:hover { color: #363636; } a:active { color: #919095; } input { background-color: white; color: #363636; border: 0; font-size: 18px; } input:focus { border: 0; outline: 0; background-color: white; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #919095; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #919095; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #919095; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #919095; } .rhizi-logo { position: fixed; color: #363636; bottom: 10px; right: 10px; vertical-align: middle; } /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; /*font: inherit; */ font-family: "Source_Regular", sans-serif; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .btn-regular { cursor: pointer; background-color: white; font-family: "Source_Regular", sans-serif; font-size: 14px; color: #004681; padding: 12px 24px 12px 24px; margin-right: 6px; border-radius: 4px; border: none; } .btn-regular:hover { color: #8eb6bf; border-color: #8eb6bf; } .btn-regular:focus { outline: none; } .btn-regular-outline { border: 1px solid #004681; } .debug-ui { display: none; } body.debug .debug-ui { display: inline; position: fixed; bottom: 70px; left: 10px; text-decoration: none; } body.debug .debug-ui-row { float: left; width: 100%; } body.debug .debug-ui-left { float: left; width: 50%; } body.debug .debug-ui-right { float: right; width: 50%; } .graph-view { width: 100%; background-color: #f5f5fa; position: relative; } .node { stroke-width: 1px; font-size: 18px; z-index: 100; } .circle { z-index: 100; pointer-events: all; } .nodetext { fill: #363636; font-size: 18px; z-index: 3; } .svg-input-fo-node { fill: #363636; z-index: 3; } .svg-input-fo-node input { font-size: 18px; background-color: transparent; } .linklabel { stroke: #363636; font-size: 14px; background-color: transparent; } .svg-input-fo-link { stroke: #363636; } .svg-input-fo-link input { font-size: 14px; background-color: transparent; } .link { fill: none; stroke: #919095; stroke-width: 1px; stroke-opacity: 0.5; z-index: 1; } .ghostlink { opacity: 0.0; fill: none; stroke-width: 15px; z-index: 2; /* higher than link, lower than node */ } .circle.chosen { stroke: #33c2e0; stroke-opacity: 0.5; } .circle.enter { stroke: #33c2e0; stroke-opacity: 0.5; } .circle.bubble { fill: rgba(255, 255, 255, 0.9); pointer-events: none; } .circle.exit { stroke: #33c2e0; stroke-opacity: 0.5; } .circle.chainlink { stroke: #AAA; } .circle.temp { box-shadow: 0 0 40px #FFFF8F; } .circle.temp, .circle.chosen { stroke-width: 3px; } .circle.temp.empty { stroke-width: 1.5px; } /* Per node and edge type (type is a property of nodes and links) styling * note that this should be automatically generated somehow for user settings. */ .circle.person { fill: #004681; } .circle.club { fill: #ee3654; } .circle.skill { fill: #fad900; } .circle.interest { fill: #8b3ab0; } .circle.project { fill: #40c200; } .circle.third-internship-proposal { fill: #33c2e0; } .circle.internship { fill: #ff8b11; } .circle.empty { fill: #919095; } .circle.chainlink { fill: #363636; } /* Selected parts of the graph, right now by clicking, later with search. */ .notselected { opacity: 0.2; } .graph.link.temp_and { stroke-dasharray: 3,3; } .highlightlink { fill: none; stroke: #33c2e0; stroke-opacity: 0.5; stroke-width: 2px; z-index: 1; } .link.enter, .link.exit, .link.selected { fill: none; stroke: #33c2e0; stroke-opacity: 0.5; stroke-width: 2px; z-index: 1; } #editbox input { width: 130px; } .overlay { fill: none; pointer-events: all; z-index: 0; } .editinfo { position: fixed; top: -40px; z-index: 5; } .editlinkinfo { position: fixed; top: -40px; z-index: 5; } #editlinkname { width: inherit; height: inherit; font-size: 18px; } #editname { width: inherit; height: inherit; font-size: 18px; } .input-container { position: fixed; margin: 24px 0 0 70px; } .input-container form { display: inline; } .input-bar { font-family: "Source_Regular", sans-serif; color: #919095; max-height: 36px; width: 280px; padding: 6px 8px 5px 8px; border: 1px solid #919095; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: white; transition-property: width; transition-duration: 200ms; transition-timing-function: ease-in; } .input-bar:focus { border: 1px solid #919095; width: 520px; -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); } #textanalyser.ui-autocomplete-input { font-family: "Source_Regular", sans-serif; color: #919095; } .add-button { float: right; background: url(../img/plus-button.png); background-position: center; background-repeat: no-repeat; background-color: #ee3654; position: relative; height: 36px; width: 36px; left: -36px; border: 0; } .add-button:hover { background-color: #d10a40; } .add-button:focus { outline: none; } .suggestion { position: relative; color: #363636; max-height: 580px; overflow-y: scroll; font-size: 18px; list-style-type: none; width: inherit; margin-top: 6px; border: 1px solid #919095; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: white; z-index: 100; -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3); } .suggestion-item { padding: 6px 0px 6px 18px; cursor: pointer; } .suggestion-item.selected, .suggestion-item:hover { padding-left: 16px; background-color: #f5f5fa; border-left: 2px solid #33c2e0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .suggestion td { position: fixed; } .ui-helper-hidden-accessible { position: fixed; top: 203px; left: 78px; text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275; font-size: 16px; } .ui-helper-hidden-accessible > div { color: #363636; } .typeselection { color: #363636; font-size: 24px; position: fixed; left: 0; top: -300px; pointer-events: none; } #keys { opacity: 0.5; } .info-container { position: absolute; right: 70px; top: 24px; } .subtitle { font-style: italic; color: #bbb; font-size: 12px; float: right; } .edge_info, .info { color: #363636; background-color: white; -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); position: relative; width: 250px; padding: 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-top: 6px solid #363636; } .info.type-person { border-top: 6px solid #004681; } .info.type-club { border-top: 6px solid #ee3654; } .info.type-skill { border-top: 6px solid #fad900; } .info.type-third-internship-proposal { border-top: 6px solid #33c2e0; } .info.type-internship { border-top: 6px solid #ff8b11; } .info.type-interest { border-top: 6px solid #8b3ab0; } .info.type-empty { border-top: 6px solid #919095; } .info.type-chainlink { border-top: 6px solid #363636; } .info.type-project { border-top: 6px solid #40c200; } .info .info-card-attr { display: block; text-transform: capitalize; font-size: 14px; font-family: "Source_Bold", sans-serif; } .info .info-card-attr-val { display: block; text-transform: capitalize; font-size: 24px; margin: 12px 0px 24px 0px; } .info-card-attr-val input { width: 100%; font-size: 24px; } .info-card-url input { font-size: 14px; margin-left: 20px; } .info-card-url:before { position: absolute; margin-top: 7px; content: ""; background: url(../img/url-icon.png); min-width: 14px; min-height: 14px; background-position: center; background-repeat: no-repeat; } .select-dropdown { border: none; font-family: "Source_Regular", sans-serif; background-color: white; font-size: 18px; color: #363636; width: 100%; padding: 0; margin: 12px 0px 24px 0px; } .select-dropdown:focus { outline: none; } .select-dropdown option { font-size: 18px; color: #363636; border: 1px solid #363636; } .info hr { width: 250px; position: relative; left: -24px; border: none; background-color: #d4d4d9; height: 2px; margin: 24px 0px 24px 0px; } .search-bar { position: relative; width: 100%; height: 48px; background: white; -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); z-index: 100; } .search-input { width: 70%; height: 20px; float: left; margin: 8px 12px 12px 70px; } .search-input:before { content: ""; background: url(../img/search-icon.png); padding: 0px 10px 0px 10px; background-position: center; background-repeat: no-repeat; } #search { font-family: "Source_Regular", sans-serif; font-size: 18px; width: 80%; } #search-suggestion { position: absolute; width: 70%; margin-left: 70px; top: 42px; } #search-suggestion .suggestion-item { padding: 12px 0px 12px 24px; } #search-suggestion .suggestion-item.selected, #search-suggestion .suggestion-item:hover { padding: 12px 0px 12px 22px; } .export { cursor: pointer; text-align: right; width: 60px; float: right; color: #363636; font-size: 12px; margin: 14px 70px 12px 12px; } .export:before { content: ""; background: url(../img/export.png); padding: 0px 9px 0px 9px; background-position: center; background-repeat: no-repeat; } .task-alert { position: relative; width: 100%; min-height: 48px; text-align: center; background-color: #d3f2f8; color: #1d6e7f; border-top: 1px solid #8eb6bf; border-bottom: 1px solid #8eb6bf; } .task-desc { display: inline-block; width: 70%; text-align: center; font-size: 18px; margin: 12px 70px 12px 70px; } .task-close-button { cursor: pointer; font-size: 14px; margin: 15px 70px 15px 15px; float: right; width: 70px; text-align: right; } .task-close-button:after { content: " "; min-height: 20px; padding-right: 20px; margin-left: 4px; background: url(../img/close-alert-button.png); background-position: center; background-repeat: no-repeat; } .top-bar { position: relative; top: 0; left: 0; width: 100%; min-height: 36px; background-color: #363636; } .doc-title { float: left; font-family: "Source_Semibold", sans-serif; color: #f5f5fa; margin: 10px 70px 10px 70px; font-size: 18px; } .user-area { float: right; margin: 3px 70px 3px 70px; } .username { display: inline-block; text-align: right; } .profile-circle { border-radius: 50%; width: 30px; height: 30px; background: #33c2e0; display: inline-block; } .profile-initials { display: inline-block; color: #f5f5fa; font-size: 14px; position: relative; left: -27px; top: -10px; } .profile-username { display: inline-block; top: 12px; color: #f5f5fa; position: relative; left: -20px; top: -10px; } .organization-logo { display: inline-block; margin-left: 12px; background: url(../img/CRI-logo.png); min-height: 30px; min-width: 30px; } /* Headings */ h1 { font-size: 30px; } h2 { font-size: 24px; } h1 { font-size: 18px; } h2 { font-size: 14px; } h1 { font-size: 12px; } svg text::selection { background: none; }