Attention: The EBRAINS drive will be unavailable for most of the weekend starting the 25th October. Although the Lab is availble while the Drive is down, files that are stored in the Drive will not be loaded and you will be unable to save documents directly on the Lab.


Last modified by hbpadmin on 2022/12/30 11:01
From version 48.4
edited by hbpadmin
on 2022/03/23 11:20
Change comment: There is no comment for this version
To version 45.1
edited by hbpadmin
on 2020/07/23 20:05
Change comment: Rollback to version xar:eu.hbp.wiki:xwiki-skin-collaboratory/0.20.5

Summary

Details

Page properties
Default language
... ... @@ -1,1 +1,0 @@
1 -en
Content
... ... @@ -1,5 +1,4 @@
1 -{{velocity output="false"}}
2 -#set($annotationsActivated=false)
1 +{{velocity}}
3 3  #set($displayContentFooter=false)
4 4  #set($displayDocExtra=false)
5 5  #set($displayContentMenu=false)
... ... @@ -9,7 +9,7 @@
9 9   <div class="container">
10 10   <div class="row">
11 11   <div class="col-md-7 col-md-push-5">
12 - <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/WebHome/wiki_home_graphic.svg" />
11 + <img class="img-responsive" src="/bin/skin/Collaboratory/UX/HbpSkin/wiki_home_graphic.svg" />
13 13   </div>
14 14   <div class="col-md-5 col-md-pull-7 hero-text">
15 15   <h3>Collaborate.<br/>Create reproducible science.<br/>Discover EBRAINS services at work.<br/>From anywhere.</h3>
... ... @@ -19,19 +19,15 @@
19 19   </div>
20 20   <div class="container-fluid search__row">
21 21   <div class="container">
22 - <div class="col-sm-12 col-md-6 col-md-offset-3">
23 - <form role="search" action="/bin/view/Main/Search" method="GET">
24 - <div class="input-group">
25 - <input type="search" name="text" class="form-control input-lg" title="Search word in all wiki pages" placeholder="Search word in all wiki pages">
26 - <span class="input-group-btn">
27 - <button type="submit" class="btn btn-primary input-lg">
28 - <span class="fa fa-search"></span>
29 - <span class="sr-only">Search</span>
30 - </button>
31 - </span>
32 - </div>
33 - </form>
34 - </div>
21 + <div class="col-md-6 col-md-offset-3">
22 + <form role="search" class="clb-search-bar" action="/bin/view/Main/Search" method="GET">
23 + <div>
24 + <input type="text" class="form-control" name="text" placeholder="Search word in all wiki pages">
25 + <i class="glyphicon glyphicon-search"></i>
26 + </div>
27 + <button class="btn clb-btn-default" type="submit">Search</button>
28 + </form>
29 + </div>
35 35   </div>
36 36   </div>
37 37  {{/html}}
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,3 +1,9 @@
1 +/*
2 +.teasing .collaborate {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/collaborate.jpg');}
3 +.teasing .reproductible {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/reproducible.jpg');}
4 +.teasing .science {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/science.jpg');}
5 +.teasing .anywhere {background-image: url('/bin/skin/Collaboratory/UX/HbpSkin/anywhere.jpg');}
6 +*/
1 1  #mainContentArea{
2 2   padding:0;
3 3   padding-top:1.25rem
... ... @@ -18,11 +18,194 @@
18 18   padding-left:0;
19 19   padding-right:0;
20 20   min-height:300px;
21 - .search__row input[type="search"] {
22 - font-size: 16px;
23 - height: 54px;
27 +/*
28 + p.alert-info{
29 + padding:2rem
24 24   }
31 + .teasing{
32 + margin-bottom:50px
33 + }
34 + .teasing .card{
35 + text-align:center;
36 + position:relative;
37 + height:100%;
38 + background-size:cover;
39 + background-repeat:no-repeat;
40 + background-position:50% 50%;
41 + padding-bottom:20px;
42 + margin-bottom:20px
43 + }
44 + .teasing .card::before{
45 + position:absolute;
46 + top:0;
47 + right:0;
48 + bottom:0;
49 + left:0;
50 + display:block;
51 + background-image:linear-gradient(to top,rgba(0,0,0,.9),transparent 85%);
52 + content:''
53 + }
54 + .teasing .card-header{
55 + position:relative;
56 + height:150px
57 + }
58 + .teasing .coming-soon{
59 + position:absolute;
60 + z-index:10;
61 + left:0;
62 + right:0;
63 + padding:.5rem;
64 + border-radius:.25rem;
65 + font-weight:700;
66 + top:50%
67 + }
68 + .teasing .coming-soon span{
69 + font-size:1.25rem;
70 + line-height:2;
71 + padding:.5rem;
72 + border-radius:.25rem;
73 + font-weight:700;
74 + margin-top:-17px;
75 + background:rgba(255,255,255,.8);
76 + }
77 + .teasing .card-content {
78 + position:relative;
79 + overflow:hidden;
80 + margin-top:0;
81 + padding-top:0;
82 + padding-bottom:0;
83 + padding-left:.5rem;
84 + padding-right:.5rem;
85 + color: @color-white;
86 + font-size:1rem;
87 + .card-title {
88 + color:@color-white;
89 + }
90 + }
91 + .teasing .card-title{
92 + margin-top:1.5rem;
93 + margin-right:0;
94 + margin-bottom:1rem;
95 + margin-left:0;
96 + font-weight:700
97 + }
98 + .clb-actions {
99 + background-color:#f0f3f1;
100 + padding-top:5rem;
101 + padding-left:0;
102 + padding-right:0;
103 + padding-bottom:0
104 + }
105 + .clb-actions .clb-box{
106 + margin-bottom:5rem;
107 + font-size:1.125rem;
108 + display: block
109 + }
110 + .clb-actions>.row{
111 + margin-left:0;
112 + margin-right:0
113 + }
114 + .clb-actions .clb-box:hover{
115 + text-decoration:none
116 + }
117 + .clb-content>.row{
118 + margin-bottom:5rem
119 + }
120 +*/
121 + .clb-search-bar{
122 + display:flex;
123 + align-items:stretch;
124 + position:relative
125 + }
126 + .clb-search-bar>div{
127 + flex:1;
128 + margin:2px 10px 2px 0
129 + }
130 + .clb-search-bar input[type=text]{
131 + width:100%;
132 + padding:1.5rem;
133 + padding-left:2.5rem;
134 + border-radius: @border-radius-default;
135 + background-color: @color-white;
136 + box-shadow:none
137 + }
138 + .clb-search-bar input[type=text]:focus{
139 + border-color: @color-brand-primary;
140 + background-color:@color-white;
141 + box-shadow:none
142 + }
143 + .clb-search-bar i{
144 + position:absolute;
145 + margin-top:-.5rem;
146 + color: @color-gray-200;
147 + top:50%;
148 + left:1em
149 + }
150 + .clb-search-bar input[type=text]:focus~i{
151 + color: @color-brand-primary;
152 + }
153 + /*
154 + @media screen and (min-width:992px){
155 + .teasing .row{
156 + display:flex
157 + }
158 + .teasing .row>[class*=col-]{
159 + display:flex;
160 + flex-direction:column
161 + }
162 + .clb-actions{
163 + padding-bottom:5rem
164 + }
165 + .clb-actions .clb-box{
166 + margin-bottom:0
167 + }
168 + .clb-actions .container,
169 + .clb-actions .container>.row{
170 + display:flex
171 + }
172 + .clb-actions .clb-box-container,
173 + .clb-actions .clb-box-container a,
174 + .clb-actions .container>.row>[class*=col-]>.row{
175 + height:100%;
176 + display:block
177 + }
178 + }
179 + */
25 25  }
181 +
182 +.clb-box{
183 + background-color:#fff;
184 + box-shadow:0 1px 2px 0 rgba(0,0,0,.1);
185 + padding:2rem;
186 + padding-bottom:5rem;
187 + color: @color-brand-primary;
188 + display:block
189 + .clb-box-title {
190 + color:#45b07c;
191 + font-weight:600;
192 + margin-bottom:5rem;
193 + }
194 +}
195 +
196 +.clb-btn-default,button {
197 + background-image:none;
198 + box-shadow:none;
199 + border:0;
200 + border-radius: @border-radius-default;
201 + padding-top:.5rem;
202 + padding-bottom:.5rem;
203 + padding-left:1rem;
204 + padding-right:1rem;
205 + background-color:@color-brand-primary;
206 + color: @color-white;
207 + &:hover {
208 + background-color: darken(@color-brand-primary, 10%);
209 + }
210 + &:active {
211 + background-color: darken(@color-brand-primary, 15%);
212 + }
213 +}
214 +
26 26  #xwikicontent .get-started__row__title {
27 27   margin: 1rem 0;
28 28   font-weight: 400;
... ... @@ -116,3 +116,44 @@
116 116   border-top: 1px solid #ccc;
117 117   /*border-bottom: 1px solid #ccc;*/
118 118  }
308 +
309 +.tags__title, .tags__text {
310 + text-align: center;
311 +}
312 +
313 +.tags__title--collaborate,
314 +.tags__title--science,
315 +.tags__title--reproducible,
316 +.tags__title--anywhere {
317 + padding-top: 4rem;
318 + position: relative;
319 +}
320 +
321 +.tags__title--collaborate::before,
322 +.tags__title--science::before,
323 +.tags__title--reproducible::before,
324 +.tags__title--anywhere::before {
325 + position: absolute;
326 + width: 50px;
327 + height: 50px;
328 + background-repeat: none;
329 + top: 0;
330 + margin-left: 50%;
331 + left: -25px;
332 + content: " ";
333 + display: table;
334 +}
335 +
336 +.tags__title--collaborate::before {
337 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Collaborate.svg");
338 +}
339 +.tags__title--science::before {
340 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Science.svg");
341 +}
342 +.tags__title--reproducible::before {
343 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Reproducible.svg");
344 +}
345 +.tags__title--anywhere::before {
346 + background-image: url("/bin/skin/Collaboratory/UX/HbpSkin/Anywhere.svg");
347 +}
348 +