diff --git a/css/main.css b/css/main.css index aa3f7b2e..fdb99eca 100644 --- a/css/main.css +++ b/css/main.css @@ -21,32 +21,6 @@ 100% { opacity: 0.05; } } -/*new settingspanel stuff*/ -.ui-standard-sidebar-view .bda-slist li:nth-child(odd) { - background: #292b2f; - border-top: 1px solid #2b2b2b; -} - -.ui-standard-sidebar-view .bda-slist li { - background: #26272b; - border-bottom: 1px solid #3f4146; -} - -.ui-standard-sidebar-view .bda-slist .bda-description { - border-top: 1px solid #3f4146; - color: #b0b6b9; -} - -.ui-standard-sidebar-view .bda-slist .bda-right button { - background: #7289da; - color: #FFF; - border-radius: 5px; - height: 30px; - display: block; - width: 100px; - margin: 5px; -} - .ui-standard-sidebar-view .bd-psm { background-color: #292b2f; box-shadow: 0 0 12px 6px rgba(31, 31, 31, 0.32); @@ -1673,103 +1647,6 @@ margin-top:18px; } -.bda-slist-top { - height:25px; - flex-grow:1; -} - -.bda-slist-top > .btn { - height: 20px; - line-height: 20px; - font-size: 13px; - padding: 6px; - padding-top: 0; - margin-left:5px !important; - float:right; -} - -.bda-slist li { - background:#F3F3F3; - padding:5px; - border-bottom:1px solid #ADADAD; - min-height:116px; - max-height:116px; -} - -.bda-slist li:nth-child(odd) { - background:#F3F3F3; - border-top:1px solid #FFF; -} - -.bda-slist .bda-name { - color:#87909C; - font-weight:700; - font-size:12px; - overflow: hidden; - display: block; - max-height: 12px; -} - -.bda-slist li div:not(.bda-right):nth-of-type(2) { - margin-top: 30px; -} - -.bda-slist .bda-description { - margin-top:5px; - color:#4E4E4E; - width:400px; - overflow-y:scroll; - min-height:90px; - max-height:90px; - border-top:1px solid #DADADA; - padding-top:5px; - word-break: break-word; -} - -.bda-slist .scroller::-webkit-scrollbar-track-piece, -.bda-slist .scroller::-webkit-scrollbar-thumb { - border-radius:0 !important; - border-color:transparent; -} - -.bda-slist .bda-left { - width:400px; - display:inline-block; -} - -.bda-slist .bda-right { - display:inline-block; - float:right; -} - -.bda-slist .checkbox { - margin-left:18px; -} - -.bda-slist .checkbox:before { - content: "Enabled"; - color:#87909C; - margin-right:5px; - font-weight:600; -} - -.bda-slist .bda-right .btn { - height: 30px; - width:100px; - line-height: 12px; - margin-left:0; - text-align:center; - display:block; -} - -.bda-slist .bda-right .bda-plugin-reload { - margin-top:35px; -} - -.bda-slist .bda-right .bda-plugin-settings { - margin-top:5px; -} - #bd-themes-pane .bda-plugin-reload { margin-top:70px; } @@ -2158,6 +2035,71 @@ display: flex; } + +/*new settingspanel stuff*/ +.bda-slist { + user-select: text; +} + +.bda-slist li { + background: rgba(32,34,37,.6); + border: 1px solid #202225; + border-radius: 5px; + padding: 5px 7px; +} + +.bda-slist .bda-header { + color: #87909C; + font-weight: 700; + font-size: 12px; + overflow: hidden; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid rgba(255,255,255, 0.1); + padding-bottom: 5px; +} + +.bda-slist .bda-description { + margin-top:5px; + color: #b0b6b9; + overflow-y:auto; + max-height: 100px; + min-height: 75px; + padding-top:5px; + word-break: break-word; +} + +.bda-slist .scroller::-webkit-scrollbar-track-piece, +.bda-slist .scroller::-webkit-scrollbar-thumb { + border-radius:0 !important; + border-color:transparent; +} + +.bda-slist .bda-footer { + border-top: 1px solid rgba(255,255,255, 0.1); + padding-top: 5px; + color: #87909C; + font-weight: 700; + font-size: 12px; + overflow: hidden; + display: flex; + justify-content: space-between; + align-items: center; +} + +.bda-slist .bda-footer button { + background: #7289da; + color: #FFF; + border-radius: 5px; + height: 30px; + display: block; + width: 100px; + margin: 5px; + margin-left: auto; +} + + /*BD BLUE*/ .bd-blue .bd-pfbtn { background: #3a71c1; } .bd-blue .bot-tag {background: #3a71c1;} @@ -2382,5 +2324,5 @@ .bd-blue .ui-switch-wrapper:not(.disabled):not(.clear):hover .ui-switch-checkbox:checked+.ui-switch { background: #3f79ce; } .bd-blue *[style*="border-color: rgb(114, 137, 218)"] { border-color: #3a71c1 !important; } .bd-blue *[style*="background-color: rgb(114, 137, 218)"] { background-color: #3a71c1 !important; } - +.bd-blue .bda-slist .bda-footer button {background-color: #3a71c1;} diff --git a/js/main.js b/js/main.js index d472ce03..1f3831bc 100644 --- a/js/main.js +++ b/js/main.js @@ -2209,7 +2209,7 @@ class V2C_PluginCard extends BDV2.reactComponent { if (this.state.settings) { return BDV2.react.createElement( "li", - { style: { maxHeight: "500px", overflow: "auto" } }, + { style: {className: "settings-open"} }, BDV2.react.createElement( "div", { style: { float: "right", cursor: "pointer" }, onClick: () => { @@ -2224,18 +2224,18 @@ class V2C_PluginCard extends BDV2.reactComponent { return BDV2.react.createElement( "li", - {"data-name": name, "data-version": version}, + {"data-name": name, "data-version": version, className: "settings-closed"}, BDV2.react.createElement( "div", { className: "bda-header" }, - BDV2.react.createElement("span", {className: "bda-name" }, name), - " v", - BDV2.react.createElement("span", {className: "bda-version" }, version), - " by ", - BDV2.react.createElement("span", {className: "bda-author" }, author), - BDV2.react.createElement( - "label", - { className: "ui-switch-wrapper ui-flex-child", style: { flex: '0 0 auto' } }, + BDV2.react.createElement("span", {className: "bda-header-title" }, + BDV2.react.createElement("span", {className: "bda-name" }, name), + " v", + BDV2.react.createElement("span", {className: "bda-version" }, version), + " by ", + BDV2.react.createElement("span", {className: "bda-author" }, author) + ), + BDV2.react.createElement("label", {className: "ui-switch-wrapper ui-flex-child", style: { flex: '0 0 auto' }}, BDV2.react.createElement("input", { checked: this.state.checked, onChange: this.onChange, className: "ui-switch-checkbox", type: "checkbox" }), BDV2.react.createElement("div", { className: "ui-switch" }) ) @@ -2252,7 +2252,7 @@ class V2C_PluginCard extends BDV2.reactComponent { BDV2.react.createElement( "div", { className: "bda-footer" }, - BDV2.react.createElement("a", {className: "bda-link", href: link, target: "_blank"}, name), + link && BDV2.react.createElement("a", {className: "bda-link", href: link, target: "_blank"}, "Website/Source"), this.settingsPanel && BDV2.react.createElement( "button", {onClick: this.showSettings, className: "bda-settings-button"}, @@ -2298,40 +2298,39 @@ class V2C_ThemeCard extends BDV2.reactComponent { let description = theme.description; let version = theme.version; let author = theme.author; + let link = bdthemes[name].link; + return BDV2.react.createElement( "li", - {"data-name": name, "data-version": version}, + {"data-name": name, "data-version": version, className: "settings-closed"}, BDV2.react.createElement( "div", - { className: "bda-left" }, - BDV2.react.createElement( - "span", - { className: "bda-name" }, - name, - " v", - version, - " by ", - author - ), + { className: "bda-header" }, + BDV2.react.createElement("span", {className: "bda-header-title" }, + BDV2.react.createElement("span", {className: "bda-name" }, name), + " v", + BDV2.react.createElement("span", {className: "bda-version" }, version), + " by ", + BDV2.react.createElement("span", {className: "bda-author" }, author) + ), + BDV2.react.createElement("label", {className: "ui-switch-wrapper ui-flex-child", style: { flex: '0 0 auto' }}, + BDV2.react.createElement("input", { checked: this.state.checked, onChange: this.onChange, className: "ui-switch-checkbox", type: "checkbox" }), + BDV2.react.createElement("div", { className: "ui-switch" }) + ) + ), + BDV2.react.createElement( + "div", + { className: "bda-description-wrap scroller-wrap fade" }, BDV2.react.createElement( "div", - { className: "scroller-wrap fade" }, - BDV2.react.createElement( - "div", - { className: "scroller bda-description" }, - description - ) + { className: "bda-description scroller" }, + description ) ), BDV2.react.createElement( "div", - { className: "bda-right" }, - BDV2.react.createElement( - "label", - { className: "ui-switch-wrapper ui-flex-child", style: { flex: '0 0 auto' } }, - BDV2.react.createElement("input", { checked: this.state.checked, onChange: this.onChange, className: "ui-switch-checkbox", type: "checkbox" }), - BDV2.react.createElement("div", { className: "ui-switch" }) - ) + { className: "bda-footer" }, + link && BDV2.react.createElement("a", {className: "bda-link", href: link, target: "_blank"}, "Website/Source") ) ); }