mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-02 07:49:39 +00:00
319 lines
No EOL
6.3 KiB
Stylus
319 lines
No EOL
6.3 KiB
Stylus
// 1. Set up color classes
|
||
// ========================
|
||
|
||
// color variables
|
||
$worst = rgb(230, 184, 175)
|
||
$worse = rgb(244, 204, 204)
|
||
$bad = rgb(252, 229, 205)
|
||
$neutral = rgb(255, 242, 204)
|
||
$good = rgb(217, 234, 211)
|
||
$better = rgb(208, 224, 227)
|
||
$best = rgb(201, 218, 248)
|
||
$completed = rgb(217, 217, 217)
|
||
|
||
// 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%)
|
||
|
||
// completed has to be outside the loop to override the color class
|
||
.completed
|
||
background-color: $completed
|
||
color: #999
|
||
.task-checker label
|
||
background-color: darken($completed, 30%)
|
||
.task-action-btn
|
||
background-color: darken($completed, 30%)
|
||
|
||
.reward
|
||
background-color: white
|
||
|
||
|
||
|
||
// 2. Columns & Tasks
|
||
// ===================
|
||
|
||
// main columns
|
||
// ------------
|
||
.task-column
|
||
padding: 1.5em
|
||
background: #f5f5f5
|
||
border: 1px solid #ccc
|
||
font-family: 'Lato', sans-serif
|
||
|
||
.task-column_title
|
||
margin: 0 0 0.5em
|
||
padding: 0
|
||
|
||
|
||
// add new task form
|
||
// -----------------
|
||
.addtask-form
|
||
margin-bottom: 0.75em
|
||
outline: 1px solid rgba(0,0,0,0.15)
|
||
outline-offset: -1px
|
||
|
||
// the input field
|
||
.addtask-field
|
||
display: inline-block
|
||
width: 80% // fallback for Safari 5.1
|
||
width: calc(unquote('100% - 2.5em'))
|
||
input
|
||
font-family: 'Lato', sans-serif
|
||
border: 0
|
||
outline: 0
|
||
border-radius: 0
|
||
box-shadow: none
|
||
background-color: white
|
||
height: 2.5em
|
||
padding: 0 0 0 0.5em
|
||
width: 100%
|
||
&:focus
|
||
box-shadow: inset 0 0 3px darken($best, 20%)
|
||
|
||
// the button
|
||
.addtask-btn
|
||
display: inline-block
|
||
// important for overriding bootstrap, remove later
|
||
width: 1.51515em !important
|
||
height: 1.51515em
|
||
padding: 0
|
||
font-size: 1.65em
|
||
line-height: 1.55
|
||
outline: 0
|
||
border: 0
|
||
background-color: darken($best, 20%)
|
||
opacity: 0.75
|
||
&:hover,
|
||
&:focus
|
||
opacity: 1
|
||
background-color: darken($best, 20%)
|
||
&:active
|
||
background-color: darken($best, 30%)
|
||
opacity: 1
|
||
|
||
|
||
// an individual task entry
|
||
// ------------------------
|
||
.task
|
||
list-style: none
|
||
clear: both
|
||
padding: 0 0.5em 0 0.5em
|
||
min-height: 2.5em
|
||
line-height: 2.5
|
||
margin-bottom: 1em
|
||
outline: 1px solid rgba(0,0,0,0.1)
|
||
outline-offset: -1px
|
||
&:hover
|
||
cursor: move
|
||
&:last-child
|
||
margin-bottom: 0
|
||
|
||
// task content
|
||
.task-text
|
||
display: inline
|
||
|
||
|
||
// primary task commands
|
||
// ----------------------
|
||
.task-controls
|
||
display: inline
|
||
margin-left: -0.5em
|
||
margin-right: 0.5em
|
||
|
||
// plus/minus commands
|
||
.task-action-btn
|
||
display: inline-block
|
||
width: 1.773em
|
||
height: 1.773em
|
||
padding: 0
|
||
font-size: 1.41em
|
||
line-height: 1.773
|
||
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: 2.5em
|
||
height: 2.5em
|
||
margin: 0
|
||
vertical-align: top
|
||
cursor: pointer
|
||
|
||
// plus/minus checkbox
|
||
.action-plusminus
|
||
label
|
||
margin-right: 1.5em
|
||
label:after
|
||
font-size: 1.41em
|
||
width: 1.773em
|
||
height: 1.773em
|
||
line-height: 1.773
|
||
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
|
||
// uncompleted icon
|
||
label:after
|
||
content: '○'
|
||
display: block
|
||
font-size: 3em
|
||
line-height: 0.76
|
||
text-align: center
|
||
color: black
|
||
opacity: 0.2
|
||
|
||
// hint at completed icon
|
||
label:hover:after,
|
||
label:focus:after
|
||
content: '¬'
|
||
font-size: 3em
|
||
line-height: 1.1
|
||
text-align: left
|
||
transform: rotate(135deg)
|
||
opacity: 0.5 !important
|
||
label:active:after
|
||
opacity: 0.75 !important
|
||
|
||
// completed icon
|
||
input[type=checkbox]:checked + label:after
|
||
content: '¬'
|
||
transform: rotate(135deg)
|
||
line-height: 1.1
|
||
text-align: left
|
||
opacity: 0.75
|
||
|
||
|
||
// secondary task commands
|
||
// -----------------------
|
||
.task-meta-controls
|
||
float: right
|
||
margin-left: 0.25em
|
||
opacity: 0.25
|
||
a > i
|
||
margin-left: 0.125em
|
||
.task-notes
|
||
margin-left: 0.125em
|
||
|
||
.task:hover .task-meta-controls
|
||
opacity: 1
|
||
|
||
|
||
// task editing
|
||
// ------------
|
||
.task-options
|
||
padding: 0 0.5em
|
||
margin-top: 1.25em
|
||
color: #333
|
||
|
||
.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
|
||
|
||
// button-group
|
||
.task-controls.tile-group
|
||
display: block
|
||
text-align: center
|
||
margin: 0
|
||
|
||
.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
|
||
&.spacious
|
||
margin: 0.75em 0
|
||
font-size: 1.5em
|
||
opacity: 1
|
||
|
||
|
||
// .context-enabled
|
||
// .display-context-dependant,
|
||
// .task-list li
|
||
// display: none
|
||
|
||
// &.context-completed
|
||
// .show-for-completed, .completed
|
||
// display: block
|
||
|
||
// &.context-uncompleted
|
||
// .show-for-uncompleted, .uncompleted
|
||
// display: block |