diff options
| -rw-r--r-- | common.css | 82 | ||||
| -rw-r--r-- | index.shtml | 2 | ||||
| -rw-r--r-- | theme0a.css | 86 | ||||
| -rw-r--r-- | theme0b.css | 86 | ||||
| -rw-r--r-- | theme1a.css | 86 | ||||
| -rw-r--r-- | theme1b.css | 86 | ||||
| -rw-r--r-- | theme2a.css | 86 | ||||
| -rw-r--r-- | theme2b.css | 86 | ||||
| -rw-r--r-- | theme3a.css | 86 | ||||
| -rw-r--r-- | theme3b.css | 86 |
10 files changed, 238 insertions, 534 deletions
@@ -11,22 +11,11 @@ font-variant-ligatures: none; } a{ -text-decoration:none; -} -a:link{ -color:#1194FF; -} -a:visited{ -color:#20ACFF; -} -a:hover{ -color:#3FBFFF; -} -a:active{ -color:#CCCCFF; + text-decoration:none; } div.comment{ - border:1px solid #CCC; + border:1px solid; + border-color: var(--secondary-fg); margin:1em; } div.author{ @@ -70,3 +59,68 @@ textarea{ outline:none !important; background-color:rgba(0,0,0,0) !important; } +body{ + background-color: var(--principal-bg); + background-image: var(--bg-pattern); + background-repeat: repeat; + color: var(--principal-fg); +} +del{ + text-decoration-color: var(--principal-fg); +} +#panel li a.active{ + background-color: var(--list-active-bg); +} +#panel li a:hover:not(.active){ + background-color: var(--list-highlighted-bg); +} +#panel,#footer{ + background-color: var(--secondary-bg); + background-image: var(--bg-pattern); + background-repeat: repeat; +} +#content .block{ + border: 1px solid; + border-color: var(--secondary-fg); +} +a.highlighted{color: var(--link-highlighted-fg) !important;} +a:link{ + color: var(--link-fg); +} +a:visited{ + color: var(--link-visited-fg); +} +a:hover{ + color: var(--link-hover-fg); +} +a:active{ + color: var(--link-active-fg); +} +blockquote{ + border: 1px solid; + border-color: var(--secondary-fg); +} +button,.fakebtn{ + color: var(--interactive-fg); + background-color: var(--interactive-bg); +} +button:hover,.fakebtn:hover{ + background-color: var(--interactive-hover-bg); +} +button:active,.fakebtn:active{ + background-color: var(--interactive-active-bg); +} +button:disabled{ + background-color: var(--interactive-disabled-bg); +} +input[type="text"]{ + color: var(--principal-fg); + border-bottom-color: var(--interactive-bg); +} +textarea{ + color: var(--principal-fg); + border-color: var(--interactive-bg); +} +.widgetbg{background-color: var(--widget-area-bg);} +.sliderb1{background-color: var(--slider-empty-bg);} +.sliderb2{background-color: var(--slider-filled-bg);} diff --git a/index.shtml b/index.shtml index 3ddaffe..8c80b7b 100644 --- a/index.shtml +++ b/index.shtml @@ -4,6 +4,8 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <meta name="theme-color" content="#000000"> +<meta name="description" content="Chris Xiong's personal homepage"> +<meta name="author" content="Chris Xiong"> <title>Chrisoft::Home</title> <link rel="icon" href="./favicon.png"> <link rel="preload" href="/themes.svg" as="image"> diff --git a/theme0a.css b/theme0a.css index 119d19d..c5bb30f 100644 --- a/theme0a.css +++ b/theme0a.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #F9EFF6; +:root{ + --principal-bg: #F9EFF6; + --principal-fg: #000; + --secondary-bg: #EEE0E9; + --secondary-fg: #333; + --list-active-bg: #EEC0DD; + --list-highlighted-bg: #FCE; + --link-fg: #CF4AFF; + --link-visited-fg: #DA50FF; + --link-hover-fg: #DD40FF; + --link-active-fg: #EEAAFF; + --link-highlighted-fg: #EA0; + --interactive-bg: #C7B; + --interactive-fg: #FFF; + --interactive-hover-bg: #D8C; + --interactive-active-bg: #E9D; + --interactive-disabled-bg: #999; + --widget-area-bg: rgba(204,204,204,0.6); + --slider-empty-bg: rgba(184,122,171,0.6); + --slider-filled-bg: #F0A0E0; + --bg-pattern: url("/pattern0a.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern0a.png"); - background-repeat: repeat; - color: #000; -} -del{ - text-decoration-color: #000; -} -#panel li a.active{ -background-color:#EEC0DD; -} -#panel li a:hover:not(.active){ -background-color:#FCE; -} -#panel,#footer{ - background-color:#EEE0E9; - background-image: url("/pattern0a.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #333; -} -a.highlighted{color:#EA0 !important;} -a:link{ -color:#CF4AFF; -} -a:visited{ -color:#DA50FF; -} -a:hover{ -color:#DD40FF; -} -a:active{ -color:#EEAAFF; -} -blockquote{ -border: 1px solid #333; -} -button,.fakebtn{ - color:white; - background-color:#C7B; -} -button:hover,.fakebtn:hover{ - background-color:#D8C; -} -button:active,.fakebtn:active{ - background-color:#E9D; -} -button:disabled{ - background-color:#999; -} -input[type="text"]{ - color:#000; - border-bottom-color:#C7B; -} -textarea{ - color:#000; - border-color:#C7B; -} -.widgetbg{background-color:rgba(204,204,204,0.6);} -.sliderb1{background-color:rgba(184,122,171,0.6);} -.sliderb2{background-color:#F0A0E0;} diff --git a/theme0b.css b/theme0b.css index e820160..18c2c85 100644 --- a/theme0b.css +++ b/theme0b.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #2F0933; +:root{ + --principal-bg: #2F0933; + --principal-fg: #FFF; + --secondary-bg: #440C48; + --secondary-fg: #738; + --list-active-bg: #849; + --list-highlighted-bg: #738; + --link-fg: #CF4AFF; + --link-visited-fg: #DA50FF; + --link-hover-fg: #DD40FF; + --link-active-fg: #EEAAFF; + --link-highlighted-fg: #FC0; + --interactive-bg: #746; + --interactive-fg: #FFF; + --interactive-hover-bg: #958; + --interactive-active-bg: #A59; + --interactive-disabled-bg: #666; + --widget-area-bg: rgba(64,24,80,0.6); + --slider-empty-bg: rgba(163,108,152,0.6); + --slider-filled-bg: #C8B; + --bg-pattern: url("/pattern0b.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern0b.png"); - background-repeat: repeat; - color: #FFF; -} -del{ - text-decoration-color: #FFF; -} -#panel li a.active{ -background-color:#849; -} -#panel li a:hover:not(.active){ -background-color:#738; -} -#panel,#footer{ - background-color:#440C48; - background-image: url("/pattern0b.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #738; -} -a.highlighted{color:#FC0 !important;} -a:link{ -color:#CF4AFF; -} -a:visited{ -color:#DA50FF; -} -a:hover{ -color:#DD40FF; -} -a:active{ -color:#EEAAFF; -} -blockquote{ -border: 1px solid #738; -} -button,.fakebtn{ - color:white; - background-color:#746; -} -button:hover,.fakebtn:hover{ - background-color:#958; -} -button:active,.fakebtn:active{ - background-color:#A59; -} -button:disabled{ - background-color:#666; -} -input[type="text"]{ - color:#FFF; - border-bottom-color:#746; -} -textarea{ - color:#FFF; - border-color:#746; -} -.widgetbg{background:rgba(64,24,80,0.6);} -.sliderb1{background-color:rgba(163,108,152,0.6);} -.sliderb2{background-color:#C8B;} diff --git a/theme1a.css b/theme1a.css index 3b41360..927b5f9 100644 --- a/theme1a.css +++ b/theme1a.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #FFF; +:root{ + --principal-bg: #FFF; + --principal-fg: #000; + --secondary-bg: #EEE; + --secondary-fg: #333; + --list-active-bg: #CEC; + --list-highlighted-bg: #DFD; + --link-fg: #1194FF; + --link-visited-fg: #20ACFF; + --link-hover-fg: #3FBFFF; + --link-active-fg: #CCCCFF; + --link-highlighted-fg: #EA0; + --interactive-bg: #4A4; + --interactive-fg: #FFF; + --interactive-hover-bg: #5B5; + --interactive-active-bg: #6C6; + --interactive-disabled-bg: #999; + --widget-area-bg: rgba(204,204,204,0.6); + --slider-empty-bg: rgba(64,240,96,0.6); + --slider-filled-bg: #10C048; + --bg-pattern: url("/pattern1a.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern1a.png"); - background-repeat: repeat; - color: #000; -} -del{ - text-decoration-color: #000; -} -#panel li a.active{ -background-color:#CEC; -} -#panel li a:hover:not(.active){ -background-color:#DFD; -} -#panel,#footer{ - background-color:#EEE; - background-image: url("/pattern1a.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #333; -} -a.highlighted{color:#EA0 !important;} -a:link{ -color:#1194FF; -} -a:visited{ -color:#20ACFF; -} -a:hover{ -color:#3FBFFF; -} -a:active{ -color:#CCCCFF; -} -blockquote{ -border: 1px solid #333; -} -button,.fakebtn{ - color:white; - background-color:#4A4; -} -button:hover,.fakebtn:hover{ - background-color:#5B5; -} -button:active,.fakebtn:active{ - background-color:#6C6; -} -button:disabled{ - background-color:#999; -} -input[type="text"]{ - color:#000; - border-bottom-color:#4A4; -} -textarea{ - color:#000; - border-color:#4A4; -} -.widgetbg{background-color:rgba(204,204,204,0.6);} -.sliderb1{background-color:rgba(64,240,96,0.6);} -.sliderb2{background-color:#10C048;} diff --git a/theme1b.css b/theme1b.css index 6da0da2..2374774 100644 --- a/theme1b.css +++ b/theme1b.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #090933; +:root{ + --principal-bg: #090933; + --principal-fg: #FFF; + --secondary-bg: #116; + --secondary-fg: #338; + --list-active-bg: #449; + --list-highlighted-bg: #338; + --link-fg: #1194FF; + --link-visited-fg: #20ACFF; + --link-hover-fg: #3FBFFF; + --link-active-fg: #CCCCFF; + --link-highlighted-fg: #FC0; + --interactive-bg: #161; + --interactive-fg: #FFF; + --interactive-hover-bg: #272; + --interactive-active-bg: #383; + --interactive-disabled-bg: #666; + --widget-area-bg: rgba(32,32,96,0.6); + --slider-empty-bg: rgba(49,184,73,0.6); + --slider-filled-bg: #0EA33D; + --bg-pattern: url("/pattern1b.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern1b.png"); - background-repeat: repeat; - color: #FFF; -} -del{ - text-decoration-color: #FFF; -} -#panel li a.active{ -background-color:#449; -} -#panel li a:hover:not(.active){ -background-color:#338; -} -#panel,#footer{ - background-color:#116; - background-image: url("/pattern1b.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #338; -} -a.highlighted{color:#FC0 !important;} -a:link{ -color:#1194FF; -} -a:visited{ -color:#20ACFF; -} -a:hover{ -color:#3FBFFF; -} -a:active{ -color:#CCCCFF; -} -blockquote{ -border: 1px solid #338; -} -button,.fakebtn{ - color:white; - background-color:#161; -} -button:hover,.fakebtn:hover{ - background-color:#272; -} -button:active,.fakebtn:active{ - background-color:#383; -} -button:disabled{ - background-color:#666; -} -input[type="text"]{ - color:#FFF; - border-bottom-color:#161; -} -textarea{ - color:#FFF; - border-color:#161; -} -.widgetbg{background:rgba(32,32,96,0.6);} -.sliderb1{background-color:rgba(49,184,73,0.6);} -.sliderb2{background-color:#0EA33D;} diff --git a/theme2a.css b/theme2a.css index 18da739..15bdabd 100644 --- a/theme2a.css +++ b/theme2a.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #F9F2EF; +:root{ + --principal-bg: #F9F2EF; + --principal-fg: #000; + --secondary-bg: #EEE5E0; + --secondary-fg: #333; + --list-active-bg: #EED0C0; + --list-highlighted-bg: #FDC; + --link-fg: #C89738; + --link-visited-fg: #B89433; + --link-hover-fg: #D6B637; + --link-active-fg: #D6C589; + --link-highlighted-fg: #A0E; + --interactive-bg: #CA7; + --interactive-fg: #FFF; + --interactive-hover-bg: #DB8; + --interactive-active-bg: #EC9; + --interactive-disabled-bg: #999; + --widget-area-bg: rgba(204,204,204,0.6); + --slider-empty-bg: rgba(184,152,110,0.6); + --slider-filled-bg: #DA6; + --bg-pattern: url("/pattern2a.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern2a.png"); - background-repeat: repeat; - color: #000; -} -del{ - text-decoration-color: #000; -} -#panel li a.active{ -background-color:#EED0C0; -} -#panel li a:hover:not(.active){ -background-color:#FDC; -} -#panel,#footer{ - background-color:#EEE5E0; - background-image: url("/pattern2a.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #333; -} -a.highlighted{color:#A0E !important;} -a:link{ -color:#C89738; -} -a:visited{ -color:#B89433; -} -a:hover{ -color:#D6B637; -} -a:active{ -color:#D6C589; -} -blockquote{ -border: 1px solid #333; -} -button,.fakebtn{ - color:white; - background-color:#CA7; -} -button:hover,.fakebtn:hover{ - background-color:#DB8; -} -button:active,.fakebtn:active{ - background-color:#EC9; -} -button:disabled{ - background-color:#999; -} -input[type="text"]{ - color:#000; - border-bottom-color:#CA7; -} -textarea{ - color:#000; - border-color:#CA7; -} -.widgetbg{background-color:rgba(204,204,204,0.6);} -.sliderb1{background-color:rgba(184,152,110,0.6);} -.sliderb2{background-color:#DA6;} diff --git a/theme2b.css b/theme2b.css index eae4c55..6208c0f 100644 --- a/theme2b.css +++ b/theme2b.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #1F1205; +:root{ + --principal-bg: #1F1205; + --principal-fg: #FFF; + --secondary-bg: #291806; + --secondary-fg: #873; + --list-active-bg: #974; + --list-highlighted-bg: #863; + --link-fg: #FF924A; + --link-visited-fg: #FF8A50; + --link-hover-fg: #FFA040; + --link-active-fg: #FFD7AA; + --link-highlighted-fg: #A1F; + --interactive-bg: #963; + --interactive-fg: #FFF; + --interactive-hover-bg: #A74; + --interactive-active-bg: #B85; + --interactive-disabled-bg: #666; + --widget-area-bg: rgba(80,64,24,0.6); + --slider-empty-bg: rgba(163,133,98,0.6); + --slider-filled-bg: #C96; + --bg-pattern: url("/pattern2b.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern2b.png"); - background-repeat: repeat; - color: #FFF; -} -del{ - text-decoration-color: #FFF; -} -#panel li a.active{ -background-color:#974; -} -#panel li a:hover:not(.active){ -background-color:#863; -} -#panel,#footer{ - background-color:#291806; - background-image: url("/pattern2b.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #873; -} -a.highlighted{color:#A1F !important;} -a:link{ -color:#FF924A; -} -a:visited{ -color:#FF8A50; -} -a:hover{ -color:#FFA040; -} -a:active{ -color:#FFD7AA; -} -blockquote{ -border: 1px solid #863; -} -button,.fakebtn{ - color:white; - background-color:#963; -} -button:hover,.fakebtn:hover{ - background-color:#A74; -} -button:active,.fakebtn:active{ - background-color:#B85; -} -button:disabled{ - background-color:#666; -} -input[type="text"]{ - color:#FFF; - border-bottom-color:#863; -} -textarea{ - color:#FFF; - border-color:#863; -} -.widgetbg{background:rgba(80,64,24,0.6);} -.sliderb1{background-color:rgba(163,133,98,0.6);} -.sliderb2{background-color:#C96;} diff --git a/theme3a.css b/theme3a.css index 927dc3e..34a0610 100644 --- a/theme3a.css +++ b/theme3a.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #EFF4F9; +:root{ + --principal-bg: #EFF4F9; + --principal-fg: #000; + --secondary-bg: #E0E7EE; + --secondary-fg: #333; + --list-active-bg: #C0D7EE; + --list-highlighted-bg: #CEF; + --link-fg: #3898C8; + --link-visited-fg: #338CB8; + --link-hover-fg: #37A1D6; + --link-active-fg: #89BCD6; + --link-highlighted-fg: #A0E; + --interactive-bg: #6BD; + --interactive-fg: #FFF; + --interactive-hover-bg: #6CF; + --interactive-active-bg: #9DF; + --interactive-disabled-bg: #999; + --widget-area-bg: rgba(204,204,204,0.6); + --slider-empty-bg: rgba(153,221,255,0.6); + --slider-filled-bg: #6BD; + --bg-pattern: url("/pattern3a.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern3a.png"); - background-repeat: repeat; - color: #000; -} -del{ - text-decoration-color: #000; -} -#panel li a.active{ -background-color:#C0D7EE; -} -#panel li a:hover:not(.active){ -background-color:#CEF; -} -#panel,#footer{ - background-color:#E0E7EE; - background-image: url("/pattern3a.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #333; -} -a.highlighted{color:#A0E !important;} -a:link{ -color:#3898C8; -} -a:visited{ -color:#338CB8; -} -a:hover{ -color:#37A1D6; -} -a:active{ -color:#89BCD6; -} -blockquote{ -border: 1px solid #333; -} -button,.fakebtn{ - color:white; - background-color:#6BD; -} -button:hover,.fakebtn:hover{ - background-color:#6CF; -} -button:active,.fakebtn:active{ - background-color:#9DF; -} -button:disabled{ - background-color:#999; -} -input[type="text"]{ - color:#000; - border-bottom-color:#6BD; -} -textarea{ - color:#000; - border-color:#6BD; -} -.widgetbg{background-color:rgba(200,204,204,0.6);} -.sliderb1{background-color:rgba(153,221,255,0.6);} -.sliderb2{background-color:#6BD;} diff --git a/theme3b.css b/theme3b.css index 2f7ac36..4ef8f12 100644 --- a/theme3b.css +++ b/theme3b.css @@ -1,66 +1,22 @@ -:root { - --bg-primary: #051933; +:root{ + --principal-bg: #051933; + --principal-fg: #FFF; + --secondary-bg: #082040; + --secondary-fg: #358; + --list-active-bg: #469; + --list-highlighted-bg: #358; + --link-fg: #4A92FF; + --link-visited-fg: #508AFF; + --link-hover-fg: #40A0FF; + --link-active-fg: #AAD7FF; + --link-highlighted-fg: #F1C; + --interactive-bg: #469; + --interactive-fg: #FFF; + --interactive-hover-bg: #57A; + --interactive-active-bg: #68B; + --interactive-disabled-bg: #666; + --widget-area-bg: rgba(24,48,80,0.6); + --slider-empty-bg: rgba(85,119,170,0.6); + --slider-filled-bg: #469; + --bg-pattern: url("/pattern3b.png"); } -body{ - background-color: var(--bg-primary); - background-image: url("/pattern3b.png"); - background-repeat: repeat; - color: #FFF; -} -del{ - text-decoration-color: #FFF; -} -#panel li a.active{ -background-color:#469; -} -#panel li a:hover:not(.active){ -background-color:#358; -} -#panel,#footer{ - background-color:#082040; - background-image: url("/pattern3b.png"); - background-repeat: repeat; -} -#content .block{ -border: 1px solid #358; -} -a.highlighted{color:#F1C !important;} -a:link{ -color:#4A92FF; -} -a:visited{ -color:#508AFF; -} -a:hover{ -color:#40A0FF; -} -a:active{ -color:#AAD7FF; -} -blockquote{ -border: 1px solid #358; -} -button,.fakebtn{ - color:white; - background-color:#469; -} -button:hover,.fakebtn:hover{ - background-color:#57A; -} -button:active,.fakebtn:active{ - background-color:#68B; -} -button:disabled{ - background-color:#666; -} -input[type="text"]{ - color:#FFF; - border-bottom-color:#469; -} -textarea{ - color:#FFF; - border-color:#469; -} -.widgetbg{background:rgba(24,48,80,0.6);} -.sliderb1{background-color:rgba(85,119,170,0.6);} -.sliderb2{background-color:#469;} |