Как я могу изменить цвет фона панели при зависании в аннотированном 7.5 Vaadin?

Question

Я работаю над проектом Vaadin 7.5.3 с аннотированной конфигурацией сервлета.

Мой главный класс пользовательский интерфейс:

@Title("Forms") 
@Theme("valo") 
public class FormsUI extends UI { 

    Panel container = new Panel(); 

    @Override 
    protected void init(VaadinRequest vaadinRequest) { 
     configureComponents(); 
     buildLayout(); 
    } 


    private void configureComponents() { 

    } 

    private void buildLayout() { 
     setContent(container); 
    } 


    @WebServlet(urlPatterns = "/*") 
    @VaadinServletConfiguration(ui = FormsUI.class, productionMode = false) 
    public static class FormsServlet extends VaadinServlet { 

    } 
} 

Мой POM (не полный) является:

<properties> 
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> 
     <failOnMissingWebXml>false</failOnMissingWebXml> 
     <vaadin.version>7.5.3</vaadin.version> 
     <vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version> 
    </properties> 

    <repositories> 
     <repository> 
      <id>vaadin-addons</id> 
      <url>http://maven.vaadin.com/vaadin-addons</url> 
     </repository> 
    </repositories> 

    <dependencies> 
     <dependency> 
      <groupId>com.vaadin</groupId> 
      <artifactId>vaadin-server</artifactId> 
      <version>${vaadin.version}</version> 
     </dependency> 
     <dependency> 
      <groupId>com.vaadin</groupId> 
      <artifactId>vaadin-client-compiled</artifactId> 
      <version>${vaadin.version}</version> 
     </dependency> 
     <dependency> 
      <groupId>com.vaadin</groupId> 
      <artifactId>vaadin-themes</artifactId> 
      <version>${vaadin.version}</version> 
     </dependency> 
     <dependency> 
      <groupId>javax.servlet</groupId> 
      <artifactId>javax.servlet-api</artifactId> 
      <version>3.0.1</version> 
      <scope>provided</scope> 
     </dependency> 
    </dependencies> 

    <build> 
     <plugins> 
      <plugin> 
       <groupId>org.apache.maven.plugins</groupId> 
       <artifactId>maven-compiler-plugin</artifactId> 
       <version>3.2</version> 
       <configuration> 
        <source>1.8</source> 
        <target>1.8</target> 
       </configuration> 
      </plugin> 
      <plugin> 
       <groupId>org.eclipse.jetty</groupId> 
       <artifactId>jetty-maven-plugin</artifactId> 
       <version>9.2.3.v20140905</version> 
      </plugin> 
     </plugins> 
    </build> 

Это довольно много его. Таким образом, вся CSS (valo тема) определена в зависимости от vaadin-themes (я считаю).

Что я хочу сделать, это изменить цвет фона панели (или, фактически, ЛЮБОГО компонента), когда моя мышь нависает над ней. Супер простой в чистом CSS.

Каждый пример, который я нахожу в Интернете, указывает на добавление пользовательских классов CSS, которые я могу сделать. Но где я их определяю? Как загрузить их?

Предложения оценены.

Благодаря

Answer 1

Для тех, кто задавался вопросом, я, наконец, решил проблему. Я не парень из CSS, и я еще меньше знаю о SASS.

В любом случае, то, что я сделал, было извлечение папки vaadin-themes-7.5.3 из моего target/myapp-1.0-SNAPSHOT (или везде, где была ваша взорванная война) и скопировать его в src/main/webapp.

Затем я создал новую папку под ../webapp/VAADIN/themes/mytheme.

Под mytheme, я удалил все, кроме:

favicon.ico 
styles.scss 

Затем я создал:

mytheme.scss 

Внутри styles.scss, я заменил с:

@import "mytheme.scss"; 

.mytheme { 
    @include mytheme; 
} 

Внутри mytheme.scss я заменен :

$v-background-color: #777; 

@import "../valo/valo.scss"; 

@mixin mytheme { 
    @include valo; 
} 

Отлично работает.

Теперь я могу по крайней мере начать добавлять пользовательские правила CSS.

Надеюсь, это поможет кому-то.

Answer 2

С аннотацией @Theme("valo") в своем классе UI, вы определяете, какие темы (читай стили CSS) вы будете использовать.

Чтобы иметь свои собственные стили CSS, вы наследуете их от темы valo, а затем определяете свои собственные стили CSS в файле scss.

Процесс сборки компилирует файлы scss в файлы css.

Итак, вы определяете @Theme("mytheme") вместо темы valo. В папке VAADIN/themes/mytheme вы затем помещаете свои scss-файлы, которые наследуются от темы valo.

book of vaadin имеет более подробную информацию об этом.