screen.sass 11.5 KB
Newer Older
1 2
/*!
 * Foris - web administration interface for OpenWrt based on NETCONF
3
 * Copyright (C) 2013 CZ.NIC, z.s.p.o. <http://www.nic.cz>
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

19 20 21
@import compass/css3
@import compass/reset
@import compass/typography/vertical_rhythm
22
@import compass/utilities/general/clearfix
23 24 25 26 27 28 29 30 31 32
@import partial/icons
@import partial/treeview

// ---------------------------------------------------------------------------
// Variables
$background-color: #fff
$foreground-color: #000
$highlight-color: #a32027
$highlight-color-active: lighten(desaturate($highlight-color, 20), 15)
$link-color: #004477
33
$stroke-color: #888
34 35 36 37 38 39
$base-font: Helvetica, Arial, sans-serif
$heading-font: $base-font
$button-height: 2em
$info-color: #3ab54a
$error-color: #cc0000

40 41 42 43 44 45
// messages background colors
$message-color-success: #6d8
$message-color-info: #0ac
$message-color-warning: #fc0
$message-color-error: #c33

46 47 48 49 50
// buttons
$button-color: $highlight-color
$button-color-active: $highlight-color-active
$button-color-grayed: #808080

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
/* -------------------------------------------------------------------------
/* Generic elements
h1, h2, h3, h4, h5, h6
  font-family: $heading-font
  font-weight: bold
  margin-bottom: 0.8em

em
  font-style: italic

strong
  font-weight: bold

h1
  +adjust-font-size-to(38px)

h2
  +adjust-font-size-to(32px)

h3
  +adjust-font-size-to(26px)

73 74 75
h4
  +adjust-font-size-to(20px)

76 77 78
p
  margin-bottom: 1.5em

79 80 81 82 83 84
a
  color: $highlight-color

  &:hover
    color: $highlight-color-active

85 86 87 88 89 90
pre
  font-family: "Courier New", Courier, monospace
  font-size: 80%
  line-height: 110%
  margin: 0.5em 0

91 92 93 94 95 96 97 98
::selection
  background-color: $highlight-color
  color: #fff

::-moz-selection
  background-color: $highlight-color
  color: #fff

99 100 101
.footnote
  +adjust-font-size-to(14px)

102 103 104 105 106 107 108 109 110
/* -------------------------------------------------------------------------
/* Layout
@include establish-baseline

body, html
  background-color: $background-color
  color: $foreground-color
  font:
    family: $base-font
111 112
  position: relative
  min-width: 60em
113

114 115

#page
116
  margin: 0 auto 2em
117
  width: 60em
118

119 120 121
  @media all and (max-width: 82em)
    margin-top: 1.5em

122

123 124 125 126 127
#language-switch
  +adjust-font-size-to(14px)
  position: absolute
  right: 1em
  top: 0
128 129 130 131

  @media all and (max-width: 82em)
    top: -1.5em
    right: 0
132 133 134 135 136 137 138
/* -------------------------------------------------------------------------
/* Common config interface elements
button
  border: none


.button, button
139
  background-color: $button-color
140 141 142 143 144 145 146 147
  color: #fff
  display: inline-block
  font:
    size: 90%
    weight: bold
  height: $button-height
  line-height: $button-height
  margin-right: $button-height / 2
148
  padding: 0 1.2em 0 1.2em
149 150
  position: relative
  text-decoration: none
151
  vertical-align: middle
152 153 154
  z-index: 999

  &:hover
155
    background-color: $button-color-active
156 157 158
    color: #fff

    &:before
159
      background-color: $button-color-active
160

161 162 163 164

  &.grayed, &[disabled]
    background-color: $button-color-grayed

165
    &:hover, &:hover:before
166 167
      background-color: lighten(desaturate($button-color-grayed, 20), 15)

168 169 170
    &:before
      background-color: $button-color-grayed

171 172 173 174 175 176 177 178 179 180 181 182
.button-arrow-right
  @extend .button

  &:before
    background: $highlight-color
    border: none
    content: " "
    display: block
    height: $button-height/sqrt(2)
    width: $button-height/sqrt(2)
    right: - $button-height / 2.8
    position: absolute
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199
    top: 14%
    +transform(rotate(45deg))
    z-index: -1

.button-arrow-left
  @extend .button

  &:before
    background: $highlight-color
    border: none
    content: " "
    display: block
    height: $button-height/sqrt(2)
    width: $button-height/sqrt(2)
    left: - $button-height / 2.8
    position: absolute
    top: 14%
200 201
    +transform(rotate(45deg))
    z-index: -1
202

203 204 205 206
.button-next
  @extend .button-arrow-right
  float: right
  margin-top: 1em
207

208 209 210 211 212
.button-prev
  @extend .button-arrow-left
  float: left
  margin-top: 1em

213 214 215
.tabs
  border-bottom: 1px solid $stroke-color
  position: relative
216 217 218 219
  +pie-clearfix

  ul, li
    vertical-align: bottom
220

221 222 223
  li
    background-color: #e6e6e6
    border: 1px solid $stroke-color
224 225 226 227 228
    display: block
    float: left
    margin-right: 0.5em
    position: relative
    top: 1px
229

230 231 232 233 234 235 236
    a
      color: $foreground-color
      display: block
      line-height: 2.6em
      height: 2.6em
      padding: 0 1em
      text-decoration: none
237

238 239
    &:first-child
      margin-left: 3em
240

241 242
    &.active
      background-color: $background-color
243
      border-bottom: 1px solid #fff
244
      font-weight: bold
245
      margin-top: -0.25em
246

247 248
      a
        padding-top: 0.25em
249

250
.message
251 252 253 254 255 256
  background:
    position: 0.8em 50%
    repeat: no-repeat

  color: #000
  padding: 1em 1em 1em 3.2em
257 258 259
  margin-bottom: 0.5em

  &.success
260
    background-image: inline-image('../.inline-assets/message-success.png')
261
    background-color: $message-color-success
262 263

  &.info
264
    background-image:  inline-image('../.inline-assets/message-info.png')
265
    background-color: $message-color-info
266 267

  &.warning
268
    background-image:  inline-image('../.inline-assets/message-warning.png')
269
    background-color: $message-color-warning
270 271

  &.error
272
    background-image:  inline-image('../.inline-assets/message-error.png')
273 274 275 276 277 278 279 280 281
    background-color: $message-color-error
    color: #fff

.notification
  color: #000
  padding: 1.5em
  margin-bottom: 1em
  position: relative

282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297
  .button
    background-color: #fff
    color: $highlight-color

  .buttons
    margin-top: 1em

  .dismiss
    position: absolute
    right: 0.2em
    top: 0.2em
    text-decoration: none
    font-weight: bold
    font-size: 200%
    color: inherit

298 299
  &.restart
    background-color: $message-color-error
300 301
    color: #fff

302 303 304 305 306 307 308 309 310
  &.error
    background-color: $message-color-warning

  &.update
    background-color: $message-color-success

  &.news
    background-color: $message-color-info

311

Jan Čermák's avatar
Jan Čermák committed
312 313 314 315
input, textarea, select
  background-color: $background-color
  border: 1px solid $stroke-color
  padding: 0.5em
316
  font-size: 12px
Jan Čermák's avatar
Jan Čermák committed
317
  width: 25em
318 319
  box-sizing: content-box
  -moz-box-sizing: content-box
Jan Čermák's avatar
Jan Čermák committed
320

321 322
input[type="checkbox"], input[type="radio"], input[type="file"]
  border: none
323 324
  width: auto

325
.wizard-form, .config-form, .maintenance-form, .dns-form
326 327
  +pie-clearfix

328
  & > .row
329 330
    padding: 0.25em 0

331
    div.radio-inputs
332 333 334 335 336 337 338
      display: inline-block
      width: 19.625em

      label
        margin-right: 1em
        width: auto

339 340 341 342 343 344
  label
    display: inline-block
    font-weight: bold
    vertical-align: middle
    width: 12em

345 346 347
  .field-hint, .field-loading, .field-validation-fail, .field-validation-pass
    vertical-align: middle

348
  .field-validation-pass
349
    background: inline-image('../.inline-assets/icon-success.png') no-repeat right 50%
350 351 352
    border-color: $info-color
    color: $info-color

353
  .field-validation-fail
354
    background: inline-image('../.inline-assets/icon-fail.png') no-repeat right 50%
355 356 357
    border-color: $error-color
    color: $error-color

358
  .validation-container, .server-validation-container
359 360
    color: $error-color
    margin-left: 12.5em
361
    width: 19.5em
362 363 364

    ul
      +adjust-font-size-to(14px)
365 366


367 368 369 370 371
.wizard-form-wifi, .config-form-wifi
  position: relative

#wifi-qr
  position: absolute
372
  bottom: 2.8em
373 374
  right: 0

375 376 377
  .config-form &
    bottom: 4em

378 379 380 381 382 383
  .qr-error
    color: $error-color
    font-weight: bold
    text-align: center
    width: 200px
    position: relative
384
    padding: 0 1em 1em 0
385

386 387


388 389 390 391 392 393 394
.background-progress
  color: #444
  text-align: center

  img
    margin-bottom: 2em

395
.form-buttons
396
  float: right
397
  margin-top: 1.5em
398

399
#time-success, #updater-success, #updater-fail, #connectivity-success, #connectivity-fail, #connectivity-nodns
400
  display: none
401 402
  text-align: center

403 404 405 406
#connectivity-retest
  @extend .button
  margin: 0 0 2em

407
#wizard-time-sync-success
408 409 410 411 412 413 414
  display: none

#logout
  position: absolute
  right: 1em
  top: 1em

415
#form-error-box
416
  margin: 0px 12em
417 418 419
  padding: 6px
  color: $error-color

Jan Čermák's avatar
Jan Čermák committed
420 421 422 423 424 425
/* -------------------------------------------------------------------------
/* Login page
#login-page
  padding-top: 2em
  text-align: center

426 427 428 429
  p
    margin: 0 auto 2em auto
    width: 30em

Jan Čermák's avatar
Jan Čermák committed
430 431 432 433 434 435 436 437 438 439 440 441
  label
    display: none

  input
    height: 3em
    line-height: 3em
    width: 25em

  button
    font-size: 100%
    height: 3em
    line-height: 3em
442
    margin-right: 0
443
    vertical-align: middle
Jan Čermák's avatar
Jan Čermák committed
444

445 446 447 448 449 450
  .message
    margin-left: auto
    margin-right: auto
    text-align: left
    width: 25em

451 452 453 454 455 456
  .footer
    font-size: 90%
    color: #333
    line-height: 160%
    margin-top: 2em

Jan Čermák's avatar
Jan Čermák committed
457

458 459 460 461
/* -------------------------------------------------------------------------
/* Wizard
#wizard-header
  border-bottom: 1px solid $stroke-color
462
  padding: 1.6em 0 0.5em
463

464
  .wizard-steps
465
    float: right
466 467 468 469 470 471 472 473 474
    margin-top: -1.5em
    text-align: right

    a
      +adjust-font-size-to(12px)

    .stepno
      +adjust-font-size-to(36px)
      font-weight: bold
475

476 477
    .stepno-current
      font-weight: normal
478 479 480 481 482 483 484 485

#wizard-icon
  float: left
  width: 120px

#wizard-icon + #wizard-content
  margin-left: 125px

486
#wizard-content
487 488 489
  h1
    margin-top: 1em

490 491 492 493 494 495 496 497 498
  p
    margin-bottom: 1em

    &.activation-code
      font-size: 150%
      font-weight: bold

    &.wizard-description
      margin-bottom: 2em
499 500 501 502 503 504 505 506 507 508 509 510 511

/* -------------------------------------------------------------------------
/* Config
#config-header
  position: relative

  h1
    background: url('../img/wizard/step-wan.png') no-repeat
    display: inline-block
    padding-left: 120px
    height: 120px
    line-height: 120px

512 513 514
    a
      color: inherit

515 516 517 518 519 520 521
  .logo-turris
    display: inline-block
    position: absolute
    right: 0
    top: 55px

.config-description
522
  margin-bottom: 2.5em
523 524 525 526 527 528 529 530 531 532

.config-form
  position: relative

  .button
    font-size: 100%
    height: 3em
    line-height: 3em
    margin-right: 0.5em

533 534 535
.config-page
  padding-top: 2.5em

536 537 538 539 540 541
  h1, h2, h3, h4
    margin-top: 0.8em

    &:first-child
      margin-top: 0

542 543 544 545 546 547 548
/* -------------------------------------------------------------------------
/* "About" page
#page-about
  p
    margin-bottom: 1em

  table
549
    margin-bottom: 1em
550 551 552 553 554 555 556 557 558 559
    width: 100%

    th, td
      padding: 0.2em 0

    th
      font-weight: bold

  #registration-code-update
    vertical-align: middle
560

561 562 563 564
  #registration-code-loader
    vertical-align: middle

  #registration-code-fail
565 566
    @extend .message
    @extend .message.error
567 568 569 570 571 572 573 574
    display: none

    p:last-child
      margin-bottom: 0

  #registration-code
    font-size: 130%
    font-weight: bold
575 576 577

/* -------------------------------------------------------------------------
/* "DNS" page
578 579 580 581
#page-dns
  form
    margin-bottom: 1em

582 583 584
#connection-test-fail
  display: none

585 586 587
#connection-test-loader
  vertical-align: middle

588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607
#test-results
  margin-bottom: 1em

  tr
    td
      padding: 0.3em 0

    td:first-child
      width: 16em

  thead
    th
      font-weight: bold

  .test-success, .test-fail
    font-weight: bold
    padding-left: 24px


  .test-success
608
    background: inline-image('../.inline-assets/icon-success.png') no-repeat left 50%
609 610 611 612
    border-color: $info-color
    color: $info-color

  .test-fail
613
    background: inline-image('../.inline-assets/icon-fail.png') no-repeat left 50%
614 615
    border-color: $error-color
    color: $error-color