wekan/client/components/main/layouts.styl
Lauri Ojansivu 0a5f9307d2 Smaller board icons to All Boards Page, and use full page width, so more board icons fit visible at once.
Removed variable height, because different heights made it look a little unbalanced.

Thanks to xet7 !
2020-11-02 15:47:00 +02:00

539 lines
7.8 KiB
Stylus

@import 'nib'
global-reset()
*
-webkit-box-sizing: unset
box-sizing: unset
.note-popover .popover-content .note-color-palette div .note-color-btn, .panel-heading.note-toolbar .note-color-palette div .note-color-btn
background: none
a:focus
outline: unset
outline-offset: unset
a:hover,a:focus
color: unset
text-decoration: unset
.badge
display: unset
min-width: unset
padding: unset
font-size: unset
font-weight: unset
line-height: unset
color: unset
text-align: unset
white-space: unset
vertical-align: unset
background-color: unset
border-radius: unset
html, body, input, select, textarea, button
font: 14px Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif
line-height: 18px
color: #4d4d4d
html
font-size: 100%
max-height: 100%
user-select: none
-webkit-text-size-adjust: 100%
body
background: darken(white, 13%)
margin: 0
position: relative
z-index: 0
overflow-y: auto
display: flex
flex-direction: column
height: 100vh
#content
position: relative
flex: 1
overflow-x: hidden
.sk-spinner
margin-top: 30vh
> .wrapper
margin-top: 10px
padding: 15px
#modal
position: absolute
top: 0
bottom: 0
left: 0
right: 0
background: rgba(0, 0, 0, 0.6)
z-index: 100
overflow-y: auto
.modal-content
width: 500px
min-height: 160px
margin: 42px auto
padding: 12px
border-radius: 4px
background: darken(white, 13%)
z-index: 110
h2
margin-bottom: 25px
.modal-close-btn
display: block
float: right
font-size: 24px
.modal-content-wide
width: 800px
min-height: 0px
margin: 42px auto
padding: 12px
border-radius: 4px
background: darken(white, 13%)
z-index: 110
h2
margin-bottom: 25px
.modal-close-btn
display: block
float: right
font-size: 24px
h1
font-size: 22px
line-height: 1.2em
margin: 0 0 10px
h2
font-size: 18px
line-height: 1.2em
margin: 0 0 9px
h3, h4, h5, h6
font-size: 16px
line-height: 1.25em
margin: 0 0 6px
.quiet, .quiet a
color: #8c8c8c
.error, .error a
color: #eb3800
.no-items-message
color: darken(white, 60%)
margin: 30px 0
text-align: center
.warning
background: #f0ecdb
border-radius: 3px
color: #aa8f09
padding: 6px 8px
a
color: #aa8f09
.small
font-size: 0.8em
a
color: inherit
cursor: pointer
text-decoration: none
&.is-disabled,
&.is-disabled:hover
cursor: default
text-decoration: none
span a
text-decoration: underline
strong
font-weight: bold
p
user-select: text
a
text-decoration: underline
word-wrap: break-word
table, p
margin-bottom: 8px
pre
margin: 15px 0
white-space: pre
max-height: 516px
pre,
code,
tt
font-family: lucida console, monospace
line-height: 1.25em
blockquote
margin: 8px 0 8px 8px
border-left: 1px solid #ccc
color: #666
padding: 0 0 0 8px
hr
height: 1px
border: 0
border: none
width: 100%
background: #dbdbdb
color: #dbdbdb
margin: 15px 0
padding: 0
table, td, th
vertical-align: top
border-top: 1px solid #ccc
border-left: 1px solid #ccc
td, th
padding: 5px
border-right: 1px solid #ccc
border-bottom: 1px solid #ccc
th
font-weight: 700
thead
background: #fff
background: linear-gradient(to bottom, #fff 0, #f0f0f0 100%)
tbody
background-color: #fff
dl, dt
margin-bottom: 8px
dd
margin: 0 0 16px 24px
kbd
padding: 1px 3px
margin: 3px
font-weight: bold
background: darken(white, 2%)
border-radius: 3px
border: 1px solid darken(white, 10%)
color: unset
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.15)
.clear
clear: both
.clearfix
clearfix()
.hide
display: none
.show
display: block
.bold
font-weight: 700
.center
text-align: center
.left
float: left
.right
float: right
.first
margin-left: 0
padding-left: 0
.last
margin-right: 0
padding-right: 0
.top
margin-top: 0
padding-top: 0
.bottom
margin-bottom: 0
padding-bottom: 0
.wrapper
width: calc(100% - 20px)
margin: 0 auto
.relative
position: relative
.block
display: block
.inline
display: inline
.inline-block
display: inline-block
.pointer
cursor: pointer
.ellip
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
.underline
text-decoration: underline
.lowercase
text-transform: lowercase
.invisible
visibility: hidden
.wrapword
word-wrap: break-word
.grab
cursor: grab
.grabbing
cursor: grabbing
// Implement a thiner close icon as suggested in
// https://github.com/FortAwesome/Font-Awesome/issues/1540#issuecomment-68689950
.fa.fa-times-thin:before
content: '\00d7'
.fa.fa-globe.colorful, .fa.fa-bell.colorful
color: #4caf50
.fa.fa-lock.colorful, .fa.fa-bell-slash.colorful
color: #f44336
.fa.fa-eye.colorful
color: #4336f4
.pop-over .pop-over-list li a:not(.disabled):hover
.fa, .fa.colorful
color: white
&:hover
color: white
a
&.fa, i.fa
color: darken(white, 35%)
&:not(.disabled):hover, &:not(.disabled).is-active
&.fa, i.fa
color: darken(white, 60%)
.ui-draggable-dragging
z-index: 200
.atMention
background: #dbdbdb
border-radius: 3px
padding: 1px 4px
margin: -1px 0
display: inline-block
&.me
background: #cfdfe8
.big-message
display: block
margin: 75px auto
text-align: center
max-width: 600px
h1
font-size: 26px
margin-bottom: 24px
p
font-size: 18px
line-height: 22px
.gutter
margin-left: 38px
.viewer
min-height: 18px
display: block
word-wrap: break-word
table
word-wrap: normal
word-break: normal
ol
list-style-type: decimal
padding-left: 20px
ul
list-style-type: initial
padding-left: 20px
em
font-style : italic
pre
padding: 10px 12px 7px
background: darken(white, 13%)
overflow-y: auto
a
text-decoration: underline
&:hover
color: #333
.basicTabs-container .tabs-content-container
padding: 0
padding-top: 15px
@keyframes fadeIn
from
opacity: 0
@keyframes flexGrowIn
from
// Support IE11 https://github.com/wekan/wekan/pull/646
height: 100%
@media screen and (max-width: 800px)
#content
margin: 1px 0px 0px 0px
height: calc(100% - 0px)
> .wrapper
margin-top: 0px
.wrapper
height: 100%
margin: 0px
.panel-default
width: 83vw
.inline-input
height: 37px
margin: 8px 10px 0 0
width: 50px
.select-authentication
width: 100%
.auth-layout
display: flex
flex-direction: column
align-items: center
justify-content: center
.auth-dialog
margin: 0 !important
.loadingText
text-align: center
.lds-roller
display: block
margin: auto
position: relative
width: 64px
height: 64px
div
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite
transform-origin: 32px 32px
div:after
content: " "
display: block
position: absolute
width: 6px
height: 6px
border-radius: 50%
background: #dedede
margin: -3px 0 0 -3px
div:nth-child(1)
animation-delay: -0.036s
div:nth-child(1):after
top: 50px
left: 50px
div:nth-child(2)
animation-delay: -0.072s
div:nth-child(2):after
top: 54px
left: 45px
div:nth-child(3)
animation-delay: -0.108s
div:nth-child(3):after
top: 57px
left: 39px
div:nth-child(4)
animation-delay: -0.144s
div:nth-child(4):after
top: 58px
left: 32px
div:nth-child(5)
animation-delay: -0.18s
div:nth-child(5):after
top: 57px
left: 25px
div:nth-child(6)
animation-delay: -0.216s
div:nth-child(6):after
top: 54px
left: 19px
div:nth-child(7)
animation-delay: -0.252s
div:nth-child(7):after
top: 50px
left: 14px
div:nth-child(8)
animation-delay: -0.288s
div:nth-child(8):after
top: 45px
left: 10px
@keyframes lds-roller
0%
transform: rotate(0deg)
100%
transform: rotate(360deg)