first commit with live.hangar.org content
This commit is contained in:
parent
c887b8fb8a
commit
9a1822d475
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,423 @@
|
||||||
|
/*
|
||||||
|
hangar css styles
|
||||||
|
version 0.6
|
||||||
|
date: 2020 12 16
|
||||||
|
author jorge@hangar.org
|
||||||
|
*/
|
||||||
|
:root{
|
||||||
|
--color-hangar: rgb(0,0,255);
|
||||||
|
--color-body: rgb(20,20,20);
|
||||||
|
--color-secondary: rgb(90,90,90) ;
|
||||||
|
--color-background: rgb(250,250,250);
|
||||||
|
--color-body-invert: rgb(200,200,200);
|
||||||
|
--color-background-invert: rgb(10,10,10);
|
||||||
|
--color-black: rgb(0,0,0);
|
||||||
|
--color-white: rgb(255,255,255);
|
||||||
|
--color-grey-dark: rgb(110,110,110);
|
||||||
|
--color-grey-light: rgb(230,230,230);
|
||||||
|
--global-padding: 1rem;
|
||||||
|
--global-margin: 1rem;
|
||||||
|
--global-border: 0.05rem solid var(--color-grey-light);
|
||||||
|
--global-radius: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen{
|
||||||
|
body{
|
||||||
|
background-color: var(--color-white);
|
||||||
|
color: var(--color-body);
|
||||||
|
font-family: Helvetica-Rounded, arial rounded, helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: var(--color-hangar);
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
color: var(--color-grey-dark);
|
||||||
|
border-bottom:0.2rem solid var(--color-hangar);
|
||||||
|
margin-bottom:-0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hangar-blue{
|
||||||
|
color:var(--color-hangar);
|
||||||
|
}
|
||||||
|
.hangar-grey{
|
||||||
|
color:var(--color-grey-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
span.hangar-blue-bg,
|
||||||
|
.hangar-blue-bg img{
|
||||||
|
background-color:var(--color-hangar);
|
||||||
|
}
|
||||||
|
.hangar-blue-invert{
|
||||||
|
color:var(--color-white);
|
||||||
|
background-color:var(--color-hangar);
|
||||||
|
}
|
||||||
|
.invert-bg{
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
.hangar-logo {
|
||||||
|
font-size:0px;
|
||||||
|
color:transparent;
|
||||||
|
}
|
||||||
|
.hangar-logo::after {
|
||||||
|
display:inline-block;
|
||||||
|
content:'';
|
||||||
|
background-image: url('https://grafica.hangar.org/assets/img/hangar-logo.svg');
|
||||||
|
width: 9rem;
|
||||||
|
height: 3.8rem;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-color: var(--color-white);
|
||||||
|
position: relative;
|
||||||
|
bottom:-0.5rem;
|
||||||
|
}
|
||||||
|
.hangar-logo.small::after{
|
||||||
|
width: 4rem;
|
||||||
|
height: 1.7rem;
|
||||||
|
bottom:-0.3rem;
|
||||||
|
}
|
||||||
|
.hangar-logo.icon::after{
|
||||||
|
background-image: url('https://grafica.hangar.org/assets/img/hangar-logo-icon.svg');
|
||||||
|
width: 3rem;
|
||||||
|
height:3rem;
|
||||||
|
bottom:-0.3rem;
|
||||||
|
}
|
||||||
|
.hangar-logo.small.icon::after{
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
bottom:-0.2rem;
|
||||||
|
}
|
||||||
|
.hangar-logo.hangar-blue-bg::after{
|
||||||
|
background-color:var(--color-hangar);
|
||||||
|
}
|
||||||
|
.up-arrow::before {
|
||||||
|
display:inline;
|
||||||
|
content:"\21D1";
|
||||||
|
}
|
||||||
|
.up-arrow:hover{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.full-height{
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
.hide{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6{
|
||||||
|
font-weight: bold;
|
||||||
|
margin:2rem auto;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size:4rem;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size:3.5rem;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size:3rem;
|
||||||
|
}
|
||||||
|
h4{
|
||||||
|
font-size:2.5rem;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
font-size:2rem;
|
||||||
|
}
|
||||||
|
h6{
|
||||||
|
font-size:1.5rem;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
/* menu fixed to the right side*/
|
||||||
|
.menu-fixed-right {
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1em;
|
||||||
|
max-width: 7rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: var(--color-grey-light);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-fixed-right li {
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
border-bottom:1px dotted var(--color-hangar);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 2rem;
|
||||||
|
border-top: var(--global-border);
|
||||||
|
color: var(--color-grey-dark);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* only for class hangar-grafica */
|
||||||
|
.hangar-grafica h1,
|
||||||
|
.hangar-grafica h2,
|
||||||
|
.hangar-grafica h3,
|
||||||
|
.hangar-grafica h4,
|
||||||
|
.hangar-grafica h5,
|
||||||
|
.hangar-grafica h6 {
|
||||||
|
color: var(--color-grey-dark);
|
||||||
|
background-color: var(--color-grey-light);
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.hangar-grafica .logos a,
|
||||||
|
.hangar-grafica .icons a{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.hangar-grafica .logos img {
|
||||||
|
max-width: 30vw;
|
||||||
|
margin:1rem 0;
|
||||||
|
}
|
||||||
|
.hangar-grafica .icons img {
|
||||||
|
max-width: 15vw;
|
||||||
|
}
|
||||||
|
.hangar-grafica figcaption {
|
||||||
|
color: var(--color-grey-dark);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.hangar-grafica .codeblock {
|
||||||
|
background-color: var(--color-grey-light);
|
||||||
|
text-align: left;
|
||||||
|
padding:1rem;
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".SVG"]::after,
|
||||||
|
.hangar-grafica a[href$=".svg"]::after,
|
||||||
|
.hangar-grafica a[href$=".JPG"]::after,
|
||||||
|
.hangar-grafica a[href$=".jpg"]::after,
|
||||||
|
.hangar-grafica a[href$=".PNG"]::after,
|
||||||
|
.hangar-grafica a[href$=".png"]::after,
|
||||||
|
.hangar-grafica a[href$=".GIF"]::after,
|
||||||
|
.hangar-grafica a[href$=".gif"]::after {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom:1rem;
|
||||||
|
border-bottom: 1px solid grey;
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".SVG"]::after,
|
||||||
|
.hangar-grafica a[href$=".svg"]::after {
|
||||||
|
content:"file svg";
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".JPG"]::after,
|
||||||
|
.hangar-grafica a[href$=".jpg"]::after {
|
||||||
|
content:"file jpg";
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".PNG"]::after,
|
||||||
|
.hangar-grafica a[href$=".png"]::after {
|
||||||
|
content:"file png";
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".GIF"]::after,
|
||||||
|
.hangar-grafica a[href$=".gif"]::after {
|
||||||
|
content:"file gif";
|
||||||
|
}
|
||||||
|
/* buttons */
|
||||||
|
.button {
|
||||||
|
background-color: var(--color-hangar);
|
||||||
|
color: var(--color-body-invert);
|
||||||
|
padding: calc(var(--global-padding) / 4);
|
||||||
|
border-radius: calc(var(--global-radius) / 4);
|
||||||
|
}
|
||||||
|
a.button {
|
||||||
|
display: inline-block;
|
||||||
|
margin: calc(var(--global-margin) / 4);
|
||||||
|
}
|
||||||
|
a:hover.button{
|
||||||
|
border: none;
|
||||||
|
color: var(--color-white);
|
||||||
|
}
|
||||||
|
/* cards - services */
|
||||||
|
.card {
|
||||||
|
border: var(--global-border);
|
||||||
|
border-radius: var(--global-radius) * 0.3;
|
||||||
|
padding: 1rem;
|
||||||
|
margin: 0.5rem;
|
||||||
|
}
|
||||||
|
.card-divider{
|
||||||
|
padding-bottom: calc(var(--global-padding)/2);
|
||||||
|
border-bottom: var(--global-border);
|
||||||
|
}
|
||||||
|
.card-divider a{
|
||||||
|
color: var(--color-body);
|
||||||
|
}
|
||||||
|
.card-image {
|
||||||
|
height: 5rem;
|
||||||
|
display: flex;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.card-section{
|
||||||
|
padding-top: calc(var(--global-padding) / 2);
|
||||||
|
border-top: var(--global-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* only for live-streaming */
|
||||||
|
.live-streaming h1,
|
||||||
|
.live-streaming h2,
|
||||||
|
.live-streaming h3,
|
||||||
|
.live-streaming h4,
|
||||||
|
.live-streaming h5,
|
||||||
|
.live-streaming h6{
|
||||||
|
margin:0.5rem 0;
|
||||||
|
}
|
||||||
|
.live-streaming h1{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
.live-streaming h2{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.live-streaming .video-js, .live-streaming .video-dimensions,.embedchat iframe {
|
||||||
|
width: calc(30vw * 3);
|
||||||
|
height: calc(15vw * 3);
|
||||||
|
margin-bottom:1.5rem;
|
||||||
|
}
|
||||||
|
.embedchat iframe {
|
||||||
|
max-width: 48rem;
|
||||||
|
min-height:24rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* switches for color & view */
|
||||||
|
#wrapper.colorswitch-invert, #wrapper.viewswitch-change{
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
input.colorswitch, input.viewswitch {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
label.colorswitch, label.viewswitch{
|
||||||
|
z-index: 10;
|
||||||
|
position:relative;
|
||||||
|
display:inline-block;
|
||||||
|
width: 2rem;
|
||||||
|
height: 1rem;
|
||||||
|
}
|
||||||
|
label.colorswitch {
|
||||||
|
top: 1rem;
|
||||||
|
left: 80vw;
|
||||||
|
}
|
||||||
|
label.viewswitch {
|
||||||
|
top: 2.5rem;
|
||||||
|
left: calc(80vw - 2.3rem);
|
||||||
|
}
|
||||||
|
label.colorswitch .slider,label.viewswitch .slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--color-grey-dark);
|
||||||
|
border: var(--global-border);
|
||||||
|
border-radius: var(--global-radius);
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
label.colorswitch .slider:before,
|
||||||
|
label.viewswitch .slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
width: 0.7rem;
|
||||||
|
height: 0.7rem;
|
||||||
|
left: 0.05rem;
|
||||||
|
top: 0.05rem;
|
||||||
|
background-color: var(--color-white);
|
||||||
|
border-radius: var(--global-radius);
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
input.colorswitch:checked ~ label.colorswitch .slider,input.viewswitch:checked ~ label.viewswitch .slider {
|
||||||
|
background-color: var(--color-grey-dark);
|
||||||
|
}
|
||||||
|
input.colorswitch:checked ~ label.colorswitch .slider:before,input.viewswitch:checked ~ label.viewswitch .slider:before {
|
||||||
|
transform: translateX(1rem);
|
||||||
|
}
|
||||||
|
label:before,label:after {
|
||||||
|
font-family: "Font Awesome 5 Free";
|
||||||
|
font-size: 0.7rem;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
label.colorswitch:before,label.viewswitch:before {
|
||||||
|
right: 2.5rem;
|
||||||
|
}
|
||||||
|
label.colorswitch:after,label.viewswitch:after {
|
||||||
|
left: 2.5rem;
|
||||||
|
}
|
||||||
|
input.viewswitch ~ label.viewswitch:before {
|
||||||
|
content: "\f0c8\f0c8"/*"top/bottom"*/;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
margin-right:-0.25rem;
|
||||||
|
}
|
||||||
|
input.viewswitch ~ label.viewswitch:after {
|
||||||
|
content: "\f0c8\f0c8"/*"left/right"*/;
|
||||||
|
}
|
||||||
|
input.colorswitch ~ label.colorswitch:before{
|
||||||
|
content: "\f0eb"/*"light"*/;
|
||||||
|
}
|
||||||
|
input.colorswitch ~ label.colorswitch:after{
|
||||||
|
content: "\f186"/*"dark"*/;
|
||||||
|
}
|
||||||
|
input.colorswitch:checked ~ label.colorswitch,
|
||||||
|
input.colorswitch:checked ~ label.viewswitch {
|
||||||
|
color:var(--color-white);
|
||||||
|
}
|
||||||
|
input.colorswitch:checked ~ .colorswitch-invert {
|
||||||
|
color: var(--color-white);
|
||||||
|
background: var(--color-body);
|
||||||
|
}
|
||||||
|
input.colorswitch:checked ~ .colorswitch-invert .hangar-logo::after {
|
||||||
|
filter: invert(90%);
|
||||||
|
--webkit-filter: invert(90%);
|
||||||
|
}
|
||||||
|
input.colorswitch:checked ~ .colorswitch-invert code,
|
||||||
|
input.colorswitch:checked ~ .colorswitch-invert .embedchat iframe {
|
||||||
|
filter: invert(80%);
|
||||||
|
--webkit-filter: invert(80%);
|
||||||
|
}
|
||||||
|
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container{
|
||||||
|
max-width: unset;
|
||||||
|
}
|
||||||
|
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-webchat {
|
||||||
|
flex-flow: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-js,
|
||||||
|
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .video-dimensions {
|
||||||
|
width: calc(30vw * 2);
|
||||||
|
max-width:970px;
|
||||||
|
height: calc(15vw * 2);
|
||||||
|
max-height:calc(970px / 2);
|
||||||
|
float: left;
|
||||||
|
margin-right:1rem;
|
||||||
|
}
|
||||||
|
input.viewswitch:checked ~ .viewswitch-change .viewswitch-container .embedchat iframe {
|
||||||
|
width: calc(30vw * 1);
|
||||||
|
height: calc(15vw * 2);
|
||||||
|
max-height:calc(970px / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width:768px) {
|
||||||
|
.live-streaming h2.logo {
|
||||||
|
float: left;
|
||||||
|
margin-right: 2rem;
|
||||||
|
}
|
||||||
|
.live-streaming .video-js, .live-streaming .video-dimensions {
|
||||||
|
width: calc(30vw * 2);
|
||||||
|
max-width:970px;
|
||||||
|
height: calc(15vw * 2);
|
||||||
|
max-height:calc(970px / 2);
|
||||||
|
}
|
||||||
|
.embedchat iframe {
|
||||||
|
width: calc(30vw * 2);
|
||||||
|
max-width: 48rem;
|
||||||
|
height: calc(15vw * 2);
|
||||||
|
min-height:24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 850px) {
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
:root{
|
||||||
|
--color-body: rgb(10,10,10);
|
||||||
|
--color-secondary: rgb(90,90,90) ;
|
||||||
|
--color-background: rgb(250,250,250);
|
||||||
|
--color-body-invert: rgb(200,200,200);
|
||||||
|
--color-background-invert: rgb(10,10,10);
|
||||||
|
--color-hangar: rgb(0,0,255);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen{
|
||||||
|
|
||||||
|
body{
|
||||||
|
background-color: --color-background;
|
||||||
|
color: var(--color-body);
|
||||||
|
font-family: Helvetica-Rounded, arial rounded, helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
color: var(--color-hangar);
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
color: --color-secondary;
|
||||||
|
border-bottom:0.2rem solid var(--color-hangar);
|
||||||
|
margin-bottom:-0.2rem;
|
||||||
|
}
|
||||||
|
h1,h2,h3,h4,h5,h6{
|
||||||
|
font-weight: bold;
|
||||||
|
margin:2rem auto;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size:4rem;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size:3.5rem;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size:3rem;
|
||||||
|
}
|
||||||
|
h4{
|
||||||
|
font-size:2.5rem;
|
||||||
|
}
|
||||||
|
h5{
|
||||||
|
font-size:2rem;
|
||||||
|
}
|
||||||
|
h6{
|
||||||
|
font-size:1.5rem;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.code-inline, code {
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
.hide{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.up-arrow::before {
|
||||||
|
display:inline;
|
||||||
|
content:"\21D1";
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
.up-arrow:hover{
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
.full-height{
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
/*hangar brand styles*/
|
||||||
|
.hangar-blue{
|
||||||
|
color:var(--color-hangar);
|
||||||
|
}
|
||||||
|
.hangar-blue-bg img{
|
||||||
|
background-color:var(--color-hangar);
|
||||||
|
}
|
||||||
|
.hangar-logo {
|
||||||
|
font-size:0px;
|
||||||
|
color:transparent;
|
||||||
|
}
|
||||||
|
.hangar-logo::after {
|
||||||
|
display:inline-block;
|
||||||
|
content:'';
|
||||||
|
background-image: url('../img/hangar-logo.svg');
|
||||||
|
width: 9rem;
|
||||||
|
height: 3.8rem;
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-color: --color-background;
|
||||||
|
}
|
||||||
|
.hangar-logo.small::after{
|
||||||
|
width: 4rem;
|
||||||
|
height: 1.7rem;
|
||||||
|
}
|
||||||
|
.hangar-logo.icon::after{
|
||||||
|
background-image: url('../img/hangar-logo-icon.svg');
|
||||||
|
width: 3rem;
|
||||||
|
height:3rem;
|
||||||
|
}
|
||||||
|
.hangar-logo.small.icon::after{
|
||||||
|
width: 1.5rem;
|
||||||
|
height: 1.5rem;
|
||||||
|
background-position-y: 0.2rem;
|
||||||
|
}
|
||||||
|
.hangar-logo.hangar-blue-bg::after{
|
||||||
|
background-color:var(--color-hangar);
|
||||||
|
}
|
||||||
|
/* invert colors*/
|
||||||
|
.invert-bg{
|
||||||
|
color: #ccc;
|
||||||
|
background-color: var(--color-background-invert);
|
||||||
|
}
|
||||||
|
.invert-bg .hangar-logo::after {
|
||||||
|
background-image: url('../img/hangar-logo-invert.svg');
|
||||||
|
background-color: var(--color-body);
|
||||||
|
}
|
||||||
|
.invert-bg .code-inline,
|
||||||
|
.invert-bg code{
|
||||||
|
color: #aaa;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
/* menu fixed to the right side*/
|
||||||
|
.menu-fixed-right {
|
||||||
|
position: fixed;
|
||||||
|
top: 1rem;
|
||||||
|
right: 1em;
|
||||||
|
max-width: 7rem;
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: #f5f5f5;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-fixed-right li {
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
border-bottom:1px dotted var(--color-hangar);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
border-top: 1px solid var(--color-body-invert);
|
||||||
|
color:#666;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* only for class hangar-grafica */
|
||||||
|
.hangar-grafica h1,
|
||||||
|
.hangar-grafica h2,
|
||||||
|
.hangar-grafica h3,
|
||||||
|
.hangar-grafica h4,
|
||||||
|
.hangar-grafica h5,
|
||||||
|
.hangar-grafica h6 {
|
||||||
|
color: #333;
|
||||||
|
background-color:#eee;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.hangar-grafica .logos a,
|
||||||
|
.hangar-grafica .icons a{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.hangar-grafica .logos img {
|
||||||
|
max-width: 30vw;
|
||||||
|
margin:1rem 0;
|
||||||
|
}
|
||||||
|
.hangar-grafica .icons img {
|
||||||
|
max-width: 15vw;
|
||||||
|
}
|
||||||
|
.hangar-grafica figcaption {
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hangar-grafica .codeblock {
|
||||||
|
background-color: var(--color-body-invert);
|
||||||
|
text-align: left;
|
||||||
|
padding:1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hangar-grafica a[href$=".SVG"]::after,
|
||||||
|
.hangar-grafica a[href$=".svg"]::after,
|
||||||
|
.hangar-grafica a[href$=".JPG"]::after,
|
||||||
|
.hangar-grafica a[href$=".jpg"]::after,
|
||||||
|
.hangar-grafica a[href$=".PNG"]::after,
|
||||||
|
.hangar-grafica a[href$=".png"]::after,
|
||||||
|
.hangar-grafica a[href$=".GIF"]::after,
|
||||||
|
.hangar-grafica a[href$=".gif"]::after {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom:1rem;
|
||||||
|
border-bottom: 1px solid grey;
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".SVG"]::after,
|
||||||
|
.hangar-grafica a[href$=".svg"]::after {
|
||||||
|
content:"file svg";
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".JPG"]::after,
|
||||||
|
.hangar-grafica a[href$=".jpg"]::after {
|
||||||
|
content:"file jpg";
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".PNG"]::after,
|
||||||
|
.hangar-grafica a[href$=".png"]::after {
|
||||||
|
content:"file png";
|
||||||
|
}
|
||||||
|
.hangar-grafica a[href$=".GIF"]::after,
|
||||||
|
.hangar-grafica a[href$=".gif"]::after {
|
||||||
|
content:"file gif";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* only for live-streaming */
|
||||||
|
.live-streaming h1,
|
||||||
|
.live-streaming h2,
|
||||||
|
.live-streaming h3,
|
||||||
|
.live-streaming h4,
|
||||||
|
.live-streaming h5,
|
||||||
|
.live-streaming h6{
|
||||||
|
margin:0.5rem 0;
|
||||||
|
}
|
||||||
|
.live-streaming h1{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
.live-streaming h2{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.live-streaming .video-js, .live-streaming .video-dimensions,.embedchat iframe {
|
||||||
|
width: calc(30vw * 3);
|
||||||
|
height: calc(15vw * 3);
|
||||||
|
margin-bottom:1.5rem;
|
||||||
|
}
|
||||||
|
.embedchat iframe {
|
||||||
|
max-width: 48rem;
|
||||||
|
min-height:24rem;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.embedchat iframe .kiwi-statebrowser.kiwi-theme-bg,
|
||||||
|
.embedchat iframe .kiwi-container-toggledraw-statebrowser{
|
||||||
|
/* display:none;*/
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width:768px) {
|
||||||
|
.live-streaming .video-js, .live-streaming .video-dimensions {
|
||||||
|
width: calc(30vw * 2);
|
||||||
|
max-width:970px;
|
||||||
|
height: calc(15vw * 2);
|
||||||
|
max-height:calc(970px / 2);
|
||||||
|
}
|
||||||
|
.embedchat iframe {
|
||||||
|
width: calc(30vw * 2);
|
||||||
|
max-width: 48rem;
|
||||||
|
height: calc(15vw * 2);
|
||||||
|
min-height:24rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
|
|
@ -0,0 +1,2 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,20 @@
|
||||||
|
<!-- header icons anf favicons -->
|
||||||
|
<!-- include this in your html file -->
|
||||||
|
<link rel="apple-touch-icon" sizes="57x57" href="/assets/faivcons/apple-icon-57x57.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="60x60" href="/assets/faivcons/apple-icon-60x60.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="/assets/faivcons/apple-icon-72x72.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="76x76" href="/assets/faivcons/apple-icon-76x76.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="/assets/faivcons/apple-icon-114x114.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="120x120" href="/assets/faivcons/apple-icon-120x120.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="144x144" href="/assets/faivcons/apple-icon-144x144.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="152x152" href="/assets/faivcons/apple-icon-152x152.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/assets/faivcons/apple-icon-180x180.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="/assets/faivcons/android-icon-192x192.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/faivcons/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="96x96" href="/assets/faivcons/favicon-96x96.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/faivcons/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="/assets/faivcons/manifest.json">
|
||||||
|
<meta name="msapplication-TileColor" content="#ffffff">
|
||||||
|
<meta name="msapplication-TileImage" content="/assets/faivcons/ms-icon-144x144.png">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
<!-- end header icons anf favicons -->
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
{
|
||||||
|
"name": "App",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "\/android-icon-36x36.png",
|
||||||
|
"sizes": "36x36",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": "0.75"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/android-icon-48x48.png",
|
||||||
|
"sizes": "48x48",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": "1.0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/android-icon-72x72.png",
|
||||||
|
"sizes": "72x72",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": "1.5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/android-icon-96x96.png",
|
||||||
|
"sizes": "96x96",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": "2.0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/android-icon-144x144.png",
|
||||||
|
"sizes": "144x144",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": "3.0"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "\/android-icon-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image\/png",
|
||||||
|
"density": "4.0"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
Binary file not shown.
|
After Width: | Height: | Size: 761 B |
Binary file not shown.
|
After Width: | Height: | Size: 929 B |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,72 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
id="svg3390"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||||
|
width="512"
|
||||||
|
height="512"
|
||||||
|
viewBox="0 0 479.99997 480"
|
||||||
|
sodipodi:docname="hangar-logo-icon.svg"
|
||||||
|
inkscape:export-filename="/home/vitrubio/Documents/trabajo/hangar/hangar-logo/hangar-logo-icon-152.png"
|
||||||
|
inkscape:export-xdpi="28.5"
|
||||||
|
inkscape:export-ydpi="28.5">
|
||||||
|
<metadata
|
||||||
|
id="metadata3396">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title />
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs3394" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1"
|
||||||
|
objecttolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
guidetolerance="10"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:window-width="1366"
|
||||||
|
inkscape:window-height="744"
|
||||||
|
id="namedview3392"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="0.70710678"
|
||||||
|
inkscape:cx="291.7134"
|
||||||
|
inkscape:cy="427.67035"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="336"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="svg3390"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:guide-bbox="true" />
|
||||||
|
<g
|
||||||
|
id="g865"
|
||||||
|
transform="matrix(2.5235055,0,0,2.5235055,-231.6381,-0.71970655)">
|
||||||
|
<path
|
||||||
|
inkscape:connector-curvature="0"
|
||||||
|
d="m 254.96688,104.95946 c 1.77274,3.36732 7.47095,4.04851 10.28944,1.23004 0.61585,-0.61585 1.27106,-1.66487 1.45603,-2.33113 0.19282,-0.69451 0.33705,-3.77805 0.33802,-7.226629 l 0.002,-6.015218 h -6.39592 -6.39592 v 6.500313 c 0,6.210624 0.0315,6.560124 0.70665,7.842624 z m -3.13363,-26.52564 h 24.08328 l -0.095,14.847678 -0.095,14.847672 -0.74921,2.13199 c -1.07251,3.05196 -2.85456,5.50416 -5.1331,7.06343 -2.80121,1.91696 -4.61256,2.37816 -9.34028,2.37816 -3.82482,0 -4.0295,-0.0333 -6.02248,-0.97725 -2.71262,-1.28493 -4.99939,-3.58255 -6.35514,-6.38535 l -1.04563,-2.1617 -9.58274,5.4433 -9.58274,5.44333 -0.0822,-6.61983 c -0.0723,-5.81614 -0.0223,-6.66369 0.41188,-6.98116 0.27178,-0.19873 4.18063,-2.37157 8.68632,-4.82851 l 8.19214,-4.467196 v -3.771181 -3.771196 l -8.60403,-0.08085 -8.60404,-0.08085 -0.0827,-6.01521 -0.0826,-6.015213 z m -24.99785,61.77572 c 1.26403,-6.89304 4.84264,-11.80142 10.71028,-14.69017 4.38578,-2.15921 6.76632,-2.67683 13.05974,-2.8397 4.48245,-0.116 5.79047,-0.0431 8.22637,0.45915 9.2777,1.9126 15.43925,7.4265 17.72579,15.86265 0.76584,2.82554 0.91775,10.04591 0.27322,12.98543 -0.64473,2.94042 -2.1106,6.4165 -3.72152,8.82503 -1.50117,2.24442 -5.17723,5.94048 -6.89306,6.93055 l -0.91367,0.52721 -2.21221,-5.08195 c -1.64591,-3.78104 -2.10586,-5.1174 -1.79676,-5.22044 0.22851,-0.0761 1.1402,-0.82391 2.02598,-1.66165 5.94898,-5.62629 4.88491,-16.33724 -1.96774,-19.80733 -4.97891,-2.52125 -12.8413,-2.66464 -18.04559,-0.32909 -2.43581,1.09311 -4.85315,3.63058 -5.78525,6.0727 -1.84953,4.84572 -0.17306,11.21525 3.61094,13.71939 1.27641,0.84467 3.81915,1.73068 4.11575,1.43409 0.099,-0.0991 0.1801,-2.4872 0.1801,-5.30699 v -5.12688 h 4.72079 4.72081 v 10.35529 10.3553 h -13.56119 -13.5612 l 0.084,-4.64466 0.084,-4.64465 1.89832,-0.15228 1.89832,-0.15228 -1.09145,-1.37056 c -1.33641,-1.67814 -2.61958,-4.16524 -3.29983,-6.39592 -0.5899,-1.93435 -0.87897,-7.95441 -0.4851,-10.10223 z m 10.54356,-83.85687 c 1.67056,5.398685 8.42987,8.861811 16.11986,8.258991 7.79306,-0.610899 12.56042,-4.220201 13.53049,-10.243748 0.62884,-3.904749 -0.48719,-7.618376 -3.08109,-10.252375 -3.33301,-3.38454 -9.59967,-4.784706 -16.17134,-3.613188 -8.5377,1.522013 -12.81434,8.041228 -10.39792,15.85032 z m -10.38275,-8.83246 c 1.82686,-9.81892 8.96204,-16.797596 19.32021,-18.89643 3.5003,-0.709247 10.15994,-0.484727 13.42603,0.452642 6.73641,1.933364 12.24204,6.332222 15.05773,12.030748 1.82644,3.696428 2.39778,6.385641 2.39778,11.28612 0,4.900483 -0.57134,7.5897 -2.39778,11.286124 -2.81569,5.698518 -8.32132,10.097387 -15.05773,12.03075 -3.26609,0.937368 -9.92573,1.161886 -13.42603,0.452638 -8.73745,-1.77044 -15.39547,-7.162108 -18.16644,-14.711189 -1.54221,-4.201543 -1.98016,-9.489674 -1.15377,-13.931403 z"
|
||||||
|
style="fill:#000000;stroke-width:0.30456755"
|
||||||
|
id="path848" />
|
||||||
|
<path
|
||||||
|
id="path3475"
|
||||||
|
d="M 96.560952,98.375354 V 29.097629 h 17.650358 17.65039 v 24.710535 24.710542 h 26.0343 26.03431 V 53.808164 29.097629 h 17.20368 17.20366 l 0.22599,68.103856 0.226,69.737145 0.0218,0.71459 H 183.9302 V 138.53023 109.4071 H 157.896 131.8617 v 29.12313 29.12312 H 114.21131 96.560952 V 98.375647 Z"
|
||||||
|
style="fill:#000000;stroke-width:0.88251895"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,97 @@
|
||||||
|
@import '../common/base.css';
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Primary Variables */
|
||||||
|
--brand-primary: #0000ff;
|
||||||
|
--brand-primary-hover: #2222dd;
|
||||||
|
--brand-midtone: #ededed;
|
||||||
|
--brand-darktone: #969696;
|
||||||
|
--brand-default-bg: #fff;
|
||||||
|
--brand-default-fg: #2222ee;
|
||||||
|
|
||||||
|
/* Warning colors */
|
||||||
|
--brand-notice: #f6c358;
|
||||||
|
--brand-warning: #fcb46e;
|
||||||
|
--brand-error: #bf5155;
|
||||||
|
|
||||||
|
/* Input elements */
|
||||||
|
--brand-input-border: #e2e2e2;
|
||||||
|
--brand-input-fg: #616161;
|
||||||
|
--brand-input-bg: transparent;
|
||||||
|
|
||||||
|
/* Connection Indicator top */
|
||||||
|
--comp-workspace-before-bg: var(--brand-primary);
|
||||||
|
--comp-bg-kiwi-workspace--disconnected-after-bg: var(--brand-error);
|
||||||
|
|
||||||
|
/* Container Header */
|
||||||
|
--comp-header-bg: var(--brand-default-bg);
|
||||||
|
--comp-header-name-fg: var(--brand-default-fg);
|
||||||
|
--comp-header-option-active-fg: var(--brand-default-bg);
|
||||||
|
--comp-header-option-active-bg: var(--brand-primary);
|
||||||
|
|
||||||
|
/* StateBrowser */
|
||||||
|
--comp-statebrowser-fg: #fff;
|
||||||
|
--comp-statebrowser-bg: var(--brand-default-fg);
|
||||||
|
--comp-statebrowser-bg-networkname: #454545;
|
||||||
|
--comp-statebrowser-channel-active-bg: #ffffff0d;
|
||||||
|
--comp-statebrowser-channel-active-fg: #fff;
|
||||||
|
--comp-usermenu-open-bg: #0e0e0e;
|
||||||
|
--comp-statebrowser-network-border: #656565;
|
||||||
|
|
||||||
|
|
||||||
|
/* Sidebars ( Right Side ) */
|
||||||
|
--comp-sidebar-bg: #fff;
|
||||||
|
--comp-sidebar-fg: #22231f;
|
||||||
|
--comp-aboutbuffer-bg: rgba(0, 0, 0, 0.03);
|
||||||
|
--comp-aboutbuffer-header-bg: #42b992;
|
||||||
|
|
||||||
|
/* Misc */
|
||||||
|
--brand-link-normal: var(--brand-primary);
|
||||||
|
--brand-link--hover: var(--brand-primary-hover);
|
||||||
|
--brand-shadow: rgba(0, 0, 0, 0.1);
|
||||||
|
--comp-border: #b2b2b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IRC Text Colours */
|
||||||
|
.irc-fg-colour-white { color: #fff; }
|
||||||
|
.irc-fg-colour-black { color: #000; }
|
||||||
|
.irc-fg-colour-blue { color: #00f; }
|
||||||
|
.irc-fg-colour-green { color: #0f0; }
|
||||||
|
.irc-fg-colour-light-red { color: #ff5959; }
|
||||||
|
.irc-fg-colour-brown { color: #743a00; }
|
||||||
|
.irc-fg-colour-purple { color: #a500ff; }
|
||||||
|
.irc-fg-colour-orange { color: #ff8c00; }
|
||||||
|
.irc-fg-colour-yellow { color: #d6d63d; }
|
||||||
|
.irc-fg-colour-light-green { color: #6fff6f; }
|
||||||
|
.irc-fg-colour-cyan { color: #0cc; }
|
||||||
|
.irc-fg-colour-light-cyan { color: #6dffff; }
|
||||||
|
.irc-fg-colour-light-blue { color: #59b4ff; }
|
||||||
|
.irc-fg-colour-pink { color: #f0f; }
|
||||||
|
.irc-fg-colour-grey { color: #a6a6a6; }
|
||||||
|
.irc-fg-colour-light-grey { color: #e2e2e2; }
|
||||||
|
|
||||||
|
.irc-bg-colour-white { background-color: #fff; }
|
||||||
|
.irc-bg-colour-black { background-color: #000; }
|
||||||
|
.irc-bg-colour-blue { background-color: #00f; }
|
||||||
|
.irc-bg-colour-green { background-color: #0f0; }
|
||||||
|
.irc-bg-colour-light-red { background-color: #ff5959; }
|
||||||
|
.irc-bg-colour-brown { background-color: #743a00; }
|
||||||
|
.irc-bg-colour-purple { background-color: #a500ff; }
|
||||||
|
.irc-bg-colour-orange { background-color: #ff8c00; }
|
||||||
|
.irc-bg-colour-yellow { background-color: #d6d63d; }
|
||||||
|
.irc-bg-colour-light-green { background-color: #6fff6f; }
|
||||||
|
.irc-bg-colour-cyan { background-color: #0cc; }
|
||||||
|
.irc-bg-colour-light-cyan { background-color: #6dffff; }
|
||||||
|
.irc-bg-colour-light-blue { background-color: #59b4ff; }
|
||||||
|
.irc-bg-colour-pink { background-color: #f0f; }
|
||||||
|
.irc-bg-colour-grey { background-color: #a6a6a6; }
|
||||||
|
.irc-bg-colour-light-grey { background-color: #e2e2e2; }
|
||||||
|
|
||||||
|
.kiwi-statebrowser {
|
||||||
|
box-shadow: 0px 0 2px #101010;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide,
|
||||||
|
.kiwi-startup-common-section-info-content {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html class="no-js" lang="en" dir="ltr">
|
||||||
|
<head>
|
||||||
|
<!--
|
||||||
|
version: 0.2
|
||||||
|
date: 2020 12 16
|
||||||
|
author: jorge@hangar.org
|
||||||
|
-->
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>live - hangar.org</title>
|
||||||
|
<link rel="stylesheet" href="https://grafica.hangar.org/assets/vendor/fontawesome-free-5.15.1-web/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="https://grafica.hangar.org/assets/css/foundation.min.css">
|
||||||
|
<link rel="stylesheet" href="./assets/css/video-js.min.css">
|
||||||
|
<link rel="stylesheet" href="https://grafica.hangar.org/assets/css/hangar-static-app.css">
|
||||||
|
<!-- header icons anf favicons -->
|
||||||
|
<link rel="apple-touch-icon" sizes="57x57" href="https://grafica.hangar.org/assets/favicons/apple-icon-57x57.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="60x60" href="https://grafica.hangar.org/assets/favicons/apple-icon-60x60.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="72x72" href="https://grafica.hangar.org/assets/favicons/apple-icon-72x72.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="76x76" href="https://grafica.hangar.org/assets/favicons/apple-icon-76x76.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="114x114" href="https://grafica.hangar.org/assets/favicons/apple-icon-114x114.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="120x120" href="https://grafica.hangar.org/assets/favicons/apple-icon-120x120.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="144x144" href="https://grafica.hangar.org/assets/favicons/apple-icon-144x144.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="152x152" href="https://grafica.hangar.org/assets/favicons/apple-icon-152x152.png">
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="https://grafica.hangar.org/assets/favicons/apple-icon-180x180.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="192x192" href="https://grafica.hangar.org/assets/favicons/android-icon-192x192.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="https://grafica.hangar.org/assets/favicons/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="96x96" href="https://grafica.hangar.org/assets/favicons/favicon-96x96.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="https://grafica.hangar.org/assets/favicons/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="https://grafica.hangar.org/assets/favicons/manifest.json">
|
||||||
|
<meta name="msapplication-TileColor" content="#ffffff">
|
||||||
|
<meta name="msapplication-TileImage" content="https://grafica.hangar.org/assets/img/ms-icon-144x144.png">
|
||||||
|
<meta name="theme-color" content="#ffffff">
|
||||||
|
<!-- end header icons anf favicons -->
|
||||||
|
<style type="text/css">
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="live-streaming">
|
||||||
|
<!-- change color switcher -->
|
||||||
|
<input type="checkbox" id=changecolor class="colorswitch">
|
||||||
|
<label for=changecolor class="colorswitch">
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
<!-- change view switcher-->
|
||||||
|
<input type="checkbox" id=changeview class="viewswitch">
|
||||||
|
<label for=changeview class="viewswitch">
|
||||||
|
<span class="slider"></span>
|
||||||
|
</label>
|
||||||
|
<div id="wrapper" class="colorswitch-invert viewswitch-change">
|
||||||
|
<a name="top"></a>
|
||||||
|
<header class="grid-container">
|
||||||
|
<div class="grid-x grid-padding-x">
|
||||||
|
<div class="cell small-12 flex-container flex-dir-column">
|
||||||
|
<div class="primary flex-child-shrink">
|
||||||
|
<h2 class="logo"><a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo">Hangar</a></h2>
|
||||||
|
<h1>live streaming</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="grid-container viewswitch-container">
|
||||||
|
<div class="grid-x grid-padding-x">
|
||||||
|
<div class="cell small-12 flex-container flex-dir-column">
|
||||||
|
<div class="primary flex-child-auto">
|
||||||
|
<content class="video-webchat">
|
||||||
|
<video id="video" class="video-js" controls preload="auto" data-setup="{}"></video>
|
||||||
|
<div id="webchat" class="embedchat">
|
||||||
|
<iframe id="chatframe" src="https://live.hangar.org/chat/#live-hangar"></iframe>
|
||||||
|
</div>
|
||||||
|
</content>
|
||||||
|
|
||||||
|
<aside id="instructions" style="display:none;">
|
||||||
|
<p>
|
||||||
|
To create a new stream, pick a unique name for it, and set your broadcast
|
||||||
|
software to stream to <code>rtmp://live.hangar.org/input-hangar/</code> with stream key <code>stream_name</code>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You will then be able to watch the live stream at
|
||||||
|
<code>https://live.hangar.org/#<b>stream_name</b></code>.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You can also point your favourite video player directly to
|
||||||
|
<code>https://live.hangar.org/hls/<b>stream_name</b>.m3u8</code>.
|
||||||
|
Use this url also for html embedding.
|
||||||
|
</p>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer class="grid-container">
|
||||||
|
<div class="grid-x grid-padding-x">
|
||||||
|
<div class="cell small-12 flex-container flex-dir-column">
|
||||||
|
<div class="text-center flex-child-shrink">
|
||||||
|
<p>
|
||||||
|
another <a href="https://hangar.org" title="Hangar, centre de producció, recerca i arts visuals." class="hangar-logo small icon">Hangar</a> website.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script src="./assets/js/jquery-slim.min.js"></script>
|
||||||
|
<script src="./assets/js/video.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function() {
|
||||||
|
if (window.location.hash) {
|
||||||
|
var name = window.location.hash.substr(1);
|
||||||
|
console.log('playing "' + name + '"');
|
||||||
|
$('#title').text('live.hangar.org - ' + name);
|
||||||
|
var v = videojs('video');
|
||||||
|
v.src({type: 'application/x-mpegURL', src: '/hls/' + name + '.m3u8'});
|
||||||
|
} else {
|
||||||
|
$('#v-ideo').hide();
|
||||||
|
$('#w-ebchat').hide();
|
||||||
|
$('#instructions').show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue