ctf-server
old server for hosting capture-the-flag
git clone https://9o.is/git/ctf-server.git
styles.less
(4963B)
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 // @import "bootstrap/mixins-2.3.2.less";
15
16 // Grid system and page structure
17 @import "bootstrap/scaffolding.less";
18 @import "bootstrap/grid.less";
19 @import "bootstrap/layouts.less";
20
21 // Base CSS
22 @import "bootstrap/type.less";
23 @import "bootstrap/code.less";
24 @import "bootstrap/forms.less";
25 @import "bootstrap/tables.less";
26
27 // Components: common
28 @import "bootstrap/sprites.less";
29 @import "bootstrap/dropdowns.less";
30 @import "bootstrap/wells.less";
31 @import "bootstrap/panel.less";
32 @import "bootstrap/component-animations.less";
33 @import "bootstrap/close.less";
34
35 // Components: Buttons & Alerts
36 @import "bootstrap/buttons.less";
37 @import "bootstrap/button-groups.less";
38 @import "bootstrap/alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
39
40 // Components: Nav
41 @import "bootstrap/navs.less";
42 @import "bootstrap/navbar.less";
43 @import "bootstrap/breadcrumbs.less";
44 @import "bootstrap/pagination.less";
45 @import "bootstrap/pager.less";
46
47 // Components: Popovers
48 @import "bootstrap/modals.less";
49 @import "bootstrap/tooltip.less";
50 @import "bootstrap/popovers.less";
51
52 // Components: Misc
53 @import "bootstrap/thumbnails.less";
54 @import "bootstrap/media.less";
55 @import "bootstrap/labels-badges.less";
56 @import "bootstrap/progress-bars.less";
57 @import "bootstrap/accordion.less";
58 @import "bootstrap/carousel.less";
59 @import "bootstrap/hero-unit.less";
60
61 // This needs to be set before the responsive classes when using .navbar-fixed-top
62 body {
63 padding-top: 40px;
64 }
65
66 // RESPONSIVE CLASSES
67 // ------------------
68
69 @import "bootstrap/responsive-utilities.less";
70
71
72 // MEDIA QUERIES
73 // ------------------
74
75 // Large desktops
76 @import "bootstrap/responsive-1200px-min.less";
77
78 // Tablets to regular desktops
79 @import "bootstrap/responsive-768px-979px.less";
80
81 // Phones to portrait tablets and narrow desktops
82 @import "bootstrap/responsive-767px-max.less";
83
84
85 // RESPONSIVE NAVBAR
86 // ------------------
87
88 // From 979px and below, show a button to toggle navbar contents
89 @import "bootstrap/responsive-navbar.less";
90
91
92 // Utility classes
93 @import "bootstrap/utilities.less"; // Has to be last to override when necessary
94
95 @import "bootswatch.less";
96
97 /*********************************************************
98 * Custom styles
99 *********************************************************
100 */
101
102 body { padding-top: 0; }
103
104 .text-primary { color: @blue; }
105 .text-warning { color: @yellow; }
106 .text-danger { color: @red; }
107 .text-success { color: @green; }
108 .text-info { color: @purple; }
109
110 .text-UserJoined { .text-info() }
111 .text-CorrectGuess { .text-success() }
112 .text-WrongGuess { .text-danger() }
113
114 #main { padding-top: 100px;}
115 .panel-body ul {
116 list-style-type: none;
117 margin-left: 0;
118 }
119
120 /* Special class on .container surrounding .navbar, used for positioning it into place. */
121 .navbar-wrapper {
122 position: fixed;
123 top: 0;
124 left: 0;
125 right: 0;
126 z-index: 10;
127 margin-top: 20px;
128 margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
129 }
130 .navbar-wrapper .navbar {
131
132 }
133
134 /* Remove border and change up box shadow for more contrast */
135 .navbar .navbar-inner {
136 border: 0;
137 -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
138 -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
139 box-shadow: 0 2px 10px rgba(0,0,0,.25);
140 }
141
142 /* Downsize the brand/project name a bit */
143 .navbar .brand {
144 padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
145 font-size: 16px;
146 font-weight: bold;
147 text-shadow: 0 -1px 0 rgba(0,0,0,.5);
148 }
149
150 /* Navbar links: increase padding for taller navbar */
151 .navbar .nav > li > a {
152 padding: 15px 20px;
153 }
154
155 /* Offset the responsive button for proper vertical alignment */
156 .navbar .btn-navbar {
157 margin-top: 10px;
158 }
159
160 @media (min-width: 980px) {
161 #abs-r {
162 position: absolute;
163 z-index: 150;
164 width: 40%;
165 top: 100px;
166 right: 20px;
167
168 .panel {
169 width: 48%;
170 ul { height: 400px; }
171 }
172
173 #chat-message-box, #broadcast-message-box { overflow-y: auto; }
174 }
175 }
176 @media (max-width: 979px) {
177 #abs-r { display: none; }
178 }
179
180 .alert > ul {
181 list-style: none;
182 margin-bottom: 0;
183 }
184
185 .layer path {
186 stroke-opacity: 0.5;
187 stroke: @red;
188 stroke-width: 3;
189 &.captured {
190 stroke: @green;
191 }
192 }
193
194 .layer circle[id^="map-flag"] {
195 fill: @red;
196 stroke: @red;
197 &.captured, &.winner {
198 fill: @green;
199 stroke: @green;
200 }
201 }
202
203 .layer circle[id^="map-challenge"] {
204 fill: @blue;
205 stroke: @blue;
206 fill-opacity: 0.4;
207 }