server/src/remie/static/remie/metadataplayer/EnrichedPlan.css
changeset 170 75e3a41722ad
equal deleted inserted replaced
169:0e256f85464b 170:75e3a41722ad
       
     1 .Ldt-EnrichedPlan-Slide {
       
     2     border-bottom: 2px dotted #ccc;
       
     3     padding-top: 4px;
       
     4     cursor: pointer;
       
     5 }
       
     6 
       
     7 .Ldt-EnrichedPlan-SlideItem {
       
     8     max-height: 3000px;
       
     9     transition: max-height .6s;
       
    10 }
       
    11 
       
    12 .Ldt-EnrichedPlan-SlideItem.filtered_out {
       
    13     max-height: 0px;
       
    14     overflow: hidden;
       
    15 }
       
    16 
       
    17 .Ldt-EnrichedPlan-SlideTimecode {
       
    18     display: inline-block;
       
    19     width: 24px;
       
    20     color: #999 !important;
       
    21     font-size: 9px !important;
       
    22     width: 24px;
       
    23     vertical-align: top;
       
    24 }
       
    25 
       
    26 .Ldt-EnrichedPlan-SlideThumbnail {
       
    27     display: inline-block;
       
    28     width: 180px;
       
    29     height: 100px;
       
    30     padding-left: 10px;
       
    31     margin: 0;
       
    32     vertical-align: top;
       
    33 }
       
    34 
       
    35 .Ldt-EnrichedPlan-SlideThumbnail img {
       
    36     max-width: 180px;
       
    37     max-height: 100px;
       
    38     margin: auto;
       
    39     border: 1px solid #ccc;
       
    40 }
       
    41 
       
    42 .Ldt-EnrichedPlan-SlideContent {
       
    43     display: inline-block;
       
    44     width: calc(100% - 220px);
       
    45     transition: width .4s;
       
    46 }
       
    47 
       
    48 .Ldt-EnrichedPlan-SlideThumbnail.filtered_out + .Ldt-EnrichedPlan-SlideContent {
       
    49     width: calc(100% - 40px);
       
    50 }
       
    51 
       
    52 .Ldt-EnrichedPlan-SlideTitle {
       
    53     display: inline-block;
       
    54     font-size: 14px;
       
    55     width: 100%;
       
    56     height: 1em;
       
    57     overflow: hidden;
       
    58     white-space: nowrap;
       
    59     text-overflow: ellipsis;
       
    60 }
       
    61 
       
    62 .Ldt-EnrichedPlan-SlideTitle1 {
       
    63     text-transform: uppercase;
       
    64     font-size: 13px;
       
    65     font-weight: 600;
       
    66 }
       
    67 
       
    68 .Ldt-EnrichedPlan-Note {
       
    69     font-weight: normal;
       
    70     font-size: 14px;
       
    71     font-family: Roboto-italic;
       
    72 }
       
    73 .Ldt-EnrichedPlan-Note:hover {
       
    74     background-color: #eee;
       
    75 }
       
    76 
       
    77 .Ldt-EnrichedPlan-Note-Teacher {
       
    78     color: #e5007e;
       
    79     font-style: italic;
       
    80 }
       
    81 .Ldt-EnrichedPlan-Note-Own {
       
    82     color: #66ccff;
       
    83 }
       
    84 .Ldt-EnrichedPlan-Note-Other {
       
    85     color: #996633;
       
    86 }
       
    87 
       
    88 .Ldt-EnrichedPlan-Note-Text {
       
    89     line-height: 22px;
       
    90     word-wrap: break-word;
       
    91 }
       
    92 
       
    93 .Ldt-EnrichedPlan-Note-Author {
       
    94     text-transform: uppercase;
       
    95     font-size: 10px;
       
    96 }
       
    97 
       
    98 .Ldt-EnrichedPlan-Content {
       
    99     margin-top: 37px;
       
   100 }
       
   101 
       
   102 .Ldt-EnrichedPlan-Controls {
       
   103     height: 36px;
       
   104     padding: 9px 0px 6px 0px;
       
   105     border-bottom: 1px solid #000;
       
   106     overflow-y: hidden;
       
   107     overflow-x: hidden;
       
   108     position: absolute;
       
   109     top: 0px;
       
   110     left: 0px;
       
   111     right: 0px;
       
   112     z-index: 1;
       
   113     background-color: #fff;
       
   114 }
       
   115 
       
   116 .Ldt-EnrichedPlan-Control-Label {
       
   117     display: inline-block;
       
   118     text-transform: uppercase;
       
   119     line-height: 10px;
       
   120     font-family: Roboto;
       
   121     font-size: 10px;
       
   122     font-weight: 100;
       
   123     width: 80px;
       
   124     position: relative;
       
   125 }
       
   126 .Ldt-EnrichedPlan-Controls .Ldt-EnrichedPlan-Search-Input {
       
   127     float: right;
       
   128     font-family: Roboto;
       
   129     font-size: 16px;
       
   130     width: calc(100% - 340px);
       
   131 }
       
   132 
       
   133 .Ldt-EnrichedPlan-Note.non_matching {
       
   134     display: none;
       
   135 }
       
   136 
       
   137 .Ldt-EnrichedPlan-Control- {
       
   138     font-style: normal;
       
   139 }
       
   140     /**********************************************************/
       
   141 /* Base for label styling */
       
   142 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked),
       
   143 .Ldt-EnrichedPlan-Control-Checkbox:checked {
       
   144   position: absolute;
       
   145   left: -9999px;
       
   146 }
       
   147 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked) + label,
       
   148 .Ldt-EnrichedPlan-Control-Checkbox:checked + label {
       
   149   position: relative;
       
   150   padding-left: 20px;
       
   151   cursor: pointer;
       
   152 }
       
   153 
       
   154 /* checkbox aspect */
       
   155 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked) + label:before,
       
   156 .Ldt-EnrichedPlan-Control-Checkbox:checked + label:before {
       
   157   content: '';
       
   158   position: absolute;
       
   159   left:0; top: 2px;
       
   160   width: 13px; height: 13px;
       
   161   border: 1px solid #aaa;
       
   162 }
       
   163 /* checked mark aspect */
       
   164 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked) + label:after,
       
   165 .Ldt-EnrichedPlan-Control-Checkbox:checked + label:after {
       
   166     content: '\2a2f';
       
   167     font-style: normal;
       
   168     position: absolute;
       
   169     top: 3px; left: -1px;
       
   170     font-size: 20px;
       
   171     transition: all .2s;
       
   172 }
       
   173 /* checked mark aspect changes */
       
   174 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked) + label:after {
       
   175   opacity: 0;
       
   176 }
       
   177 .Ldt-EnrichedPlan-Control-Checkbox:checked + label:after {
       
   178   opacity: 1;
       
   179 }
       
   180 /* disabled checkbox */
       
   181 .Ldt-EnrichedPlan-Control-Checkbox:disabled:not(:checked) + label:before,
       
   182 .Ldt-EnrichedPlan-Control-Checkbox:disabled:checked + label:before {
       
   183   box-shadow: none;
       
   184   border-color: #bbb;
       
   185   background-color: #ddd;
       
   186 }
       
   187 .Ldt-EnrichedPlan-Control-Checkbox:disabled:checked + label:after {
       
   188   color: #999;
       
   189 }
       
   190 .Ldt-EnrichedPlan-Control-Checkbox:disabled + label {
       
   191   color: #aaa;
       
   192 }
       
   193 /* accessibility */
       
   194 .Ldt-EnrichedPlan-Control-Checkbox:checked:focus + label:before,
       
   195 .Ldt-EnrichedPlan-Control-Checkbox:not(:checked):focus + label:before {
       
   196   border: 1px dotted blue;
       
   197 }
       
   198 
       
   199 /* hover style just for information */
       
   200 label:hover:before {
       
   201   border: 1px solid #4778d9!important;
       
   202 }
       
   203 
       
   204 /* hover style just for information */
       
   205 label:hover:before {
       
   206     background-color: #ededed;
       
   207 }