Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Site.js
starters
starter-theme
Commits
0d84cc9d
Commit
0d84cc9d
authored
Apr 01, 2021
by
Laura Kalbag
⚡
Browse files
Rename and merge colour variable names to improve usability
Towards
#164
parent
fb22459f
Changes
6
Hide whitespace changes
Inline
Side-by-side
assets/css/base.css
View file @
0d84cc9d
...
...
@@ -7,7 +7,7 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
:root
{
--inset-shadow
:
inset
0
0.25em
0.25em
var
(
--shadow
);
--outset-shadow
:
linear-gradient
(
var
(
--background
-input
)
60%
,
var
(
--shadow
-light
));
--outset-shadow
:
linear-gradient
(
var
(
--
input-
background
)
60%
,
var
(
--shadow
));
}
/* NORMALISE
...
...
@@ -96,7 +96,7 @@ canvas {
}
hr
{
border-color
:
var
(
--line
);
border-color
:
var
(
--
accent-
line
);
border-width
:
0.05em
;
border-style
:
solid
;
margin-bottom
:
1em
;
...
...
@@ -119,14 +119,14 @@ figure > img {
a
,
a
:visited
,
.linkish
{
color
:
var
(
--
text-strong
);
color
:
var
(
--
link-text
);
}
a
:hover
,
a
:active
,
.linkish
:hover
,
.linkish
:active
{
color
:
var
(
--
text-subtle
);
color
:
var
(
--
link-action
);
}
::selection
{
...
...
@@ -157,7 +157,7 @@ td,
th
,
input
,
textarea
{
border-color
:
var
(
--border
);
border-color
:
var
(
--
input-
border
);
border-width
:
0.07em
;
border-style
:
solid
;
padding
:
0.25em
0.5rem
;
...
...
@@ -197,7 +197,7 @@ select {
}
fieldset
{
border-color
:
var
(
--line
);
border-color
:
var
(
--
accent-
line
);
border-width
:
0.07em
;
border-style
:
solid
;
margin
:
1em
0
;
...
...
@@ -226,7 +226,7 @@ input[type=radio] + label {
@supports
(
-webkit-appearance
:
none
)
or
(
-moz-appearance
:
none
)
or
(
appearance
:
none
)
{
input
,
textarea
{
background-color
:
var
(
--background
-input
);
background-color
:
var
(
--
input-
background
);
color
:
var
(
--text
);
}
...
...
@@ -257,19 +257,19 @@ input[type=radio] + label {
input
[
type
=
checkbox
],
input
[
type
=
radio
]
{
background-color
:
var
(
--background
-input
);
background-image
:
linear-gradient
(
var
(
--shadow
)
0%
,
var
(
--background
-input
)
20%
);
background-color
:
var
(
--
input-
background
);
background-image
:
linear-gradient
(
var
(
--shadow
)
0%
,
var
(
--
input-
background
)
20%
);
height
:
1.5em
;
width
:
1.5em
;
}
input
[
type
=
radio
]
{
background-image
:
radial-gradient
(
circle
,
var
(
--background
-input
)
50%
,
var
(
--shadow
)
95%
);
background-image
:
radial-gradient
(
circle
,
var
(
--
input-
background
)
50%
,
var
(
--shadow
)
95%
);
border-radius
:
0.75em
;
}
input
[
type
=
radio
]
:checked
{
background-image
:
radial-gradient
(
circle
,
var
(
--shadow
)
15%
,
var
(
--background
-input
)
50%
);
background-image
:
radial-gradient
(
circle
,
var
(
--shadow
)
15%
,
var
(
--
input-
background
)
50%
);
}
input
[
type
=
radio
]
:focus
{
...
...
@@ -308,12 +308,12 @@ input[type=radio] + label {
}
select
{
background-color
:
var
(
--background
-input
);
background-color
:
var
(
--
input-
background
);
background-image
:
var
(
--arrow-down
),
var
(
--outset-shadow
);
background-repeat
:
no-repeat
,
repeat
;
background-position
:
right
0.75rem
top
50%
,
0
0
;
background-size
:
0.8em
0.8em
,
100%
;
border-color
:
var
(
--border
);
border-color
:
var
(
--
input-
border
);
border-radius
:
0.5em
;
box-shadow
:
0
0.05em
0
0.05em
var
(
--shadow
);
color
:
var
(
--text
);
...
...
@@ -346,9 +346,9 @@ input[type=radio] + label {
}
input
[
type
=
range
]
::-webkit-slider-runnable-track
{
background
:
var
(
--background
-input
);
background
:
var
(
--
input-
background
);
background-image
:
var
(
--outset-shadow
);
border-color
:
var
(
--
text-secondary
);
border-color
:
var
(
--
placeholder-text
);
width
:
100%
;
height
:
1em
;
border-radius
:
0.5em
;
...
...
@@ -356,7 +356,7 @@ input[type=radio] + label {
}
input
[
type
=
range
]
::-webkit-slider-thumb
{
background
:
var
(
--background
-button
);
background
:
var
(
--
button-
background
);
border-radius
:
0.75em
;
height
:
1.5em
;
width
:
1.5em
;
...
...
@@ -365,9 +365,9 @@ input[type=radio] + label {
}
input
[
type
=
range
]
::-moz-range-track
{
background
:
var
(
--background
-input
);
background
:
var
(
--
input-
background
);
background-image
:
var
(
--outset-shadow
);
border-color
:
var
(
--
text-secondary
);
border-color
:
var
(
--
placeholder-text
);
width
:
100%
;
height
:
1em
;
border-radius
:
0.5em
;
...
...
@@ -375,7 +375,7 @@ input[type=radio] + label {
}
input
[
type
=
range
]
::-moz-range-thumb
{
background
:
var
(
--background
-button
);
background
:
var
(
--
button-
background
);
border-radius
:
0.75em
;
border
:
none
;
height
:
1.5em
;
...
...
@@ -391,33 +391,33 @@ input[type=radio] + label {
}
input
[
type
=
range
]
::-ms-fill-lower
{
background
:
var
(
--background
-button
);
border
:
0.07em
solid
var
(
--
text-secondary
);
background
:
var
(
--
button-
background
);
border
:
0.07em
solid
var
(
--
placeholder-text
);
border-radius
:
0.75em
;
}
input
[
type
=
range
]
:focus::-ms-fill-lower
{
background
:
var
(
--background
-input
);
background
:
var
(
--
input-
background
);
background-image
:
var
(
--outset-shadow
);
}
input
[
type
=
range
]
::-ms-fill-upper
{
background
:
var
(
--background
-input
);
background
:
var
(
--
input-
background
);
background-image
:
var
(
--outset-shadow
);
border-color
:
var
(
--
text-secondary
);
border-color
:
var
(
--
placeholder-text
);
border
:
0.07em
solid
;
border-radius
:
0.75em
;
}
input
[
type
=
range
]
::-ms-thumb
{
background
:
var
(
--background
-button
);
background
:
var
(
--
button-
background
);
border-radius
:
0.75em
;
height
:
1em
;
width
:
1.5em
;
}
progress
{
color
:
var
(
--line
);
/* bar colour for IE */
color
:
var
(
--
accent-
line
);
/* bar colour for IE */
display
:
block
;
height
:
1em
;
margin-top
:
0.25em
;
...
...
@@ -426,9 +426,9 @@ input[type=radio] + label {
}
progress
::-webkit-progress-bar
{
background-color
:
var
(
--background
-input
);
background-color
:
var
(
--
input-
background
);
background-image
:
var
(
--outset-shadow
);
border
:
0.07em
solid
var
(
--line
);
border
:
0.07em
solid
var
(
--
accent-
line
);
border-radius
:
0.5em
;
}
progress
::-webkit-progress-value
{
...
...
@@ -437,11 +437,11 @@ input[type=radio] + label {
/* Firefox support is more limited */
progress
::-moz-progress-bar
{
background-color
:
var
(
--line
);
background-color
:
var
(
--
accent-
line
);
}
progress
::-webkit-progress-value
{
background-color
:
var
(
--line
);
background-color
:
var
(
--
accent-
line
);
}
}
...
...
@@ -483,7 +483,7 @@ input[type=file] {
}
input
::placeholder
{
color
:
var
(
--
text-secondary
);
color
:
var
(
--
placeholder-text
);
}
select
{
...
...
@@ -503,9 +503,9 @@ button,
input
[
type
=
button
],
input
[
type
=
submit
],
input
[
type
=
reset
]
{
background-color
:
var
(
--background
-button
);
color
:
var
(
--
text-
button
);
border
:
solid
0.14em
var
(
--background
-button
);
background-color
:
var
(
--
button-
background
);
color
:
var
(
--button
-text
);
border
:
solid
0.14em
var
(
--
button-
background
);
display
:
block
;
margin
:
1em
0
;
}
...
...
@@ -522,17 +522,17 @@ input[type=submit]:focus,
input
[
type
=
reset
]
:hover
,
input
[
type
=
reset
]
:active
,
input
[
type
=
reset
]
:focus
{
border-color
:
var
(
--
background-
button-
str
on
g
);
background-color
:
var
(
--
background-
button-
str
on
g
);
border-color
:
var
(
--button-
acti
on
);
background-color
:
var
(
--button-
acti
on
);
}
button
.secondary
,
input
[
type
=
button
]
.secondary
,
input
[
type
=
submit
]
.secondary
,
input
[
type
=
reset
]
.secondary
{
background-color
:
var
(
--
background-
button-
str
on
g
);
border-color
:
var
(
--
background-
button-
str
on
g
);
color
:
var
(
--
text-
button
);
background-color
:
var
(
--button-
acti
on
);
border-color
:
var
(
--button-
acti
on
);
color
:
var
(
--button
-text
);
}
button
:hover
.secondary
,
...
...
@@ -547,9 +547,9 @@ input[type=submit]:focus.secondary,
input
[
type
=
reset
]
:hover
.secondary
,
input
[
type
=
reset
]
:active
.secondary
,
input
[
type
=
reset
]
:focus
.secondary
{
background-color
:
var
(
--background
-button
);
border-color
:
var
(
--background
-button
);
color
:
var
(
--
text-
button
);
background-color
:
var
(
--
button-
background
);
border-color
:
var
(
--
button-
background
);
color
:
var
(
--button
-text
);
}
button
svg
{
...
...
assets/css/colours.css
View file @
0d84cc9d
...
...
@@ -17,94 +17,99 @@
--background
:
var
(
--mono90
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--background
:
var
(
--mono90
);
}
}
/* --background
-highlight
/* --
highlighted-
background
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--background
-highlight
:
var
(
--colour20
);
--
highlighted-
background
:
var
(
--colour20
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--background
-highlight
:
var
(
--mono80
);
--
highlighted-
background
:
var
(
--mono80
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--background
-highlight
:
var
(
--mono80
);
--
highlighted-
background
:
var
(
--mono80
);
}
}
/* --background
-input
/* --
input-
background
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--background
-input
:
var
(
--mono0
);
--
input-
background
:
var
(
--mono0
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--background
-input
:
var
(
--mono90
);
--
input-
background
:
var
(
--mono90
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--background
-input
:
var
(
--mono90
);
--
input-
background
:
var
(
--mono90
);
}
}
/* --background
-header
/* --
header-
background
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--background
-header
:
var
(
--colour0
);
--
header-
background
:
var
(
--colour0
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--background
-header
:
var
(
--mono90
);
--
header-
background
:
var
(
--mono90
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--background
-header
:
var
(
--mono90
);
--
header-
background
:
var
(
--mono90
);
}
}
/* --background
-footer
/* --
footer-
background
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--background
-footer
:
var
(
--colour0
);
--
footer-
background
:
var
(
--colour0
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--background
-footer
:
var
(
--mono90
);
--
footer-
background
:
var
(
--mono90
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--background
-footer
:
var
(
--mono90
);
--
footer-
background
:
var
(
--mono90
);
}
}
...
...
@@ -122,242 +127,232 @@
--text
:
var
(
--mono15
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--text
:
var
(
--mono15
);
}
}
/* --
text-secondary
/* --
placeholder-text
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--
text-secondary
:
var
(
--mono70
);
--
placeholder-text
:
var
(
--mono70
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--
text-secondary
:
var
(
--mono20
);
--
placeholder-text
:
var
(
--mono20
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--
text-secondary
:
var
(
--mono20
);
--
placeholder-text
:
var
(
--mono20
);
}
}
/* --
text-strong
/* --
link-text
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--
text-strong
:
var
(
--colour65
);
--
link-text
:
var
(
--colour65
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--
text-strong
:
var
(
--colour25
);
--
link-text
:
var
(
--colour25
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--
text-strong
:
var
(
--colour25
);
--
link-text
:
var
(
--colour25
);
}
}
/* --
text-subtle
/* --
link-action
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--
text-subtle
:
var
(
--colour60
);
--
link-action
:
var
(
--colour60
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--
text-subtle
:
var
(
--colour30
);
--
link-action
:
var
(
--colour30
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--
text-subtle
:
var
(
--colour30
);
--
link-action
:
var
(
--colour30
);
}
}
/* --
text-
heading
/* --heading
-text
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--
text-
heading
:
var
(
--mono80
);
--heading
-text
:
var
(
--mono80
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--
text-
heading
:
var
(
--mono10
);
--heading
-text
:
var
(
--mono10
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--
text-
heading
:
var
(
--mono10
);
--heading
-text
:
var
(
--mono10
);
}
}
/* --t
ext-s
ite-t
itle
/* --tit
l
e-t
ext
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--t
ext-s
ite-t
itle
:
var
(
--colour85
);
--tit
l
e-t
ext
:
var
(
--colour85
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--t
ext-s
ite-t
itle
:
var
(
--colour25
);
--tit
l
e-t
ext
:
var
(
--colour25
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--t
ext-s
ite-t
itle
:
var
(
--colour25
);
--tit
l
e-t
ext
:
var
(
--colour25
);
}
}
/* --background
-button
/* --
button-
background
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--background
-button
:
var
(
--colour30
);
--
button-
background
:
var
(
--colour30
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--background
-button
:
var
(
--colour30
);
--
button-
background
:
var
(
--colour30
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--background
-button
:
var
(
--colour30
);
--
button-
background
:
var
(
--colour30
);
}
}
/* --
background-
button-
str
on
g
/* --button-
acti
on
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--
background-
button-
str
on
g
:
var
(
--colour40
);
--button-
acti
on
:
var
(
--colour40
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--
background-
button-
str
on
g
:
var
(
--colour40
);
--button-
acti
on
:
var
(
--colour40
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--
background-
button-
str
on
g
:
var
(
--colour40
);
--button-
acti
on
:
var
(
--colour40
);
}
}
/* --b
ackground-button-subtle
/* --b
utton-text
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--b
ackground-button-subtle
:
var
(
--colour
35
);
--b
utton-text
:
var
(
--colour
100
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--b
ackground-button-subtle
:
var
(
--colour
35
);
--b
utton-text
:
var
(
--colour
90
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
{
--b
ackground-button-subtle
:
var
(
--colour
35
);
--b
utton-text
:
var
(
--colour
90
);
}
}
/* --
text-button
/* --
input-border
- - - - - - - - - - - - - - - - - - - - - */
/* light mode (site darkmode is set to auto or never) */
[
data-darkmode
=
"auto"
],
[
data-darkmode
=
"never"
]
{
--
text-button
:
var
(
--colour10
0
);
--
input-border
:
var
(
--mono9
0
);
}
/* dark mode (site) */
[
data-darkmode
=
"always"
]
{
--
text-button
:
var
(
--colour
9
0
);
--
input-border
:
var
(
--colour
4
0
);
}
/* when the browser wants darkmode and site darkmode is set to auto */
/* when the browser wants darkmode and site darkmode is set to auto
(should be same value as above) */
@media
(
prefers-color-scheme
:
dark
)
{
[
data-darkmode
=
"auto"
]
