2020-07-30 11:25:40 +03:00
: root {
--border-radius : 5px ;
--box-shadow : 2px 2px 10px ;
--color : # 118bee ;
--color-accent : # bcdde3 ;
--color-bg : # fff ;
--color-bg-secondary : # f8f8f8 ;
--color-secondary : # 920de9 ;
--color-secondary-accent : # 555 ;
--color-shadow : # f4f4f4 ;
--color-text : # 151515 ;
--color-hyperlink : # 133c8a ;
--logo-color : # 131516 ;
--color-petrol : # 014446 ;
--color-text-secondary : # 999 ;
--hover-brightness : 1 . 2 ;
--justify-important : center ;
--justify-normal : left ;
--line-height : 150 % ;
--width-card : 285px ;
--width-card-medium : 460px ;
--width-card-wide : 800px ;
--width-content : 1080px ;
--font-sans-serif : "IBM Plex Sans Serif" , "DejaVu Sans" , "Liberation Sans" , sans-serif ;
--font-monospace : "IBM Plex Mono" , "dejavu_sans_monobook" , monospace ;
--bee-emoji-svg : url ( 'data:image/svg+xml,%3Csvg enable-background="new 0 0 47.5 47.5" version="1.1" viewBox="0 0 47.5 47.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3CclipPath id="c"%3E%3Cpath d="m0 38h38v-38h-38v38z"/%3E%3C/clipPath%3E%3CclipPath id="b"%3E%3Cpath d="m8.719 17c0-6.133 4.603-13 10.281-13 5.679 0 10.281 6.867 10.281 13s-4.602 8.923-10.281 8.923c-5.678 0-10.281-2.79-10.281-8.923"/%3E%3C/clipPath%3E%3CclipPath id="a"%3E%3Cpath d="m0 38h38v-38h-38v38z"/%3E%3C/clipPath%3E%3C/defs%3E%3Cg transform="matrix(1.25,0,0,-1.25,0,47.5)"%3E%3Cg clip-path="url(%23c)"%3E%3Cg transform="translate(20,4)"%3E%3Cpath d="m0 0c0-1.657-0.447-3-1-3-0.552 0-1 1.343-1 3s0.448 3 1 3c0.553 0 1-1.343 1-3" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(26.753 35.753)"%3E%3Cpath d="m0 0c-0.586 0.586-1.693 0.428-2.475-0.354-0.611-0.611-1.948-2.53-2.222-3.619-0.884 0.195-1.93 0.22-3.056 0.22-1.125 0-2.172-0.025-3.055-0.219-0.275 1.089-1.611 3.007-2.223 3.618-0.781 0.782-1.888 0.94-2.474 0.354s-0.428-1.693 0.353-2.475c0.511-0.51 1.937-1.529 3.027-2.011-0.82-0.533-1.315-1.451-1.315-3.032 0-3.589 2.546-7.312 5.687-7.312 3.142 0 5.688 3.723 5.688 7.312 0 1.581-0.496 2.499-1.316 3.032 1.091 0.482 2.517 1.5 3.027 2.011 0.782 0.782 0.94 1.889 0.354 2.475" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(29.281 17)"%3E%3Cpath d="m0 0c0-6.134-4.603-13-10.281-13s-10.281 6.866-10.281 13c0 6.133 4.603 8.923 10.281 8.923s10.281-2.79 10.281-8.923" fill="%23292f33"/%3E%3C/g%3E%3C/g%3E%3Cg clip-path="url(%23b)"%3E%3Cpath d="m30 18h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cpath d="m30 10h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cpath d="m30 2h-22v4h22v-4z" fill="%23ffcc4d"/%3E%3Cg transform="translate(19 23)"%3E%3Cpath d="m0 0c0-2.647-7.858-10-12-10s-6 5.354-6 8 1.858 1.584 6 1.584c4.143 0 12 3.061 12 0.416" fill="%23292f33"/%3E%3C/g%3E%3Cg transform="translate(19 23)"%3E%3Cpath d="m0 0c0-2.647 7.857-10 12-10s6 5.354 6 8-1.857 1.584-6 1.584-12 3.061-12 0.416" fill="%23292f33"/%3E%3C/g%3E%3C/g%3E%3Cg clip-path="url(%23a)"%3E%3Cg transform="translate(19 23.495)"%3E%3Cpath d="m0 0c0-2.647-7.858-8.584-12-8.584s-6 2.443-6 5.089 1.858 4.495 6 4.495c4.143 0 12 1.645 12-1" fill="%23ccd6dd"/%3E%3C/g%3E%3Cg transform="translate(19 23.495)"%3E%3Cpath d="m0 0c0-2.647 7.857-8.584 12-8.584s6 2.443 6 5.089-1.857 4.495-6 4.495-12 1.645-12-1" fill="%23ccd6dd"/%3E%3C/g%3E%3Cg transform="translate(3,18)"%3E%3Cpath d="m0 0c-0.552 0-1 0.447-1 1 0 0.551 0.446 0.999 0.998 1 0.048 0 4.948 0.07 13.596 3.914 0.505 0.227 1.095-2e-3 1.32-0.508 0.224-0.505-3e-3 -1.095-0.508-1.32-9.089-4.039-14.193-4.086-14.406-4.086" fill="%2399aab5"/%3E%3C/g%3E%3Cg transform="translate(35,18)"%3E%3Cpath d="m 0,0 c -0.213,0 -5.316,0.047 -14.406,4.086 -0.505,0.225 -0.732,0.815 -0.508,1.32 0.225,0.505 0.817,0.732 1.32,0.508 C -4.946,2.07 -0.046,2 0.003,2 0.554,1.997 1,1.548 0.999,0.997 0.997,0.446 0.551,0 0,0" fill="%2399aab5"/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A' ) ;
}
@ media ( prefers-color-scheme : dark ) {
: root {
--color-accent : # 424242 ;
--color-bg : # 333333 ;
--color-bg-secondary : # 424242 ;
--color-secondary : # 6df216 ;
--color-secondary-accent : # f4f4f4 ;
--color-shadow : # bbbbbb20 ;
--color-text : # fff ;
--color-text-secondary : # 666 ;
--color-hyperlink : # 6c98ff ;
--logo-color : white ;
--color-petrol : # 0b3435 ;
}
}
@ font-face {
font-family : 'IBM Plex Mono' ;
src : local ( "IBM Plex Mono" ) ,
url ( '/css/IBMPlexMono-Regular.woff2' ) format ( 'woff2' ) ,
url ( '/css/IBMPlexMono-Regular.woff' ) format ( 'woff' ) ;
font-weight : normal ;
}
@ font-face {
font-family : 'IBM Plex Serif' ;
src : local ( "IBM Plex Serif" ) ,
url ( '/css/IBMPlexSerif-Regular.woff2' ) format ( 'woff2' ) ,
url ( '/css/IBMPlexSerif-Regular.woff' ) format ( 'woff' ) ;
font-weight : normal ;
}
@ font-face {
font-family : 'dejavu_sans_monobook' ;
src : local ( "DejaVu Sans Mono" ) ,
url ( '/css/dejavusansmono-webfont.woff2' ) format ( 'woff2' ) ,
url ( '/css/dejavusansmono-webfont.woff' ) format ( 'woff' ) ;
font-weight : normal ;
font-style : normal ;
}
* {
box-sizing : border-box ;
}
html {
font-size : 100 % ;
font-family : "IBM Plex Mono" , "dejavu_sans_monobook" , monospace ;
height : 100 % ;
}
body {
font-size : . 8rem ;
color : var ( --color-text ) ;
/* color: #202020; */
/* color: #404040;*/
background : radial-gradient ( circle farthest-side at 0 % 50 % , var ( --color-bg ) 23 . 5 % , rgba ( 240 , 166 , 17 , 0 ) 0 ) 21px 30px , radial-gradient ( circle farthest-side at 0 % 50 % , var ( --color-bg-secondary ) 24 % , rgba ( 240 , 166 , 17 , 0 ) 0 ) 19px 30px , linear-gradient ( var ( --color-bg ) 14 % , rgba ( 240 , 166 , 17 , 0 ) 0 , rgba ( 240 , 166 , 17 , 0 ) 85 % , var ( --color-bg ) 0 ) 0 0 , linear-gradient ( 150deg , var ( --color-bg ) 24 % , var ( --color-bg-secondary ) 0 , var ( --color-bg-secondary ) 26 % , rgba ( 240 , 166 , 17 , 0 ) 0 , rgba ( 240 , 166 , 17 , 0 ) 74 % , var ( --color-bg-secondary ) 0 , var ( --color-bg-secondary ) 76 % , var ( --color-bg ) 0 ) 0 0 , linear-gradient ( 30deg , var ( --color-bg ) 24 % , var ( --color-bg-secondary ) 0 , var ( --color-bg-secondary ) 26 % , rgba ( 240 , 166 , 17 , 0 ) 0 , rgba ( 240 , 166 , 17 , 0 ) 74 % , var ( --color-bg-secondary ) 0 , var ( --color-bg-secondary ) 76 % , var ( --color-bg ) 0 ) 0 0 , linear-gradient ( 90deg , var ( --color-bg-secondary ) 2 % , var ( --color-bg ) 0 , var ( --color-bg ) 98 % , var ( --color-bg-secondary ) 0 % ) 0 0 var ( --color-bg ) ;
background-size : 40px 60px ;
margin : 0 ;
display : grid ;
grid-template-rows : auto 1fr auto ;
height : 100 % ;
}
a {
color : var ( --color-hyperlink ) ;
}
a : visited {
color : var ( --color-hyperlink ) ;
}
em {
letter-spacing : 0 . 011em ;
}
header {
border-bottom : 1px solid # 969595 ;
display : flex ;
justify-content : space-between ;
}
header nav {
margin : auto 0 0 auto ;
text-align : right ;
display : flex ;
flex-wrap : wrap ;
flex-direction : row ;
justify-content : flex-end ;
}
header nav a {
font-size : 1 . 1rem ;
font-family : var ( --font-sans-serif ) ;
font-weight : bold ;
text-transform : uppercase ;
text-decoration : none ;
}
header nav a :: after {
border : 1px solid var ( --color-bg-secondary ) ;
filter : invert ( 10 % ) ;
content : " " ;
width : 100 % ;
height : 0 ! important ;
display : block ;
margin-top : -2px ;
}
@ media ( prefers-color-scheme : dark ) {
header nav a : first-child :: after , header nav a + a : not ( : last-child ) :: after {
filter : invert ( 20 % ) ;
}
}
footer {
margin-top : 1rem ;
padding : . 5rem 0 1 . 2rem 0 ;
border-top : 1px solid # 969595 ;
font-size : . 8rem ;
color : var ( --color-secondary-accent ) ;
}
h1 , h2 , h3 , h4 {
font-variant-caps : small-caps ;
}
h5 , h6 {
color : var ( --color-text-secondary ) ;
text-transform : lowercase ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
font-family : var ( --font-sans-serif ) ;
max-width : max-content ;
padding-right : . 5rem ;
background : var ( --color-bg ) ;
/*border-bottom: 1px solid #9f9f9f;*/
}
h1 { font-size : 1.3 rem ; }
h2 { font-size : 1.15 rem ; }
h3 { font-size : 1 rem ; }
h4 { font-size : .9 rem ; }
h5 { font-size : .8 rem ; }
h6 { font-size : .7 rem ; }
h3 {
margin-top : 0 ;
margin-bottom : 0 ;
}
h1 . title {
margin-bottom : 4px ;
padding : . 7rem ;
max-width : 41rem ;
}
ul {
list-style : square ;
padding-left : 0px ;
list-style-position : inside ;
}
li ul {
padding-left : 1 . 2rem ;
}
li :: marker {
color : # 2A9 ;
}
. subtitle {
/* Add extra padding to align with the title above */
padding-left : . 7rem ;
}
/* Article/posts styling */
main . article {
display : flex ;
flex-direction : column ;
width : 100 % ;
margin : 0 0 ;
}
main . article article > : first-child {
/* header div already has padding-bottom */
margin-top : 0 ;
padding-top : 0 ;
}
main . article article p {
overflow-x : hidden ;
}
main . article article p : hover {
overflow-x : revert ;
}
main . article . title {
border-bottom : double 3px # d5d5d5 ;
border-left : double 3px # d5d5d5 ;
border-radius : 6px ;
background-color : var ( --color-bg-secondary ) ;
}
@ media ( min-width : 1280px ) {
# bee-emoji-svg , # bee-emoji-svg :: before {
display : inline-block ! important ;
}
. logo : hover , . logo : hover :: after {
display : inline ! important ;
}
main {
z-index : 1 ;
margin : 0 auto ;
padding : 0 ;
}
header {
margin : 2 . 0rem 0 3 . 5rem 3rem ;
padding : 0 . 2rem 0 ;
}
header nav a {
margin : 0 0 0 1 . 2rem ;
display : inline ;
}
footer {
text-align : right ;
}
. logo {
text-align : left ;
}
. logo a {
font-size : 6rem ;
}
img . fit {
width : 100 % ;
height : auto ;
object-fit : cover ;
}
main . article {
display : grid ;
grid-template-columns : 2fr minmax ( 50em , 1fr ) 2fr ;
grid-column-gap : 10px ;
grid-row-gap : 3px ;
grid-auto-rows : minmax ( auto , 0fr ) ;
}
main . article article {
padding-right : 4rem ;
}
}
main . article div . left {
grid-column : 1 / span 1 ;
grid-row : 2 / 3 ;
min-width : 180px ;
order : 2 ;
padding-left : 2em ;
padding-right : 2em ;
}
main . article article {
line-height : 1 . 7 ;
text-decoration-color : # 0000001a ;
grid-column : 1 / span 3 ;
grid-row : 2 / 3 ;
order : 1 ;
background : var ( --color-bg ) ;
display : grid ;
grid-template-columns : minmax ( 5vw , 1fr ) minmax ( auto , 65ch ) minmax ( 5vw , 1fr ) ;
}
article > * + * {
margin-bottom : 1rem ;
margin-top : 0 ;
}
main . article div . right {
grid-column : 3 / span 1 ;
grid-row : 2 / 3 ;
min-width : 180px ;
order : 3 ;
padding-left : 2em ;
padding-right : 2em ;
}
main . article article > figure , video , div . sourceCode {
grid-column : 1 / span 3 ;
margin : 0 auto 1rem auto ;
max-width : max-content ;
width : 100 % ;
overflow-x : auto ;
}
main . article article > p , hr , blockquote , dl , ul , ol , h1 , h2 , h3 , h4 , h5 , h6 , table , div . manual-text {
grid-column : 2 / span 1 ;
}
main section {
background : var ( --color-bg ) ;
}
main section . header {
color : var ( --color-secondary-accent ) ;
font-size : 0 . 8rem ;
grid-column : 2 / 3 ;
grid-row : 1 / 2 ;
width : 100 % ;
padding-bottom : . 5rem ;
place-self : center ;
}
main . article article p : first-child {
margin-top : 0 ;
}
main . article article > p : first-child :: first-letter {
float : left ;
font-size : 500 % ;
/* font-style: italic;*/
height : 1rem ;
line-height : 1rem ;
margin : 0px ;
padding : 0 . 05em 0 0 ;
text-shadow : # d9d4d4 . 05em . 05em ;
}
. logo a {
font-size : 3 . 5rem ;
color : var ( --logo-color ) ;
font-weight : bold ;
text-decoration : none ;
}
/ *
. sidenote-left , . sidenote-right {
display : inline-block ;
width : 48 % ;
margin-top : 0 ;
margin-bottom : 0 ;
font-size : 7pt ;
line-height : 1 . 3 ;
vertical-align : baseline ;
}
* /
/* Typography */
code {
vertical-align : baseline ;
display : inline-block ;
padding : 2px 3px 4px 3px ;
font-weight : 800 ;
color : # 006266 ;
line-height : 1 ;
font-family : var ( --font-monospace ) ;
}
code ,
samp {
background-color : # dbdbdb ;
color : black ;
border-radius : var ( --border-radius ) ;
text-align : var ( --justify-normal ) ;
vertical-align : text-top ;
padding : . 15rem . 3em . 15rem . 3rem ;
}
code : not ( . sourceCode )
{
display : inline-flex ;
}
p {
text-align : justify ;
text-align-last : left ;
text-justify : inter-character ;
hyphens : auto ;
}
kbd . □ . ▭ {
width : auto ;
font-weight : 800 ;
padding : 13px 5px ;
/* box-shadow: 2px 3px #8e897a; */
box-shadow : 3px 5px # 8e897a , 2px 0px 2px -1px inset # bbb , -1px 0px 2px -1px inset # bbb , -2px 3px # 8e897a , -3px 5px # 8e897a , 3px 5px # 8e897a , -2px 3px # 8e897a , 2px 3px # 8e897a , 2px 3px # 8e897a ;
2020-07-30 13:35:35 +03:00
margin : . 5rem . 25rem 0rem 0rem ;
2020-07-30 11:25:40 +03:00
}
kbd . □ . ▭ : active {
box-shadow : 1px 0px 1px # c1c0c0 inset , -1px 0px 1px # c1c0c0 inset , -3px 3px # a29b9b , 3px 3px # a29b9b , -2px 2px # a29b9b , 2px 2px # a29b9b , -1px 1px # a29b9b , 1px 1px # a29b9b ;
top : 3px ;
position : relative ;
}
kbd . □ : active {
color : black ;
box-shadow : 1px 1px 0px # ddd inset ;
top : 1px ;
position : relative ;
}
kbd . □ {
font-weight : 800 ;
border : 1px solid # cecece ;
background : # f7f7e7 ;
color : # 151515 ;
/* box-shadow: 2px 1px #8e897a;*/
box-shadow : 1px 3px darkgray , -1px 3px darkgray , 1px 2px darkgray , -1px 2px darkgray ;
border-radius : 3px ;
display : inline-block ;
font-size : . 85em ;
line-height : 1 ;
padding : 2px 4px ;
white-space : nowrap ;
user-select : none ;
cursor : pointer ;
transform : translateY ( -0 . 1rem ) ;
vertical-align : text-bottom ;
}
/* for keys that aren't entirely square */
. thin-kbd . □ . ▭ {
padding-right : 7px ;
padding-left : 8px ;
}
. sourceCode code {
font-weight : 600 ;
}
@ media ( min-width : 320px ) {
# bee-emoji-svg , # bee-emoji-svg :: before , . logo : hover :: after {
display : none ;
}
body {
2020-07-30 13:35:35 +03:00
padding : 0 8px ;
2020-07-30 11:25:40 +03:00
}
header {
margin : . 5rem 0 2 . 0rem 0 ;
}
footer {
text-align : center ;
}
. logo a {
font-size : 3 . 5rem ;
}
header nav {
padding-bottom : . 7rem ;
}
header nav a {
display : inline ;
margin : 0 0 . 6rem ;
font-size : 1 . 1rem ;
width : min-content ;
}
. screenshots {
flex-direction : column ;
}
}
@ media ( min-width : 1140px ) {
main {
z-index : 1 ;
padding : 0 ;
}
2020-07-30 13:35:35 +03:00
body {
padding : 0 5 % ;
}
2020-07-30 11:25:40 +03:00
header nav a {
margin : 0 0 0 1 . 2rem ;
display : inline ;
white-space : nowrap ;
}
footer {
text-align : right ;
}
. screenshots {
flex-direction : row ;
}
}
img . fit {
width : 100 % ;
height : auto ;
object-fit : cover ;
}
img . full-width {
width : 100 % ;
max-width : max-content ;
height : auto ;
object-fit : cover ;
}
. fit-right {
margin-left : 10 % ;
}
. fit-left {
margin-right : 10 % ;
}
. logo {
margin : auto auto 0 0 ;
}
. logo-img {
width : 100 % ;
height : auto ;
object-fit : cover ;
}
figure {
margin : 0 1 . 2rem 1 . 2rem 0 ;
}
. bold {
font-weight : 800 ;
}
figcaption {
font-size : 8pt ;
font-weight : bolder ;
color : var ( --color-text ) ;
background : var ( --color-bg-secondary ) ;
border : 1px outset var ( --color-bg-secondary ) ;
border-radius : 0 0 2px 2px ;
margin-top : -3px ;
padding-bottom : 7px ;
padding-left : 2 % ;
padding-top : 5px ;
min-width : 100 %
}
figcaption a {
text-decoration : inherit ;
color : inherit ;
}
figcaption a : visited {
color : inherit ;
}
/* Index styling */
. wrapper {
display : grid ;
grid-auto-columns : minmax ( 100px , auto ) ;
grid-gap : 10px ;
grid-auto-rows : minmax ( 100px , auto ) ;
}
h1 , h2 , h3 , h4 , h5 , h6 {
/ * border-bottom : 2px inset # 000 ;
border-left : 1px solid # b2b2b2 ;
border-right : 1px solid # b2b2b2 ;
border-top : 1px solid # c8c8c8 ;
border-style : outset ;
border-radius : 3px ; * /
background : var ( --color-bg ) ;
margin-top : 0 ;
max-width : inherit ;
}
h1 span , h2 span , h3 span , h4 span , h5 span , h6 span {
background : var ( --color-bg ) ;
}
h1 a , h2 a , h3 a , h4 a , h5 a , h6 a {
background : var ( --color-bg ) ;
color : var ( --color-text ) ;
}
@ media ( max-width : 1280px ) {
/ * . wrapper > * : first-child {
display : flex ;
flex-wrap : wrap ;
grid-column : 1 ;
grid-row : 1 / 1 ;
} * /
section . index-intro {
width : 100 % ;
}
section . index-intro , section . index-why , section . index-install , section . index-build , section . index-features , section-announcements {
/*border-bottom: 2px solid #6c6e6f;*/
min-width : 100 % ;
margin-bottom : 10px ;
}
}
@ media ( min-width : 1280px ) {
. wrapper > * : first-child {
display : grid ;
grid-column : 1 ;
grid-row : 1 / 1 ;
grid-template-areas :
"term term install install build"
"term term why why why"
"screenshots screenshots features features announcements"
"screenshots screenshots features features announcements" ;
grid-column-gap : 3rem ;
grid-row-gap : 1rem ;
grid-template-columns : repeat ( 2 , min-content ) repeat ( 2 , auto ) ;
grid-template-rows : repeat ( 2 , min-content ) repeat ( 2 , auto ) ;
}
section . index-why > div {
display : grid ;
grid-template-columns : 11fr 8fr ;
box-sizing : border-box ;
grid-column-gap : 3rem ;
padding : 0 1rem 0 0 ;
}
section . index-why > div > * + * {
margin-bottom : . 5rem ;
margin-top : 0 ;
}
section . index-install ol {
margin-bottom : 0px ;
}
section . index-install ol > li + li {
margin-bottom : . 2rem ;
margin-top : 0 ;
}
section . index-install , section . index-build {
margin-bottom : 20px ;
}
section . index-intro {
width : 37vw ;
}
}
section h1 {
font-size : 1 . 21rem ;
margin-top : 0px ;
}
h1 {
/* border-bottom: 2px inset #000;*/
max-width : max-content ;
/*border-left: 1px solid #b2b2b2;*/
/* border-radius: 2px;*/
background : var ( --color-bg ) ;
}
section . index-intro {
grid-area : term ;
}
section . index-why {
grid-area : why ;
}
section . index-features {
grid-area : features ;
}
section . index-install {
grid-area : install ;
}
section . index-build {
grid-area : build ;
}
section . index-announcements {
grid-area : announcements ;
}
ul . index-announcement-list {
margin-bottom : 0 ;
height : 100 % ;
}
section . index-install > h2 {
margin-bottom : 0 ;
}
section . index-install details > summary {
display : inline-block ;
}
section . index-install details > summary :: after {
content : " (help) " ;
color : var ( --color-hyperlink ) ;
font-size : . 6rem ;
cursor : pointer ;
}
section . index-install details > summary > code {
color : var ( --color-petrol ) ;
font-size : 119 % ;
}
. index-screenshots {
grid-area : screenshots ;
display : grid ;
grid-template-columns : repeat ( auto-fill , minmax ( 135px , 1fr ) ) ;
grid-template-rows : repeat ( auto-fill , minmax ( 80px , 1fr ) ) ;
grid-gap : 5px ;
align-items : stretch ;
margin : 0 ;
}
. index-screenshots > * {
flex : initial ;
flex : 0 22 % ;
flex-shrink : -1 ;
}
. index-screenshots a {
height : 100 % ;
}
. index-screenshots img {
object-fit : contain ;
width : 100 % ;
height : inherit ;
background : # 444 ;
}
. xterm-title {
margin : initial ;
background : # 22AA99 ;
color : var ( --color-bg ) ;
font-size : . 8rem ;
padding : 0 . 4em 0rem ;
width : auto ;
min-width : inherit ;
font-weight : 800 ;
word-break : keep-all ;
padding-left : . 5rem ;
font-family : var ( --font-sans-serif ) ;
text-shadow : 0px 1px var ( --color-secondary-accent ) ;
}
h1 . xterm {
font-family : revert ;
font-variant-caps : initial ;
max-width : initial ;
width : initial ;
border : initial ;
padding : initial ;
overflow : hidden ;
font-size : 12px ;
direction : ltr ;
text-align : left ;
background : # 22AA99 ;
padding : 0px ;
border : 1px solid black ;
width : inherit ;
padding-top : . 3rem ;
padding-bottom : . 3rem ;
}
# main_svg {
width : inherit ;
border : 1px solid black ;
display : block ;
}
/* Index styling end */
/* lightbox */
/*Eliminates padding, centers the thumbnail */
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
figure : not ( . lightbox-target ) {
display : flex ;
flex-direction : column ;
max-width : max-content ;
background-image : url ( "data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23b9b9b9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E" ) ;
background-color : # ccc ;
}
figure : not ( . lightbox-target ) > * {
align-self : center ;
}
. lightbox-target {
z-index : 5 ;
pointer-events : none ;
position : absolute ;
top : 0 ;
left : 0 ;
right : 0 ;
bottom : 0 ;
width : 100 % ;
height : 100 % ;
opacity : 0 ;
/* overflow: hidden; */
overflow-x : scroll ;
padding : 0 ;
text-align : center ;
margin : 0 ;
}
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
. lightbox-target img {
margin : auto ;
max-height : 0 % ;
max-width : 0 % ;
border : 3px solid white ;
box-shadow : 0px 0px 8px rgba ( 0 , 0 , 0 , . 3 ) ;
box-sizing : border-box ;
z-index : 2 ;
}
. lightbox-target figcaption {
margin : auto ;
padding : 18px ;
color : # 5b5e60 ;
background : # f6f6f6 ;
border : 3px solid # ededed ;
z-index : 3 ;
font-size : 2rem ;
pointer-events : none ;
/* fallback in case max-content is not supported by the browser */
max-width : 100 % ;
max-width : max-content ;
width : auto ;
height : min-content ;
}
/* Styles the close link, adds the slide down transition */
a . lightbox-close {
width : 50px ;
height : 50px ;
color : white ;
opacity : 1 ;
text-decoration : none ;
pointer-events : auto ;
z-index : 4 ;
font-size : 2 . 5rem ;
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
. lightbox-target : target {
opacity : 1 ;
top : 0 ;
bottom : 0 ;
}
. lightbox-target : target img {
max-height : 80vh ;
/* fallback in case max-content is not supported by the browser */
max-width : 100 % ;
max-width : max-content ;
height : auto ;
width : auto ;
}
. lightbox-target : target a . lightbox-close {
top : 0px ;
}
/* IBM's colorblind safe palette */
. cornflower-blue {
color : # 648FFF ;
}
. purple {
color : # 785EF0 ;
}
. cerise {
color : # DC267F ;
}
. blaze-orange {
color : # FE6100 ;
}
. amber {
color : # FFB000 ;
}
. dull-red {
color : # CC6677 ;
}
. cyan {
color : # 44AA99 ;
}
. green {
color : # 117733 ;
}
. float_left_img {
max-width : 25 % ;
min-width : 5vw ;
float : left ;
padding : . 4em ;
}
. screenshots-page {
display : flex ;
flex-wrap : wrap ;
}
. screenshots-page > * {
flex : 1 0 30 % ;
min-width : 200px ;
}
. screenshots-page > figure > a {
height : 100 % ;
background : # 1c1c1c ;
}
. screenshots-page > figure > a > img {
height : inherit ;
width : 100 % ;
object-fit : contain ;
background : # 444 ;
}
. screenshots-page > figure : not ( . lightbox-target ) : nth-child ( odd ) > a > img {
background-color : # cccccc ;
background-image : url ( "data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23b9b9b9' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E" ) ;
}
code . Nm :: after {
/*content: " 🐝";*/
content : " " ;
background-image : var ( --bee-emoji-svg ) ;
background-repeat : no-repeat ;
height : . 9rem ;
width : . 9rem ;
filter : hue-rotate ( 170deg ) grayscale ( 42 % ) ;
transform : translate ( 1px , -1px ) ;
margin-bottom : -2px ;
}
/ * ! * * * * * * * * * * * * * * * * * * * * \
CSShake : : shake-little
v1 . 5 . 0
CSS classes to move your DOM
( c ) 2015 @ elrumordelaluz
http : / / elrumordelaluz . github . io / csshake /
Licensed under MIT
\ * * * * * * * * * * * * * * * * * * * * * /
code . Nm :: after {
display : inline-block ;
transform-origin : center center ; }
. shake-freeze ,
. shake-constant . shake-constant--hover : hover ,
. shake-trigger : hover . shake-constant . shake-constant--hover {
animation-play-state : paused ; }
. shake-freeze : hover ,
. shake-trigger : hover . shake-freeze , code . Nm : hover :: after ,
. shake-trigger : hover code . Nm :: after {
animation-play-state : running ; }
@ keyframes shake-little {
2 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
4 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
6 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
8 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
10 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
12 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
14 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
16 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
18 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
20 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
22 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
24 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
26 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
28 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
30 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
32 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
34 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
36 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
38 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
40 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
42 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
44 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
46 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
48 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
50 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
52 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
54 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
56 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
58 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
60 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
62 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
64 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
66 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
68 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
70 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
72 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
74 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
76 % {
transform : translate ( 0px , 1px ) rotate ( 0 . 5deg ) ; }
78 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
80 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
82 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
84 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
86 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
88 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
90 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
92 % {
transform : translate ( 1px , 1px ) rotate ( 0 . 5deg ) ; }
94 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
96 % {
transform : translate ( 1px , 0px ) rotate ( 0 . 5deg ) ; }
98 % {
transform : translate ( 0px , 0px ) rotate ( 0 . 5deg ) ; }
0 % , 100 % {
transform : translate ( 0 , 0 ) rotate ( 0 ) ; } }
code . Nm : hover :: after ,
. shake-trigger : hover code . Nm :: after , . shake-little . shake-freeze , . shake-little . shake-constant {
animation-name : shake-little ;
animation-duration : 100ms ;
animation-timing-function : ease-in-out ;
animation-iteration-count : infinite ;
}
# bee-emoji-svg : hover :: before ,
. shake-trigger : hover . shake-little . shake-freeze , . shake-little . shake-constant {
animation : shake-little 50ms ease-in-out running 120 , harvest 10s 5500ms running steps ( 8 , jump-both ) infinite ;
}
2020-07-30 13:35:35 +03:00
. logo :: after {
transition : all 6 . 1s cubic-bezier ( . 68 , -0 . 55 , . 27 , 1 . 55 ) ;
2020-07-30 11:25:40 +03:00
}
. logo : hover :: after {
content : "🌸" ;
height : 3 . 5rem ;
width : 3 . 5rem ;
font-size : 2rem ;
position : relative ;
right : 3rem ;
z-index : -1 ;
transition : all 6 . 1s cubic-bezier ( . 68 , -0 . 55 , . 27 , 1 . 55 ) ;
}
# bee-emoji-svg : hover :: before {
transform : translateY ( 26px ) scale ( . 5 ) ;
transition : transform 6 . 1s cubic-bezier ( . 68 , -0 . 55 , . 27 , 1 . 55 ) ;
}
# bee-emoji-svg :: before {
content : " " ;
filter : hue-rotate ( 170deg ) grayscale ( 42 % ) ;
background-image : var ( --bee-emoji-svg ) ;
background-repeat : no-repeat ;
height : 3 . 5rem ;
width : 3 . 5rem ;
transition : transform 6 . 1s cubic-bezier ( . 68 , -0 . 55 , . 27 , 1 . 55 ) ;
}
# bee-emoji-svg {
height : 3 . 5rem ;
width : 3 . 5rem ;
cursor : url ( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="25px" height="25px"%3E%3Cpath fill="%2377B255" d="M28.938 27.441c-2.554-.89-8.111-.429-9.938 1.331V17c0-.553-.447-1-1-1s-1 .447-1 1v11.772c-1.827-1.76-7.384-2.221-9.938-1.331-.741.259 5.264 8.749 9.507 4.507.168-.168.306-.33.431-.49V35c0 .553.447 1 1 1s1-.447 1-1v-3.542c.125.16.263.322.431.49 4.243 4.242 10.248-4.248 9.507-4.507z"/%3E%3Cpath fill="%23CCD6DD" d="M12.562 25.65c-.619-.266-1.107-.837-1.378-1.513l-1.266-3.306-3.258-1.393c-1.336-.574-1.876-1.922-1.304-3.259l1.362-3.181-1.364-3.269c-.541-1.35.15-2.868 1.5-3.408l3.272-1.281 1.449-3.384C12.148.32 13.496-.22 14.833.352l3.258 1.396L21.358.382c.675-.271 1.411-.276 2.03-.011.619.265 1.114.819 1.385 1.494l1.274 3.29 3.309 1.417c1.336.572 1.875 1.921 1.305 3.258l-1.451 3.384 1.365 3.267c.541 1.35-.15 2.866-1.5 3.407l-3.271 1.281-1.363 3.183c-.572 1.336-1.922 1.877-3.258 1.305l-3.308-1.417-3.267 1.364c-.676.271-1.427.311-2.046.046z"/%3E%3Cpath fill="%23E1E8ED" d="M29.356 6.572l-3.309-1.417-.055-.143c-1.565 1.337-5.215 4.354-5.215 4.354l.007.123C20.015 8.879 19.057 8.5 18 8.5V1.709L14.833.353c-1.337-.572-2.685-.032-3.258 1.304l-1.449 3.384-.061.024 4.753 4.754c-.814.813-1.318 1.938-1.318 3.181H6.717l-1.361 3.178c-.572 1.337-.032 2.686 1.304 3.259l3.258 1.394.002.006 4.496-5.142c.822 1.09 2.115 1.805 3.584 1.805h.005c.006 1.979.015 5.273.012 6.801l3.164 1.356c1.336.572 2.686.031 3.258-1.305l1.362-3.18-5.192-4.517c1.14-.816 1.89-2.145 1.89-3.654 0-.071-.018-.137-.021-.208 1.802.182 4.951.472 6.822.642l-.092-.22L30.66 9.83c.571-1.337.031-2.686-1.304-3.258z"/%3E%3Ccircle fill="%23F4900C" cx="18" cy="13" r="5"/%3E%3C/svg%3E' ) , auto ;
}
# bee-emoji-svg : hover {
animation : flowercursor 0 . 65s infinite ;
}
. sakura {
opacity : 0 ;
position : fixed ;
}
. envelope {
filter : grayscale ( ) ;
opacity : 0 ;
position : fixed ;
}
# bee-emoji-svg : hover . sakuraA , . sakuraA : hover {
opacity : 1 ;
animation-name : none ;
transition : opacity 0 . 01s linear ;
font-size : 1em ;
}
# bee-emoji-svg : hover # envelopeA , # envelopeA : hover {
animation-name : envelope-flyA ;
animation-delay : 3 . 5s ;
}
# bee-emoji-svg : hover # envelopeB , # envelopeB : hover {
animation-name : envelope-flyB ;
animation-delay : 3 . 55s ;
margin-top : 2rem ;
}
# bee-emoji-svg : hover # envelopeC , # envelopeC : hover {
animation-name : envelope-flyC ;
animation-delay : 3 . 6s ;
margin-top : 3rem ;
}
# bee-emoji-svg : hover # envelopeD , # envelopeD : hover {
animation-name : envelope-flyD ;
animation-delay : 3 . 65s ;
margin-top : 2rem ;
}
# bee-emoji-svg : hover . envelope , . envelope : hover {
animation-duration : 1s ;
animation-timing-function : linear ;
animation-iteration-count : 1 ;
animation-play-state : running ;
font-size : 2em ;
}
@ keyframes envelope-flyA {
0 % {
opacity : 1 ;
transform : translate ( 0 , 0 ) rotate ( -45deg ) ;
}
20 % {
transform : translate ( 15px , -15px ) rotate ( -45deg ) ;
}
40 % {
transform : translate ( 30px , -30px ) rotate ( -45deg ) ;
opacity : . 4 ;
}
60 % {
transform : translate ( 45px , -45px ) rotate ( -45deg ) ;
opacity : . 1 ;
}
80 % {
transform : translate ( 60px , -60px ) rotate ( -45deg ) ;
opacity : 0 ;
}
100 % {
opacity : 0 ;
}
}
@ keyframes envelope-flyB {
0 % {
opacity : 1 ;
transform : translate ( 0 , 0 ) rotate ( 45deg ) ;
}
20 % {
transform : translate ( 15px , 15px ) rotate ( 45deg ) ;
}
40 % {
transform : translate ( 30px , 30px ) rotate ( 45deg ) ;
opacity : . 4 ;
}
60 % {
transform : translate ( 45px , 45px ) rotate ( 45deg ) ;
opacity : . 1 ;
}
80 % {
transform : translate ( 60px , 60px ) rotate ( 45deg ) ;
opacity : 0 ;
}
100 % {
opacity : 0 ;
}
}
@ keyframes envelope-flyC {
0 % {
opacity : 1 ;
transform : translate ( 0 , 0 ) rotate ( 60deg ) ;
}
20 % {
transform : translate ( 15px , 30px ) rotate ( 60deg ) ;
}
40 % {
transform : translate ( 30px , 60px ) rotate ( 60deg ) ;
opacity : . 4 ;
}
60 % {
transform : translate ( 45px , 90px ) rotate ( 60deg ) ;
opacity : . 1 ;
}
80 % {
transform : translate ( 60px , 120px ) rotate ( 60deg ) ;
opacity : 0 ;
}
100 % {
opacity : 0 ;
}
}
@ keyframes envelope-flyD {
0 % {
opacity : 1 ;
transform : translate ( 0 , 0 ) ;
}
20 % {
transform : translate ( 15px , 0 ) ;
}
40 % {
transform : translate ( 30px , 0 ) ;
opacity : . 4 ;
}
60 % {
transform : translate ( 45px , 0 ) ;
opacity : . 1 ;
}
80 % {
transform : translate ( 80px , 0 ) ;
opacity : 0 ;
}
100 % {
opacity : 0 ;
}
}
@ keyframes harvest {
0 % {
transform : rotate ( 5deg ) translateY ( 3px ) translateX ( 3px ) ;
transition : transform linear ;
}
40 % {
transform : translateY ( 3px ) translateX ( 7px ) rotate ( 12deg ) ;
transition : transform linear ;
}
40 % {
transform : translateY ( 3px ) translateX ( 4px ) rotate ( 12deg ) ;
transition : transform linear ;
}
60 % {
transform : translateY ( 3px ) rotate ( 12deg ) ;
transition : transform linear ;
}
70 % {
transform : translateY ( 3px ) rotate ( 10deg ) ;
transition : transform linear ;
}
80 % {
transform : translateY ( 3px ) translateX ( 2px ) rotate ( 7deg ) ;
transition : transform linear ;
}
100 % {
transform : translate ( 3px , 3px ) rotate ( 5deg ) ; }
}
@ keyframes flowercursor {
0 % {
cursor : url ( "/css/flowercursor.svg" ) , auto ;
}
10 % {
cursor : url ( "/css/flowercursor1.svg" ) , auto ;
}
20 % {
cursor : url ( "/css/flowercursor1.svg" ) , auto ;
}
30 % {
cursor : url ( "/css/flowercursor1.svg" ) , auto ;
}
60 % {
cursor : url ( "/css/flowercursor.svg" ) , auto ;
}
70 % {
cursor : url ( "/css/flowercursor5.svg" ) , auto ;
}
80 % {
cursor : url ( "/css/flowercursor5.svg" ) , auto ;
}
90 % {
cursor : url ( "/css/flowercursor5.svg" ) , auto ;
}
}
. window {
box-shadow : inset -1px -1px # 0a0a0a ,
inset 1px 1px # ffffff , inset -2px -2px # 808080 ,
inset 2px 2px # dfdfdf ;
background : # c0c0c0 ;
padding : 3px ;
padding-bottom : 0px ;
}
. window > div : last-child {
margin : 0 ;
}
button ,
label ,
input ,
textarea ,
select ,
option ,
ul . tree-view ,
. window ,
. title-bar {
-webkit-font-smoothing : none ;
font-size : 11px ;
}
. title-bar {
background : # 163339 ;
font-family : "Liberation Sans" , "DejaVu Sans" , sans ;
border-bottom : 1px solid # fff ;
height : initial ;
max-height : min-content ;
flex : initial ;
padding : 2px ;
display : flex ;
justify-content : space-between ;
align-items : center ;
}
. title-bar-text {
text-shadow : 1px 0px # 424 ;
user-select : none ;
font-weight : bold ;
color : # fff ;
letter-spacing : 0 ;
margin-right : 24px ;
}
. title-bar-controls {
display : flex ;
}
. title-bar-controls button [ aria-label = "Minimize" ] {
background-position : top -1px center ;
background-size : 100 % ;
background-image : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cdefs/%3E%3Cpath stroke='%23000' d='M5 7h6M6 8h4M7 9h2'/%3E%3C/svg%3E" ) ;
background-repeat : no-repeat ;
}
. title-bar-controls button [ aria-label = "Maximize" ] {
background-position : top -2px center ;
background-size : 100 % ;
background-image : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cdefs/%3E%3Cpath stroke='%23000' d='M7 7h2M6 8h4M5 9h6'/%3E%3C/svg%3E" ) ;
background-repeat : no-repeat ;
}
. title-bar-controls button {
padding : 0 ;
display : block ;
min-width : 14px ;
min-height : 12px ;
box-sizing : border-box ;
border : none ;
background : # c0c0c0 ;
background-position-x : 0 % ;
background-position-y : 0 % ;
background-repeat : repeat ;
background-image : none ;
background-size : auto ;
box-shadow : inset -1px -1px # 0a0a0a , inset 1px 1px # fff , inset -2px -2px # 808080 , inset 2px 2px # dfdfdf ;
border-radius : 0 ;
}
. title-bar-controls button : disabled {
background-blend-mode : overlay ;
color : # 808080 ;
text-shadow : 1px 1px 0 # fff ;
}
. title-bar-controls button [ aria-label = "Close" ] {
background-position : top -2px center ;
background-size : 100 % ;
background-image : url ( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cpath stroke='%23000' d='M4 5h2m4 0h2M4 6h3m2 0h3M5 7h6M6 8h4M6 9h4m-5 1h6m-7 1h3m2 0h3m-8 1h2m4 0h2'/%3E%3C/svg%3E" ) ;
margin-left : 2px ;
background-repeat : no-repeat ;
}