update styles and add teacher's and markers' styles
authorrougeronj
Tue, 08 Sep 2015 10:30:55 +0200
changeset 99 72a7ff5f8fad
parent 98 e00c89006e9a
child 100 f61bab1a115d
update styles and add teacher's and markers' styles
server/src/remie/static/remie/css/markers.css
server/src/remie/static/remie/css/style.css
server/src/remie/static/remie/css/teacher.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/static/remie/css/markers.css	Tue Sep 08 10:30:55 2015 +0200
@@ -0,0 +1,212 @@
+@font-face {
+    font-family: Open-Sans-Light; /*a name to be used later*/
+    src: url(../fonts/Open_Sans/OpenSans-Light.ttf); /*URL to font*/
+}
+
+html, body{
+    margin:0;
+    padding:6px;
+}
+
+#media_panel{
+	margin: auto;
+	width: 55%;
+}
+
+#player_container{
+    height: 380px;
+ 	width: 625px;
+}
+
+.Ldt-Widget{ 
+    font-family: Open-Sans-Light;
+}
+
+/* ----------------------------------------------- */
+/* ----------------- Media Panel ----------------- */
+/* ----------------------------------------------- */
+
+#player_container_widget_Markers_7{
+    width: 560px !important;
+    height: 50px !important;
+    margin: 0 40px !important;
+    top: -35px;
+}
+
+#player_container_widget_Markers_7 .Ldt-Markers-Position{
+    margin-left: -2px;
+    width: 4px;
+    background-color: #5a5a5a;
+}
+
+/* -------- Override video player style -------- */
+
+#player_container_widget_Slider_3{
+    height: 15px;
+    margin: 5px 0 0 40px;
+    width: 560px !important;
+}
+
+#player_container_widget_Slider_3 .Ldt-Slider{
+    height: 15px !important;
+}
+
+#player_container_widget_Controller_5 .Ldt-Ctrl{
+    background: none;
+    border: none;
+}
+
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-spacer,
+.Ldt-Ctrl .Ldt-Ctrl-Right .Ldt-Ctrl-spacer{
+    background: none;
+}
+
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play{
+    border: 3px solid grey;
+    border-radius: 100%;
+    margin: 8px 0 0 1px;
+    padding: 1px;
+    width: 25px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PlayState {
+    background-position: 0 1px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PlayState:hover {
+    background-position: 0 -24px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PauseState {
+    background-position: -31px 1px;
+}
+.Ldt-Ctrl .Ldt-Ctrl-Left .Ldt-Ctrl-Play-PauseState:hover {
+    background-position: -31px 26px;
+}
+
+.Ldt-Ctrl .Ldt-Ctrl-Right .Ldt-Ctrl-Sound {
+    margin: 12px 4px 0 2px;
+}
+
+/* .Ldt-Ctrl-Right .Ldt-Ctrl-Time{ */
+/*     display: none; */
+/* } */
+
+.Ldt-Markers-Display, .Ldt-Markers-List {
+    display: block;
+    height: 100% !important;
+}
+
+.Ldt-Markers-Marker{
+    border:none !important;
+    height: 0 !important;
+}
+
+.Ldt-Markers-MarkerBall {
+    background-color: #1abacc !important;
+    border: 3px solid white !important;
+    border-radius: 50% !important;
+    height: 25px !important;
+    left: -14px !important;
+    top: 10px !important;
+    width: 25px !important;
+    z-index: 99999;
+}
+.Ldt-Markers-MarkerBall:hover,
+.Ldt-Markers-MarkerBall.selected {
+    border-color: #5a5a5a !important;
+}
+
+.Ldt-Markers-Create {
+    background-color: #1abacc !important;
+    border-color: #1abacc !important;
+    font-size: 39px !important;
+    font-weight: bold;
+    line-height: 20px !important;
+}
+.Ldt-Markers-Create:hover {
+    border-color: #5a5a5a !important;
+}
+
+.Ldt-Markers-MarkerEdit .Ldt-Markers-Buttons{
+    width: auto;
+} 
+
+.Ldt-Markers-Buttons .Ldt-Markers-MarkerSend{
+    background-color: #a2cf18;
+}
+.Ldt-Markers-Buttons .Ldt-Markers-MarkerCancel{
+    background-color: #CD000B;
+}
+
+.Ldt-Markers-Buttons div{
+    background: inherit;
+    border: none;
+    background-color: #848484;
+    font-family: Open-Sans-Light;
+    font-size: 14px;
+    border-radius: 0 0 3px 0;
+    margin: 5px 5px 0 0;
+}
+
+.Ldt-Markers-Buttons div:hover{
+    background-color: #b7b7b7;
+}
+
+.Ldt-Markers-MarkerEdit textarea.Ldt-Markers-MarkerTextArea,
+.Ldt-Markers-Info .Ldt-Markers-MarkerDescription {
+    border-color: #848484 !important;
+    border-radius: 0;
+    border-width: 2px;
+    font-family: Open-Sans-Light;
+    min-height: 100px;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    max-width: none;
+}
+
+.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Create {
+    display: block;
+    float: left;
+    left: -38px;
+    margin: 0;
+    position: relative;
+    top: 15px;
+    width: 22px;
+    height: 22px;
+}
+
+#player_container_widget_Markers_7 .Ldt-Markers-Inputs{
+    background-color: rgba(225, 225, 225, 0);
+}
+
+.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info {
+    position: absolute;
+    left: 0;
+    width: 100%;
+}
+
+.Ldt-Markers-Screen.Ldt-Markers-ScreenMain .Ldt-Markers-Info .Ldt-Markers-MarkerEdit,
+.Ldt-Markers-Info .Ldt-Markers-MarkerDescription{
+    margin: 10px 0 0;
+}
+
+/* -------- Override Segments-List style -------- */
+
+/* .Ldt-Segments-List .Ldt-Segments-Segment{ */
+/*     background-color: #848484 !important; */
+/*     border: none; */
+/*     height: 50px !important; */
+/*     outline: 5px solid #ffffff; */
+/*     cursor: pointer; */
+/* } */
+
+/* .Ldt-Segments-List .Ldt-Segments-Segment:hover{ */
+/*     background-color: #a2a2a2 !important; */
+/* } */
+
+/* .Ldt-Segments-Segment.selected:hover{ */
+/*     background-color: #a2cf18 !important; */
+/* } */
+
+/* .Ldt-Segments-Segment.selected{ */
+/*     background-color: #a2cf18 !important; */
+/* } */
\ No newline at end of file
--- a/server/src/remie/static/remie/css/style.css	Mon Sep 07 16:25:09 2015 +0200
+++ b/server/src/remie/static/remie/css/style.css	Tue Sep 08 10:30:55 2015 +0200
@@ -48,17 +48,29 @@
 
 /* -------- Override CurrentSegment style -------- */
 
+
 #CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox,
 #LatestAnnotation_container .Ldt-LatestAnnotation{
     background: inherit;
-    background-color: #F3F7F8;
     border:none;
     margin:0;
     color: #848484;
-    padding: 1px;
     display: table-cell;
 }
 
+#LatestAnnotation_container .Ldt-LatestAnnotation{
+    background-color: #F3F7F8;
+}
+
+#CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox{
+    position: relative;
+    background-color: #F3F7F8;
+}
+
+#CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox{
+    background-color: #FFFFFF;
+    padding-bottom: 40px;
+}
 
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-NoSegment{
     color: #C0C0C0;
@@ -76,21 +88,58 @@
 
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-NoSegment,
 .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
-    background-color: #F3F7F8;
+    background-color: #F3F7F8 !important;
+    position: relative;
     border: none;
     height: 40px;
     line-height: 40px;
     font-family: Open-Sans-Light;
     position: absolute;
-    left: 12px;
-    top: 12px;
+    left: -655px;
+    top: 0;
     width: 640px;
     margin:0;
     font-weight: normal;
-    
     text-indent:10px;
 }
 
+#CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Title{
+    background: #ffffff !important;
+    border: 2px solid #848484;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
+    float: left;
+    position: absolute;
+    bottom: 0;
+    height: 27px;
+    line-height: 27px;
+    margin: 10px 0 0;
+    width: 86px;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton:before {
+    visibility: visible;
+    content: "X";
+    padding: 4px;
+    cursor: pointer;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton {
+    display: inline-block;
+    visibility: hidden;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton {
+    background-color: #a2cf18 !important;
+}
+
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton {
+    background-color: #cd000b !important;
+    left: 95px;
+}
+
 .Ldt-CurrentSegmentInfobox-Tags-Ul{
     padding:0;
 }
@@ -133,7 +182,9 @@
 .Ldt-LatestAnnotation-box .Ldt-LatestAnnotation-CopyEditButton,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton,
-.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input {
+.Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main input,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-CancelButton,
+.Ldt-CurrentSegmentInfobox .Ldt-CurrentSegmentInfobox-SubmitButton {
     background: inherit;
     border: none;
     background-color: #848484;
@@ -160,7 +211,7 @@
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowAnnotationsListButton,
 .Ldt-AnnotationsController-Button.Ldt-AnnotationsController-ShowCreateAnnotationButton {
     height: 27px;
-    margin: 0 7px 0 0;
+    margin: 0 5px 0 0;
     padding-top: 0px;
     width: 80px;
     float: left;
@@ -210,14 +261,15 @@
     margin-top: 30px;
 }
 
+#CurrentSegmentInfobox_container .Ldt-CurrentSegmentInfobox textarea,
 .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main textarea{
-    border-color: #848484 !important;
-    border-width: 2px;
+    border: 2px solid #848484;
     border-radius: 0;
     padding: 10px;
     min-height: 100px;
     font-family: Open-Sans-Light;
     width: 100%;
+    margin: 0;
 }
 
 .Ldt-CreateAnnotation-Screen.Ldt-CreateAnnotation-Main .Ldt-CreateAnnotation-Avatar{
@@ -282,8 +334,15 @@
 }
 
 .Ldt-AnnotationsListWidget .Ldt-AnnotationsList-Filters{
-    margin-top: 20px;
+    margin-top: 10px;
     display: block;
+    padding-bottom: 30px;
+}
+
+.Ldt-AnnotationsList-Filters .Ldt-AnnotationsList-filter-text{
+    position: relative;
+    float: right;
+    top: 30px;
 }
 
 /* ----------------------------------------------- */
@@ -329,7 +388,7 @@
 
 #player_container_widget_Slider_3{
     height: 15px;
-    margin: 10px 0 0 40px;
+    margin: 5px 0 0 40px;
     width: 560px !important;
 }
 
@@ -353,4 +412,4 @@
 
 .Ldt-Ctrl .Ldt-Ctrl-Right .Ldt-Ctrl-Sound {
     margin: 10px 4px 0 2px;
-}
\ No newline at end of file
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/remie/static/remie/css/teacher.css	Tue Sep 08 10:30:55 2015 +0200
@@ -0,0 +1,24 @@
+.Ldt-CurrentSegmentInfobox-Tags-Li .Ldt-CurrentSegmentInfobox-Tags-Li-DeleteTagButton{
+    width: 20px;
+    color: #747474;
+}
+
+.Ldt-CurrentSegmentInfobox-Tags-Li .Ldt-CurrentSegmentInfobox-Tags-Li-Input{
+    border: none;
+    background: none;
+    font-size: 17px;
+    font-weight: lighter;
+}
+
+#CurrentSegmentInfobox_container.editing .Ldt-CurrentSegmentInfobox-Tags-Li{
+    background-color: #f0f5f6 !important;
+    margin-left: 0 !important;
+}
+
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Tags .Ldt-CurrentSegmentInfobox-Tags-Ul{
+    margin-left: 0;
+}
+
+.Ldt-CurrentSegmentInfobox-Element.Ldt-CurrentSegmentInfobox-Tags {
+    margin-left: 0;
+}
\ No newline at end of file