UNPKG

@quasar/quasar-app-extension-qmediaplayer/src/component/media-player.styl

Version:

2.85 kBtext/stylusView Raw

q-media
position relative
width 100% !important
min-width 230px !important
min-height: 40px !important
overflow hidden !important
&--player
  width 100%
  height 100%
  vertical-align bottom
  align-self flex-end
&__audio--standard
  width 100%
  height 80px !important
  vertical-align bottom
  align-self flex-end
&__audio--dense
  width 100%
  height 40px !important
  vertical-align bottom
  align-self flex-end
&__error-window 
  position absolute;
  left 0
  top 0
  width 100%
  height 40px
  font-size .8rem
  text-align center
  color white
  background-color rgba(255, 0, 0, 0.25)
  transition height 0.25s ease-in
&__overlay-window 
  position absolute;
  left 0
  top 0
  width 100%
  height 100%
  background-color transparent
&__loading
  &--video
    position absolute;
    left 50%
    margin-left -1.5rem
    bottom 50%
    margin-bottom -1.5rem
    width 3rem
    height: 3rem
    color white
    background-color transparent
  &--audio
    position absolute;
    left 50%
    margin-left -0.5rem
    bottom 50%
    margin-bottom -0.5rem
    width 1rem
    height: 1rem
    color white
    background-color transparent
&--big-button
  position absolute
  left 50%
  margin-left -1.5rem
  bottom 50%
  margin-bottom -1.5rem
  color white
  background-color transparent
  border-style solid
  border-color white
  border-width 1px
  border-radius 1.5rem
  opacity 1.0
  &:hover
    background-color rgba(0, 0, 0, 0.40)
&__controls
  position absolute
  left 0
  bottom 0
  background-color rgba(0, 0, 0, 0.40)
  width 100%
  overflow hidden
  &--row
    height 40px
  &--standard
    height 80px !important
    transition height 0.25s ease-in
  &--dense
    height 40px !important
    transition height 0.25s ease-in
  &--hidden
    height 0 !important
    transition height 0.25s ease-out
  &--button
    max-width 40px !important
    min-width 40px !important
    max-height 40px !important
    min-height 40px !important
  &--volume-box
    max-height 40px !important
    min-height 40px !important
  &--video-time-text
    padding 0 0.25rem
    color #fff
    font-size .8rem
    text-align center
  &--video-slider
    padding 0 4px
&--fullscreen
  z-index 8000
  position fixed !important
  top 0 !important
  left 0 !important
  height 100vh !important
  width 100vw !important
  overflow hidden
:-webkit-media-controls
display none !important
119video::-webkit-media-controls
display none !important
121video::-webkit-media-controls-enclosure
display none !important;

1	`.q-media`
2	`position relative`
3	`width 100% !important`
4	`min-width 230px !important`
5	`min-height: 40px !important`
6	`overflow hidden !important`
7	`&--player`
8	`width 100%`
9	`height 100%`
10	`vertical-align bottom`
11	`align-self flex-end`
12	`&__audio--standard`
13	`width 100%`
14	`height 80px !important`
15	`vertical-align bottom`
16	`align-self flex-end`
17	`&__audio--dense`
18	`width 100%`
19	`height 40px !important`
20	`vertical-align bottom`
21	`align-self flex-end`
22	`&__error-window`
23	`position absolute;`
24	`left 0`
25	`top 0`
26	`width 100%`
27	`height 40px`
28	`font-size .8rem`
29	`text-align center`
30	`color white`
31	`background-color rgba(255, 0, 0, 0.25)`
32	`transition height 0.25s ease-in`
33	`&__overlay-window`
34	`position absolute;`
35	`left 0`
36	`top 0`
37	`width 100%`
38	`height 100%`
39	`background-color transparent`
40	`&__loading`
41	`&--video`
42	`position absolute;`
43	`left 50%`
44	`margin-left -1.5rem`
45	`bottom 50%`
46	`margin-bottom -1.5rem`
47	`width 3rem`
48	`height: 3rem`
49	`color white`
50	`background-color transparent`
51	`&--audio`
52	`position absolute;`
53	`left 50%`
54	`margin-left -0.5rem`
55	`bottom 50%`
56	`margin-bottom -0.5rem`
57	`width 1rem`
58	`height: 1rem`
59	`color white`
60	`background-color transparent`
61	`&--big-button`
62	`position absolute`
63	`left 50%`
64	`margin-left -1.5rem`
65	`bottom 50%`
66	`margin-bottom -1.5rem`
67	`color white`
68	`background-color transparent`
69	`border-style solid`
70	`border-color white`
71	`border-width 1px`
72	`border-radius 1.5rem`
73	`opacity 1.0`
74	`&:hover`
75	`background-color rgba(0, 0, 0, 0.40)`
76	`&__controls`
77	`position absolute`
78	`left 0`
79	`bottom 0`
80	`background-color rgba(0, 0, 0, 0.40)`
81	`width 100%`
82	`overflow hidden`
83	`&--row`
84	`height 40px`
85	`&--standard`
86	`height 80px !important`
87	`transition height 0.25s ease-in`
88	`&--dense`
89	`height 40px !important`
90	`transition height 0.25s ease-in`
91	`&--hidden`
92	`height 0 !important`
93	`transition height 0.25s ease-out`
94	`&--button`
95	`max-width 40px !important`
96	`min-width 40px !important`
97	`max-height 40px !important`
98	`min-height 40px !important`
99	`&--volume-box`
100	`max-height 40px !important`
101	`min-height 40px !important`
102	`&--video-time-text`
103	`padding 0 0.25rem`
104	`color #fff`
105	`font-size .8rem`
106	`text-align center`
107	`&--video-slider`
108	`padding 0 4px`
109	`&--fullscreen`
110	`z-index 8000`
111	`position fixed !important`
112	`top 0 !important`
113	`left 0 !important`
114	`height 100vh !important`
115	`width 100vw !important`
116	`overflow hidden`
117	`::-webkit-media-controls`
118	`display none !important`
119	`video::-webkit-media-controls`
120	`display none !important`
121	`video::-webkit-media-controls-enclosure`
122	`display none !important;`