Themes

Application themes can be created using SASS with Compass framework. The local build environment auto compiles scss files into css files and new styles are applied as soon as the browser gets refreshed.

Two default themes are shipped in the download package:

Dark

An elegant modern style with darken background and light text color.

Files: pc3d.min.css, style.css

Light

A clean theme with neutral bright background color and dark text.

Files: pc3d.light.min.css, style.light.css

Responsiveness

The file _responsive.scss contains CSS rules to adjust gallery appearance and its dimensions to different screen sizes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 // Small devices (portrait phones) {
 @media screen and (max-width: 575px) {

   .rs-pc3d {
     min-height:580px !important;
   }

   /*
   .rs-pc3d-ccontainer {
     top:66% !important;
   }
   */
 }


 // Small devices (landscape phones, 576px and up)
 @media screen and (min-width: 576px) {

   .rs-pc3d {
     min-height:600px !important;
   }

   /*
   .rs-pc3d-ccontainer {
     top:70% !important;
   }
   */
 }

 // Medium devices (tablets, 768px and up)
 @media screen and (min-width: 768px) {

   .rs-pc3d {
     min-height:620px !important;
   }

   /*
   .rs-pc3d-ccontainer {
     top:75% !important;
   }
   */
 }

 // Large devices (desktops, 992px and up)
 @media screen and (min-width: 992px) {

   .rs-pc3d {
     min-height:650px !important;
     min-height:800px !important;
   }

   /*
   .rs-pc3d-ccontainer {
     top:80% !important;
   }
   */
 }

 // Extra large devices (large desktops, 1200px and up)
 @media screen and (min-width: 1200px) {

   .rs-pc3d {

   }
 }