mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-07-14 18:22:21 +00:00
478 lines
No EOL
9.3 KiB
Stylus
478 lines
No EOL
9.3 KiB
Stylus
// 1. Set up color classes
|
||
// ========================
|
||
|
||
// Color variables are defined in "./global-colors.styl"
|
||
|
||
// array of keywords and their associated color vars
|
||
$stages = (worst $worst) (worse $worse) (bad $bad) (neutral $neutral) (good $good) (better $better) (best $best)
|
||
|
||
// for each color stage, generate a named class w/ the appropriate color
|
||
for $stage in $stages
|
||
.color-{$stage[0]}
|
||
background-color: $stage[1]
|
||
.action-yesno label,
|
||
.task-action-btn
|
||
background-color: darken($stage[1], 30%)
|
||
&:hover, &:focus
|
||
background-color: darken($stage[1], 40%)
|
||
.task-options
|
||
background-color: $stage[1]
|
||
|
||
// completed has to be outside the loop to override the color class
|
||
.completed
|
||
background-color: $completed
|
||
color: #999
|
||
.glyphicon
|
||
color: #333
|
||
.task-checker label
|
||
background-color: darken($completed, 30%)
|
||
.task-action-btn
|
||
background-color: darken($completed, 30%)
|
||
|
||
.reward
|
||
background-color: white
|
||
|
||
// 2. Columns & Tasks
|
||
// ===================
|
||
|
||
.tasks-lists
|
||
|
||
.row
|
||
margin-left: -5px
|
||
margin-right: -5px
|
||
|
||
.col-md-3
|
||
padding-left: 10px // Override Bootstrap 15px padding
|
||
padding-right: 10px // Override Bootstrap 15px padding
|
||
margin-bottom: 15px
|
||
|
||
// main columns
|
||
// ------------
|
||
.task-column
|
||
padding: 1.5em
|
||
background: $color-tasks
|
||
border: 1px solid darken($color-tasks,16.18%)
|
||
font-family: 'Lato', sans-serif
|
||
h2
|
||
color: darken($color-tasks,61.8%)
|
||
|
||
.task-column_title
|
||
margin: 0 0 0.5em
|
||
padding: 0
|
||
font-weight: 300
|
||
|
||
// 50% width columns with scrollbars for tablets
|
||
@media (min-width: 768px) and (max-width: 970px)
|
||
.task-column
|
||
max-height: 18.6em
|
||
overflow-y: scroll
|
||
|
||
// add new task form
|
||
// -----------------
|
||
.addtask-form
|
||
margin-bottom: 0.75em
|
||
outline: 1px solid rgba(0,0,0,0.15)
|
||
outline-offset: -1px
|
||
background-color: white
|
||
// box-shadow: 0 0 3px rgba(0,0,0,0.15)
|
||
position: relative
|
||
|
||
// the input field
|
||
.addtask-field
|
||
display: block
|
||
width: 100%
|
||
input
|
||
font-family: 'Lato', sans-serif
|
||
border: 0
|
||
outline: 0
|
||
border-radius: 0
|
||
box-shadow: none
|
||
background-color: white
|
||
height: 3em
|
||
padding: 0 3.3em 0 0.5em
|
||
width: 100%
|
||
&:focus
|
||
box-shadow: inset 0 0 3px darken($best, 20%),inset -1px 0 1px darken($best, 30%)
|
||
|
||
// the button
|
||
.addtask-btn
|
||
position: absolute
|
||
right: 0
|
||
top: 0
|
||
// important for overriding bootstrap, remove later
|
||
width: 1.81818em !important
|
||
height: 1.88em
|
||
padding: 0
|
||
font-size: 1.61em
|
||
line-height: 1.7
|
||
outline: 0
|
||
border: 0
|
||
border-radius: 0 //required to nuke BB-playbook user agent styles
|
||
background-color: darken($best, 15%)
|
||
&:hover, &:focus
|
||
background-color: darken($best, 20%)
|
||
&:active
|
||
background-color: darken($best, 30%)
|
||
|
||
|
||
// an individual task entry
|
||
// ------------------------
|
||
.task
|
||
list-style: none
|
||
clear: both
|
||
padding: 0
|
||
min-height: 3em
|
||
margin-bottom: 0.75em
|
||
box-shadow: inset 0 0 1px rgba(0,0,0,0.5)
|
||
position: relative
|
||
&:hover
|
||
cursor: move
|
||
:last-child
|
||
margin-bottom: 0
|
||
|
||
label
|
||
font-weight: 400
|
||
|
||
// task content
|
||
.task-text
|
||
display: block
|
||
padding: 0.75em 0 0.75em 3.5em
|
||
line-height: 1.4
|
||
word-wrap: break-word
|
||
|
||
span.emoji
|
||
width:1.5em
|
||
height:1.5em
|
||
background-size:1.5em
|
||
|
||
.habit-wide .task-text
|
||
padding-left: 7em
|
||
|
||
// when a task is being dragged
|
||
.task.ui-sortable-helper
|
||
box-shadow: 0 0 3px rgba(0,0,0,0.15), 0 0 5px rgba(0,0,0,0.1)
|
||
transform: scale(1.05)
|
||
outline: 1px solid rgba(0,0,0,0.2)
|
||
|
||
// primary task commands
|
||
// ----------------------
|
||
.task-controls
|
||
display: inline-block
|
||
float: left
|
||
margin-left: -0.5em
|
||
margin-right: 0.5em
|
||
|
||
.task-controls.task-primary
|
||
position: absolute
|
||
top: 0
|
||
bottom: 0
|
||
left: 0
|
||
float: none
|
||
margin: 0
|
||
|
||
// plus/minus commands
|
||
.task-action-btn
|
||
display: inline-block
|
||
width: 2.12765em
|
||
height: 2.12765em
|
||
padding: 0
|
||
font-size: 1.41em
|
||
line-height: 2.12765
|
||
text-align: center
|
||
color: #222
|
||
vertical-align: top
|
||
border-right: 1px solid rgba(0,0,0,0.25)
|
||
&:last-child
|
||
border: 0
|
||
&:hover, &:focus
|
||
color: #222
|
||
text-decoration: none
|
||
|
||
// checkbox
|
||
.task-checker input[type=checkbox]
|
||
margin: 0
|
||
padding: 0
|
||
visibility: hidden
|
||
|
||
.task-checker label
|
||
display: inline-block
|
||
width: 3em
|
||
height: 100%
|
||
margin: 0
|
||
vertical-align: top
|
||
cursor: pointer
|
||
|
||
// plus/minus checkbox
|
||
.action-plusminus
|
||
label
|
||
margin-right: 1.5em
|
||
label:after
|
||
font-size: 1.41em
|
||
width: 2.12765em
|
||
height: 2.12765em
|
||
line-height: 2.12765
|
||
text-align: center
|
||
display: inline-block
|
||
vertical-align top
|
||
opacity: 0.3
|
||
background-color: #ddd
|
||
outline: 1px solid rgba(0,0,0,0.5)
|
||
color: #222
|
||
label[for$="plus"]:after
|
||
content: '＋'
|
||
label[for$="minus"]:after
|
||
content: '−'
|
||
|
||
&.select-toggle input[type=checkbox]:checked + label:after
|
||
opacity: 1
|
||
|
||
// yes/no checkbox
|
||
.action-yesno
|
||
position: relative
|
||
// uncompleted icon
|
||
label:after, label:before
|
||
content: ''
|
||
display: block
|
||
height: 1.714285714em
|
||
width: 1.714285714em
|
||
font-size: 1.75em
|
||
line-height: 1.714285714em
|
||
text-align: center
|
||
color: black
|
||
opacity: 0.2
|
||
|
||
label:after
|
||
height 10px
|
||
width 10px
|
||
margin 15px auto
|
||
border 1px solid #222
|
||
label:before
|
||
position: absolute
|
||
left: 0
|
||
// hint at completed icon
|
||
label:hover:before,
|
||
label:focus:before
|
||
content: ''
|
||
label:hover:after,
|
||
label:focus:after
|
||
content: '¬'
|
||
border none
|
||
margin 0
|
||
font-size: 3.2em
|
||
line-height: 0.9375em
|
||
height: 0.9375em
|
||
width: 1.15em
|
||
text-align: center
|
||
transform: rotate(135deg)
|
||
opacity: 0.5 !important
|
||
label:active:after
|
||
opacity: 0.75 !important
|
||
|
||
// completed icon
|
||
input[type=checkbox]:checked + label:after
|
||
content: '¬'
|
||
font-size: 3.2em
|
||
line-height: 0.9375em
|
||
height: 0.9375em
|
||
width: 1.15em
|
||
text-align: center
|
||
transform: rotate(135deg)
|
||
opacity: 0.75
|
||
border none
|
||
margin 0
|
||
|
||
|
||
// secondary task commands
|
||
// -----------------------
|
||
.task-meta-controls
|
||
float: right
|
||
margin: 0.75em 0.5em 0 0.5em
|
||
height: 1em
|
||
opacity: 0.25
|
||
|
||
a
|
||
text-decoration: none
|
||
|
||
// improve alignment of task icons
|
||
.glyphicon-signal
|
||
margin-left: 0.25em
|
||
.glyphicon-remove, .glyphicon-ok, a.badge
|
||
margin-right: 0.25em
|
||
.glyphicon-tags
|
||
margin-left: 0.1em
|
||
margin-right: 0.4em
|
||
a.badge
|
||
position: relative; top:-2px
|
||
|
||
.task:hover .task-meta-controls
|
||
opacity: 1
|
||
|
||
.popover
|
||
line-height: 1.5
|
||
|
||
// prevent box-shadow from being clipped/overlapped
|
||
margin-bottom: 10px
|
||
margin-right: 5px
|
||
|
||
// task editing
|
||
// ------------
|
||
form
|
||
margin-bottom: 0 // stupid bootstrap override
|
||
|
||
[class$="-options"]
|
||
padding: 1em 1em 0
|
||
color: #333
|
||
position: relative
|
||
//background-color:
|
||
|
||
.option-group
|
||
border-bottom: 1px solid rgba(0,0,0,0.1)
|
||
padding: 0 0 1em
|
||
margin-bottom: 1em
|
||
|
||
.option-title
|
||
font-size: 1em
|
||
margin: 0 0 0.5em
|
||
line-height: 1.5
|
||
border: 0
|
||
padding: 0
|
||
color: #333
|
||
font-style: italic
|
||
&:not(.mega):after
|
||
content: ':'
|
||
&.mega
|
||
cursor: pointer
|
||
font-style: normal
|
||
font-weight: bold
|
||
text-decoration: underline
|
||
|
||
.option-content
|
||
height: 2.5em
|
||
width: 100%
|
||
margin: 0 0 1em
|
||
padding: 0 0 0 0.5em
|
||
outline: 0
|
||
border: 1px solid rgba(0,0,0,0.2)
|
||
box-shadow: none
|
||
border-radius: 0
|
||
font-family: 'Lato', sans-serif //bootstrap override
|
||
|
||
textarea.option-content
|
||
height: 5em
|
||
padding-top: 0.25em
|
||
resize: none
|
||
margin-bottom: 0
|
||
|
||
.option-short
|
||
.option-content
|
||
width: 4em
|
||
display: inline-block
|
||
.input-suffix
|
||
vertical-align: 20%
|
||
padding-left: 0.25em
|
||
|
||
.option-medium
|
||
.option-content
|
||
width: 6em
|
||
display: inline-block
|
||
.input-suffix
|
||
vertical-align: 20%
|
||
padding-left: 0.25em
|
||
|
||
// button-group
|
||
.task-controls.tile-group
|
||
display: block
|
||
text-align: center
|
||
margin: 0
|
||
|
||
&.task-attributes
|
||
text-align: left
|
||
|
||
.task-action-btn.tile
|
||
border: 0
|
||
font-size: 1.15em
|
||
font-weight: 300
|
||
outline: 1px solid rgba(0,0,0,0.2)
|
||
outline-offset: -1px
|
||
margin: 0 0 0 3px
|
||
font-family: 'Lato', sans-serif
|
||
text-align: inherit
|
||
opacity: 0.5
|
||
width: auto
|
||
padding: 0 0.5em
|
||
&.active
|
||
opacity: 1
|
||
|
||
.tile.solid
|
||
opacity: 1
|
||
.tile.spacious
|
||
margin: 0.75em 0
|
||
font-size: 1.25em
|
||
opacity: 1
|
||
.tile.bright
|
||
background-color: lighten($best, 20%)
|
||
&:hover, &:focus
|
||
background-color: lighten($best, 40%)
|
||
.tile.flush
|
||
margin-left: 0
|
||
border: 1px solid rgba(0,0,0,0.2)
|
||
outline: 0
|
||
line-height: 2em
|
||
&:first-child
|
||
border-right: 0
|
||
|
||
.task-options
|
||
.task-action-btn.tile
|
||
margin: 3px
|
||
|
||
// todos ui
|
||
// --------
|
||
|
||
// nav tabs
|
||
.nav-tabs
|
||
margin-top: 1.5em
|
||
.nav-tabs > li
|
||
&.active > a
|
||
color: #333
|
||
&:hover
|
||
margin-top: 1px
|
||
> a
|
||
border-radius: 0 !important
|
||
margin-top: 1px
|
||
color: #333
|
||
&:hover
|
||
border-top: 0
|
||
margin-top: 2px
|
||
|
||
// Checklists
|
||
// --------
|
||
.checklist-form
|
||
/* Make an input blend into its parent */
|
||
input.inline-edit
|
||
reset-box-model()
|
||
reset-font()
|
||
line-height: inherit
|
||
text-align: inherit
|
||
background-color:inherit
|
||
box-shadow: none
|
||
width: 80%
|
||
|
||
/* Add interaction cues on hover and focus */
|
||
input.inline-edit:hover,input.inline-edit:focus
|
||
background-color: #FFD
|
||
transition: background-color 0.5s
|
||
|
||
.checklist-icons
|
||
opacity:0
|
||
width: 5%
|
||
|
||
li
|
||
min-height: 20px
|
||
padding-left: 10px
|
||
margin-bottom: 5px
|
||
|
||
[type="checkbox"]
|
||
margin: 0px 10px 3px 0px
|
||
width: 4%
|
||
li:hover .checklist-icons
|
||
opacity:1 |