hjg
2023-11-18 bb48edb3d9faaaeab0088151c86fc24137acdb08
提交 | 用户 | 时间
58d006 1 @import "bootstrap/variables.less";
A 2 @import "bootstrap/mixins.less";
3 @import "variables.less";
4
5 html {
6     height: 100%;
7 }
8 body {
9     background-color: #FFF;
10     height: 100%;
11 }
12
13 .main-container:before {
14     display: none;
15 }
16
17 .img-main-background {
18     position: absolute; 
19     top: 0;
20     width: 100%;
21     max-width: none;
22     
23     z-index: 0;
24 }
25 .jumbotron {
26     border-radius: 0;
27     
28     height: 100%;
29     min-height: 600px;
30
31     padding-top: 150px;
32     
33     margin-bottom: 0;
34 }
35
36
37 .navbar {
38     background-color: fade(@navbar-background, 80%);
39     
40     padding: 20px;
41     .transition(~"padding 0.2s, background-color 0.2s");
42
43     .navbar-brand {
44         font-size: @font-size-landing-navbar-brand;
45         .transition(~"font-size 0.2s");
46     }
47     
48     .navbar-nav > li > a {
49         margin-top: 6px;
50         padding: 6px 8px;
51         
52         height: 36px;
53         border-bottom: 2px solid transparent;
54     }
55     
56     .navbar-nav > li > a:hover, .navbar-nav > li.active > a  {
57         border-bottom-color: #FFF;
58         background-color: transparent;
59         color: #FFF;
60     }
61     
62     
63     @media (max-width: @screen-sm-max) {
64         .navbar-nav > li > a {
65             border-bottom-width: 0;
66             border-left: 2px solid transparent;
67         }
68         .navbar-nav > li > a:hover, .navbar .navbar-nav > li.active > a  {
69             border-left-color: #FFF;
70         }
71     }
72     
73     
74     @media (max-height: @screen-qhd-width) {
75         .jumbotron {
76             padding-top: 120px;
77         }
78     }
79     
80     
81     .navbar-nav > li {
82         border-width: 0 !important;
83         &.sep {
84             height: 48px;
85             line-height: 48px;
86             margin: 0 8px;
87             font-size: 4px;
88         }
89     }
90
91 }
92
93
94
95
96 .navbar-fixed-top + .main-container {
97     height: 90%;
98     height: ~"calc(100% - 100px)";
99     min-height: 400px;
100     
101     padding-top: 0;
102 }
103 .navbar-compact {
104     + .main-container {
105         padding-top: 0;
106     }
107     
108     &.navbar {
109         padding: 5px;
110         background-color: fade(@navbar-background, 92%);
111         
112         .navbar-brand {
113             font-size: @font-size-landing-navbar-compact-brand;
114         }
115     }
116 }
117
118 @media (max-width: @screen-sm-max) {
119  .navbar {
120     + .main-container {
121         padding-top: 0;
122     }
123     
124     &.navbar {
125         padding: 5px;
126         background-color: fade(@navbar-background, 92%);
127         
128         .navbar-brand {
129             font-size: @font-size-landing-navbar-compact-brand;
130         }
131     }
132  }
133 }
134
135
136 .section  {
137     padding-top: 36px;
138     padding-bottom: 36px;
139     background-color: #FFF;
140 }
141
142 .section-grey {
143     background-color: #EDF2F6;
144 }
145
146 .item .carousel-caption {
147     background-color: transparent;
148     transition: background-color 0.2s;
149 }
150 .item.active .carousel-caption {
151     background-color: rgba(0,0,0,0.25);
152 }
153
154
155
156
157 .coming-soon {
158     background-color: #1A375F;
159
160     .main-container {
161         height: 100%;
162     }
163
164     .navbar {
165         padding: 10px;
166         background-color: fade(@navbar-background, 50%);
167     }
168     .jumbotron {
169         padding-top: 120px;
170         background-color: #254169;
171     }
172     @media (max-width: @screen-xs-max) {
173      .jumbotron {
174         padding-top: 80px;
175      }
176     }
177     
178     .timer {
179         border-radius: 18px;
180         padding-bottom: 12px;
181         background-color: rgba(0,0,0,0.15);
182     }
183     
184     .timer-value {
185         font-size: @font-size-comingsoon-timer-value;
186         margin-bottom: 8px;
187         color: #FFF;
188     }
189     
190     .timer-text {
191         font-size: @font-size-comingsoon-timer-text;
192         color: #FFF;
193         text-transform: uppercase;
194         
195         .label {
196             min-width: 60%;
197         }
198     }
199 }
200
201