# HG changeset patch # User rougeronj # Date 1441701055 -7200 # Node ID 72a7ff5f8fad2cce19eb61db1e21f9dbf2bb9272 # Parent e00c89006e9aa8cd363708a2606453c0d0ec3e5e update styles and add teacher's and markers' styles diff -r e00c89006e9a -r 72a7ff5f8fad server/src/remie/static/remie/css/markers.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 diff -r e00c89006e9a -r 72a7ff5f8fad server/src/remie/static/remie/css/style.css --- 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 +} diff -r e00c89006e9a -r 72a7ff5f8fad 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/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