contentdb/app/scss/components.scss
2018-06-02 19:42:46 +01:00

449 lines
6.6 KiB
SCSS

h1 {
margin: 0;
}
h2, h3 {
margin: 5px 0;
}
a {
color: #0be;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #0df;
text-decoration: underline;
}
/* Containers */
.box {
border-radius: 5px;
margin: 15px 0;
padding: 0;
}
.box > h2, .box > h3 {
margin: 0;
padding: 0.5em 0.5em 0.5em 15px;
border-bottom: 1px solid #444;
}
.box .box-body {
padding: 1em !important;
}
// .box form {
// padding: 1em;
// }
.box_grey {
background: #333;
border: 1px solid #444;
}
.ul_boxes {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.ul_boxes > li {
padding: 0;
list-style: none;
}
.box_link {
display: block;
color: #ddd;
text-decoration: none;
}
.box_link:hover{
background: #3a3a3a;
}
/*
buttonset
*/
.buttonset, .buttonset li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
.buttonset {
margin: 15px 0;
}
.button, .buttonset li a, input[type=submit] {
cursor: pointer;
}
.button, .buttonset li a, input[type=submit], input[type=text],
input[type=password], textarea, select, .bulletselector {
text-align: center;
display: inline-block;
padding: 0.4em 1em;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
color: #ddd;
border-radius: 5px;
text-decoration: none;
font-size: 100%;
}
input[type=text], input[type=password], textarea, select, .bulletselector {
text-align: left;
}
.ui-autocomplete, ui-front {
position:absolute;
cursor:default;
z-index:1001 !important
}
.ui-autocomplete {
background: #333 !important;
border: 1px solid #444 !important;
overflow-x: hidden;
overflow-y: auto;
max-height: 400px;
li {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
a {
display: block;
padding: 0.3em 0.5em !important;
margin: 0 !important;
}
}
select {
min-width: 200px;
}
select:not([multiple]) {
background: linear-gradient(#444, #333);
}
.form-group {
padding: 8px 0;
}
.form-group label {
display: block;
vertical-align: top;
padding: 0 8px 8px 0;
}
.form-group input, .form-group textarea, .form-group .bulletselector {
display: block;
min-width: 100%;
max-width: 100%;
}
.box .form-group input, .box .form-group textarea, .form-group .bulletselector {
min-width: 95%;
max-width: 95%;
}
.form-group textarea {
min-height: 200px;
}
.button:hover, .buttonset li a:hover, input[type=submit]:hover {
background: rgba(255,255,255,0.13);
border: 1px solid rgba(255,255,255,0.17);
text-decoration: none;
color: #ddd;
}
.btn_green {
background: #363 !important;
border: 1px solid #473;
}
.btn_green:hover {
background: #474 !important;
}
.linedbuttonset a {
border: 1px solid #eee;
border-radius: 3px;
padding: 4px 10px;
margin: 0;
display: block;
}
.linedbuttonset {
display: block;
margin: 0;
}
.linedbuttonset li {
display: inline-block;
margin: 10px 10px 0 0;
}
.bulletselector input {
border: none;
border-radius: 0;
-moz-border-radius: 0;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
width: auto;
min-width: 50px;
float: left;
padding: 4px 0;
white-space: nowrap;
background: transparent;
}
.bulletselector .tag {
background: #375D81;
border-radius: 3px;
-moz-border-radius: 3px;
color: #FFF;
float: left;
height: 15px;
padding: 0.1em 0.4em 0.5em;
margin-right: 0.3em;
margin-bottom: 0.3em;
vertical-align: baseline;
}
.bulletselector .tag a {
color: #FFF;
cursor: pointer;
}
.bulletselector .tag a:hover {
color: #0099CC;
text-decoration: none;
}
/* Alerts */
.alert .alert_right, .alert > form {
display: inline-block;
margin: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
.alert {
padding: 10px;
position: relative;
.alert_right:not(.button) {
padding: 0;
}
.alert_right form {
height: 100%;
}
form {
display: inline-block;
margin: 0;
padding: 0;
}
input {
height: 100%;
}
input, .button {
margin: 0;
background: 0;
border: 0;
border-left: 1px solid rgba(255,255,255,0.12);
border-radius: 0;
vertical-align: middle;
}
input:hover, .button:hover {
border: 0;
border-left: 1px solid rgba(255,255,255,0.2);
}
}
#alerts {
list-style: none;
position: fixed;
bottom: 15px;
left: 0;
right: 0;
z-index: 1000;
}
#alerts .alert {
margin: 5px 0;
vertical-align: middle;
}
#alerts .close {
float: right;
color: white;
}
#alerts .close:hover {
color: #fff;
}
.alert-error, .button-danger {
background: #933 !important;
border: 1px solid #c44 !important;
}
.alert-warning {
background: #963;
border: 1px solid #c96;
}
.alert-success {
background: #161;
border: 1px solid #393;
}
table.fancyTable {
font-family: "Arial Black", Gadget, sans-serif;
border: 2px solid #000000;
background-color: #4A4A4A;
width: 100%;
text-align: center;
border-collapse: collapse;
}
table.fancyTable td, table.fancyTable th {
border: 1px solid #4A4A4A;
padding: 3px 2px;
}
table.fancyTable tbody td {
font-size: 13px;
color: #E6E6E6;
}
table.fancyTable tr:nth-child(even) {
background: #888888;
}
table.fancyTable thead {
background: #000000;
border-bottom: 3px solid #000000;
}
table.fancyTable thead th {
font-size: 15px;
font-weight: bold;
color: #E6E6E6;
text-align: center;
border-left: 2px solid #4A4A4A;
}
table.fancyTable thead th:first-child {
border-left: none;
}
table.fancyTable tfoot {
font-size: 12px;
font-weight: bold;
color: #E6E6E6;
background: #000000;
background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
border-top: 1px solid #4A4A4A;
}
table.fancyTable tfoot td {
font-size: 12px;
}
.t-mll tr td:not(:first-child) {
text-align: left;
}
.userlist li.NOT_JOINED {
color: #aaa;
}
.NOT_JOINED a, a.NOT_JOINED {
color: #7ac;
}
.ADMIN a, a.ADMIN{
color: #e30;
}
.MODERATOR a, a.MODERATOR {
color: #e90;
}
.EDITOR a, a.EDITOR {
color: #b6f;
}
.TRUSTED_MEMBER a, a.TRUSTED_MEMBER {
color: #2c2;
}
/*
Aside
*/
.asideright {
float: right;
margin: 0 0 0 15px;
max-width: 300px;
}
.outsidecontainer {
position: absolute;
right: 102%;
top: 0;
width: intrinsic; /* Safari/WebKit uses a non-standard name */
width: -moz-max-content; /* Firefox/Gecko */
width: -webkit-max-content; /* Chrome */
}
@media (max-width: 1490px) {
.outsidecontainer {
display: none;
}
}
.flatlist, .flatlist li {
list-style: none;
padding: 0;
margin: 0;
}
.flatlist li {
display: block;
}
.flatlist a {
display: block;
padding: 0.5em 20px;
color: #ddd;
font-weight: normal;
}
.flatlist a:hover {
background: #444;
text-decoration: none;
}
.table-topalign td {
vertical-align: top;
}