8 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
10 // Left: hall, variants, problems, mygames
11 // Right: usermenu, settings
13 label.drawer-toggle(for="drawerControl")
14 input#drawerControl.drawer(type="checkbox")
15 #menuBar(@click="hideDrawer($event)")
16 label.drawer-close(for="drawerControl")
20 router-link(to="/mygames")
21 | {{ st.tr["My games"] }}
22 router-link(to="/variants")
23 | {{ st.tr["Variants"] }}
24 router-link(to="/problems")
25 | {{ st.tr["Problems"] }}
27 .clickable(onClick="window.doClick('modalUser')")
28 | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }}
29 #divSettings.clickable(onClick="window.doClick('modalSettings')")
30 span {{ st.tr["Settings"] }}
31 img(src="/images/icons/settings.svg")
34 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
36 router-link.menuitem(to="/about") {{ st.tr["About"] }}
37 router-link.menuitem(to="/news") {{ st.tr["News"] }}
38 p.clickable(onClick="window.doClick('modalContact')")
39 | {{ st.tr["Contact"] }}
43 import ContactForm from "@/components/ContactForm.vue";
44 import Settings from "@/components/Settings.vue";
45 import UpsertUser from "@/components/UpsertUser.vue";
46 import { store } from "./store.js";
47 import { processModalClick } from "./utils/modalClick.js";
60 let dialogs = document.querySelectorAll("div[role='dialog']");
61 dialogs.forEach(d => {
62 d.addEventListener("click", processModalClick);
66 hideDrawer: function(e) {
67 if (e.target.innerText == "Forum") return; //external link
68 e.preventDefault(); //TODO: why is this needed?
69 document.getElementsByClassName("drawer")[0].checked = false;
77 font-family: "Open Sans", Arial, sans-serif
79 --a-visited-color: black
84 --fore-color: #1c1e10 //#2c3e50
85 //--back-color: #f2f2f2
86 background-image: radial-gradient(white, #e6e6ff) //lavender)
89 -webkit-font-smoothing: antialiased
90 -moz-osx-font-smoothing: grayscale
93 // 45px is footer height
94 min-height: calc(100vh - 45px)
106 justify-content: center
121 input[type="checkbox"]:focus
124 input[type=checkbox]:checked:before
140 vertical-align: middle
144 vertical-align: middle
146 @media screen and (max-width: 767px)
158 @media screen and (min-width: 768px)
164 justify-content: flex-start
166 display: inline-block
168 &.router-link-exact-active
175 justify-content: flex-end
177 display: inline-block
178 @media screen and (max-width: 767px)
184 &.router-link-exact-active
188 border-top: 1px solid darkgrey
190 @media screen and (max-width: 767px)
194 & > label.drawer-toggle
199 //padding: -5px 0 0 10px
201 z-index: 5000 //to hide currently selected piece if any
203 [type="checkbox"].drawer+*
206 [type=checkbox].drawer+* .drawer-close
208 left: var(--universal-margin)
211 [type=checkbox].drawer+* .drawer-close:before
214 @media screen and (max-width: 767px)
217 button:not(:first-child)
218 border-left: 1px solid var(--button-group-border-color)
223 border: 1px solid #ddd
224 box-sizing: border-box
225 //background-color: #000033
231 justify-content: center
232 & > .router-link-exact-active
233 color: #42b983 !important
234 text-decoration: none
236 display: inline-block
242 text-decoration: none
244 display: inline-block
247 @media screen and (max-width: 767px)
251 // Styles for diagrams and board (partial).
252 // TODO: where to put that ?
255 background-color: #e5e5ca
258 background-color: #6f8f57
263 display: inline-block
268 padding-bottom: 12.5%
281 img.piece, img.mark-square
295 filter: brightness(50%)