search

redxtech / vue-plyr

A Vue component for the plyr (https://github.com/sampotts/plyr) video & audio player.
Other
771 stars 137 forks source link

How to override css variables #200

Open SriNandan33 opened 4 years ago

SriNandan33 commented 4 years ago

Hi, I am trying to customize css variables, but they are not reflecting. I tried adding in the :root element

:root {
      --plyr-color-main: red !important;
}
ilyasdx91 commented 4 years ago

same

daviddang91 commented 4 years ago

Same issue

Quasarman commented 4 years ago

Same issue any solution for this?

ilyasdx91 commented 4 years ago

I just interrupted these styles ,!important =)

Quasarman commented 4 years ago

Hello @ilyasdx91,

where exactly did you "interrupt" the styles. Because for me it does not work by just putting a !important behind the variable in :root?

:root {
       --plyr-color-main: #456788 !important; /* Not changing the color */
}
redxtech commented 4 years ago

I know it's a bit late, but I'm fairly certain this has been fixed in the latest version. I tried it in a vue-cli project (vue 3), and a nuxt project (vue 2), and it worked perfectly in both of them. Maybe this has something to do with where you're declaring your variables?

To reproduce my setup, go into either of the nuxt or vue-cli folders in examples/, and add the following code to pages/index.vue (nuxt) or src/App.vue (vue-cli):

<style>
  :root {
    --plyr-color-main: red;
  }
</style>
Fozilbek-Raimberdiyev commented 7 months ago

I solved this problem. I set variable in css file not in vue SFC. Here explained about this https://github.com/sampotts/plyr?tab=readme-ov-file#customizing-the-css