Skip to content

Instantly share code, notes, and snippets.

@asteriusj

asteriusj/index.html

Created February 26, 2018 17:52
Show Gist options
  • Save asteriusj/236985c670435f90137b6403f4c07ff1 to your computer and use it in GitHub Desktop.
Save asteriusj/236985c670435f90137b6403f4c07ff1 to your computer and use it in GitHub Desktop.
Download ZIP
rJqgVN
Raw
index.html
<!---->
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="author" content="Vincent Link, Steffen Lohmann, Eduard Marbach, Stefan Negru, Vitalis Wiens" />
<meta name="keywords" content="webvowl, vowl, visual notation, web ontology language, owl, rdf, ontology visualization, ontologies, semantic web" />
<meta name="description" content="WebVOWL - Web-based Visualization of Ontologies" />
<meta name="robots" content="noindex,nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="http://www.visualdataweb.de/webvowl/css/webvowl.css" />
<link rel="stylesheet" type="text/css" href="css/webvowl.app.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<title>WebVOWL</title>
<script>
// (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
// (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
// m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
// })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
// ga('create', 'UA-90312225-2', 'auto');
// ga('send', 'pageview');
</script>
</head>
<body>
<main>
<section id="canvasArea">
<div id="browserCheck" class="hidden">
WebVOWL does not work properly in Internet Explorer and Microsoft Edge. Please use another browser, such as
<a href="http://www.mozilla.org/firefox/">Mozilla Firefox</a> or
<a href="https://www.google.com/chrome/">Google Chrome</a>, to run WebVOWL.
<label id="killWarning">Hide warning</label>
</div>
<div id="logo">
<h2>WebVOWL <br/><span>1.0.6</span></h2>
</div>
<div id="loading-info">
<div id="loading-error" class="hidden">
<div id="error-info"></div>
<div id="error-description-button" class="hidden">Show error details</div>
<div id="error-description-container" class="hidden">
<pre id="error-description"></pre>
</div>
</div>
<div><span id="sidebarExpandButton"> > </span></div>
<div id="loading-progress" class="hidden">
<span>Loading ontology... </span>
<div class="spin">&#8635;</div><br>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
</div>
<div id="graph"></div>
</section>
<aside id="detailsArea">
<section id="generalDetails">
<h1 id="title"></h1>
<span><a id="about" href=""></a></span>
<h5>Version: <span id="version"></span></h5>
<h5>Author(s): <span id="authors"></span></h5>
<h5>
<label>Language: <select id="language" name="language" size="1"></select></label>
</h5>
<h3 class="accordion-trigger accordion-trigger-active">Description</h3>
<div class="accordion-container scrollable">
<p id="description"></p>
</div>
<h3 class="accordion-trigger">Metadata</h3>
<div id="ontology-metadata" class="accordion-container"></div>
<h3 class="accordion-trigger">Statistics</h3>
<div class="accordion-container">
<p class="statisticDetails">Classes: <span id="classCount"></span></p>
<p class="statisticDetails">Object prop.: <span id="objectPropertyCount"></span></p>
<p class="statisticDetails">Datatype prop.: <span id="datatypePropertyCount"></span></p>
<div class="small-whitespace-separator"></div>
<p class="statisticDetails">Individuals: <span id="individualCount"></span></p>
<div class="small-whitespace-separator"></div>
<p class="statisticDetails">Nodes: <span id="nodeCount"></span></p>
<p class="statisticDetails">Edges: <span id="edgeCount"></span></p>
</div>
<h3 class="accordion-trigger" id="selection-details-trigger">Selection Details</h3>
<div class="accordion-container" id="selection-details">
<div id="classSelectionInformation" class="hidden">
<p class="propDetails">Name: <span id="name"></span></p>
<p class="propDetails">Type: <span id="typeNode"></span></p>
<p class="propDetails">Equiv.: <span id="classEquivUri"></span></p>
<p class="propDetails">Disjoint: <span id="disjointNodes"></span></p>
<p class="propDetails">Charac.: <span id="classAttributes"></span></p>
<p class="propDetails">Individuals: <span id="individuals"></span></p>
<p class="propDetails">Description: <span id="nodeDescription"></span></p>
<p class="propDetails">Comment: <span id="nodeComment"></span></p>
</div>
<div id="propertySelectionInformation" class="hidden">
<p class="propDetails">Name: <span id="propname"></span></p>
<p class="propDetails">Type: <span id="typeProp"></span></p>
<p id="inverse" class="propDetails">Inverse: <span></span></p>
<p class="propDetails">Domain: <span id="domain"></span></p>
<p class="propDetails">Range: <span id="range"></span></p>
<p class="propDetails">Subprop.: <span id="subproperties"></span></p>
<p class="propDetails">Superprop.: <span id="superproperties"></span></p>
<p class="propDetails">Equiv.: <span id="propEquivUri"></span></p>
<p id="infoCardinality" class="propDetails">Cardinality: <span></span></p>
<p id="minCardinality" class="propDetails">Min. cardinality: <span></span></p>
<p id="maxCardinality" class="propDetails">Max. cardinality: <span></span></p>
<p class="propDetails">Charac.: <span id="propAttributes"></span></p>
<p class="propDetails">Description: <span id="propDescription"></span></p>
<p class="propDetails">Comment: <span id="propComment"></span></p>
</div>
<div id="noSelectionInformation">
<p><span>Select an element in the visualization.</span></p>
</div>
</div>
</section>
</aside>
<nav id="optionsArea">
<ul id="optionsMenu">
<li id="aboutMenu"><a href="#">About</a>
<ul class="toolTipMenu aboutMenu">
<li><a href="license.txt" target="_blank">MIT License &copy; 2014-2017</a></li>
<li id="credits" class="option">WebVOWL Developers:<br/> Vincent Link, Steffen Lohmann, Eduard Marbach, Stefan Negru, Vitalis Wiens
</li>
<li><a href="http://vowl.visualdataweb.org/webvowl.html#releases" target="_blank">Version: 1.0.6<br/>(release history)</a></li>
<li><a href="http://purl.org/vowl/" target="_blank">VOWL Specification &raquo;</a></li>
</ul>
</li>
<li id="pauseOption"><a id="pause-button" href="#">Pause</a></li>
<li id="resetOption"><a id="reset-button" href="#" type="reset">Reset</a></li>
<li id="moduleOption"><a href="#">Modes</a>
<ul class="toolTipMenu module">
<!--<li class="toggleOption" id="helicopterZoom"></li>-->
<!--<li class="toggleOption" id="grassHopperZoom"></li>-->
<li class="toggleOption" id="dynamicLabelWidth"></li>
<li class="toggleOption" id="pickAndPinOption"></li>
<li class="toggleOption" id="nodeScalingOption"></li>
<li class="toggleOption" id="compactNotationOption"></li>
<li class="toggleOption" id="colorExternalsOption"></li>
</ul>
</li>
<li id="filterOption"><a href="#">Filter</a>
<ul class="toolTipMenu filter">
<li class="toggleOption" id="datatypeFilteringOption"></li>
<li class="toggleOption" id="objectPropertyFilteringOption"></li>
<li class="toggleOption" id="subclassFilteringOption"></li>
<li class="toggleOption" id="disjointFilteringOption"></li>
<li class="toggleOption" id="setOperatorFilteringOption"></li>
<li class="slideOption" id="nodeDegreeFilteringOption"></li>
</ul>
</li>
<li id="gravityOption"><a href="#">Gravity</a>
<ul class="toolTipMenu gravity">
<li class="slideOption" id="classSliderOption"></li>
<li class="slideOption" id="datatypeSliderOption"></li>
</ul>
</li>
<li id="export"><a href="#">Export</a>
<ul class="toolTipMenu export">
<li><a href="#" download id="exportJson">Export as JSON</a></li>
<li><a href="#" download id="exportSvg">Export as SVG</a></li>
<li class="option">
<div>
<form class="converter-form" id="url-copy-form">
<label for="exportedUrl">Export as URL:</label>
<input type="text" id="exportedUrl" placeholder="an URL">
<span id="copyBt" title="Copy to Clipboard">Copy</span>
</form>
</div>
</li>
</ul>
</li>
<li id="select"><a href="#">Ontology</a>
<ul class="toolTipMenu select">
<li><a href="#foaf" id="foaf">Friend of a Friend (FOAF) vocabulary</a></li>
<li><a href="#muto" id="muto">Modular and Unified Tagging Ontology (MUTO)</a></li>
<li><a href="#personasonto" id="personasonto">Personas Ontology (PersonasOnto)</a></li>
<li><a href="#goodrelations" id="goodrelations">GoodRelations Vocabulary for E-Commerce</a></li>
<li><a href="#sioc" id="sioc">SIOC (Semantically-Interlinked Online Communities) Core Ontology</a></li>
<li><a href="#ontovibe" id="ontovibe">Ontology Visualization Benchmark (OntoViBe)</a></li>
<li class="option" id="converter-option">
<form class="converter-form" id="iri-converter-form">
<label for="iri-converter-input">Custom Ontology:</label>
<input type="text" id="iri-converter-input" placeholder="Enter ontology IRI">
<button type="submit" id="iri-converter-button" disabled>Visualize</button>
</form>
<div class="converter-form">
<input class="hidden" type="file" id="file-converter-input" autocomplete="off">
<label class="truncate" id="file-converter-label" for="file-converter-input">Select ontology file <small>(max. 5MB)</small></label>
<button type="submit" id="file-converter-button" autocomplete="off" disabled>
Upload
</button>
</div>
</li>
</ul>
</li>
<li id="li_locationSearch"> <a title="Nothing to locate, enter search term." href="#" id="locateSearchResult">&#8853;</a></li>
<li class="searchMenu" id="searchMenuId">
<input class="searchInputText" type="text" id="search-input-text" placeholder="Search">
<ul class="searchMenuEntry" id="searchEntryContainer">
</ul>
</li>
<li id="li_right" style="float:left"><a href="#" id="RightButton"></a></li>
<li id="li_left" style="float:left"><a href="#" id="LeftButton"></a></li>
</li>
</ul>
</nav>
</main>
<script src="http://www.visualdataweb.de/webvowl/js/d3.min.js"></script>
<script src="http://www.visualdataweb.de/webvowl/js/webvowl.js"></script>
<script src="http://www.visualdataweb.de/webvowl/js/webvowl.app.js"></script>
<script>
window.onload = webvowl.app().initialize;
</script>
<style>
nav {
display:none ;
}
</style>
<script>
</script>
</body>
</html>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#locateSearchResult:focus {
outline: none
}
a#locateSearchResult.highlighted:hover {
background-color: #d90;
color: red
}
a#locateSearchResult {
outline: none
}
#myProgress {
position: relative;
width: 93.5%;
height: 10px;
background-color: #ddd;
padding: 0;
display: none
}
#myBar {
position: absolute;
width: 50%;
height: 50%;
background-color: red;
display: none
}
.dbEntry {
background-color: #fff
}
.dbEntry,
.dbEntrySelected {
color: #2980b9;
padding: 10px;
font-size: 14px;
border: none;
cursor: pointer
}
.dbEntry:focus,
.dbEntry:hover,
.dbEntrySelected {
background-color: #bdc3c7
}
.searchMenuEntry {
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-sizing: border-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .15);
border-bottom: none;
border-radius: 4px 4px 0 0;
bottom: 40px;
display: none;
font-size: 14px;
list-style: none;
min-width: 300px;
margin: 0;
padding: 0;
position: absolute;
z-index: 99
}
.searchMenuEntry li.highlighted {
background-color: #feb
}
.searchMenuEntry>li:first-of-type {
border: none
}
.searchMenuEntry>li {
border-top: 0 solid #bdc3c7
}
.searchMenuEntry li {
display: block
}
.searchMenuEntry select {
float: right
}
ul#optionsMenu>li:hover .searchMenuEntry {
display: block
}
.searchInputText {
background-color: #fff;
color: #000;
border: #000;
text-decoration: none;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
height: 20px;
margin: 10px 0
}
.searchMenu {
box-sizing: border-box;
background-color: #18202a;
height: 40px
}
iframe,
img {
border: none
}
.hidden {
display: none!important
}
.clear {
clear: both
}
a {
color: #69c;
text-decoration: none
}
a:hover {
color: #3498db
}
#optionsArea a {
color: #2980b9
}
#optionsArea a.highlighted {
background-color: #d90
}
.toolTipMenu li.highlighted {
background-color: #feb
}
#browserCheck {
background-color: red;
padding: 5px 0;
position: absolute;
text-align: center;
width: 100%
}
#browserCheck a {
color: #fff
}
#browserCheck a:hover {
text-decoration: underline
}
@-webkit-keyframes sbExpandAnimation {
0% {
width: 78%
}
to {
width: 100%
}
}
@-moz-keyframes sbExpandAnimation {
0% {
width: 78%
}
to {
width: 100%
}
}
@-o-keyframes sbExpandAnimation {
0% {
width: 78%
}
to {
width: 100%
}
}
@keyframes sbExpandAnimation {
0% {
width: 78%
}
to {
width: 100%
}
}
@-webkit-keyframes sbCollapseAnimation {
0% {
width: 100%
}
to {
width: 78%
}
}
@-moz-keyframes sbCollapseAnimation {
0% {
width: 100%
}
to {
width: 78%
}
}
@-o-keyframes sbCollapseAnimation {
0% {
width: 100%
}
to {
width: 78%
}
}
@keyframes sbCollapseAnimation {
0% {
width: 100%
}
to {
width: 78%
}
}
body {
background: #18202a;
font-size: 14px;
font-family: Open Sans, Helvetica, Arial, sans-serif;
line-height: 1;
overflow: hidden;
position: fixed
}
body,
main {
height: 100%;
margin: 0;
padding: 0;
width: 100%
}
#canvasArea,
main {
position: relative
}
#canvasArea {
margin: 0;
padding: 0;
width: 78%
}
#canvasArea #graph {
margin: 0 0 2px;
background-color: #ecf0f1;
width: 100%
}
#canvasArea #graph,
#canvasArea svg {
box-sizing: border-box;
overflow: hidden;
padding: 0
}
#canvasArea svg {
margin: 0
}
nav#optionsArea {
height: 40px;
margin: 0;
padding: 0
}
ul#optionsMenu {
box-sizing: border-box;
color: #fff;
display: block;
height: 40px;
margin: -2px 0 0;
padding: 0;
width: 78%
}
#logo {
position: fixed;
pointer-events: none
}
#logo h2 {
color: #3498db;
margin: 0;
line-height: .7;
text-align: center
}
#logo h2 span {
color: #34495e;
font-size: .6em
}
ul#optionsMenu>li {
box-sizing: border-box;
float: right;
font-size: 1.1em;
display: inline-block;
margin: 0 10px;
padding: 0;
position: relative;
vertical-align: middle
}
ul#optionsMenu>li>a:hover {
box-sizing: border-box;
background: #1b252e;
color: #bdc3c7
}
ul#optionsMenu>li>a {
box-sizing: border-box;
color: #fff;
display: block;
height: 40px;
margin: 0;
padding: 12px 5px 5px
}
.option,
ul.toolTipMenu li a:only-child {
display: block;
float: none;
padding: 8px 5px
}
.checkboxContainer input,
.checkboxContainer label {
vertical-align: middle
}
ul#optionsMenu li>ul.toolTipMenu li a:hover {
background: #e1e1e1
}
.selected-ontology {
background-color: #eee
}
ul#optionsMenu>li:hover .toolTipMenu {
display: block
}
ul#optionsMenu>li:hover .aboutMenu {
left: -145px;
width: 210px
}
#credits {
border-top: 1px solid #bdc3c7;
font-size: .9em
}
.toolTipMenu {
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-sizing: border-box;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .15);
border-bottom: none;
border-radius: 4px 4px 0 0;
bottom: 40px;
display: none;
font-size: 14px;
list-style: none;
min-width: 300px;
margin: 0;
padding: 0;
position: absolute;
z-index: 99
}
.toolTipMenu>li:first-of-type {
border: none
}
.toolTipMenu>li {
border-top: 1px solid #bdc3c7
}
.toolTipMenu li {
color: #2980b9;
display: block
}
.toolTipMenu select {
float: right
}
.aboutMenu,
.export {
min-width: 150px
}
.filter,
.gravity {
min-width: 180px
}
.module {
min-width: 240px
}
.toggleOption {
padding: 8px 5px;
min-width: 150px
}
.slideOption {
position: relative;
padding: 8px 5px;
outline: none
}
.slideOption .value {
float: right;
outline: none
}
.slideOption input[type=range] {
box-sizing: border-box;
margin: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
background: none repeat scroll 0 0 grey;
border-radius: 3px;
height: 12px;
width: 100%;
box-shadow: none;
left: 0;
position: relative;
transition: all .5s ease
}
.slideOption input[type=range]::-webkit-slider-runnable-track {
-webkit-appearance: none;
background-color: #999;
height: 2px
}
.slideOption input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 15px;
width: 15px;
border-radius: 15px;
background-color: #fff;
border: 1px solid gray;
transition: all .5s ease;
margin-top: -6px
}
.slideOption input[type=range]::-moz-range-thumb {
-webkit-appearance: none;
background-color: #fff;
border-radius: 20px;
transition: all .5s ease;
height: 10px;
width: 10px;
outline: none
}
.slideOption input[type=range]:hover {
background-color: #d90;
outline: none
}
.slideOption input[type=range]::-webkit-slider-thumb:hover {
background-color: #69c;
border-radius: 15px;
height: 15px;
width: 15px;
outline: none;
margin-top: -6px
}
.slideOption input[type=range]::-moz-range-thumb:hover {
background-color: #69c;
color: #d90;
outline: none
}
.slideOption input[type=range]::-webkit-slider-thumb:active {
background-color: #69c;
color: #d90;
outline: none;
display: block
}
.slideOption input[type=range]::-moz-range-thumb:active {
background-color: #69c;
color: #d90;
outline: none
}
.slideOption input[type=range]:active {
outline: none
}
.slideOption input[type=range]::-webkit-slider-thumb:focus {
outline: none;
display: block
}
.slideOption input[type=range]::-moz-range-thumb:focus {
outline: none
}
.slideOption input[type=range]:focus {
outline: none
}
#optionsMenu>li>a:before {
font-size: 1em;
margin: 0;
padding: 0 5px 0 0
}
#LeftButton:focus,
#RightButton:focus {
outline: none
}
#LeftButton:before {
content: ">"
}
#RightButton:before {
content: "<"
}
a#LeftButton.highlighted:hover,
a#RightButton.highlighted:hover {
background-color: #d90;
color: #fff
}
#searchMenuId:before {
font-size: 1.4em;
content: "\2315"
}
#select>a:before {
content: "\2263"
}
#gravityOption>a:before {
content: "\2299"
}
a#reset-button:before {
content: "\21BB"
}
a#pause-button.paused:before {
content: "\25BA"
}
a#pause-button.paused:hover {
background-color: #d90;
color: #fff
}
a#pause-button:not(.paused):before {
content: "II"
}
#export>a:before {
content: "\21E4"
}
#filterOption>a:before {
content: "\25BD"
}
#moduleOption>a:before {
content: "\2606"
}
#aboutMenu>a:before {
content: "\A9"
}
#detailsArea {
bottom: 0;
color: #bdc3c7;
height: 100%;
position: fixed;
right: 0;
top: 0;
width: 22%;
overflow-y: auto;
overflow-x: hidden;
border-left: 1px solid #34495e
}
#detailsArea h1 {
border-bottom: 1px solid #34495e;
color: #ecf0f1;
display: block;
font-weight: 100;
font-size: 1.5em;
margin: 0;
padding: 10px 0;
text-align: center
}
#generalDetails {
width: auto;
box-sizing: border-box;
height: 100%
}
#generalDetails span #about {
border-bottom: 1px solid #34495e;
display: block;
padding: 10px;
text-align: center;
word-wrap: break-word;
color: #69c
}
#generalDetails h4 {
background: #1b252e;
color: #ecf0f1;
display: block;
font-size: 1.1em;
font-weight: 100;
margin: 0;
padding: 10px 0;
text-align: center
}
#detailsArea #generalDetails h5 {
border-bottom: 1px solid #34495e;
font-size: .9em;
font-weight: 100;
margin: 0;
padding: 5px;
text-align: center
}
#description {
text-align: justify
}
.accordion-container p {
font-size: .9em;
line-height: 1.3;
margin: 5px 10px
}
.statisticDetails span {
padding: 10px
}
.statisticDetails div,
.statisticDetails span {
font-weight: 100;
font-style: italic;
margin: 10px 0
}
.statisticDetails div {
padding: 0 10px;
display: inline
}
#selection-details .propDetails a {
color: #69c
}
#selection-details .propDetails>span {
font-weight: 100;
font-style: italic;
padding: 0 10px
}
#selection-details #classEquivUri span,
#selection-details #disjointNodes span {
padding: 0
}
#selection-details .propDetails div {
font-weight: 100;
font-style: italic;
margin: 10px 0;
padding: 0 10px;
display: inline
}
#selection-details .propDetails div span {
padding: 0
}
.subclass {
fill: #ecf0f1
}
@media screen and (max-device-width:1080px) {
body {
font-size: 12px
}
#logo h2 {
font-size: 1.2em
}
#logo h2 span {
font-size: .5em
}
ul#optionsMenu>li {
margin: 0 2px
}
}
@media screen and (max-width:1080px) {
body {
font-size: 12px
}
#logo h2 {
font-size: 1.2em
}
#logo h2 span {
font-size: .5em
}
ul#optionsMenu>li {
margin: 0 2px
}
}
@media print {
#detailsArea,
#optionsArea {
display: none
}
@page {
margin: 1cm .5cm 1cm .5cm;
size: landscape
}
#canvasArea,
body {
width: 100%
}
body {
margin: 0;
padding: 0
}
}
.accordion-trigger {
background: #24323e;
cursor: pointer;
padding: .5em
}
.accordion-trigger.accordion-trigger-active:before {
padding-right: 4px;
content: "\25BC"
}
.accordion-trigger:not(.accordion-trigger-active):before {
padding-right: 4px;
content: "\25BA"
}
.accordion-container.scrollable {
max-height: 40%;
overflow: auto
}
.small-whitespace-separator {
height: 3px
}
#language {
background: transparent;
border: 1px solid #34495e;
color: #ecf0f1
}
#language option {
background-color: #24323e
}
.converter-form:not(:first-child) {
margin-top: 5px
}
.converter-form label {
display: inline-block;
line-height: normal
}
.converter-form input {
box-sizing: border-box;
height: 20px;
width: 74%;
border: 1px solid #34495e
}
.converter-form button {
float: right;
padding: 0;
width: 25%;
background-color: #ecf0f1
}
#file-converter-label,
.converter-form button {
cursor: pointer;
height: 20px;
border: 1px solid #34495e
}
#file-converter-label {
box-sizing: border-box;
width: 74%
}
#killWarning {
cursor: pointer;
color: #fff;
font-weight: 700
}
#copyBt {
right: 2px;
padding-top: 2px;
padding-bottom: 3px
}
#copyBt,
#sidebarExpandButton {
color: #000;
float: right;
position: absolute;
border: 1px solid #000;
background-color: #ecf0f1;
box-sizing: border-box;
cursor: pointer
}
#sidebarExpandButton {
top: 10px;
right: 0
}
#loading-info {
box-sizing: border-box;
position: absolute;
text-align: center;
width: 100%;
top: 0
}
#loading-info>div {
display: inline-block;
color: #fff;
background-color: #18202a;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px
}
#loading-info>*>* {
padding: 5px
}
#error-description-button {
margin: 5px 0 0;
font-size: 12px;
color: #69c;
cursor: pointer;
text-align: center
}
#error-description-container {
box-sizing: border-box;
text-align: left
}
#error-description-container pre {
background-color: #34495e;
padding: 2px;
margin: 0;
white-space: pre-wrap;
max-height: calc(100vh - 125px);
max-width: 75vw;
overflow: auto
}
.spin {
display: inline-block;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg)
}
}
.truncate {
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.color-mode-switch {
float: right;
width: 90px;
cursor: pointer;
height: 20px;
padding: 0;
border: 0;
color: #555;
background-color: #eceeef;
box-shadow: 0 1px 4px rgba(0, 0, 0, .2), inset 0 0 3px rgba(0, 0, 0, .1)
}
.color-mode-switch:focus {
outline-width: 0
}
.color-mode-switch.active {
color: #fff;
background-color: #32cd32;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, .2), inset 0 0 3px rgba(0, 0, 0, .1)
}
.filterMenuButtonHighlight {
background-color: #d90
}
@-webkit-keyframes buttonAnimation {
0% {
background-color: unset
}
to {
background-color: #d90
}
}
@-moz-keyframes buttonAnimation {
0% {
background-color: unset
}
to {
background-color: #d90
}
}
@-o-keyframes buttonAnimation {
0% {
background-color: unset
}
to {
background-color: #d90
}
}
@keyframes buttonAnimation {
0% {
background-color: unset
}
to {
background-color: #d90
}
}
.buttonPulse {
-webkit-animation-name: buttonAnimation;
-moz-animation-name: buttonAnimation;
-o-animation-name: buttonAnimation;
animation-name: buttonAnimation;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-iteration-count: 3;
-moz-animation-iteration-count: 3;
-o-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment