comparison MoinMoin/themes/basic/static/custom-less/theme.less @ 2798:371230784e21

add basic theme support for sm and xs viewport sizes
author RogerHaase <haaserd@gmail.com>
date Wed, 01 Oct 2014 07:55:21 -0700
parents eb4595aea80b
children 9b612ad41772
comparison
equal deleted inserted replaced
2797:1a14f5755290 2798:371230784e21
1 @import "notice.less"; 1 @import "notice.less";
2
3 /* start of bootstrap.less */
2 @import "bootstrap.less"; 4 @import "bootstrap.less";
5 /* end of bootstrap.less */
6
3 @import "moin-variables.less"; 7 @import "moin-variables.less";
8
9 /* start of pygments colorful.css */
4 @import (less) "colorful.css"; 10 @import (less) "colorful.css";
5 11 /* end of pygments colorful.css */
6 // ---- Customising the top navbar breakpoint 12
7 @grid-float-breakpoint: @screen-md; 13 /* start of basic custom css */
8 14
15 @grid-float-breakpoint: @screen-xs;
9 @media screen and (min-width: @grid-float-breakpoint) { 16 @media screen and (min-width: @grid-float-breakpoint) {
10 .moin-pull-right { 17 .moin-pull-right {
11 .pull-right; 18 .pull-right;
12 } 19 }
13 } 20 }
83 .moin-viewoptions, .moin-itemactions, .moin-useractions { 90 .moin-viewoptions, .moin-itemactions, .moin-useractions {
84 float: right; 91 float: right;
85 } 92 }
86 93
87 .list-group-item { 94 .list-group-item {
95 text-align: left;
88 padding: 5px 10px; 96 padding: 5px 10px;
89 background-color: @search_option_bar_text_color; 97 background-color: @search_option_bar_text_color;
90 border: 1px solid @search_option_bar_text_color; 98 border: 1px solid @search_option_bar_text_color;
91 > a { 99 > a {
92 color: @search_option_bar_color; 100 color: @search_option_bar_color;
143 &:hover { 151 &:hover {
144 color: @link-nonexistent-hover-color; 152 color: @link-nonexistent-hover-color;
145 } 153 }
146 } 154 }
147 155
148 .moin-sidebar { 156 .moin-sidebar-panels {
149 .list-group; 157 .list-group;
150 overflow: hidden; 158 overflow: hidden;
159 padding-top: 15px;
160 }
161
162 .moin-sidebar-panels a .hidden-sm,
163 .moin-sidebar-panels a .hidden-xs {
164 display: inline !important;
165 }
166
167 .moin-sidebar-panels .moin-sidebar-form {
168 padding-bottom: 10px;
151 } 169 }
152 170
153 .moin-navbar-inverse { 171 .moin-navbar-inverse {
154 .navbar-inverse; 172 .navbar-inverse;
155 background-color: @moin-navbar-inverse-bgcolor; 173 background-color: @moin-navbar-inverse-bgcolor;
276 294
277 .moin-navbar-header{ 295 .moin-navbar-header{
278 .navbar-header; 296 .navbar-header;
279 padding-left: 0px; 297 padding-left: 0px;
280 padding-right: 0px; 298 padding-right: 0px;
299 }
300
301 .moin-navbar-header > button {
302 float: left;
281 } 303 }
282 304
283 .moin-toggle-comments-button, .moin-transclusions-button{ 305 .moin-toggle-comments-button, .moin-transclusions-button{
284 font-weight: normal; 306 font-weight: normal;
285 } 307 }
907 content: url("../img/smileys/tired.png"); 929 content: url("../img/smileys/tired.png");
908 } 930 }
909 .moin-tongue:before { 931 .moin-tongue:before {
910 content: url("../img/smileys/tongue.png"); 932 content: url("../img/smileys/tongue.png");
911 } 933 }
934
935 /* Support for extra small viewports */
936 @media screen and (max-width: @screen-sm-min) {
937 #moin-main-wrapper {
938 position: relative;
939 }
940 /* Set sidebar width and shift off canvas */
941 .moin-sidebar {
942 position: absolute;
943 top: 0;
944 width: 33%;
945 }
946 .moin-sidebar {
947 left: -33%;
948 }
949 /* When user toggles button (see basic.js) show/hide sidebar */
950 #moin-main-wrapper.showsidebar {
951 left: 33%;
952 }
953 /* TODO why does bootstrap display navbar-toggle only at width < 480 when <780 is wanted */
954 .navbar-toggle {
955 position: relative;
956 float: left;
957 margin-right: 15px;
958 padding: 9px 10px;
959 margin-top: 8px;
960 margin-bottom: 8px;
961 background-color: transparent;
962 background-image: none;
963 border: 1px solid transparent;
964 border-radius: 4px;
965 display: inline;
966 }
967 .navbar-toggle:focus {
968 outline: none;
969 }
970 .navbar-toggle .icon-bar {
971 display: block;
972 width: 22px;
973 height: 2px;
974 border-radius: 1px;
975 }
976 .navbar-toggle .icon-bar + .icon-bar {
977 margin-top: 4px;
978 }
979
980 }