scala-news-reader
rss/atom news reader in scala
git clone https://9o.is/git/scala-news-reader.git
styles.less
(32181B)
1 /*********************************************************
2 * Import the files you want to use. This is a custom
3 * version of bootstrap.less with responsive
4 * support included.
5 ********************************************************
6 */
7
8 // CSS Reset
9 @import "bootstrap/reset.less";
10
11 // Core variables and mixins
12 @import "variables.less"; // Modify this for custom colors, font-sizes, etc
13 @import "bootstrap/mixins.less";
14
15 // Grid system and page structure
16 @import "bootstrap/scaffolding.less";
17 @import "bootstrap/grid.less";
18 @import "bootstrap/layouts.less";
19
20 // Base CSS
21 @import "bootstrap/type.less";
22 @import "bootstrap/code.less";
23 @import "bootstrap/forms.less";
24 @import "bootstrap/tables.less";
25
26 // Components: common
27 @import "bootstrap/sprites.less";
28 @import "bootstrap/dropdowns.less";
29 @import "bootstrap/wells.less";
30 @import "bootstrap/component-animations.less";
31 @import "bootstrap/close.less";
32
33 // Components: Buttons & Alerts
34 @import "bootstrap/buttons.less";
35 @import "bootstrap/button-groups.less";
36 @import "bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
37
38 // Components: Nav
39 @import "bootstrap/navs.less";
40 @import "bootstrap/navbar.less";
41
42 // Components: Popovers
43 @import "bootstrap/modals.less";
44 @import "bootstrap/tooltip.less";
45 @import "bootstrap/popovers.less";
46
47 // Components: Misc
48 @import "bootstrap/thumbnails.less";
49 @import "bootstrap/media.less";
50 @import "bootstrap/carousel.less";
51
52 // This needs to be set before the responsive classes when using .navbar-fixed-top;
53 body {
54 padding-top: @navbarHeight; // + @emailSignupHeight + 20;
55 }
56
57 // RESPONSIVE CLASSES
58 // ------------------
59
60 @import "bootstrap/responsive-utilities.less";
61
62
63 // MEDIA QUERIES
64 // ------------------
65
66 // Large desktops
67 @import "bootstrap/responsive-1200px-min.less";
68
69 // Tablets to regular desktops
70 @import "bootstrap/responsive-768px-979px.less";
71
72 // Phones to portrait tablets and narrow desktops
73 @import "bootstrap/responsive-767px-max.less";
74
75
76 // RESPONSIVE NAVBAR
77 // ------------------
78
79 // From 979px and below, show a button to toggle navbar contents
80 @import "bootstrap/responsive-navbar.less";
81
82
83 // Utility classes
84 @import "bootstrap/utilities.less"; // Has to be last to override when necessary
85
86
87
88
89 /*********************************************
90 CUSTOM GOES BELOW!
91 ***************************************************/
92
93
94 /* READER
95 ---------------------------------------------------*/
96
97 .reader-nav {
98 background-color: @white;
99 top: 90px;
100
101 & > div, & > ul { margin: 15px 0; }
102
103 #reader-categories {
104 height: 200px;
105 overflow: hidden;
106
107 .nav { padding-left: 7px; }
108 ul > li {
109 line-height: 30px;
110 a {
111 padding-left: 10px;
112 }
113 }
114 }
115
116 #reader-writers {
117 display: block;
118
119 & > li {
120 img { width: 150px; height: 150px;}
121 #writer-name { margin: 0 auto; }
122 a:hover, a:focus { background-color: transparent; }
123 }
124
125 }
126
127 }
128
129 .reader-span-spacing {
130 padding: 10px;
131 h5 { margin: 0; }
132 .nav { margin-bottom: 0; }
133 }
134
135 #reader-ad-nav {
136 .nav { margin-top: 30px; }
137
138 & > ul > li > {
139 margin: 15px 0;
140
141 img { width: 80px; height: 80px;}
142 a {
143 width:100px;
144 margin: 0 auto;
145 font-size: 85%;
146 line-height: 150%;
147 &:hover, &:focus { background-color: transparent; }
148 }
149 }
150 }
151
152 #reader-nav, #reader-ad-nav, .reader-nav-blog.stuck {
153 position:fixed;
154 width: 195px;
155 }
156
157 #reader-nav, .reader-nav-blog.stuck { top: @navbarHeight; }
158
159 .boxed-articles-span {
160 min-width: @boxedArticlesWidth;
161
162 .article {
163 .header { display: none; }
164 }
165
166 }
167
168
169 @media (min-width: 980px) and (max-width: 1199px) {
170 .boxed-articles-span { min-width: @boxedArticlesWidth * 0.98; }
171 #reader-nav, .reader-nav-blog.stuck { width: 157px; }
172 .reader-nav {
173 #reader-writers > li {
174 img { width: 135px; height: 135px; }
175 a { width: 110px; font-size: 90%; line-height: 170%; }
176 }
177 }
178 #reader-ad-nav { display: none; }
179 }
180 @media (min-width: 768px) and (max-width: 979px) {
181 .boxed-articles-span { min-width: @boxedArticlesWidth * 0.755; }
182 #reader-ad-nav { display: none; }
183
184 #reader-nav, .reader-nav-blog.stuck { width: 121px; }
185 .reader-nav {
186 #reader-writers > li {
187 img { width: 100px; height: 100px;}
188 a { width: 95px; font-size: 85%; line-height: 150%; }
189 }
190 }
191 }
192 @media (max-width: 767px) {
193 .boxed-articles-span {
194 min-width: 0;
195 .article .header { display: block; }
196 }
197 #reader-ad-nav { display: none; }
198
199 #boxed-articles-wrapper { width: 100% }
200 #reader-nav-wrapper { width: 100% }
201 #reader-nav, .reader-nav-blog.stuck {
202 position:static;
203 width:auto;
204 }
205 .reader-nav {
206 display: none;
207 #reader-writers { display: none; }
208 }
209 }
210
211 /* INDEX
212 ----------------------------------------------------*/
213
214 .profile-img-size {
215 width: 300px;
216 height: 300px;
217 }
218
219 .readBlue {
220 color: @readBlue;
221 font-family: @actaFontFamily;
222 font-weight: normal;
223 }
224
225 .readOrange {
226 color: @readOrange;
227 font-family: @actaFontFamily;
228 font-weight: normal;
229 }
230
231 .marketing {
232 padding: 20px;
233 text-align: center;
234 ul.inline > li { padding: 0 30px }
235 .logo { margin: 5px 0 }
236
237 #marketing-main-wrapper {
238 background-color:white;
239 border-radius: 500px;
240 padding:5px;
241
242 #marketing-main {
243 border-radius: 500px;
244 padding:20px;
245 border: 2px solid @readBlue;
246 #marketing-main-inner {
247 margin: 50px 100px;
248 }
249 }
250 }
251 }
252
253 #top-index-bg {
254 position:absolute;
255 left:0;
256 top:0;
257 z-index:-100;
258 width:100%;
259 height: 400px;
260
261 background: rgb(30,118,155); /* Old browsers */
262 background: -moz-radial-gradient(center, ellipse cover, rgba(30,118,155,1) 0%, rgba(91,193,233,1) 60%);
263 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,118,155,1)), color-stop(60%,rgba(91,193,233,1))); /* Chrome,Safari4+ */
264 background: -webkit-radial-gradient(center, ellipse cover, rgba(30,118,155,1) 0%,rgba(91,193,233,1) 60%); /* Chrome10+,Safari5.1+ */
265 background: -o-radial-gradient(center, ellipse cover, rgba(30,118,155,1) 0%,rgba(91,193,233,1) 60%); /* Opera 12+ */
266 background: -ms-radial-gradient(center, ellipse cover, rgba(30,118,155,1) 0%,rgba(91,193,233,1) 60%); /* IE10+ */
267 background: radial-gradient(ellipse at center, rgba(30,118,155,1) 0%,rgba(91,193,233,1) 60%); /* W3C */
268 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e769b', endColorstr='#5bc1e9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
269
270 }
271
272
273 #email-signup .big-btn {
274 padding: 17px 10px;
275 font-size: 14px;
276 line-height: 18px;
277 font-weight: bold;
278 margin-top: 0 !important;
279 }
280
281 #email-signup .big-input {
282 min-height: 50px;
283 font-size: 23px;
284 }
285
286 .fb-btn {
287 background-image: url('https://s3.amazonaws.com/readmeans/img/facebook.png');
288 background-repeat: no-repeat;
289 background-position: 5% 50%;
290 background-color: rgb(59, 89, 152);
291 background: none no-repeat scroll 20px 50% / 29px auto rgb(208, 55, 55);
292 color: white;
293 text-decoration: none;
294 padding-left: 40px !important;
295 box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
296
297 &:hover, &:focus {
298 background-image: url('https://s3.amazonaws.com/readmeans/img/facebook.png');
299 background-repeat: no-repeat;
300 background-position: 5% 50%;
301 text-decoration: none;
302 color: @white;
303 background-color: lighten(rgb(59, 89, 152), 10%);
304 }
305 }
306
307 .features {
308 padding: 10px;
309 font-size: @baseFontSize * 1.3;
310 line-height: @baseLineHeight * 1.3;
311 background-color: @white;
312
313 [class*="span"].content {
314 height: 350px;
315 font-weight: bold;
316 margin: 0;
317 div.text { padding: 20px; }
318 }
319
320 h2 {
321 padding: 20px;
322 padding-left: 80px;
323 color: @white;
324 margin-bottom: 50px;
325 border-radius: 3px;
326 }
327 }
328
329 @media (min-width: 1200px) {
330 .marketing {
331 font-size: @marketingFontSize;
332 line-height: @marketingLineHeight;
333 .small { font-size: @marketingFontSize * 0.5 }
334 #marketing-main-inner {
335 margin: 50px 0;
336 }
337 }
338 }
339
340 @media (min-width: 980px) and (max-width: 1199px) {
341 .marketing {
342 font-size: @marketingFontSize * 0.9;
343 line-height: @marketingLineHeight * 0.9;
344 .small { font-size: @marketingFontSize * 0.45 }
345 #marketing-main-inner {
346 margin: 25px 0;
347 }
348 }
349 }
350
351 @media (min-width: 768px) and (max-width: 979px) {
352 .marketing {
353 font-size: @marketingFontSize * 0.8;
354 line-height: @marketingLineHeight * 0.8;
355 .small { font-size: @marketingFontSize * 0.4 }
356 #marketing-main-inner {
357 margin: 25px 0;
358 }
359 }
360 }
361
362 @media (min-width: 500px) and (max-width: 767px) {
363 .marketing {
364 font-size: @marketingFontSize * 0.9;
365 line-height: @marketingLineHeight * 0.9;
366 .small { font-size: @marketingFontSize * 0.45 }
367 #marketing-main-inner {
368 margin: 25px 0;
369 }
370 }
371 .features [class*="span"].content { height: auto !important; }
372 .features { padding: 0; }
373 }
374
375 @media (max-width: 499px) {
376 .marketing {
377 font-size: @marketingFontSize * 0.8;
378 line-height: @marketingLineHeight * 0.8;
379 .small { font-size: @marketingFontSize * 0.4 }
380 #marketing-main-inner {
381 margin: 25px 0;
382 }
383 }
384 .features [class*="span"].content { height: auto !important; }
385 .features { padding: 0; }
386 }
387
388 .row-fluid .offset0 {
389 margin-left: 0
390 }
391 .row-fluid .span12.offset0 {
392 width: 99.99999999999999%;
393 *width: 99.93055555555554%;
394 }
395 .row-fluid .span11.offset0 {
396 width: 91.66666666666666%;
397 *width: 91.59722222222221%;
398 }
399 .row-fluid .span10.offset0 {
400 width: 83.33333333333331%;
401 *width: 83.26388888888887%;
402 }
403 .row-fluid .span9.offset0 {
404 width: 74.99999999999999%;
405 *width: 74.93055555555554%;
406 }
407 .row-fluid .span8.offset0 {
408 width: 66.66666666666666%;
409 *width: 66.59722222222221%;
410 }
411 .row-fluid .span7.offset0 {
412 width: 58.33333333333333%;
413 *width: 58.263888888888886%;
414 }
415 .row-fluid .span6.offset0 {
416 width: 49.99999999999999%;
417 *width: 49.93055555555555%;
418 }
419 .row-fluid .span5.offset0 {
420 width: 41.66666666666666%;
421 *width: 41.597222222222214%;
422 }
423 .row-fluid .span4.offset0 {
424 width: 33.33333333333333%;
425 *width: 33.263888888888886%;
426 }
427 .row-fluid .span3.offset0 {
428 width: 24.999999999999996%;
429 *width: 24.930555555555554%;
430 }
431 .row-fluid .span2.offset0 {
432 width: 16.666666666666664%;
433 *width: 16.59722222222222%;
434 }
435 .row-fluid .span1.offset0 {
436 width: 8.333333333333332%;
437 *width: 8.263888888888888%;
438 }
439
440 @media (max-width: 768px) {
441 .row-fluid [class*="offset"] {
442 width: auto !important;
443 }
444 }
445
446 #email-signup {
447 text-align: center;
448 padding: 15px 20px 10px 20px;
449 .border-radius(0px 0px 25px 25px);
450
451 button, input { margin: 0 }
452 .box-shadow(0 1px 4px rgba(0, 0, 0, 0.065));
453 border: 1px solid @navbarBorder;
454 border-top: 0;
455 background-color: @navbarBackground;
456 min-height: @emailSignupHeight;
457 }
458
459 @media (min-width: 768px) {
460 @sideBorderThickness: 13px;
461 div.b-left, div.b-right { width: @sideBorderThickness }
462 div.b-bottom { height: @sideBorderThickness }
463 }
464 @media (max-width: 767px) {
465 div.b-left, div.b-right, div.b-bottom, div.b-top { display: none }
466 .navbar-fixed-top { top: 0 }
467 }
468
469 #border {
470 div {
471 position: fixed;
472 z-index: 1035;
473 }
474
475
476 .background-gradient() {
477 background: rgb(91,193,233);
478 background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzViYzFlOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjNTU1NTU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
479 background: -moz-linear-gradient(top, rgba(91,193,233,1) 0%, rgba(85,85,85,1) 5%);
480 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(91,193,233,1)), color-stop(5%,rgba(85,85,85,1)));
481 background: -webkit-linear-gradient(top, rgba(91,193,233,1) 0%,rgba(85,85,85,1) 5%);
482 background: -o-linear-gradient(top, rgba(91,193,233,1) 0%,rgba(85,85,85,1) 5%);
483 background: -ms-linear-gradient(top, rgba(91,193,233,1) 0%,rgba(85,85,85,1) 5%);
484 background: linear-gradient(to bottom, rgba(91,193,233,1) 0%,rgba(85,85,85,1) 5%);
485 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bc1e9', endColorstr='#555555',GradientType=0 );
486 }
487
488 div.b-left {
489 top: 0;
490 left: 0;
491 height: 100%;
492 .background-gradient();
493 }
494
495 div.b-right {
496 top: 0;
497 right: 0;
498 height: 100%;
499 .background-gradient();
500 }
501
502 div.b-top {
503 top: 0;
504 height: 4px;
505 width: 100%;
506 background-color: @readBlue;
507 }
508
509 div.b-bottom {
510 bottom: 0;
511 width: 100%;
512 background-color: @gray;
513 }
514
515 .navbar-fixed-top { top: 4px }
516 }
517
518 /* BLOG PROFILE
519 -------------------------------------------------------*/
520 @writersListImgSize: 200px;
521 @writersListHeight: 50 + @writersListImgSize;
522
523 .writer-edit-area {
524 @padding: 30px;
525 width: @boxedArticlesWidth - (@padding * 2);
526 height: @writersListHeight;
527 background-color: @white;
528 .border-radius(0 0 20px 20px);
529 position: absolute;
530 padding: 0 @padding;
531 .header {
532 margin: 30px 0;
533 .name {
534 font-size: 35px;
535 margin-right: 30px;
536 }
537 }
538 }
539
540 #blog-img {
541 img {
542 width:200px;
543 height:200px;
544 border-radius:5px;
545 }
546 }
547 div#blog-url { font-size: 16px; line-height: 34px; margin-top: 20px; }
548
549 #blog-writers {
550 background-color: @white;
551 border-radius: 0px 0px 20px 20px;
552 }
553
554 @media (min-width: 450px) {
555 #blog-writers {
556 .viewport { height: @writersListHeight; }
557 .blog-writer img { width: @writersListImgSize; height: @writersListImgSize; }
558 .blog-writer .name {
559 line-height: @baseLineHeight * 0.8;
560 width: @writersListImgSize;
561 }
562 }
563 }
564 @media (max-width: 449px) {
565 #blog-writers {
566 margin-bottom: 30px;
567 .viewport { height: @writersListHeight * 0.5; }
568 .blog-writer img { width: @writersListImgSize * 0.5; height: @writersListImgSize * 0.5; }
569 .blog-writer .name {
570 font-size: 80%;
571 max-width: @writersListImgSize * 0.5
572 }
573 }
574 }
575
576 #blog-writers, #reader-categories {
577 a { cursor: pointer }
578 .blog-writer {
579 float: left;
580 .name { text-align: center }
581 }
582 .viewport {
583 overflow: hidden;
584 position: relative;
585
586 .overview {
587 list-style: none;
588 // width is set in ajax call
589 padding: 0;
590 margin: 0;
591 position: absolute;
592 left: 0;
593 top: 0;
594 }
595 }
596
597
598
599 .scrollbar {
600 position: relative;
601 clear: both;
602 height: 3px;
603
604 .track {
605 width: 100%;
606 position: relative;
607 }
608
609 .thumb {
610 background-color: @grayLight;
611 height: 3px;
612 cursor: pointer;
613 overflow: hidden;
614 position: absolute;
615 left: 0;
616 .border-radius(30px);
617
618 .end {
619 overflow: hidden;
620 height: 25px;
621 width: 3px;
622 }
623 }
624 }
625
626
627 }
628
629 #colorpicker-wrapper {
630
631 .colorpicker {
632 background-color: transparent;
633 color: black;
634 width: auto;
635 height: 350px;
636 }
637
638 #picker {
639 cursor: crosshair;
640 float: left;
641 margin: 10px;
642 border: 0;
643 }
644
645 .preview {
646 .border-radius(@inputBorderRadius);
647 border: 2px solid #000;
648 cursor: pointer;
649 height: @inputHeight - 4px;
650 width: @inputHeight - 4px;
651 float: left;
652 }
653
654 #hexVal { margin-left: 10px; }
655 }
656
657
658 /* USER PROFILE
659 ------------------------------------------------------*/
660
661 #img-profile {
662 .border-radius(20px);
663 margin: 20px;
664 border: 3px solid @white;
665 }
666
667 #profile {
668
669 #profile-inner {
670 margin: 20px 100px;
671 background-color: @white;
672 border-radius: 20px;
673 padding-bottom: 50px;
674 }
675
676 }
677
678 #bg {
679 position: fixed;
680 top: -50%;
681 left: -50%;
682 width: 200%;
683 height: 200%;
684 z-index: -2;
685
686 img {
687 position: absolute;
688 top: 0;
689 left: 0;
690 right: 0;
691 bottom: 0;
692 margin: auto;
693 width: 50%;
694 height: 50%;
695 }
696 }
697
698 #intro-vid {
699 img.yt {
700 width: 70px;
701 margin-left: 20px;
702 margin-bottom: 20px;
703 }
704 }
705
706 .editable-page #profile-inner {
707 input, select, textarea{
708 color: @textColor;
709 &:focus { color: @textColor }
710 }
711 input, textarea {
712 text-align: center;
713 background-color: transparent;
714 .border-radius(0);
715 .background-clip(padding-box);
716 .box-shadow(0 0 0 rgba(0, 0, 0, 0));
717 border-top: none;
718 border-left: none;
719 border-right: none;
720 padding: 1px;
721
722 &:focus {
723 .box-shadow(0px 0px 0px rgba(0, 0, 0, 0));
724 }
725 }
726 input {
727 width: @boxedArticlesWidth - 200; // 200px fudge
728 height: auto;
729 }
730 textarea {
731 width: 100%;
732 height: 50px;
733 }
734 }
735
736 @media (max-width: 767px) {
737 #profile #profile-inner { margin: 0 auto; border-radius:0; }
738 }
739
740 @media (min-width: 635px) {
741 #user-name, #blog-name {
742 font-size: 70px;
743 padding-left: 70px;
744 padding-right: 70px;
745 line-height: 80px;
746 input[type="text"] {
747 font-size: 70px;
748 line-height: 70px;
749 width: @boxedArticlesWidth * 0.5;
750 }
751 }
752 }
753
754 @media (min-width: 480px) and (max-width: 634px) {
755 #user-name, #blog-name {
756 font-size: 70px * 0.8;
757 line-height: 80px * 0.8;
758 padding-left: 70px * 0.8;
759 padding-right: 70px * 0.8;
760 input[type="text"] {
761 font-size: 70px * 0.8;
762 line-height: 70px * 0.8;
763 width: @boxedArticlesWidth * 0.4;
764 }
765 }
766 }
767
768 @media (max-width: 479px) {
769 #user-name, #blog-name {
770 font-size: 70px * 0.6;
771 line-height: 80px * 0.6;
772 padding-left: 70px * 0.3;
773 padding-right: 70px * 0.3;
774 input[type="text"] {
775 font-size: 70px * 0.6;
776 line-height: 70px * 0.6;
777 width: @boxedArticlesWidth * 0.3;
778 }
779 }
780 }
781
782 div#user-about, div#blog-description {
783 overflow: hidden;
784 padding: 0 80px;
785 background: transparent;
786 padding-top:0;
787 padding-bottom:0;
788 }
789
790 #user-follow {
791 a {
792 text-decoration: none;
793 color: @textColor;
794 }
795 img {
796 width: 100px;
797 height: 100px;
798 margin-bottom: 5px;
799 }
800 }
801 #following-amount { font-size: @baseFontSize * 1.25; }
802
803 @media (min-width: 370px) { & > div { padding: 30px; } }
804 @media (max-width: 369px) { & > div { padding: 0; } }
805
806 @articlePadding: 100px;
807 @articleTitleFont: 35px;
808 @media (min-width: 980px) {
809 .boxed-articles .article-inner, div#user-about, div#blog-description { padding-left: @articlePadding; padding-right: @articlePadding; }
810 }
811 @media (min-width: 768px) and (max-width: 979px) {
812 .boxed-articles .article-inner, div#user-about, div#blog-description { padding-left: @articlePadding * 0.80; padding-right: @articlePadding * 0.80; }
813 }
814 @media (min-width: 450px) and (max-width: 767px) {
815 .boxed-articles .article-inner, div#user-about, div#blog-description { padding-left: @articlePadding * 0.30; padding-right: @articlePadding * 0.30; }
816 }
817 @media (max-width: 449px) {
818 .boxed-articles .article-inner, div#user-about, div#blog-description { padding-left: @articlePadding * 0.10; padding-right: @articlePadding * 0.10; }
819 }
820 @media (min-width: 980px) {
821 .article iframe {
822 width: @boxedArticlesWidth - (@articlePadding * 2);
823 height: (@boxedArticlesWidth - (@articlePadding * 2)) * 0.625;
824 }
825 }
826 @media (max-width: 979px) {
827 .article iframe {
828 width: (@boxedArticlesWidth - (@articlePadding * 2)) * 0.36;
829 height: ((@boxedArticlesWidth - (@articlePadding * 2)) * 0.625) * 0.36;
830 }
831 }
832 @media (min-width: 450px) {
833 .article { font-size: @fontSizeArticle; }
834 .article .title a { font-size: @articleTitleFont; }
835 }
836 @media (max-width: 449px) {
837 .article { font-size: @fontSizeArticle * 0.75; }
838 .article .title a { font-size: @articleTitleFont * 0.6; }
839 }
840
841 .article {
842 font-weight: 400;
843 line-height: @lineHeightArticle;
844
845 // content retrieved from rss is wrapped with content class
846 .content {
847 p, div {
848 margin-bottom: 40px;
849 }
850 & > img {
851 margin: 30px auto;
852 display: block;
853 }
854 a {
855 color: @textColor;
856 text-decoration: underline;
857 &:hover { color: @textColor }
858 }
859 li { line-height: @lineHeightArticle; }
860 iframe { display: block; margin: 0 auto; }
861 }
862 }
863
864 .articles {
865 max-width: 660px;
866 margin-left: auto;
867 margin-right: auto;
868 }
869
870 .boxed-articles {
871 max-width: @boxedArticlesWidth;
872 margin-left: auto;
873 margin-right: auto;
874
875 .article {
876 margin-bottom: 70px;
877 background-color: @white;
878
879 .article-inner {
880 padding-top: 25px;
881 padding-bottom: 25px;
882 }
883
884 .header {
885 padding-bottom: @lineHeightArticle * 16px; // line height is em
886 .writer-name {
887 font-size: 130%;
888 vertical-align: bottom;
889 margin-left: 10px;
890 }
891
892 img {
893 width: 100px;
894 height: 100px;
895 }
896 }
897
898 .sub-header {
899 color: @grayLight;
900 font-size: @fontSizeSmall;
901 padding-top: @lineHeightArticle * 20px; // line height is em
902 padding-bottom: @lineHeightArticle * 10px; // line height is em
903 white-space: nowrap;
904 overflow: hidden;
905 text-overflow: ellipsis;
906
907 .article-sharedby {
908 a { color: @grayLight }
909 img { .border-radius(50%); width: 25px; height: 25px; }
910 }
911
912 .right-sub-header * {
913 margin-left: 15px;
914 float:right;
915 }
916 }
917
918 .title {
919 text-align: center;
920
921 a {
922 text-decoration: none;
923 font-weight: bold;
924 color: @textColor;
925 &:hover {
926 color: @textColor;
927 text-decoration: none;
928 }
929 }
930 }
931 }
932 }
933
934 .userblog-snip {
935 a {
936 text-decoration: none;
937 font-weight: bold;
938 font-size: 200%;
939 color: @textColor;
940 .url { padding-left: 30px; }
941 &:hover {
942 color: @textColor;
943 text-decoration: none;
944 }
945 }
946 }
947
948 #profile-articles-area {
949 .box-shadow(0px 0 66px rgba(50, 50, 50, 0.05));
950 padding: 50px 0 0 0;
951 background-color: @bodyBackground;
952 z-index: 10;
953 }
954
955 .up-separate {
956 margin-top: 50px;
957 }
958
959 .writer .info {
960 padding: 20px 0;
961 }
962
963 .writer .categories {
964 color: darken(@readBlue, 30%);
965 }
966
967 // golden frames for writers
968 img{
969 &.writer {
970 border:10px ridge gold;
971 border-radius: 5%;
972 }
973 }
974
975 #writers-container .writer {
976 margin: 20px 0;
977 .name {
978 font-size: 150%;
979 margin: 10px 0;
980 }
981 img {
982 width: 150px;
983 height: 150px;
984 }
985 }
986
987 @media (max-width: 768px) {
988 #writers-container { text-align: center; }
989 }
990
991
992 /* CATEGORIES
993 -------------------------------------------*/
994
995 .category.close {
996 font-size: @baseFontSize * 1.5;
997 vertical-align: middle;
998 margin: 0 10px;
999 }
1000
1001 .category-add {
1002 margin: 0 20px;
1003 margin-bottom: 15px;
1004 }
1005
1006 #chosen-categories{
1007 margin-bottom: 30px;
1008 span {
1009 width: auto;
1010 margin-right: 20px;
1011 }
1012 }
1013
1014 /* VERIFICATION
1015 ----------------------------------------------------*/
1016
1017 #writer-list {
1018 label {
1019 display: inline-block;
1020 cursor: pointer;
1021 width:150px;
1022 padding: 20px;
1023 text-align: center;
1024 img {
1025 width: 100px;
1026 height: 100px;
1027 }
1028 input[type="radio"] { display: none; }
1029 }
1030 .selected { background-color: #ccc; }
1031 }
1032
1033 #backgrounds-list {
1034 label {
1035 display: inline-block;
1036 cursor: pointer;
1037 padding: 20px;
1038 text-align: center;
1039 img {
1040 width: 150px;
1041 height: 100px;
1042 }
1043 input[type="radio"] { display: none; }
1044 }
1045 .selected { background-color: #ccc; }
1046 }
1047
1048
1049 /* GALLERY OF WRITERS
1050 ----------------------------------------------------*/
1051
1052 #gallery {
1053 @amountOfWriters: 8;
1054
1055 margin-bottom: 30px;
1056
1057 .container {
1058 position: relative;
1059 z-index: 9;
1060
1061 }
1062
1063 .tab-pane {
1064 //height: 420px;
1065 }
1066
1067 .tab-content {
1068
1069 }
1070
1071 img.bg {
1072 //position: absolute;
1073 //top: @navbarHeight;
1074 //left: 0;
1075 min-width: 100%;
1076 height: 800px;
1077 margin-top: (@gridRowWidth1200 / @amountOfWriters) - 35px;
1078 }
1079
1080 .gallery-img {
1081 //margin-top: 100px;
1082 img {
1083 width: 500px;
1084 .rotate(10deg);
1085 .box-shadow(0 0 25px rgba(0,0,0,0.6));
1086 }
1087 }
1088
1089 .gallery-caption {
1090 .info {
1091 background-color: rgba(0,0,0,0.4);
1092 .border-radius(10px);
1093 padding: 30px;
1094 }
1095 position: static;
1096 //margin-top: 200px;
1097 margin-top: -250px;
1098
1099 h1, h3, h4, p, span, small, .lead {
1100 margin: 0;
1101 line-height: 1.25;
1102 color: @white;
1103 text-shadow: 0 1px 1px rgba(0,0,0,.4);
1104 }
1105 }
1106
1107
1108
1109 #nav-buttons {
1110 //margin-top: -35px;
1111 position: absolute;
1112 top: 0;
1113 left: 0;
1114 display: block;
1115 box-shadow: 0px 0px 1px 4px @bodyBackground;
1116 width: @gridRowWidth1200;
1117 height: @gridRowWidth1200 / @amountOfWriters;
1118 .box-shadow(0px 0px 1px 4px #fff);
1119 a {
1120 display: block;
1121 float: left;
1122 width: @gridRowWidth1200 / @amountOfWriters;
1123 img { width: @gridRowWidth1200 / @amountOfWriters; }
1124 }
1125 }
1126 }
1127
1128
1129 /* MY FIXES
1130 ----------------------------------------------------------*/
1131
1132 #bg-fileupload { margin-top: 10px; }
1133
1134 .btn:hover, .btn:focus { color: @white; }
1135
1136 #myblog, #writerswelove {
1137 margin-bottom: @navbarHeight + @emailSignupHeight + 5px;
1138 }
1139
1140 #notices-container {
1141 position:fixed;
1142 top: @navbarHeight * 2;
1143 left: 0;
1144 width: 10px;
1145 min-height: 100px;
1146 z-index: @zindexNotice;
1147
1148 .alert {
1149 min-width: 10%;
1150 width: 200px;
1151 min-height: 100px;
1152 }
1153 }
1154
1155 #notices-container-top {
1156 position:fixed;
1157 top: @navbarHeight;
1158 width: 50.5%;
1159 left: 62.25%;
1160 margin: 0 0 0 -37.5%;
1161 height: 0;
1162 z-index: @zindexNotice;
1163
1164 .alert {
1165 .border-radius(0px 0px 25px 25px);
1166 button, input { margin: 0 }
1167 .box-shadow(0 1px 4px rgba(0, 0, 0, 0.065));
1168 }
1169 }
1170
1171 .control-group {
1172 margin: 0;
1173 .controls > .notice-block {
1174 font-size: 13px;
1175 ul {
1176 list-style: none;
1177 margin: 0;
1178 li { text-align: left }
1179 }
1180 }
1181 }
1182
1183 .alert ul {
1184 list-style: none;
1185 margin-bottom: 0;
1186 }
1187
1188 body { overflow-y: scroll; }
1189 footer {
1190 margin-top: 50px;
1191 padding-bottom: 5%;
1192 text-align: center;
1193 background-color: @gray;
1194 color: @white;
1195 a {
1196 color: @white;
1197 &:hover{ color: @white }
1198 }
1199 }
1200
1201 .navbar-form {
1202 input, .btn { margin-bottom: 10px; }
1203 }
1204
1205 .btn-bold { font-weight: bold }
1206
1207 .nolink-decoration * {
1208 &, &:hover, &:focus {
1209 color: @textColor;
1210 text-decoration: none;
1211
1212 .btn { color: @white; }
1213 }
1214 }
1215
1216 .nolink-decoration {
1217 &, &:hover, &:focus {
1218 color: @textColor;
1219 text-decoration: none;
1220 .btn { color: @white; }
1221 }
1222 }
1223
1224
1225 /******************
1226 BELOW IS BY ELTIMN
1227 *******************/
1228
1229 // FORM FIELD FEEDBACK STATES
1230 // --------------------------
1231
1232 /**
1233 * Default is to change the color of the help text to the same as the alert.
1234 * This returns help text to original color.
1235 */
1236 .customFormFieldState(@groupColor) {
1237 .help-block,
1238 .help-inline {
1239 color: lighten(@textColor, 15%); // lighten the text some for contrast
1240 }
1241 }
1242
1243 .control-group.warning {
1244 &.warning { .customFormFieldState(@warningText); }
1245 &.error { .customFormFieldState(@errorText); }
1246 &.success { .customFormFieldState(@successText); }
1247 &.info { .customFormFieldState(@infoText); }
1248 }
1249
1250 .alert-block {
1251 .warning { color: @warningText; }
1252 .error { color: @errorText; }
1253 .success { color: @successText; }
1254 .info { color: @infoText; }
1255 }
1256
1257
1258 // fixes gap between navbar and section below it
1259 @media (max-width: @navbarCollapseWidth) {
1260 .navbar-fixed-top {
1261 margin-bottom: 0px;
1262 }
1263 }