Continued css clean-up.
This commit is contained in:
parent
920948bcc1
commit
b13e2bde24
18 changed files with 189 additions and 203 deletions
|
|
@ -14,7 +14,7 @@ GNU Affero General Public License for more details.
|
|||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
||||
|
||||
/* global */
|
||||
/* Theme Variables */
|
||||
:root{
|
||||
--main-font: "open-sans", system-ui;
|
||||
--bg0: rgb(158, 158, 158);
|
||||
|
|
@ -28,13 +28,21 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
|||
|
||||
--accent0: rgb(48, 47, 47);
|
||||
--accent0-alt0: rgb(34, 34, 34);
|
||||
--accent0-warning: firebrick;
|
||||
--accent0-warning-alt0: rgb(121, 11, 11);
|
||||
--accent1: rgb(245, 245, 245);
|
||||
--accent1-alt0: rgb(185, 185, 185);
|
||||
--accent2: var(--accent0-alt0);
|
||||
|
||||
--focus0: rgb(51, 153, 51);
|
||||
--focus0-alt0: rgb(229, 255, 229);
|
||||
--focus0-alt1: rgb(12, 85, 12);
|
||||
--focus-glow0: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
|
||||
--focus-glow0-alt0: 2px 2px 3px var(--focus0-alt0), -2px 2px 3px var(--focus0-alt0), 2px -2px 3px var(--focus0-alt0), -2px -2px 3px var(--focus0-alt0);
|
||||
|
||||
--danger0: firebrick;
|
||||
--danger0-alt0: rgb(121, 11, 11);
|
||||
--danger0-alt1: rgb(255, 105, 105);
|
||||
--danger-glow0: 2px 2px 3px var(--danger0), -2px 2px 3px var(--danger0), 2px -2px 3px var(--danger0), -2px -2px 3px var(--danger0);
|
||||
--danger-glow0-alt1: 2px 2px 3px var(--danger0-alt1), -2px 2px 3px var(--danger0-alt1), 2px -2px 3px var(--danger0-alt1), -2px -2px 3px var(--danger0-alt1);
|
||||
|
||||
--userlist-color0:rgb(63, 121, 71);
|
||||
--userlist-color1:rgb(143, 46, 26);
|
||||
|
|
@ -50,6 +58,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.*/
|
|||
--background-panel-effect-fast: none;
|
||||
}
|
||||
|
||||
/* global */
|
||||
body{
|
||||
background-color: var(--bg0);
|
||||
font-family: var(--main-font);
|
||||
|
|
@ -61,28 +70,98 @@ a{
|
|||
color: var(--accent0);
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: var(--focus0-alt0);
|
||||
text-shadow: var(--focus-glow0);
|
||||
}
|
||||
|
||||
select{
|
||||
background-color: var(--bg2);
|
||||
border-radius: 0.5em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button{
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
a:hover{
|
||||
color: var(--accent0-alt0);
|
||||
}
|
||||
|
||||
button{
|
||||
background-color: var(--bg0);
|
||||
color: var(--accent0);
|
||||
border: none;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
color: var(--focus0-alt1);
|
||||
background-color: var(--focus0-alt0);
|
||||
box-shadow: var(--focus-glow0);
|
||||
}
|
||||
|
||||
button:active{
|
||||
color: var(--focus0-alt0);
|
||||
background-color: var(--focus0-alt1);
|
||||
box-shadow: var(--focus-glow0-alt0);
|
||||
}
|
||||
|
||||
.danger-button{
|
||||
background-color: var(--danger0);
|
||||
color: var(--accent1);
|
||||
}
|
||||
|
||||
.danger-button:hover{
|
||||
background-color: var(--danger0-alt1);
|
||||
color: var(--danger0-alt0);
|
||||
box-shadow: var(--danger-glow0);
|
||||
}
|
||||
|
||||
.danger-button:active{
|
||||
background-color: var(--danger0-alt0);
|
||||
color: var(--accent0-alt0);
|
||||
box-shadow: var(--danger-glow0-alt1);
|
||||
}
|
||||
|
||||
.positive-button{
|
||||
background-color: var(--focus0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.positive-button:hover{
|
||||
color: var(--focus0-alt1);
|
||||
background-color: var(--focus0-alt0);
|
||||
}
|
||||
|
||||
.positive-button:active{
|
||||
color: var(--focus0-alt0);
|
||||
background-color: var(--focus0-alt1);
|
||||
}
|
||||
|
||||
tr{
|
||||
box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
|
||||
}
|
||||
|
||||
td.not-first-col{
|
||||
box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
|
||||
}
|
||||
|
||||
.admin-list-field,.admin-list-table{
|
||||
background-color: var(--bg1);
|
||||
color: var(--accent1);
|
||||
box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
div.control-prompt{
|
||||
border-radius: 1em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
div.control-prompt:focus-within{
|
||||
box-shadow: var(--focus-glow0);
|
||||
}
|
||||
|
||||
input.control-prompt, input.control-prompt:focus{
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* navbar */
|
||||
|
||||
#navbar{
|
||||
background-color: var(--bg1);
|
||||
}
|
||||
|
|
@ -92,10 +171,6 @@ button{
|
|||
border: hidden;
|
||||
}
|
||||
|
||||
a:hover.navbar-item{
|
||||
color: var(--accent1-alt0);
|
||||
}
|
||||
|
||||
.navbar-item input{
|
||||
background-color: var(--bg1-alt0);
|
||||
}
|
||||
|
|
@ -116,10 +191,6 @@ a.channel-guide-entry-item{
|
|||
color: var(--accent1);
|
||||
}
|
||||
|
||||
a:hover.channel-guide-entry-item{
|
||||
color: var(--accent1-alt0);
|
||||
}
|
||||
|
||||
span.channel-guide-entry-item{
|
||||
background-color: var(--bg1-alt0);
|
||||
box-shadow: 0.2em 0.2em 0.1em black inset;
|
||||
|
|
@ -132,42 +203,7 @@ p.channel-guide-entry-item{
|
|||
background-color: var(--bg1-alt0);
|
||||
}
|
||||
|
||||
/* account settings */
|
||||
a#account-settings-delete-link{
|
||||
color: var(--accent0-warning);
|
||||
}
|
||||
|
||||
/* channel settings/admin panel mixed */
|
||||
|
||||
#channel-delete, #ban-popup-ban-button, #new-ban-button{
|
||||
background-color: var(--accent0-warning);
|
||||
color: var(--accent1);
|
||||
}
|
||||
|
||||
#channel-delete:hover, #ban-popup-ban-button:hover, #new-ban-button:hover{
|
||||
background-color: var(--accent0-warning-alt0);
|
||||
}
|
||||
|
||||
#channel-delete:active, #ban-popup-ban-button:active, #new-ban-button:active{
|
||||
background-color: var(--accent0-warning-alt0);
|
||||
color: var(--accent1-alt0);
|
||||
}
|
||||
|
||||
.admin-list-field,.admin-list-table{
|
||||
background-color: var(--bg1);
|
||||
color: var(--accent1);
|
||||
box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
tr.admin-list-entry{
|
||||
box-shadow: var(--accent1) 0px 1em 1px -2em, var(--accent1) 0px -1em 1px -1em;
|
||||
}
|
||||
|
||||
td.admin-list-entry-not-first-col{
|
||||
box-shadow: var(--accent1) 1em 0px 1px -2em, var(--accent1) -1em 0px 1px -1em;
|
||||
}
|
||||
|
||||
a.admin-list-entry-item{
|
||||
color: var(--accent1);
|
||||
}
|
||||
|
|
@ -176,26 +212,7 @@ a:hover.admin-list-entry-item{
|
|||
color: var(--accent1-alt0);
|
||||
}
|
||||
|
||||
.admin-list-new-span{
|
||||
background-color: white;
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
.admin-list-new-span:focus-within{
|
||||
box-shadow: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
|
||||
}
|
||||
|
||||
.admin-list-new-input{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.admin-list-new-input:focus{
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* channel */
|
||||
|
||||
#media-panel-div{
|
||||
background-color: black;
|
||||
}
|
||||
|
|
@ -204,31 +221,10 @@ a:hover.admin-list-entry-item{
|
|||
background-color: var(--bg2);
|
||||
}
|
||||
|
||||
#chat-panel-control-div{
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#chat-panel-control-div:focus-within{
|
||||
box-shadow: 2px 2px 3px var(--focus0), -2px 2px 3px var(--focus0), 2px -2px 3px var(--focus0), -2px -2px 3px var(--focus0);
|
||||
}
|
||||
|
||||
#chat-area{
|
||||
background-color: var(--bg2);
|
||||
}
|
||||
|
||||
div#chat-panel-control-div{
|
||||
border-radius: 1em;
|
||||
}
|
||||
|
||||
#chat-panel-prompt{
|
||||
border: none;
|
||||
}
|
||||
|
||||
#chat-panel-prompt:focus{
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.chat-entry{
|
||||
background-color: var(--bg2);
|
||||
border-bottom: 1px solid var(--bg2-alt1);
|
||||
|
|
@ -280,11 +276,6 @@ div#chat-panel-control-div{
|
|||
color: var(--accent1-alt0);
|
||||
}
|
||||
|
||||
#chat-panel-send-button{
|
||||
background-color: var(--focus0);
|
||||
color: white;
|
||||
}
|
||||
|
||||
select.panel-head-element{
|
||||
height: 1.2em;
|
||||
margin: auto;
|
||||
|
|
@ -319,5 +310,5 @@ select.panel-head-element{
|
|||
}
|
||||
|
||||
#delete-account-popup-title, #delete-channel-popup-title{
|
||||
color: var(--accent0-warning);
|
||||
color: var(--danger0);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue