corpus_parole: cms/app-client/app/styles/components/transcript-component.scss@18f0c3ee9aa5 (annotated)

246 5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	1	.transcript-component {
5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	2	background-color: $light-blue;
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	3	padding: 0px;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	4	width: 554px;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	5	box-sizing: border-box;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	6	}
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	7
254 a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	8	body.videoscreen .transcript-component {
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	9	overflow: scroll;
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	10	}
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	11
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	12	.transcript-component h2 {
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	13	position: absolute;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	14	z-index: 1;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	15	width: inherit;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	16	background: linear-gradient($light-blue, $light-blue 50%, transparent);
256 18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	17	padding-top: 12px;
18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	18	padding-bottom: 66px;
254 a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	19	line-height: 30px;
256 18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	20	margin: 0px!important;
18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	21	}
18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	22
18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	23	.transcript-component h2 span{
18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	24	display: block;
18f0c3ee9aa5 Add title translation to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 255 diff changeset	25	color: $medium-grey;
254 a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	26	}
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	27
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	28	body.videoscreen .transcript-component h2 {
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	29	padding-bottom: 0px;
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	30	position: static;
246 5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	31	}
5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	32
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	33	.transcript-component .transcript {
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	34	list-style: none;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	35	margin: 0px;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	36	padding: 154px 20px 0px 20px;
246 5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	37	}
5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	38
254 a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	39	body.videoscreen .transcript-component .transcript {
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	40	padding-top: 0px;
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	41	}
a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	42
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	43	.transcript-component .transcript .sentence {
248 256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	44	padding: 20px 20px 20px 64px;
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	45	color: $medium-grey;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	46	position: relative;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	47	background-color: transparent;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	48	transition: background-color .15s, color .15s;
254 a7cf2887e993 Hide/Show video CSS Chloe Laisne <chloe.laisne@gmail.com> parents: 248 diff changeset	49	min-height: 24px;
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	50	}
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	51
248 256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	52	.transcript-component .transcript .sentence:not(.active):hover {
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	53	cursor: pointer;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	54	background-color: $medium-grey-5;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	55	}
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	56
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	57	.transcript-component .transcript .sentence.active {
246 5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	58	background-color: $grey-blue;
5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	59	color: $light-white;
5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	60	}
5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	61
255 ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	62	.transcript-component .transcript .sentence .words {
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	63	font-size: 0px;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	64	margin: 20px 0px;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	65	}
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	66
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	67	.transcript-component .transcript .sentence .words .word {
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	68	display: inline-block;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	69	}
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	70
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	71	.transcript-component .transcript .sentence .words .word .original,
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	72	.transcript-component .transcript .sentence .words .word .translation {
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	73	background-color: $medium-grey;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	74	padding: 0px 4px;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	75	margin-right: 2px;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	76	margin-bottom: 2px;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	77	font-size: 12px;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	78	}
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	79
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	80	.transcript-component .transcript .sentence.active .words .word .original,
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	81	.transcript-component .transcript .sentence.active .words .word .translation {
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	82	background-color: $light-white;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	83	}
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	84
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	85	.transcript-component .transcript .sentence .words .word {
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	86	color: $light-blue;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	87	}
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	88
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	89	.transcript-component .transcript .sentence.active .words .word .original {
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	90	color: $grey-blue;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	91	}
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	92
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	93	.transcript-component .transcript .sentence .words .word .translation {
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	94	margin-bottom: 4px;
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	95	}
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	96
ed05b89e3299 Add words to transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 254 diff changeset	97
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	98	.transcript-component .transcript .sentence.active .translation {
246 5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	99	color: $light-blue;
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	100	}
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	101
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	102	.transcript-component .transcript .sentence .fa-play {
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	103	position: absolute;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	104	border: solid 2px $medium-grey;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	105	border-radius: 100%;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	106	width: 24px;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	107	height: 24px;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	108	line-height: 20px;
248 256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	109	left: 20px;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	110	cursor: pointer;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	111	opacity: 0;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	112	border-color: $light-blue;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	113	color: $light-blue;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	114	transition: opacity .15s;
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	115	}
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	116
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	117	.transcript-component .transcript .sentence .fa-play::before {
248 256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	118	margin-left: 3px;
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	119	}
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	120
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	121	.transcript-component .transcript .sentence.active .fa-play {
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	122	border-color: $light-blue;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	123	color: $light-blue;
248 256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	124	opacity: 1;
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	125	}
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	126
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	127	.transcript-component .transcript .sentence:not(.active):hover .fa-play {
256272c33349 Transcript sentence lick and play Chloe Laisne <chloe.laisne@gmail.com> parents: 247 diff changeset	128	opacity: 1;
247 7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	129	}
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	130
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	131	.transcript-component .transcript .sentence p {
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	132	margin: 0;
7a5d729992b8 Design and animate transcript Chloe Laisne <chloe.laisne@gmail.com> parents: 246 diff changeset	133	line-height: 24px;
246 5b7ae96768be Bsic transcript-component design Chloe Laisne <chloe.laisne@gmail.com> parents: 245 diff changeset	134	}

author	Chloe Laisne <chloe.laisne@gmail.com>
	Thu, 18 Aug 2016 17:02:02 +0200
changeset 256	18f0c3ee9aa5
parent 255	ed05b89e3299
child 257	eba9edbd8f46
permissions	-rw-r--r--