light theme
This commit is contained in:
parent
ab27dccba5
commit
8e56c9a3c5
Binary file not shown.
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
After Width: | Height: | Size: 149 KiB |
|
@ -0,0 +1,523 @@
|
|||
$ui-base-color: #fafafa; // "darkest"
|
||||
$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
|
||||
$ui-secondary-color: darken($ui-base-color, 15%); // "lightest"
|
||||
$ui-primary-color: #a45064; // "lighter"
|
||||
$ui-highlight-color: #a45064; // "vibrant"
|
||||
$primary-text-color: #333;
|
||||
|
||||
$about-page-text: $primary-text-color;
|
||||
|
||||
@import 'application';
|
||||
|
||||
/* cybre-specific additions */
|
||||
|
||||
.column .static-content.getting-started {
|
||||
background-image: url('../images/logo-cybre-light.png');
|
||||
background-size:50% 50%;
|
||||
background-position: 50% 75%;
|
||||
}
|
||||
|
||||
.columns-area {
|
||||
background: $ui-base-color url('../images/background-cybre-light.png');
|
||||
}
|
||||
|
||||
/* about.scss */
|
||||
|
||||
.landing-page {
|
||||
h1 {
|
||||
color: $about-page-text;
|
||||
small {
|
||||
color: lighten($about-page-text, 10%);
|
||||
}
|
||||
}
|
||||
p, li {
|
||||
color: $about-page-text;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
padding-top:0px;
|
||||
|
||||
background-size:cover;
|
||||
background-position:50% 55%;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
.mascot {
|
||||
width:500px;
|
||||
bottom:-52px;
|
||||
left:-120px;
|
||||
}
|
||||
}
|
||||
|
||||
.container.links {
|
||||
background-color: $ui-base-color;
|
||||
border-top: 5px solid $ui-primary-color;
|
||||
width:100%;
|
||||
max-width:100%;
|
||||
padding:0px calc(50% - 400px);
|
||||
|
||||
a {
|
||||
&:hover {
|
||||
color: lighten($ui-primary-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container.hero {
|
||||
.floats {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.closed-registrations-message, form {
|
||||
border-top: 50px solid #5f4770;
|
||||
-webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 6px rgba(0,0,0,.1);
|
||||
|
||||
&:before {
|
||||
font-size: 16px;
|
||||
font-family:inherit;
|
||||
line-height:inherit;
|
||||
font-weight:normal;
|
||||
color:white;
|
||||
position:absolute;
|
||||
top:-35px;
|
||||
}
|
||||
}
|
||||
|
||||
.closed-registrations-message:before {
|
||||
content: "Registrations closed";
|
||||
}
|
||||
|
||||
form:before {
|
||||
content: "Register now";
|
||||
}
|
||||
}
|
||||
|
||||
#mastodon-timeline {
|
||||
.column-header {
|
||||
color:white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.features-list__row {
|
||||
.text {
|
||||
color: $about-page-text;
|
||||
}
|
||||
}
|
||||
|
||||
.information-board {
|
||||
.panel {
|
||||
.panel-header {
|
||||
color: $primary-text-color;
|
||||
border-bottom: 1px solid lighten($ui-secondary-color, 4%);
|
||||
|
||||
a,
|
||||
span {
|
||||
font-weight: 400;
|
||||
color: lighten($ui-primary-color, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* components.scss */
|
||||
|
||||
.onboarding-modal__page {
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.column-header {
|
||||
background: $ui-primary-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.column-header__button {
|
||||
background: $ui-primary-color;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: lighten($ui-primary-color, 50%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $primary-text-color;
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.column-header__back-button {
|
||||
background: $ui-primary-color;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.column-back-button {
|
||||
background: $ui-primary-color;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.empty-column-indicator,
|
||||
.error-column {
|
||||
color: darken($ui-base-lighter-color, 15%);
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea,
|
||||
.spoiler-input__input {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
button.icon-button {
|
||||
&.disabled {
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
&.inverted {
|
||||
color: darken($ui-base-lighter-color, 10%);
|
||||
}
|
||||
|
||||
&.overlayed {
|
||||
background: rgba($base-overlay-background, 0.2);
|
||||
color: rgba($white, 0.7);
|
||||
|
||||
&:hover {
|
||||
background: rgba($base-overlay-background, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($ui-base-lighter-color, 10%);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($ui-base-lighter-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: darken($ui-base-lighter-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button.star-icon,
|
||||
.icon-button.star-icon:active {
|
||||
background:transparent;
|
||||
border:none;
|
||||
}
|
||||
|
||||
.icon-button.star-icon.active {
|
||||
color: $gold-star;
|
||||
&:active, &:hover, &:focus {
|
||||
color: $gold-star;
|
||||
}
|
||||
}
|
||||
|
||||
.text-icon-button {
|
||||
color: darken($ui-base-lighter-color, 10%);
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header {
|
||||
& > div {
|
||||
background: rgba(lighten($ui-base-color, 4%), 0.6);
|
||||
}
|
||||
|
||||
.account__header__content {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__buttons {
|
||||
button.text-icon-button {
|
||||
&.active:last-child {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__option {
|
||||
color: $primary-text-color;
|
||||
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $white;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: $white;
|
||||
|
||||
strong {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-dialog {
|
||||
.emoji-search-wrapper {
|
||||
border-color: darken($ui-base-color, 10%);
|
||||
}
|
||||
.emoji-search {
|
||||
background: darken($ui-base-color, 5%);
|
||||
border-color: darken($ui-base-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.static-content {
|
||||
/*color: $primary-text-color;*/
|
||||
}
|
||||
|
||||
.getting-started {
|
||||
p {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: darken($ui-base-lighter-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.status__content {
|
||||
.status__content__spoiler-link {
|
||||
background: $ui-base-lighter-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-lighter-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown--active .dropdown__content {
|
||||
& > ul {
|
||||
background: $ui-base-color;
|
||||
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
|
||||
& > li > a {
|
||||
background: $ui-base-color;
|
||||
color: $primary-text-color;
|
||||
|
||||
&:hover {
|
||||
background: $ui-highlight-color;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boost-modal,
|
||||
.confirmation-modal,
|
||||
.report-modal,
|
||||
.actions-modal {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.status__content,
|
||||
.reply-indicator__content {
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
|
||||
&:hover {
|
||||
.fa {
|
||||
color: darken($ui-base-color, 40%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* forms.scss */
|
||||
.block-button, .button, button {
|
||||
background-color: $ui-primary-color;
|
||||
color: $white;
|
||||
|
||||
&.button-alternative {
|
||||
color: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.simple_form {
|
||||
p.hint {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.block-button, .button, button {
|
||||
background-color: $ui-primary-color;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-primary-color, 5%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($ui-primary-color, 5%);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* admin.scss */
|
||||
|
||||
.table > thead > tr > th {
|
||||
border-bottom-color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
.admin-wrapper {
|
||||
.content {
|
||||
h2, p.hint, h4, h6 {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.muted-hint {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
ul {
|
||||
ul {
|
||||
a {
|
||||
&.selected {
|
||||
background-color: $ui-primary-color;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-primary-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* accounts.scss */
|
||||
.card {
|
||||
.name {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.counter {
|
||||
.counter-number {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* stream_entries.scss */
|
||||
.activity-stream {
|
||||
.entry {
|
||||
}
|
||||
.status.light {
|
||||
.display-name {
|
||||
strong {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
.status__content {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* uncategorized */
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
.column {
|
||||
flex-grow: 1 !important;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
width: 17%;
|
||||
max-width: 400px;
|
||||
min-width: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
.status time:after,
|
||||
.detailed-status__datetime span:after {
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
content: "\00a0\00a0\f08e";
|
||||
}
|
||||
|
||||
.compose-form__buttons button.active:last-child {
|
||||
color:$ui-secondary-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.drawer .drawer__inner {
|
||||
overflow: visible;
|
||||
height:inherit;
|
||||
}
|
||||
|
||||
.drawer__pager {
|
||||
overflow-y:auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
max-height:100vh;
|
||||
}
|
||||
|
||||
|
||||
.media-gallery {
|
||||
max-height:30vh;
|
||||
height:30vh !important;
|
||||
position:relative;
|
||||
margin-top:20px;
|
||||
margin-left:-68px;
|
||||
width: calc(100% + 80px);
|
||||
}
|
||||
|
||||
.detailed-status .media-gallery {
|
||||
margin-left:-10px;
|
||||
width: calc(100% + 22px);
|
||||
}
|
||||
|
||||
.media-spoiler-video,
|
||||
.status__video-player,
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler {
|
||||
max-height:30vh;
|
||||
height:30vh !important;
|
||||
position:relative;
|
||||
margin-top:20px;
|
||||
margin-left:-68px;
|
||||
width: calc(100% + 80px) !important;
|
||||
}
|
||||
|
||||
.status__video-player-video {
|
||||
transform:unset;
|
||||
top:unset;
|
||||
}
|
||||
|
||||
.detailed-status > .media-spoiler,
|
||||
.status > .media-spoiler {
|
||||
height:30vh !important;
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
.actions .button.button-alternative {
|
||||
background: $ui-highlight-color;
|
||||
color: $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1,2 @@
|
|||
default: styles/application.scss
|
||||
light: styles/light.scss
|
||||
|
|
Loading…
Reference in New Issue