diff --git a/capsule-prototype/css/flatten_timeline.css b/capsule-prototype/css/flatten_timeline.css
index 5a691c36fde1928353b6fcb62a4cfd76f52396c7..b92769b3d1a05f30111b1e048fcd336354a53669 100644
--- a/capsule-prototype/css/flatten_timeline.css
+++ b/capsule-prototype/css/flatten_timeline.css
@@ -1,9 +1,10 @@
#flattentimeline {
- flex: 1;
+ flex: 1 0 0;
color: white;
overflow-x: hidden;
overflow-y: auto;
+ min-width: 150px;
}
#flattentimeline.drag {
@@ -204,12 +205,11 @@ height: 100%;
/* color: rgba(255,255,255,.5); */
/*width: 55%; */
- max-width: 132px;
+ /*max-width: 132px;*/
text-overflow: ellipsis;
white-space: nowrap;
- overflow: hidden;
+ /*overflow: hidden;*/
- display: inline-block;
/*color: #0C2D33; */
/*mix-blend-mode: screen; */
}
@@ -332,3 +332,18 @@ margin:20px 15px 20px 0;
opacity: 1;
}
+.docLive, .docTocome, .docFaraway {
+ display: block;
+}
+
+.docLive {
+ opacity: 1;
+}
+
+.docTocome, .docFaraway {
+ opacity: 0.1;
+}
+
+.docFaraway {
+ opacity: 0.1;
+}
diff --git a/capsule-prototype/css/mosaic.css b/capsule-prototype/css/mosaic.css
index 328c226d501632e2ec761758a6d4994a4d3859bc..30fee933253545ede2f3724863265d88da54c01d 100644
--- a/capsule-prototype/css/mosaic.css
+++ b/capsule-prototype/css/mosaic.css
@@ -15,7 +15,6 @@
#mosaic_tab {
display: flex;
- overflow: auto;
flex-direction: column;
}
diff --git a/capsule-prototype/css/old_flatten_timeline.css b/capsule-prototype/css/old_flatten_timeline.css
new file mode 100644
index 0000000000000000000000000000000000000000..9d021add4923af01017fb2891f675e8435b7c1a0
--- /dev/null
+++ b/capsule-prototype/css/old_flatten_timeline.css
@@ -0,0 +1,350 @@
+
+#flattentimeline {
+ flex: 1;
+ color: white;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+#flattentimeline.drag {
+ /*background: rgba(2,212,255,.5);*/
+ box-shadow: 0 0 20px 20px rgba(63,223,255,.45) inset;
+}
+
+.flattentimeline_item.draggable {
+ background: rgba(63,223,255,.25);
+}
+
+#flattentimeline_highlight {
+ margin-bottom: 0px;
+}
+
+
+#flattentimeline_main_title {
+ font-weight: 200;
+ /*height: 40px;*/
+ line-height: 20px;
+ padding: 10px 0;
+ text-align: center;
+ /*background: #2C3032;*/
+ /*background: #2C3033;*/
+ /*background: #57A5AF;*/
+ background: #EC8960;
+ /*background-image: -webkit-linear-gradient(left, #EC8960 0%, #57A5AF 100%);*/
+ /*background-image: -webkit-linear-gradient(left, #94CA6F 0%, #B495CC 100%);*/
+ text-transform: uppercase;
+ color: rgba(255,255,255,1);
+ font-size: 18px;
+ border-bottom: 2px solid #1B1D1E;
+}
+
+#flattentimeline_settings {
+ font-weight: 200;
+ height: 240px;
+ line-height: 40px;
+ text-align: center;
+ background: #26292B;
+ text-transform: uppercase;
+ color: #FFF;
+ font-size: 18px;
+ margin-top: 4px;
+ display: none;
+}
+
+#flattentimeline_items {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ overflow-y: auto;
+ background-color: rgba(255,255,255,.05);
+}
+
+.flattentimeline_item {
+ position: relative;
+ height: 40px;
+ color: white;
+ margin: 0px 0px;
+ cursor: pointer;
+ width: 100%;
+ display: none;
+ /*border-radius: 2px;*/
+}
+
+
+.flattentimeline_highlightitem {
+ position: relative;
+ /*height: 150px;*/
+ height: auto;
+ color: white;
+ margin: 3px 0px 0px 0px;
+ cursor: pointer;
+ /*background: rgba(255,255,255,.15); */
+ width: 100%;
+ text-align: center;
+ padding: 2px 0 3px 0;
+ border-radius: 1px;
+
+ background-position: center center;
+ background-repeat: no-repeat;
+ -webkit-background-size:cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+
+ /*display:block;*/
+}
+
+
+.flattentimeline_item:hover, .flattentimeline_highlightitem:hover {
+ background-color: rgba(255,255,255,.15);
+ opacity: 1;
+}
+
+.flattentimeline_opacifiant, .flattentimeline_bar {
+ top: 0px;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-position: center center;
+ background-repeat: no-repeat;
+ -webkit-background-size:cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ text-align: left;
+ overflow: hidden;
+
+ /*border-radius: 3px;
+ /*mix-blend-mode: overlay;*/
+}
+
+.flattentimeline_title, .flattentimeline_subtitle, .flattentimeline_counter {
+ top: 0px;
+ left: 0px;
+ /*position: absolute; */
+ background-position: center center;
+ background-repeat: no-repeat;
+ text-align: left;
+ overflow: hidden;
+ line-height: 20px;
+}
+
+
+.flattentimeline_item .flattentimeline_image {
+ height: 30px;
+ width: 30px;
+ margin: 4px 7px 4px 0px;
+ border-radius: 1px;
+ background-color: rgba(255,255,255,.25);
+ float: left;
+ background-position: center center;
+ background-repeat: no-repeat;
+ -webkit-background-size:cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+}
+
+
+.flattentimeline_highlightitem .flattentimeline_image {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ border-radius: 1px;
+ position: absolute;
+ background-position: center center;
+ background-repeat: no-repeat;
+ -webkit-background-size:cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ background-blend-mode: normal;
+ opacity: .5;
+}
+
+/*.flattentimeline_highlightitem .flattentimeline_image {
+width: 170px;
+height: 60px;
+margin: 15px 15px 5px 15px;
+border-radius: 2px;
+background-color: #fff;
+display: inline-block;
+float: left;
+background-position: center center;
+} */
+
+/*.flattentimeline_color {
+top: 0px;
+height: 100%;
+}*/
+.flattentimeline_opacifiant, .flattentimeline_bar {
+ background-color: rgba(0, 0, 0, 0.75);
+ height: 3px;
+ top: 37px;
+
+ /* box-shadow: 0px 0px 1px 1px rgba(20,46,51,.25);
+ /* mix-blend-mode: luminosity; */
+
+ /* mix-blend-mode: multiply;
+ /* height: 40px;
+ top: 0px;
+ opacity: .25; */
+}
+
+.flattentimeline_highlightitem .flattentimeline_bar, .flattentimeline_highlightitem .flattentimeline_opacifiant {
+ top: auto;
+ display: block;
+}
+
+.flattentimeline_title {
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 39px;
+ /* color: rgba(255,255,255,.5); */
+
+ /*width: 55%; */
+ max-width: 132px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+
+ display: inline-block;
+ /*color: #0C2D33; */
+ /*mix-blend-mode: screen; */
+}
+
+.flattentimeline_highlightitem .flattentimeline_title {
+ line-height: 1.2em;
+ width: 170px;
+ font-size: 12px;
+ text-transform: uppercase;
+ padding: 20px 0 20px 0;
+ color: #FFF;/*rgba(255,255,255,1);*/
+ font-weight: 600;
+}
+
+.flattentimeline_highlightitem .flattentimeline_description {
+ font-weight: 400;
+ font-size: 11px;
+ line-height: 1.4em;
+ color: rgba(255,255,255,.9);
+ margin: -15px 15px 20px 15px;
+
+ width: 170px;
+ text-align: left;
+
+ display: inline-block;
+}
+
+.flattentimeline_highlightitem .flattentimeline_typeTxt, .flattentimeline_highlightitem .flattentimeline_author {
+ font-weight: 400;
+ font-size: 9px;
+ line-height: 1.2em;
+ margin: -13px 15px 20px 15px;
+
+ width: 170px;
+ text-align: left;
+ color: rgba(255,255,255,.75);
+
+ display: flex;
+ font-style: italic;
+ /*text-transform: uppercase; */
+}
+
+.flattentimeline_highlightitem .flattentimeline_author {
+ font-style: normal;
+}
+
+.flattentimeline_subtitle {
+ font-family: "OpenSans";
+ font-weight: 200;
+ top: 25px;
+ font-size: 10px;
+ left: 40px;
+ line-height: 20px;
+ height: 20px;
+ display: none;
+}
+/*.flattentimeline_type {
+top: 14px;
+left: 6px;
+width: 26px;
+height: 26px;
+background-position: center center;
+background-repeat: no-repeat;
+opacity: .5;
+}*/
+/*.flattentimeline_type {
+width:10px; height:10px;
+border-radius:10px;
+float:right;
+margin:20px 15px 20px 0;
+}*/
+.flattentimeline_type {
+ width: 20px;
+ height: 20px;
+ /*border-radius: 20px; */
+ float: right;
+ background-position: center center;
+ background-repeat: no-repeat;
+ margin: 9px 5px;
+ opacity: 0.75;
+ display: none;
+}
+
+.flattentimeline_highlightitem .flattentimeline_type {
+ width: 40px;
+ height: 40px;
+ position: absolute;
+ border-radius: 30px;
+ background-color: rgba(0,0,0,.5);
+ margin: 25px 0 0 80px;
+}
+
+.flattentimeline_color {
+ width: 6px;
+ height: 6px;
+ border-radius: 10px;
+ float: right;
+ margin: 22px 5px;
+}
+
+.flattentimeline_counter {
+ font-weight: 600;
+ top: 5px;
+ left: 5px;
+ width: 40px;
+ height: 40px;
+ line-height: 38px;
+ border-radius: 2px;
+
+ background-color: #000;
+
+ font-size: 18px;
+ text-align: center;
+ display: none;
+}
+
+.flattentimeline_bar {
+ /*width: 0%;*/
+ background-color: #26292B; /*#2DCAE1;*/
+ opacity: 1;
+}
+
+.docLive, .docTocome, .docFaraway {
+ display: flex;
+ flex: 0;
+}
+
+.docLive {
+ opacity: 1;
+}
+
+.docTocome, .docFaraway {
+ opacity: 0.1;
+}
+
+.docFaraway {
+ opacity: 0.1;
+}
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index ac888ca9a30b2f93f9fd436e3a4d10ba99a0281f..2793e4ac11871ed2816a20ea8df5d48ecaa8e58d 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -60,6 +60,10 @@ html, body {
background-color: rgba(255, 255, 255, .25);
}
+#tabs {
+ overflow: auto;
+}
+
#container {
width: 100%;
height: 100%;
@@ -91,21 +95,6 @@ html, body {
height: 100%;
}
-.docLive {
- opacity: 1;
- display: block;
-}
-
-.docTocome {
- opacity: 0.1;
- display: block;
-}
-
-.docFaraway {
- opacity: 0.1;
- display: block;
-}
-
.vjs-big-play-button {
border-radius: 100% !important;
border: none !important;