Some UI improvements
This commit is contained in:
cuom1999
parent
0708eb7bb0
commit
5d15cb9bad
21 changed files with 147 additions and 184 deletions
|
|
@ -289,7 +289,7 @@ nav {
|
|||
|
||||
&:hover {
|
||||
border-top: 2px solid #9c3706;
|
||||
color: lightcoral;
|
||||
color: black;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -377,7 +377,8 @@ hr {
|
|||
}
|
||||
|
||||
#content {
|
||||
margin: 3.2em auto 1em auto;
|
||||
margin: 48px auto 1em auto;
|
||||
padding-top: 1em;
|
||||
|
||||
// Header
|
||||
width: 90%;
|
||||
|
|
|
|||
|
|
@ -43,12 +43,11 @@
|
|||
border-bottom: 0;
|
||||
}
|
||||
#chat-online-content {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0;
|
||||
overflow: hidden;
|
||||
overflow-wrap: break-word;
|
||||
overflow-y: auto;
|
||||
max-height: 77vh;
|
||||
max-height: calc(100% - 44px);
|
||||
}
|
||||
#chat-box {
|
||||
/*border: 1px solid #ccc;*/
|
||||
|
|
@ -80,7 +79,7 @@
|
|||
#chat-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
height: calc(100vh - 3em);;
|
||||
border: 1px solid #ccc;
|
||||
/*border-radius: 0 4px 0 0;*/
|
||||
border-bottom: 0;
|
||||
|
|
@ -96,18 +95,13 @@
|
|||
font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
|
||||
}
|
||||
.info-pic {
|
||||
height: 90%;
|
||||
border-radius: 50%;
|
||||
padding: 0.05em;
|
||||
border: 0.1px solid #ccc;
|
||||
margin-left: 3em;
|
||||
margin-bottom: 1.5px;
|
||||
height: 100%;
|
||||
}
|
||||
.info-circle {
|
||||
position: absolute;
|
||||
cx: 86%;
|
||||
cy: 80%;
|
||||
r: 6px;
|
||||
cx: 12%;
|
||||
cy: 12%;
|
||||
r: 12%;
|
||||
stroke: white;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
|
@ -116,13 +110,17 @@
|
|||
font-size: 2em;
|
||||
font-weight: bold !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.info-name a {
|
||||
display: table-caption;
|
||||
}
|
||||
#chat-info {
|
||||
border-bottom: 2px solid darkgray;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0px 2px 3px rgb(0 0 0 / 20%);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
#refresh-button {
|
||||
padding: 0;
|
||||
|
|
@ -192,9 +190,8 @@
|
|||
|
||||
.chat {
|
||||
.active-span {
|
||||
margin-top: 1em;
|
||||
margin-right: 1em;
|
||||
color: #636363;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.unread-count {
|
||||
|
|
|
|||
|
|
@ -1575,7 +1575,7 @@ nav ul li button:link {
|
|||
nav ul li a:hover,
|
||||
nav ul li button:hover {
|
||||
border-top-color: rgb(199, 70, 8);
|
||||
color: rgb(239, 120, 120);
|
||||
color: rgb(232, 230, 227);
|
||||
background-image: initial;
|
||||
background-color: rgba(24, 26, 27, 0.25);
|
||||
}
|
||||
|
|
@ -2034,16 +2034,6 @@ ul.problem-list {
|
|||
#problem-table th a {
|
||||
color: inherit;
|
||||
}
|
||||
.problem-feed-option-item {
|
||||
background-image: initial;
|
||||
background-color: rgb(49, 53, 55);
|
||||
color: rgb(152, 143, 129);
|
||||
}
|
||||
.problem-feed-option-item.active {
|
||||
background-image: initial;
|
||||
background-color: rgb(27, 73, 88);
|
||||
color: rgb(121, 170, 255);
|
||||
}
|
||||
.problem-data-form .bad-file input,
|
||||
.problem-data-form .bad-file .select2-selection {
|
||||
border-color: rgb(179, 0, 0);
|
||||
|
|
@ -2479,9 +2469,10 @@ input[type="text"]:focus, input[type="password"]:focus {
|
|||
.tabs > ul > li.active > span:hover,
|
||||
.tabs > ul > li.active > a,
|
||||
.tabs > ul > li.active > span {
|
||||
color: rgb(232, 230, 227);
|
||||
background-color: rgb(24, 26, 27);
|
||||
border-color: rgb(62, 68, 70) rgb(62, 68, 70) transparent;
|
||||
color: rgb(205, 200, 194);
|
||||
border-bottom-color: rgb(126, 117, 103);
|
||||
background-image: initial;
|
||||
background-color: transparent;
|
||||
}
|
||||
.tabs {
|
||||
border-bottom-color: rgb(62, 68, 70);
|
||||
|
|
@ -2504,10 +2495,13 @@ input[type="text"]:focus, input[type="password"]:focus {
|
|||
}
|
||||
.tabs > ul > li > a,
|
||||
.tabs > ul > li > span {
|
||||
border-color: transparent;
|
||||
color: rgb(178, 172, 162);
|
||||
text-decoration-color: initial;
|
||||
}
|
||||
.tabs > ul > li > a:hover,
|
||||
.tabs > ul > li > span:hover {
|
||||
border-bottom-color: rgb(0, 217, 0);
|
||||
}
|
||||
ul.pagination a:hover {
|
||||
color: rgb(232, 230, 227);
|
||||
background-image: initial;
|
||||
|
|
@ -2585,17 +2579,15 @@ a.close:hover {
|
|||
border-top-color: rgb(53, 57, 59);
|
||||
}
|
||||
.sidebox h3 {
|
||||
background-image: initial;
|
||||
background-color: rgb(24, 26, 27);
|
||||
}
|
||||
.sidebox h3 .fa {
|
||||
background-image: initial;
|
||||
background-color: rgb(3, 66, 54);
|
||||
color: rgb(232, 230, 227);
|
||||
}
|
||||
.sidebox h3 .fa {
|
||||
color: rgb(232, 230, 227);
|
||||
}
|
||||
.sidebox-content {
|
||||
border-right-color: rgb(62, 68, 70);
|
||||
border-bottom-color: rgb(62, 68, 70);
|
||||
border-left-color: rgb(62, 68, 70);
|
||||
border-top-color: initial;
|
||||
background-image: initial;
|
||||
background-color: rgb(24, 26, 27);
|
||||
|
|
@ -3029,14 +3021,11 @@ a.voted {
|
|||
border-bottom-color: initial;
|
||||
}
|
||||
}
|
||||
.info-pic {
|
||||
border-color: rgb(62, 68, 70);
|
||||
}
|
||||
.info-circle {
|
||||
stroke: rgb(232, 230, 227);
|
||||
}
|
||||
#chat-info {
|
||||
border-bottom-color: rgb(72, 78, 81);
|
||||
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px;
|
||||
}
|
||||
#refresh-button {
|
||||
background-image: initial;
|
||||
|
|
@ -3095,7 +3084,7 @@ a.voted {
|
|||
color: rgb(232, 230, 227);
|
||||
}
|
||||
.organization-row {
|
||||
border-bottom-color: rgb(84, 91, 94);
|
||||
border-bottom-color: rgb(62, 68, 70);
|
||||
border-top-color: initial;
|
||||
color: rgb(232, 230, 227);
|
||||
}
|
||||
|
|
@ -3103,7 +3092,7 @@ a.voted {
|
|||
background-color: rgb(31, 33, 35);
|
||||
}
|
||||
.organization-container {
|
||||
border-color: rgb(84, 91, 94);
|
||||
border-color: rgb(62, 68, 70);
|
||||
}
|
||||
.ticket-container #content > h2:first-child small {
|
||||
color: rgb(168, 160, 149);
|
||||
|
|
|
|||
|
|
@ -1,49 +1,50 @@
|
|||
.leave-organization, .leave-organization:hover {
|
||||
color: red;
|
||||
}
|
||||
#control-list li {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
#pending-count-box {
|
||||
float: right;
|
||||
text-align: center;
|
||||
background: red;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
padding-left: 0.3em;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
.org-field-wrapper {
|
||||
input[type=text], textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.select2 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.org-field-wrapper {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
.org-field-wrapper:has(> input[type=checkbox]) {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.organization-row {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px gray solid;
|
||||
border-top: none;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.organization-row:hover {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.organization-container {
|
||||
border: 1px gray solid;
|
||||
margin-bottom: 3em;
|
||||
.leave-organization, .leave-organization:hover {
|
||||
color: red;
|
||||
}
|
||||
#control-list li {
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
#pending-count-box {
|
||||
float: right;
|
||||
text-align: center;
|
||||
background: red;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
padding-left: 0.3em;
|
||||
padding-right: 0.3em;
|
||||
}
|
||||
.org-field-wrapper {
|
||||
input[type=text], textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.select2 {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.org-field-wrapper {
|
||||
margin-top: 0.4em;
|
||||
}
|
||||
.org-field-wrapper:has(> input[type=checkbox]) {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.organization-row {
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px #ccc solid;
|
||||
border-top: none;
|
||||
color: black;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.organization-row:hover {
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.organization-container {
|
||||
border: 1px #ccc solid;
|
||||
margin-bottom: 3em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -364,34 +364,10 @@ ul.problem-list {
|
|||
}
|
||||
}
|
||||
|
||||
.problem-feed-option {
|
||||
width: 90%;
|
||||
margin-left: 2.5%;
|
||||
padding-bottom: 1em;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.problem-feed-option-item {
|
||||
padding: 10px 15px;
|
||||
border-radius: 1em;
|
||||
font-weight: bold;
|
||||
background: lightgray;
|
||||
margin-right: 1em;
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pcodecell {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.problem-feed-option-item.active {
|
||||
background: lightblue;
|
||||
color: darkblue;
|
||||
}
|
||||
|
||||
.problem-data-form {
|
||||
.bad-file input, .bad-file .select2-selection {
|
||||
border-color: red;
|
||||
|
|
|
|||
|
|
@ -90,4 +90,10 @@
|
|||
|
||||
#users-table th a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.feed-table {
|
||||
td, td:first-child, tr:last-child td, tr:last-child td:first-child {
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -215,12 +215,11 @@ input {
|
|||
|
||||
// Bootstrap-y tabs
|
||||
.ul_tab_a_active {
|
||||
color: black;
|
||||
color: #045343;
|
||||
cursor: default;
|
||||
background-color: #fff;
|
||||
border: 1px solid $border_gray;
|
||||
border-bottom-color: transparent;
|
||||
border-image: none;
|
||||
font-weight: bold;
|
||||
border-bottom: 3px solid #045343;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
|
@ -267,7 +266,6 @@ input {
|
|||
overflow-y: hidden;
|
||||
|
||||
> li {
|
||||
margin-bottom: -1px;
|
||||
position: relative;
|
||||
display: block;
|
||||
|
||||
|
|
@ -284,16 +282,19 @@ input {
|
|||
}
|
||||
|
||||
> a, > span {
|
||||
margin-right: 2px;
|
||||
margin-right: 10px;
|
||||
line-height: 1.42857;
|
||||
border: 1px solid transparent;
|
||||
border-radius: $widget_border_radius $widget_border_radius 0 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
padding: 5px 5px;
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
border-bottom: 3px solid green;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -474,28 +475,30 @@ ul.select2-selection__rendered {
|
|||
}
|
||||
|
||||
.sidebox h3 {
|
||||
margin: 0 -5px;
|
||||
background: #045343;
|
||||
border-radius: $widget_border_radius $widget_border_radius 0 0;
|
||||
color: white;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
padding-left: 7px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
font-weight: bold;
|
||||
background: white;
|
||||
display: flex;
|
||||
|
||||
.sidebox h3 .fa {
|
||||
color: white;
|
||||
float: right;
|
||||
margin: 0.2em 0.4em 0 0;
|
||||
.fa {
|
||||
background: #045343;
|
||||
color: white;
|
||||
padding: 4px;
|
||||
margin-right: 8px;
|
||||
border-radius: 5px;
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebox-content {
|
||||
border: 1px solid $border_gray;
|
||||
border-top: none;
|
||||
margin: 0 -5px;
|
||||
padding: 1px 0.5em 3px;
|
||||
background: white;
|
||||
border-radius: 0 0 $widget_border_radius $widget_border_radius;
|
||||
|
||||
&.sidebox-table {
|
||||
border: none;
|
||||
|
|
@ -510,8 +513,7 @@ ul.select2-selection__rendered {
|
|||
.sidebox {
|
||||
border-top-left-radius: $widget_border_radius;
|
||||
border-top-right-radius: $widget_border_radius;
|
||||
padding: 0 5px !important;
|
||||
margin-bottom: 1.5em !important;
|
||||
margin-bottom: 1.5em;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue