corpus_parole: cms/app-client/app/styles/components/player-sound-control.scss@b621657bb436 (annotated)

477 ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	1	.player-sound-control {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	2
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	3	& {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	4	margin: 0px 19px 0px 0px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	5	font-size: 20px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	6	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	7
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	8	#sound-control-speaker {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	9	width: 2em;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	10	line-height: 80px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	11	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	12
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	13	#sound-control-speaker i {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	14	cursor: pointer;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	15	vertical-align: middle;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	16	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	17
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	18	#sound-control-speaker i::before {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	19	font-size: 20px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	20	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	21
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	22	#sound-control-speaker i.fa-times::before {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	23	font-size: 16px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	24	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	25
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	26	#sound-control-speaker i.fa-volume-off+i.fa-times {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	27	display:inline-block;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	28	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	29
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	30	#sound-control-speaker i.fa-times {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	31	display:none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	32	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	33
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	34	#sound-control-scale {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	35	background-color: $corpus-white;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	36	width: 1em;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	37	height: 90px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	38	position: fixed;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	39	z-index: 1;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	40	display: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	41	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	42
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	43	#sound-control-scale:hover {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	44	display: block;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	45	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	46
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	47	.sound-control-scale-indicator {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	48	color: $corpus-black;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	49	text-align: center;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	50	display: table;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	51	margin: 0 auto;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	52	cursor: pointer;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	53	-webkit-touch-callout: none; /* iOS Safari */
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	54	-webkit-user-select: none; /* Chrome/Safari/Opera */
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	55	-khtml-user-select: none; /* Konqueror */
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	56	-moz-user-select: none; /* Firefox */
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	57	-ms-user-select: none; /* Internet Explorer/Edge */
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	58	user-select: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	59	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	60
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	61	.sound-control-scale-indicator[disabled] {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	62	color: $corpus-grey;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	63	cursor: default;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	64	pointer-events: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	65	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	66
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	67	// taken from http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	68
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	69	.volume-slider {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	70	height: 5px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	71	width: 50px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	72	position: absolute;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	73
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	74	/removes default webkit styles/
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	75	-webkit-appearance: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	76
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	77	transform: rotate(270deg) translate(-15px, -20px);
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	78	-ms-transform: rotate(270deg) translate(30px, 20px);
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	79	transform-origin: bottom;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	80
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	81	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	82	.volume-slider::-webkit-slider-runnable-track {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	83	height: 5px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	84	width: 50px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	85	background: #ddd;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	86	border: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	87	border-radius: 3px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	88	margin-top: 11px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	89	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	90	.volume-slider::-webkit-slider-thumb {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	91	-webkit-appearance: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	92	border: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	93	height: 11px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	94	width: 11px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	95	border-radius: 50%;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	96	background: $corpus-blue;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	97	margin-top: -3px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	98	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	99
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	100	.volume-slider[disabled]::-webkit-slider-thumb {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	101	background: $corpus-grey;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	102	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	103
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	104	.volume-slider:focus {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	105	outline: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	106	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	107	.volume-slider:focus::-webkit-slider-runnable-track {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	108	background: #ccc;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	109	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	110
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	111	.volume-slider::-moz-range-track {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	112	width: 50px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	113	height: 5px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	114	background: #ddd;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	115	border: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	116	border-radius: 2px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	117	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	118
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	119	.volume-slider::-moz-range-progress {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	120	background-color: $corpus-light-blue;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	121	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	122
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	123	.volume-slider::-moz-range-thumb {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	124	border: none;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	125	height: 11px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	126	width: 11px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	127	border-radius: 50%;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	128	background: $corpus-blue;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	129	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	130
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	131	.volume-slider[disabled]::-moz-range-thumb {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	132	background: $corpus-grey;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	133	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	134
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	135
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	136	/hide the outline behind the border/
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	137	.volume-slider:-moz-focusring {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	138	outline: 1px solid $corpus-white;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	139	outline-offset: -1px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	140	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	141
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	142	#sound-control-scale-minus {
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	143	position: absolute;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	144	top: 67px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	145	left: 7px;
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	146	}
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	147
ce52f0fca330 add volume control to the player ymh <ymh.work@gmail.com> parents: diff changeset	148	}

author	ymh <ymh.work@gmail.com>
	Mon, 19 Dec 2016 21:58:29 +0100
changeset 478	b621657bb436
parent 477	ce52f0fca330
child 479	e7df0b5b09b6
permissions	-rw-r--r--