diff --git a/themes/Theme-RoundedYellow/README.md b/themes/Theme-RoundedYellow/README.md new file mode 100644 index 00000000..b32283fa --- /dev/null +++ b/themes/Theme-RoundedYellow/README.md @@ -0,0 +1,5 @@ +A theme with yellow accent colour and rounded corners. + +# Preview +![2024-01-03_14-37-11_blur](https://github.com/Written2001/CommunityScripts/assets/121555133/96932001-4b46-4e97-b4de-5e7cb61608fb) +![2024-01-03_14-37-01_blur](https://github.com/Written2001/CommunityScripts/assets/121555133/e999ae6b-5e53-418c-a561-00c658afba3e) diff --git a/themes/Theme-RoundedYellow/Theme-RoundedYellow.css b/themes/Theme-RoundedYellow/Theme-RoundedYellow.css new file mode 100644 index 00000000..61510771 --- /dev/null +++ b/themes/Theme-RoundedYellow/Theme-RoundedYellow.css @@ -0,0 +1,169 @@ +:root{ + --bgcol: #101118; + --searchbgcol: #1b1c28; + --btnbordercol: #202b33; + --secbtncol: #171822; + --btnaccentcol: #cfad0b; + --cardbgcol: #1f282c; + --navbarcol: #212529; + } + + body { + background-color: var(--bgcol); + } + + .bg-secondary { + background-color: var(--searchbgcol)!important; + } + + .pagination .btn:first-child {border-left: 1px solid var(--btnbordercol);} + .pagination .btn:last-child {border-right: 1px solid var(--btnbordercol);} + + .btn-secondary { + border-color: var(--btnbordercol); + background-color: var(--bgcol); + } + + .btn-secondary:disabled { + border-color: var(--btnbordercol); + background-color: var(--secbtncol); + } + + .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active, .show>.btn-secondary.dropdown-toggle { + background-color: var(--secbtncol); + border: 1px solid var(--btnbordercol); + color: var(--btnaccentcol); + border-bottom: 3px solid var(--btnaccentcol); + } + + .card { + background-color: var(--cardbgcol); + border-radius: 30px; + } + + .progress-indicator { + background-color: var(--btnaccentcol); + } + + .bg-dark{ + background-color: var(--navbarcol)!important; + } + + .btn.active:not(.disabled), .btn.active.minimal:not(.disabled) { + background-color: transparent; + color: var(--btnaccentcol); + border-bottom: 3px solid var(--btnaccentcol); + } + + .btn-primary{ + background-color: var(--btnaccentcol); + border-color: var(--btnaccentcol); + } + + .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle { + background-color: transparent; + border-color: var(--btnaccentcol); + } + + .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show>.btn-primary.dropdown-toggle:focus { + box-shadow: 0 0 0 0; + } + + .btn-primary:focus, .btn-primary.focus { + background-color: var(--btnaccentcol); + border-color: var(--btnaccentcol); + box-shadow: 0 0 0 0; + } + + .btn-primary:hover { + color: #fff; + background-color: var(--btnaccentcol); + border-color: var(--btnaccentcol); + } + + div.react-select__menu, div.dropdown-menu { + background-color: var(--bgcol); + color: #f5f8fa; + z-index: 1600; + } + + .modal-header, .modal-body, .modal-footer { + background-color: var(--bgcol); + color: #f5f8fa; + } + + .edit-filter-dialog .criterion-list .card .filter-item-header:focus { + border-color: var(--btnaccentcol); + border-radius: calc(.375rem - 1px); + box-shadow: inset 0 0 0 0.1rem var(--btnaccentcol); + outline: 0; + } + + .nav-tabs .nav-link.active { + border-bottom: 2px solid; + color: var(--btnaccentcol); + } + + .nav-tabs .nav-link.active:hover { + border-bottom-color: var(--btnaccentcol); + cursor: default; + } + + .job-table.card { + background-color: var(--bgcol); + height: 10em; + margin-bottom: 30px; + overflow-y: auto; + padding: .5rem 15px; + } + + .progress-bar { + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; + color: #fff; + text-align: center; + white-space: nowrap; + background-color: var(--btnaccentcol); + transition: width .6s ease; + } + + .grid-card .progress-bar { + background-color: rgba(115,133,159,.5); + bottom: 5px; + display: block; + height: 5px; + position: absolute; + width: 100%; + } + + .grid-card .progress-indicator { + background-color: var(--btnaccentcol); + height: 5px; + } + + .hover-scrubber .hover-scrubber-indicator .hover-scrubber-indicator-marker { + background-color: var(--btnaccentcol); + bottom: 0; + height: 5px; + position: absolute; + } + + #tasks-panel .tasks-panel-queue { + background-color: var(--bgcol); + margin-top: -1rem; + padding-bottom: .25rem; + padding-top: 1rem; + position: sticky; + top: 3rem; + z-index: 2; + } + + #scene-edit-details .edit-buttons-container { + background-color: var(--bgcol); + position: sticky; + top: 0; + z-index: 3; + } + \ No newline at end of file diff --git a/themes/Theme-RoundedYellow/Theme-RoundedYellow.yml b/themes/Theme-RoundedYellow/Theme-RoundedYellow.yml new file mode 100644 index 00000000..a568e549 --- /dev/null +++ b/themes/Theme-RoundedYellow/Theme-RoundedYellow.yml @@ -0,0 +1,6 @@ +name: Theme - Rounded Yellow +description: Theme with rounded corners and yellow accents +version: 1.0 +ui: + css: + - Theme-RoundedYellow.css