ore/app/assets/stylesheets/main.scss
@import 'admin';
@import 'creator';
@import 'discuss';
@import 'editor';
@import 'footer';
@import 'nav';
@import 'project';
@import 'user';
@import "panel";
@import "version-list";
@import 'utils';
html {
position: relative;
min-height: 100%;
}
body {
background-color: $mainBackground;
}
.site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.site-content {
flex: 1;
}
.site-header-margin {
margin-top: 63px;
padding-top: 1.5rem;
}
.staging-warning {
background: #ff544b;
text-align: center;
padding: 0.25rem 0;
color: white;
margin-bottom: 1.5rem;
}
.modal-body {
width: 100%;
}
.index-header {
padding-bottom: 1.5rem;
}
.index-header .alert {
margin-bottom: 20px;
}
.sponsor {
.logo {
max-width: 100%;
max-height: 40px;
}
span {
position: absolute;
left: 20px;
font-size: 1rem;
top: 5px;
font-weight: bold;
}
.panel.sponsor-panel {
margin-bottom: 0;
text-align: center;
> .panel-body {
padding-top: 25px;
}
}
@media (max-width: 992px) {
margin-top: 1.5rem;
}
}
form {
@include margin-vert(10px, 10px);
}
.form-group {
margin-bottom: 10px;
}
.tos {
font-size: 11px;
color: gray;
margin-bottom: 5px;
}
.btn-more {
width: 100%;
background-color: #f5f5f5;
}
/* project content */
.project-list {
.row {
display: flex;
flex-wrap: nowrap;
}
@media (max-width: 767px) {
.row {
display: flex;
flex-wrap: wrap;
}
}
.project {
padding: 10px 0;
margin-bottom: 0.25rem;
&:first-child {
margin-top: 0.25rem;
}
}
.title {
font-size: 2rem;
color: $sponge_grey;
font-weight: bold;
}
.description-column {
overflow: hidden;
.description {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.tags-line {
display: flex;
justify-content: flex-end;
@media (max-width: 480px) {
justify-content: flex-start;
margin-top: 0.5rem;
}
.tags {
margin-right: 0.5rem;
}
:last-child {
margin-right: 0;
}
.tag {
margin: 0;
}
}
.info {
display: flex;
justify-content: flex-end;
span {
margin-right: 1.5rem;
&:last-child {
margin-right: 0;
}
&.recommended-version a {
font-weight: bold;
color: #636363;
}
}
}
}
// category table
.select-sort {
margin-bottom: 10px;
}
.setting {
@extend .minor;
@extend .form-group;
border-bottom: 1px solid $light;
padding: 20px;
position: relative;
form { margin: 0; }
.danger { color: #B34D4D; }
h4 {
font-weight: bold;
margin-top: 0;
i {
font-weight: normal;
font-size: 14px;
}
}
.setting-content {
width: 25%;
height: 100%;
float: right;
}
.setting-description {
width: 60%;
height: 100%;
float: left;
}
.icon-description {
position: absolute;
bottom: 20px;
right: 20px;
p { margin-bottom: 110px; }
}
#btn-rename, .btn-delete {
width: 100%;
}
}
.setting-no-border {
border: none;
margin-bottom: 0;
}
.category-reset {
margin-top: -15px;
margin-right: -4px;
}
.category-list {
a.list-group-item {
svg {
margin-right: 0.5rem;
}
&:hover {
cursor: pointer;
background-color: $mainBackground;
}
&.active {
background: #FFFFFF;
border-bottom: 1px solid #dddddd;
border-top: 1px solid #dddddd;
box-shadow: inset -10px 0px 0px 0px $sponge_yellow;
}
}
}
.cat-icon {
width: 10px;
text-align: center;
}
.container-error {
margin-top: 10%;
text-align: center;
img {
display: block;
margin: 0 auto;
}
}
.btn {
&:focus, &:active:focus, &.active:focus, &.focus, &:active.focus, &.active.focus {
outline: none;
}
&.dark {
background: $sponge_dark_grey;
border: 1px solid $sponge_light_gray;
color: #ffffff;
&:hover {
background: darken($sponge_dark_grey, 1);
}
}
&.yellow {
background: $sponge_yellow;
border: 1px solid darken($sponge_yellow, 7);
color: darken($sponge_yellow, 30);
font-weight: 600;
&:hover {
background: darken($sponge_yellow, 2);
}
}
}
.panel > .panel-heading {
display: flex;
align-items: center;
justify-content: space-between;
background: $sponge_grey;
color: #ffffff;
font-weight: 600;
border: none;
&:last-child {
margin-left: auto;
}
.btn i {
color: inherit;
}
i {
color: #ffffff;
}
}
select.form-control, input.form-control {
box-shadow: none;
border: 1px solid $lighter;
&:focus {
box-shadow: none;
border: 1px solid $lighter;
}
}
.btn-group .form-control {
z-index: 4;
}
.template {
display: none;
}
.pagination {
margin: 10px 0;
li {
&:first-child a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&:last-child a {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
a {
background: $sponge_light_gray;
color: white;
cursor: pointer;
border: 1px solid lighten($sponge_light_gray, 10);
&:hover, &:focus, &:active {
border-color: $sponge_yellow;
background: $sponge_yellow;
color: darken($sponge_yellow, 30);
}
}
&.disabled a, &.disabled a:hover, &.disabled a:focus {
background: $sponge_light_gray;
color: lighten($sponge_light_gray, 10);
border: 1px solid lighten($sponge_light_gray, 10);
}
&.active > a {
cursor: pointer;
border-color: $sponge_yellow;
background: $sponge_yellow;
color: darken($sponge_yellow, 30);
&:hover {
cursor: pointer;
color: darken($sponge_yellow, 30);
}
}
}
}
.tags {
align-items: center;
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-start;
.tag {
border: 1px solid darken(whitesmoke, 10);
align-items: center;
display: flex;
background-color: whitesmoke;
border-radius: 3px;
font-size: 0.75em;
height: 2em;
padding-left: 0.75em;
padding-right: 0.75em;
white-space: nowrap;
margin: 5px;
}
&.has-addons .tag {
&:first-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-right: 0;
}
&:nth-child(2) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-left: none;
margin-left: 0;
}
}
}
.channel {
align-items: center;
display: inline-flex;
border-radius: 3px;
font-size: 0.75em;
height: 2em;
padding-left: 0.75em;
padding-right: 0.75em;
white-space: nowrap;
}
.table tbody > tr > td {
vertical-align: middle;
}
.table.centered {
text-align: center;
}
.project-search {
margin-bottom: 1rem;
}
.text-sponge-yellow {
color: $sponge_yellow !important;
}
.table-review-log tr td:first-child {
width: 10em;
font-weight: bold;
vertical-align: top;
}
.table-notes-log tr .note-fixed-with {
width: 10em;
}
.input-group .input-group-btn {
z-index: 999;
}
.striped {
background: repeating-linear-gradient(45deg, $lighter, $lighter 15px, #f5f5f5 15px, #f5f5f5 35px);
}
.project-new {
box-shadow: inset -10px 0px cadetblue;
}
.project-needsChanges {
box-shadow: inset -10px 0px gold;
}
.project-hidden {
box-shadow: inset -10px 0px red;
}
.full-size {
width: 100%;
height: 100%;
}
.aligned-row {
display: flex;
flex-flow: row wrap;
&::before {
display: block;
}
}
@media (min-width : 992px) {
.centered-content-row {
display: flex;
flex-flow: nowrap;
align-items: center;
}
}
.ore-banner {
.ore-logo {
max-width: 100%;
max-height: 100%;
width: auto;
img {
height: 6rem;
width: 6rem;
}
}
.text {
font-family: $sponge_headline_font;
display: inline-block;
padding-left: 0;
width: auto;
.headline {
font-weight: bold;
font-size: 2.75rem;
}
}
}
#form-download {
margin: 0;
}
.text-bold {
font-weight: bold;
}
.text-italic {
font-style: italic;
}
@media(min-width: 768px) {
.pull-right-sm {
float: right;
}
}
@media (max-width: 767px) {
.mb-3-sm {
margin-bottom: 1rem;
}
}
.no-padding {
padding: 0;
}
.filter-user {
background-color: rgba(250, 250, 10, 0.4);
}
.filter-project {
background-color: rgba(10, 10, 250, 0.4);
}
.filter-version {
background-color: rgba(10, 250, 10, 0.4);
}
.filter-page {
background-color: rgba(250, 10, 250, 0.4);
}
.filter-action {
background-color: rgba(10, 250, 250, 0.4);
}
.filter-subject {
background-color: rgba(175, 150, 250, 0.4);
}
.table-super-condensed td {
padding: 2px !important;
}
.center-vertically {
vertical-align: middle;
}
.mb-0 {
margin-bottom: 0;
}
.mr-1 {
margin-right: 0.5rem;
}