136 lines
5.0 KiB
Plaintext
136 lines
5.0 KiB
Plaintext
.card
|
|
.card-body
|
|
%h1 Theming
|
|
%p.lead Welcome to the Theme Editor!
|
|
%p
|
|
Here you'll be able to modify your Retrospring experience by adjusting all available colors.
|
|
To further help you with adjusting needs, there are a few example elements using the specified colors, and sections will include
|
|
descriptions on their general use on the site!
|
|
|
|
%p
|
|
And with that:
|
|
%b Happy Theming!
|
|
|
|
- if current_user.theme
|
|
.pull-right
|
|
= button_to 'Delete Theme', delete_user_theme_path, data: { confirm: "Are you sure?" }, tabindex: -1, method: :delete, class: "btn btn-danger"
|
|
= bootstrap_form_for(current_user.theme || Theme.new, url: {action: "update_theme"}, html: {id: 'update_theme'}, method: "patch") do |f|
|
|
.card
|
|
.card-body
|
|
%h2 General
|
|
%p
|
|
Here you'll find general page values that are basically visible all across the page.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :background_color, class: 'color', data: {default: 0xF0EDF4}
|
|
.col-sm-6
|
|
= f.text_field :body_text, class: 'color', data: {default: 0x000000}
|
|
.card
|
|
.card-body
|
|
%h2 Forms and Inputs
|
|
%p
|
|
Styles for form inputs, like textfields.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :input_color, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-6
|
|
= f.text_field :input_text, class: 'color', data: {default: 0x000000}
|
|
.card
|
|
.card-body
|
|
%h2 Raised Content
|
|
%p
|
|
Raised content basically describes all the different boxes and panels you can see across the site.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :raised_background, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-6
|
|
= f.text_field :raised_accent, class: 'color', data: {default: 0xF7F7F7}
|
|
.card-footer
|
|
%p Some text on top of a accented area on a raised element!
|
|
.card
|
|
.card-body
|
|
%h2 Colors
|
|
%p
|
|
Colors you can find used on the site. The names of the colors usually describe the context.
|
|
The "text" colors for all styles represent the color that text on top of these colors has.
|
|
|
|
%ul
|
|
%li
|
|
%b Primary:
|
|
The primary/brand color of the site, used for navigation, links, etc.
|
|
%li
|
|
%b Danger:
|
|
Color used for errors or critical actions like deleting something.
|
|
%li
|
|
%b Warning:
|
|
Color used for warnings if something non-critical has happened.
|
|
%li
|
|
%b Info:
|
|
Color used for informational popups or messages.
|
|
%li
|
|
%b Success:
|
|
Color used for messages if something went through successfully.
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :primary_color, class: 'color', data: {default: 0x5E35B1}
|
|
.col-sm-6
|
|
= f.text_field :primary_text, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-12
|
|
.alert.alert-primary
|
|
A simple primary alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :danger_color, class: 'color', data: {default: 0xDC3545}
|
|
.col-sm-6
|
|
= f.text_field :danger_text, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-12
|
|
.alert.alert-danger
|
|
A simple danger alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :warning_color, class: 'color', data: {default: 0xFFC107}
|
|
.col-sm-6
|
|
= f.text_field :warning_text, class: 'color', data: {default: 0x292929}
|
|
.col-sm-12
|
|
.alert.alert-warning
|
|
A simple warning alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :info_color, class: 'color', data: {default: 0x17A2B8}
|
|
.col-sm-6
|
|
= f.text_field :info_text, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-12
|
|
.alert.alert-info
|
|
A simple info alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :success_color, class: 'color', data: {default: 0x28A745}
|
|
.col-sm-6
|
|
= f.text_field :success_text, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-12
|
|
.alert.alert-success
|
|
A simple success alert—check it out!
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :dark_color, class: 'color', data: {default: 0x343A40}
|
|
.col-sm-6
|
|
= f.text_field :dark_text, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-12
|
|
%button.btn.btn-dark.mb-3 A dark button
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :light_color, class: 'color', data: {default: 0xF8F9FA}
|
|
.col-sm-6
|
|
= f.text_field :light_text, class: 'color', data: {default: 0xFFFFFF}
|
|
.col-sm-12
|
|
%button.btn.btn-light.mb-3 A light button
|
|
.row
|
|
.col-sm-6
|
|
= f.text_field :muted_text, class: 'color', data: {default: 0x6C757D}
|
|
.col-sm-6
|
|
%p.pt-4.text-muted Some muted text
|
|
.card
|
|
.card-body
|
|
.pull-left
|
|
= f.submit t('views.actions.save'), class: 'btn btn-primary'
|