Menü aufrufen
Toggle preferences menu
Persönliches Menü aufrufen
Nicht angemeldet
Ihre IP-Adresse wird öffentlich sichtbar sein, wenn Sie Änderungen vornehmen.

Benutzer:Col. o'neill/arcs.css: Unterschied zwischen den Versionen

aus Stargate Wiki, dem deutschsprachigen Stargate-Lexikon
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
#arcs-wrapper {
#arcs-wrapper {
  display: block !important;
display: block !important;
overflow: hidden;
}
}
#arcs-temp {
#arcs-temp {
  display: none;
display: none;
}
}


#arc-v1.arc {
#arc-v1.arc {
  height: 130px;
height: 130px;
  margin-bottom: 50px;
margin-bottom: 50px;
}
}


#arc-v1 .arc-line {
#arc-v1 .arc-line {
    width: 100%;
width: 100%;
    padding: 2px;
padding: 2px;
    box-sizing: border-box;
box-sizing: border-box;
    background-color: #627499;
background-color: #627499;
}
}


#arc-v1 .arc-event {
#arc-v1 .arc-event {
  display: inline-block;
display: inline-block;
  padding: 10px;
padding: 10px;
  border: 1px solid gray;
border: 1px solid gray;
  border-radius: 3px;
border-radius: 3px;
  position: relative;
position: relative;
  line-height: 20px;
line-height: 20px;
}
}


#arc-v1 .arc-event:nth-of-type(odd) {
#arc-v1 .arc-event:nth-of-type(odd) {
  margin-bottom: 20px;
margin-bottom: 20px;
  margin-right: 0px;
margin-right: 0px;
}
}
#arc-v1 .arc-event:nth-of-type(odd)::before {
#arc-v1 .arc-event:nth-of-type(odd)::before {
  content: '';
content: '';
  width: 0;
width: 0;
  height: 0;
height: 0;
  border: 10px solid gray;
border: 10px solid gray;
  border-color: gray transparent transparent transparent;
border-color: gray transparent transparent transparent;
  position: absolute;
position: absolute;
  bottom: -20px;
bottom: -20px;
  left: 5px;
left: 5px;
}
}
#arc-v1 .arc-event:nth-of-type(odd)::after {
#arc-v1 .arc-event:nth-of-type(odd)::after {
  content: '';
content: '';
  width: 14px;
width: 14px;
  height: 14px;
height: 14px;
  border-radius: 100%;
border-radius: 100%;
  background-color: #627499;
background-color: #627499;
  position: absolute;
position: absolute;
  bottom: -30px;
bottom: -30px;
  left: 8px;
left: 8px;
}
}


#arc-v1 .arc-event:nth-of-type(even) {
#arc-v1 .arc-event:nth-of-type(even) {
  top: 86px;
top: 86px;
}
}
#arc-v1 .arc-event:nth-of-type(even)::before {
#arc-v1 .arc-event:nth-of-type(even)::before {
  content: '';
content: '';
  width: 0;
width: 0;
  height: 0;
height: 0;
  border: 10px solid gray;
border: 10px solid gray;
  border-color: transparent transparent gray transparent;
border-color: transparent transparent gray transparent;
  position: absolute;
position: absolute;
  top: -20px;
top: -20px;
  left: 5px;
left: 5px;
}
}
#arc-v1 .arc-event:nth-of-type(even)::after {
#arc-v1 .arc-event:nth-of-type(even)::after {
  content: '';
content: '';
  width: 14px;
width: 14px;
  height: 14px;
height: 14px;
  border-radius: 100%;
border-radius: 100%;
  background-color: #627499;
background-color: #627499;
  position: absolute;
position: absolute;
  top: -30px;
top: -30px;
  left: 8px;
left: 8px;
}
}


Zeile 79: Zeile 80:


#arc-v2.arc {
#arc-v2.arc {
height: 70px;
height: 60px;
}
}


#arc-v2 .arc-line {
#arc-v2 .arc-line {
width: 100%;
padding: 2px;
box-sizing: border-box;
background-color: #627499;
}
#arc-v2 .arc-event {
display: inline-block;
padding: 4px 8px;
border: 1px solid #aaa;
border-radius: 3px;
position: relative;
line-height: 19px;
top: 18px;
margin-right: 30px;
margin-bottom: 10px;
}
#arc-v2 .arc-event::before {
content: '';
width: 0;
height: 0;
border: 8px solid #919191;
border-color: transparent transparent #919191 transparent;
position: absolute;
top: -17px;
left: 7px;
}
#arc-v2 .arc-event::after {
content: '';
width: 12px;
height: 12px;
border-radius: 100%;
background-color: #627499;
position: absolute;
top: -27px;
left: 9px;
}
#arc-v2 .arc-caption {
display: inline-block;
position: relative;
top: -27px;
font-size: 16px;
color: #627499;
font-weight: bold;
margin-right: 50px;
}
#arc-v3.arc {
padding-top: 25px;
box-sizing: content-box;
white-space: nowrap;
position: relative;
}
#arc-v3 .arc-line {
     width: 100%;
     width: 100%;
     padding: 2px;
     padding: 2px;
     box-sizing: border-box;
     box-sizing: border-box;
     background-color: #627499;
     background-color: #996262;
    z-index: 200;
}
}


#arc-v2 .arc-event {
#arc-v3 .arc-caption {
  display: inline-block;
display: inline-block;
  padding: 5px;
position: relative;
  border: 1px solid gray;
top: -27px;
  border-radius: 3px;
font-size: 16px;
  position: relative;
color: #627499;
  line-height: 20px;
font-weight: bold;
  top: 20px;
margin-right: 50px;
  margin-right: 30px;
vertical-align: top;
}
#arc-v3 .arc-events-view {
display: inline-block;
overflow: hidden;
padding-top: 15px;
top: -15px;
position: relative;
}
 
#arc-v3 .arc-events-arrow-left {
position: absolute;
height: 100%;
width: 50px;
background-image: linear-gradient(to left, transparent 0%, white 50%);
z-index: 100;
top: 0;
}
#arc-v3 .arc-events-arrow-left::after {
content: '';
width: 0;
height: 0;
border: 10px solid;
border-color: transparent #bbb transparent transparent;
position: absolute;
top: 35px;
}
 
#arc-v3 .arc-events-arrow-right {
position: absolute;
height: 70px;
width: 50px;
background-image: linear-gradient(to right, transparent 0%, white 50%);
z-index: 100;
right: 0;
margin-top: 14px;
top: 0;
}
#arc-v3 .arc-events-arrow-right::after {
content: '';
width: 0;
height: 0;
border: 10px solid;
border-color: transparent transparent transparent #bbb;
position: absolute;
top: 35px;
right: 0;
}
 
#arc-v3 .arc-events {
transition: all .7s ease;
padding-left: 50px;
}
 
#arc-v3 .arc-event {
display: inline-block;
padding: 4px 8px;
border: 1px solid #aaa;
border-radius: 3px;
position: relative;
line-height: 19px;
margin-top: 18px;
margin-right: 30px;
margin-bottom: 10px;
font-size: 13px;
}
}
#arc-v2 .arc-event::before {
 
  content: '';
#arc-v3 .arc-event::before {
  width: 0;
content: '';
  height: 0;
width: 0;
  border: 10px solid gray;
height: 0;
  border-color: transparent transparent gray transparent;
border: 8px solid;
  position: absolute;
border-color: transparent transparent #919191 transparent;
  top: -20px;
position: absolute;
  left: 5px;
top: -17px;
left: 7px;
}
}
#arc-v2 .arc-event::after {
#arc-v3 .arc-event::after {
  content: '';
content: '';
  width: 12px;
width: 12px;
  height: 12px;
height: 12px;
  border-radius: 100%;
border-radius: 100%;
  background-color: #627499;
background-color: #627499;
  position: absolute;
position: absolute;
  top: -29px;
top: -27px;
  left: 9px;
left: 9px;
}
}