diff --git a/package.json b/package.json index 4a93a66..aff6089 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,10 @@ { - "name": "top.yutent.sonist", + "name": "sonist", "version": "2.0.0-alpha-4", "description": "Music Player", "main": "src/main.js", "scripts": { - "start": "electron .", - "pack": "electron-builder" + "start": "electron ." }, "author": { "name": "yutent", @@ -16,11 +15,10 @@ "dependencies": { "crypto.js": "^2.0.2", "iofs": "^1.5.1", - "music-metadata": "^7.5.0", - "sqlite3": "^5.0.0" + "music-metadata": "^7.5.0" }, "build": { - "appId": "top.yutent.sonist", + "appId": "sonist", "productName": "Sonist", "copyright": "Copyright © 2019 ${author}", "directories": { @@ -34,7 +32,6 @@ "files": [ "src/**/*", "node_modules/iofs/*", - "node_modules/sqlite3/*", "node_modules/crypto.js/*", "node_modules/music-metadata/*" ], diff --git a/src/css/app.css b/src/css/app.css index 300804c..7b41e5e 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1 +1 @@ -.app{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.app .album-cover{overflow:hidden;position:absolute;z-index:-1;left:0;top:0;width:100%;height:394px}.app .album-cover img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-webkit-filter:blur(35px) opacity(0.8);filter:blur(35px) opacity(0.8)}.app .title-bar{position:relative;display:flex;align-items:center;z-index:9;height:26px;background:rgba(32,32,32,0.5)}.app .main-body{overflow:hidden;flex:1;display:flex;justify-content:space-between;background:rgba(32,32,32,0.5)}.app .main-body .aside{width:180px;height:100%;padding:0 16px;line-height:2}.app .main-body .aside fieldset{border:0;color:#ebebeb;font-size:12px}.app .main-body .aside fieldset legend{font-size:18px;background:linear-gradient(to bottom, #58ffdf 50%, #459888);-webkit-background-clip:text;background-clip:text;color:transparent}.app .main-body .aside fieldset .item{padding-left:12px;line-height:1.75}.app .main-body .aside fieldset button{width:42px;height:16px;margin-left:12px;font-size:10px;border:0;border-radius:9px;background:#64b5f6;color:#fff}.app .main-body .song-box{display:flex;flex-direction:column;width:618px}.app .main-body .song-box .preview{position:relative;display:flex;align-items:center;width:100%;height:99px;padding-bottom:16px;border-bottom:1px solid rgba(200,200,200,0.1)}.app .main-body .song-box .preview .album{width:80px;height:80px}.app .main-body .song-box .preview .album img{width:100%;height:100%}.app .main-body .song-box .preview .info{display:flex;flex-direction:column;justify-content:center;width:320px;margin-left:32px}.app .main-body .song-box .preview .info strong{height:36px;font-size:18px;font-weight:normal}.app .main-body .song-box .preview .info cite{font-size:12px;font-style:normal}.app .main-body .song-box .preview .info p{font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .total{position:absolute;right:32px;bottom:16px;font-size:16px;font-weight:bold;font-family:Raleway}.app .main-body .song-box .scroll-box{overflow:hidden;flex:1;width:100%;padding:16px 6px;border-top:1px solid rgba(32,32,32,0.1)}.app .main-body .song-box .list{height:100%;font-size:12px}.app .main-body .song-box .list .item{display:flex;align-items:center;height:26px;padding:0 12px;border-radius:13px}.app .main-body .song-box .list .item .idx{position:relative;width:64px;padding-left:16px;font-size:12px;font-family:Raleway}.app .main-body .song-box .list .item .name{flex:1}.app .main-body .song-box .list .item .artist{width:128px;margin-left:12px}.app .main-body .song-box .list .item .duration{width:42px;margin-left:12px}.app .main-body .song-box .list .item.on{color:#feac23;font-size:14px}.app .main-body .song-box .list .item.on .idx::before{position:absolute;left:0;top:3px;font-size:10px;content:'▶ '}.app .main-body .song-box .list .item.active,.app .main-body .song-box .list .item:hover{color:#58ffdf;background:rgba(29,77,68,0.15)}.app .play-bar{height:66px;width:100%;background:rgba(24,24,24,0.3);color:#fff}.app .play-bar .stat-bar{display:flex;align-items:center;justify-content:space-between;height:20px;color:#ebebeb}.app .play-bar .stat-bar .time{width:42px;margin:0 6px;text-align:center;font-size:12px}.app .play-bar .stat-bar .progress{position:relative;flex:1;display:flex;align-items:flex-start;height:3px;background:#b2cfe3}.app .play-bar .stat-bar .progress input{position:absolute;left:0;top:0;display:block;width:100%;height:3px;opacity:0}.app .play-bar .stat-bar .thumb{height:3px;background:#58ffdf}.app .play-bar .ctrl-box{display:flex;align-items:center;height:42px}.app .play-bar .ctrl-box .holder{flex:1}.app .play-bar .ctrl-box .info{display:flex;flex-direction:column;justify-content:center;width:320px;height:42px;padding-left:12px;line-height:1.25}.app .play-bar .ctrl-box .info strong{font-size:14px;font-weight:500}.app .play-bar .ctrl-box .info cite{font-size:12px;font-style:normal;color:#aeaeae}.app .play-bar .ctrl-box .play-btn{display:flex;align-items:center;justify-content:space-between;width:120px;height:42px;margin-left:32px}.app .play-bar .ctrl-box .play-btn .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-btn .item.prev{background-image:url(/images/ctrl/prev.png)}.app .play-bar .ctrl-box .play-btn .item.prev:hover,.app .play-bar .ctrl-box .play-btn .item.prev:active{background-image:url(/images/ctrl/prev_a.png)}.app .play-bar .ctrl-box .play-btn .item.on,.app .play-bar .ctrl-box .play-btn .item.off{width:42px;height:42px}.app .play-bar .ctrl-box .play-btn .item.on{background-image:url(/images/ctrl/play.png);-webkit-animation:round 2s linear infinite;animation:round 2s linear infinite}.app .play-bar .ctrl-box .play-btn .item.on:hover,.app .play-bar .ctrl-box .play-btn .item.on:active{background-image:url(/images/ctrl/play_a.png)}.app .play-bar .ctrl-box .play-btn .item.off{background-image:url(/images/ctrl/pause.png)}.app .play-bar .ctrl-box .play-btn .item.off:hover,.app .play-bar .ctrl-box .play-btn .item.off:active{background-image:url(/images/ctrl/pause_a.png)}.app .play-bar .ctrl-box .play-btn .item.next{background-image:url(/images/ctrl/next.png)}.app .play-bar .ctrl-box .play-btn .item.next:hover,.app .play-bar .ctrl-box .play-btn .item.next:active{background-image:url(/images/ctrl/next_a.png)}.app .play-bar .ctrl-box .play-action{display:flex;align-items:center;justify-content:space-between;width:64px;height:22px;margin-right:16px}.app .play-bar .ctrl-box .play-action .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-action .item.volume,.app .play-bar .ctrl-box .play-action .item.mute{position:relative}.app .play-bar .ctrl-box .play-action .item.volume a,.app .play-bar .ctrl-box .play-action .item.mute a{display:block;width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background 0.1s ease-in-out}.app .play-bar .ctrl-box .play-action .item.volume .range,.app .play-bar .ctrl-box .play-action .item.mute .range{visibility:hidden;position:absolute;right:-5px;bottom:20px;width:32px;height:128px;padding:14px;border-radius:3px;background:rgba(128,128,128,0.8)}.app .play-bar .ctrl-box .play-action .item.volume .range input,.app .play-bar .ctrl-box .play-action .item.mute .range input{display:block;width:4px;height:100px;border-radius:3px;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.app .play-bar .ctrl-box .play-action .item.volume:hover .range,.app .play-bar .ctrl-box .play-action .item.mute:hover .range{visibility:visible}.app .play-bar .ctrl-box .play-action .item.volume a{background-image:url(/images/ctrl/volume.png)}.app .play-bar .ctrl-box .play-action .item.volume a:hover,.app .play-bar .ctrl-box .play-action .item.volume a:active{background-image:url(/images/ctrl/volume_a.png)}.app .play-bar .ctrl-box .play-action .item.mute a{background-image:url(/images/ctrl/mute.png)}.app .play-bar .ctrl-box .play-action .item.mute a:hover,.app .play-bar .ctrl-box .play-action .item.mute a:active{background-image:url(/images/ctrl/mute_a.png)}.app .play-bar .ctrl-box .play-action .item.single{background-image:url(/images/ctrl/single.png)}.app .play-bar .ctrl-box .play-action .item.single:hover,.app .play-bar .ctrl-box .play-action .item.single:active{background-image:url(/images/ctrl/single_a.png)}.app .play-bar .ctrl-box .play-action .item.all{background-image:url(/images/ctrl/all.png)}.app .play-bar .ctrl-box .play-action .item.all:hover,.app .play-bar .ctrl-box .play-action .item.all:active{background-image:url(/images/ctrl/all_a.png)}.app .play-bar .ctrl-box .play-action .item.rand{background-image:url(/images/ctrl/rand.png)}.app .play-bar .ctrl-box .play-action .item.rand:hover,.app .play-bar .ctrl-box .play-action .item.rand:active{background-image:url(/images/ctrl/rand_a.png)}@-webkit-keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes round{from{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} +.app{position:relative;display:flex;flex-direction:column;width:100%;height:100%}.app .album-cover{overflow:hidden;position:absolute;z-index:-1;left:0;top:0;width:100%;height:394px}.app .album-cover img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;filter:blur(35px) opacity(0.8)}.app .title-bar{position:relative;display:flex;align-items:center;z-index:9;height:32px;background:rgba(32,32,32,.5)}.app .title-bar .btns{display:flex;height:16px;padding:0 4px}.app .title-bar .btn{width:16px;height:16px;margin:0 6px;border-radius:50%;background:#86909b no-repeat;background-size:100%}.app .title-bar .btns.active .btn.close{background:#ff5061}.app .title-bar .btns.active .btn.mini{background:#ffb618}.app .main-body{overflow:hidden;flex:1;display:flex;justify-content:space-between;background:rgba(32,32,32,.5)}.app .main-body .aside{width:180px;height:100%;padding:0 16px;line-height:2}.app .main-body .aside fieldset{border:0;color:#ebebeb;font-size:12px}.app .main-body .aside fieldset legend{font-size:18px;background:linear-gradient(to bottom, #58ffdf 50%, #459888);-webkit-background-clip:text;background-clip:text;color:transparent}.app .main-body .aside fieldset .item{padding-left:12px;line-height:1.75}.app .main-body .aside fieldset button{width:42px;height:16px;margin-left:12px;font-size:10px;border:0;border-radius:9px;background:#64b5f6;color:#fff}.app .main-body .song-box{display:flex;flex-direction:column;width:618px}.app .main-body .song-box .preview{position:relative;display:flex;align-items:center;width:100%;height:99px;padding-bottom:16px;border-bottom:1px solid rgba(200,200,200,.1)}.app .main-body .song-box .preview .album{width:80px;height:80px}.app .main-body .song-box .preview .album img{width:100%;height:100%}.app .main-body .song-box .preview .info{display:flex;flex-direction:column;justify-content:center;width:320px;margin-left:32px}.app .main-body .song-box .preview .info strong{height:36px;font-size:18px;font-weight:normal}.app .main-body .song-box .preview .info cite{font-size:12px;font-style:normal}.app .main-body .song-box .preview .info p{font-size:12px;color:#bdbdbd}.app .main-body .song-box .preview .total{position:absolute;right:32px;bottom:16px;font-size:16px;font-weight:bold;font-family:Raleway}.app .main-body .song-box .scroll-box{overflow:hidden;flex:1;width:100%;padding:16px 6px;border-top:1px solid rgba(32,32,32,.1)}.app .main-body .song-box .list{height:100%;font-size:12px}.app .main-body .song-box .list .item{display:flex;align-items:center;height:26px;padding:0 12px;border-radius:13px}.app .main-body .song-box .list .item .idx{position:relative;width:64px;padding-left:16px;font-size:12px;font-family:Raleway}.app .main-body .song-box .list .item .name{flex:1}.app .main-body .song-box .list .item .artist{width:128px;margin-left:12px}.app .main-body .song-box .list .item .duration{width:42px;margin-left:12px}.app .main-body .song-box .list .item.on{color:#feac23;font-size:14px}.app .main-body .song-box .list .item.on .idx::before{position:absolute;left:0;top:3px;font-size:10px;content:"▶ "}.app .main-body .song-box .list .item.active,.app .main-body .song-box .list .item:hover{color:#58ffdf;background:rgba(29,77,68,.15)}.app .play-bar{height:66px;width:100%;background:rgba(24,24,24,.3);color:#fff}.app .play-bar .stat-bar{display:flex;align-items:center;justify-content:space-between;height:20px;color:#ebebeb}.app .play-bar .stat-bar .time{width:42px;margin:0 6px;text-align:center;font-size:12px}.app .play-bar .stat-bar .progress{position:relative;flex:1;display:flex;align-items:flex-start;height:3px;background:#b2cfe3}.app .play-bar .stat-bar .progress input{position:absolute;left:0;top:0;display:block;width:100%;height:3px;opacity:0}.app .play-bar .stat-bar .thumb{height:3px;background:#58ffdf}.app .play-bar .ctrl-box{display:flex;align-items:center;justify-content:space-between;height:42px;padding:0 16px}.app .play-bar .ctrl-box .play-btn{display:flex;align-items:center;justify-content:space-between;width:120px;height:42px}.app .play-bar .ctrl-box .play-btn .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background .1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-btn .item.prev{background-image:url(/images/ctrl/prev.png)}.app .play-bar .ctrl-box .play-btn .item.prev:hover,.app .play-bar .ctrl-box .play-btn .item.prev:active{background-image:url(/images/ctrl/prev_a.png)}.app .play-bar .ctrl-box .play-btn .item.on,.app .play-bar .ctrl-box .play-btn .item.off{width:42px;height:42px}.app .play-bar .ctrl-box .play-btn .item.on{background-image:url(/images/ctrl/play.png);-webkit-animation:round 2s linear infinite;animation:round 2s linear infinite}.app .play-bar .ctrl-box .play-btn .item.on:hover,.app .play-bar .ctrl-box .play-btn .item.on:active{background-image:url(/images/ctrl/play_a.png)}.app .play-bar .ctrl-box .play-btn .item.off{background-image:url(/images/ctrl/pause.png)}.app .play-bar .ctrl-box .play-btn .item.off:hover,.app .play-bar .ctrl-box .play-btn .item.off:active{background-image:url(/images/ctrl/pause_a.png)}.app .play-bar .ctrl-box .play-btn .item.next{background-image:url(/images/ctrl/next.png)}.app .play-bar .ctrl-box .play-btn .item.next:hover,.app .play-bar .ctrl-box .play-btn .item.next:active{background-image:url(/images/ctrl/next_a.png)}.app .play-bar .ctrl-box .play-action{display:flex;align-items:center;justify-content:space-between;width:52px;height:22px}.app .play-bar .ctrl-box .play-action .item{width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background .1s ease-in-out;cursor:pointer}.app .play-bar .ctrl-box .play-action .item.volume,.app .play-bar .ctrl-box .play-action .item.mute{position:relative}.app .play-bar .ctrl-box .play-action .item.volume a,.app .play-bar .ctrl-box .play-action .item.mute a{display:block;width:22px;height:22px;background-repeat:no-repeat;background-size:cover;transition:background .1s ease-in-out}.app .play-bar .ctrl-box .play-action .item.volume .range,.app .play-bar .ctrl-box .play-action .item.mute .range{visibility:hidden;position:absolute;right:-5px;bottom:20px;width:32px;height:128px;padding:14px;border-radius:3px;background:rgba(128,128,128,.8)}.app .play-bar .ctrl-box .play-action .item.volume .range input,.app .play-bar .ctrl-box .play-action .item.mute .range input{display:block;width:4px;height:100px;border-radius:3px;-webkit-appearance:slider-vertical;-moz-appearance:slider-vertical;appearance:slider-vertical}.app .play-bar .ctrl-box .play-action .item.volume:hover .range,.app .play-bar .ctrl-box .play-action .item.mute:hover .range{visibility:visible}.app .play-bar .ctrl-box .play-action .item.volume a{background-image:url(/images/ctrl/volume.png)}.app .play-bar .ctrl-box .play-action .item.volume a:hover,.app .play-bar .ctrl-box .play-action .item.volume a:active{background-image:url(/images/ctrl/volume_a.png)}.app .play-bar .ctrl-box .play-action .item.mute a{background-image:url(/images/ctrl/mute.png)}.app .play-bar .ctrl-box .play-action .item.mute a:hover,.app .play-bar .ctrl-box .play-action .item.mute a:active{background-image:url(/images/ctrl/mute_a.png)}.app .play-bar .ctrl-box .play-action .item.single{background-image:url(/images/ctrl/single.png)}.app .play-bar .ctrl-box .play-action .item.single:hover,.app .play-bar .ctrl-box .play-action .item.single:active{background-image:url(/images/ctrl/single_a.png)}.app .play-bar .ctrl-box .play-action .item.all{background-image:url(/images/ctrl/all.png)}.app .play-bar .ctrl-box .play-action .item.all:hover,.app .play-bar .ctrl-box .play-action .item.all:active{background-image:url(/images/ctrl/all_a.png)}.app .play-bar .ctrl-box .play-action .item.rand{background-image:url(/images/ctrl/rand.png)}.app .play-bar .ctrl-box .play-action .item.rand:hover,.app .play-bar .ctrl-box .play-action .item.rand:active{background-image:url(/images/ctrl/rand_a.png)}@-webkit-keyframes round{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes round{from{transform:rotate(0)}to{transform:rotate(360deg)}} \ No newline at end of file diff --git a/src/css/app.scss b/src/css/app.scss index ad08d94..998c1f4 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -37,8 +37,33 @@ display: flex; align-items: center; z-index: 9; - height: 26px; + height: 32px; background: rgba(32, 32, 32, 0.5); + + .btns { + display: flex; + height: 16px; + padding: 0 4px; + } + + .btn { + width: 16px; + height: 16px; + margin: 0 6px; + border-radius: 50%; + background: #86909b no-repeat; + background-size: 100%; + } + + .btns.active { + .btn.close { + background: #ff5061; + } + + .btn.mini { + background: #ffb618; + } + } } .main-body { @@ -251,32 +276,9 @@ .ctrl-box { display: flex; align-items: center; + justify-content: space-between; height: 42px; - - .holder { - flex: 1; - } - - .info { - display: flex; - flex-direction: column; - justify-content: center; - width: 320px; - height: 42px; - padding-left: 12px; - line-height: 1.25; - - strong { - font-size: 14px; - font-weight: 500; - } - - cite { - font-size: 12px; - font-style: normal; - color: #aeaeae; - } - } + padding: 0 16px; .play-btn { display: flex; @@ -284,7 +286,6 @@ justify-content: space-between; width: 120px; height: 42px; - margin-left: 32px; .item { width: 22px; @@ -340,9 +341,8 @@ display: flex; align-items: center; justify-content: space-between; - width: 64px; + width: 52px; height: 22px; - margin-right: 16px; .item { width: 22px; diff --git a/src/css/reset-basic.css b/src/css/reset-basic.css index 0fd9c4d..67179c8 100644 --- a/src/css/reset-basic.css +++ b/src/css/reset-basic.css @@ -1,17 +1,12 @@ @charset "UTF-8"; /** * - * @authors yutent (yutent@doui.cc) + * @authors yutent (yutent.io@gmail.com) * @date 2014-10-10 00:45:09 * - * doui的CSS规范 + * CSS规范 * * 不能出现大写,以连字符风格命名 - * 表示状态的应该用do-st-*命名 - * 表示功能的应该用do-fn-*命名 - * 表示页面模块的应该用do-mod-modname 命名 - * 表示UI组件的应该用do-uiname命名, 它的子元素应该全部包在 .do-uiname这个根类下 - * 如 .do-layer .body { ... } * * 样式规则的出现顺序 * 1 display float position overflow z-index 表示定位/布局的属性 @@ -22,30 +17,66 @@ * */ - -* {margin: 0;padding: 0;vertical-align: baseline;box-sizing:border-box;} -::before,::after {box-sizing:border-box;} +* {margin: 0;padding: 0;vertical-align: baseline;box-sizing: border-box;} +::before, ::after {box-sizing: border-box;} /* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section,content {display: block;} -img {border:0;display:inline-block;} -ol, ul {list-style: none;} +article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content {display: block;} +img {border: 0;display: inline-block;} +ol,ul {list-style: none;} blockquote, q {quotes: none;} -blockquote::before, blockquote::after, -q::before, q::after {content: '';content: none;} +blockquote::before, blockquote::after, q::before, q::after {content: '';content: none;} table {border-collapse: collapse;border-spacing: 0;} -a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;} -::-moz-focus-inner { - border:none;outline:none; -} -body {font-family:Helvetica, Arial,"WenQuanYi Micro Hei","PingFang SC","Hiragino Sans GB","Segoe UI", "Microsoft Yahei", sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} -code,pre,samp {font-family:Menlo,Monaco,Consolas,"Courier New",monospace;} -[anot],[\:repeat],[\:if] {visibility:hidden;} - +a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline: none;} +::-moz-focus-inner {border: none;outline: none;} +body {font-family: 'Helvetica Neue', Arial, 'WenQuanYi Micro Hei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', 'Microsoft Yahei', sans-serif;-webkit-font-smoothing: antialiased;text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} +code, pre, samp {font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;white-space:pre-wrap;} +[anot],[\:repeat],[\:if] {visibility: hidden;} .noselect {-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;user-select: none;} -.noselect img, .noselect a {-webkit-user-drag:none;} -.text-ell {overflow:hidden; white-space:nowrap; text-overflow:ellipsis } -.osx-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} - +.noselect img, .noselect a {-webkit-user-drag: none;} +.text-ell {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} +.text-thin {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} +:root { + /* primary */ + --color-teal-a: rgba(72, 201, 176, 0.35); + --color-teal-1: rgb(72, 201, 176); + --color-teal-2: rgb(26, 188, 156); + --color-teal-3: rgb(22, 160, 133); + /* success */ + --color-green-a: rgba(70, 221, 126, 0.35); + --color-green-1: rgb(70, 221, 126); + --color-green-2: rgb(47, 208, 105); + --color-green-3: rgb(26, 196, 88); + /* info */ + --color-blue-a: rgba(100, 181, 246, 0.35); + --color-blue-1: rgb(100, 181, 246); + --color-blue-2: rgb(66, 165, 245); + --color-blue-3: rgb(33, 150, 243); + /* danger */ + --color-red-a: rgba(252, 118, 97, 0.35); + --color-red-1: #fc7661; + --color-red-2: #ff5f45; + --color-red-3: #f33e22; + /* warning */ + --color-orange-a: rgba(254, 174, 117, 0.35); + --color-orange-1: #feae75; + --color-orange-2: #fd964b; + --color-orange-3: #f97316; + /* default1 */ + --color-plain-a: rgba(150, 204, 248, 0.35); + --color-plain-1: rgb(242, 245, 252); + --color-plain-2: rgb(232, 235, 244); + --color-plain-3: rgb(218, 225, 233); + /* default2 */ + --color-grey-a: rgba(206, 214, 224, 0.35); + --color-grey-1: rgb(206, 214, 224); + --color-grey-2: rgb(164, 176, 190); + --color-grey-3: rgb(134, 144, 155); + /* inverse */ + --color-dark-a: rgba(100, 116, 139, 0.35); + --color-dark-1: #64748B; + --color-dark-2: #475569; + --color-dark-3: #2c3441; +} diff --git a/src/index.html b/src/index.html index aba5526..347cbe1 100644 --- a/src/index.html +++ b/src/index.html @@ -16,55 +16,14 @@