mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 12:37:58 +01:00
278 lines
12 KiB
SCSS
278 lines
12 KiB
SCSS
/*
|
|
* This file defines:
|
|
* 1) main colors, 2) main colors variations, 3) dimensions and other shared properties, 4) mixins
|
|
* Custom themes ('themes/default' and 'themes/dark') may override some or all of these settings.
|
|
*
|
|
* Note that individual stylesheets ('common/buttons') may have local properties.
|
|
* Those can be overridden in themes as well (see 'themes/dark' for an example of that).
|
|
*/
|
|
|
|
// ///////////////////////////////////
|
|
// ///// SECTION 1 - MAIN COLORS /////
|
|
// ///////////////////////////////////
|
|
|
|
$background_color: #ffffff !default;
|
|
$page_background_color: #f8fafc !default;
|
|
$foreground_color: #333333 !default;
|
|
|
|
$base_color: #62a7d9 !default;
|
|
|
|
$primary_color: #c1e4f9 !default;
|
|
$success_color: #bde9a3 !default; /* tag added, currently banned, view post history--added */
|
|
$danger_color: #ebc0bb !default; /* tag removed, currently not banned, view post history--deleted */
|
|
$warning_color: #eee9bc !default; /* NSFW streams, image spoilered, things like that */
|
|
|
|
$link_color: #419cd9 !default;
|
|
$link_hover_color: #9273d0 !default;
|
|
|
|
$fave_color: #c4b246 !default;
|
|
$vote_up_color: #67af2b !default;
|
|
$vote_down_color: #cf0001 !default;
|
|
$hide_color: #cf0001 !default;
|
|
|
|
$assistant_color: #eeceed !default;
|
|
|
|
$tag_normal_color: #6f8f0e !default;
|
|
$tag_category_rating_color: #267ead !default;
|
|
$tag_category_spoiler_color: #c24523 !default;
|
|
$tag_category_origin_color: #393f85 !default;
|
|
$tag_category_oc_color: #9852a3 !default;
|
|
$tag_category_error_color: #ad263f !default;
|
|
$tag_category_character_color: #2d8677 !default;
|
|
$tag_category_content_official_color: #998e1a !default;
|
|
$tag_category_content_fanmade_color: #bb5496 !default;
|
|
|
|
$commission_category_color: #986f3d !default;
|
|
|
|
$image_overlay_color: #ffffff !default;
|
|
$image_overlay_background_color: #000000 !default;
|
|
|
|
// //////////////////////////////////////
|
|
// ///// SECTION 2 - DERIVED COLORS /////
|
|
// //////////////////////////////////////
|
|
|
|
$text_light_color: $background_color !default;
|
|
|
|
$meta_color: mix($foreground_color, $background_color, 5%) !default;
|
|
$meta_border_color: mix($foreground_color, $meta_color, 30%) !default;
|
|
|
|
$header_color: darken($base_color, 9%) !default;
|
|
$header_hover_color: darken($base_color, 16%) !default;
|
|
$header_field_color: $base_color !default;
|
|
$header_field_hover_color: darken($base_color, 7%) !default;
|
|
$header_secondary_color: desaturate(lighten($base_color, 30%), 25%) !default;
|
|
$header_secondary_hover_color: darken($header_secondary_color, 7%) !default;
|
|
|
|
$header_admin_color: mix($vote_down_color, $background_color, 16%) !default;
|
|
$header_admin_hover_color: mix($vote_down_color, $background_color, 30%) !default;
|
|
|
|
$block_header_color: lighten($base_color, 28%) !default;
|
|
$block_header_hover_color: desaturate(lighten($base_color, 20%), 5%) !default;
|
|
$block_header_link_text_color: saturate(darken($header_color, 5%), 6%) !default;
|
|
$block_header_link_text_hover_color: darken($header_color, 15%) !default;
|
|
|
|
$block_header_light_color: desaturate(lighten($base_color, 31%), 16%) !default;
|
|
$block_header_light_hover_color: lighten($header_secondary_hover_color, 2%) !default;
|
|
$block_header_light_link_text_color: darken($block_header_light_color, 42%) !default;
|
|
$block_header_light_link_text_hover_color: darken($block_header_light_color, 52%) !default;
|
|
|
|
$border_color: darken($block_header_light_color, 3%) !default;
|
|
|
|
$media_box_color: desaturate($block_header_light_color, 10%) !default;
|
|
$media_box_hover_color: saturate(darken($media_box_color, 6%), 6%) !default;
|
|
$media_box_header_link_text_color: $link_color !default;
|
|
$media_box_header_link_text_hover_color: darken($media_box_header_link_text_color, 10%) !default;
|
|
|
|
$primary_light_color: lighten($primary_color, 5%) !default;
|
|
$success_light_color: lighten($success_color, 7%) !default;
|
|
$danger_light_color: lighten($danger_color, 4%) !default;
|
|
$warning_light_color: lighten($warning_color, 6%) !default;
|
|
|
|
$link_dark_color: darken($link_color, 20%) !default; //used in the tag table, amongst other things
|
|
$link_hover_dark_color: darken($link_hover_color, 20%) !default;
|
|
|
|
$image_show_link_color: $link_color;
|
|
$image_show_link_hover_color: $link_hover_color;
|
|
|
|
/* In default theme, except odd color to be darker! */
|
|
$background_odd_color: lighten($base_color, 35%) !default; //also used as 'alt background color' in various places
|
|
$background_even_color: $background_color !default;
|
|
/* Depending on the theme, you may want to swap even and odd colors */
|
|
$success_odd_color: saturate(darken($success_light_color, 3%), 8%) !default;
|
|
$success_even_color: lighten($success_color, 13%) !default;
|
|
$warning_odd_color: saturate(darken($warning_light_color, 7%), 10%) !default;
|
|
$warning_even_color: lighten($warning_color, 5%) !default;
|
|
$danger_odd_color: saturate(darken($danger_light_color, 1%), 12%) !default;
|
|
$danger_even_color: desaturate(lighten($danger_color, 7%), 10%) !default;
|
|
|
|
$foreground_half_color: mix($foreground_color, $background_color) !default; //used for weird h's (on image pages like Metadata Editing and Information) and also footer text color
|
|
|
|
$sparkline_color: lighten($base_color, 5%) !default;
|
|
|
|
$assistant_border_color: darken($assistant_color, 8%) !default;
|
|
|
|
$admin_links_color: mix($vote_down_color, $background_color, 17%) !default;
|
|
$admin_links_hover_color: mix($vote_down_color, $background_color, 48%) !default;
|
|
|
|
$input_text_color: $foreground_color !default;
|
|
$input_color: $meta_color !default;
|
|
$input_border: $meta_border_color !default;
|
|
$input_color_active: desaturate(lighten($base_color, 30%), 16%) !default;
|
|
$input_border_active: lighten($base_color, 10%) !default;
|
|
|
|
$tag_normal_background: desaturate(lighten($tag_normal_color, 44%), 28%) !default;
|
|
$tag_normal_border: darken($tag_normal_background, 16%) !default;
|
|
$tag_category_rating_background: desaturate(lighten($tag_category_rating_color, 41%), 25%) !default;
|
|
$tag_category_rating_border: darken($tag_category_rating_background, 10%) !default;
|
|
$tag_category_spoiler_background: lighten($tag_category_spoiler_color, 41%) !default;
|
|
$tag_category_spoiler_border: darken($tag_category_spoiler_background, 8%) !default;
|
|
$tag_category_origin_background: lighten($tag_category_origin_color, 43%) !default;
|
|
$tag_category_origin_border: darken($tag_category_origin_background, 10%) !default;
|
|
$tag_category_oc_background: lighten($tag_category_oc_color, 35%) !default;
|
|
$tag_category_oc_border: darken($tag_category_oc_background, 9%) !default;
|
|
$tag_category_error_background: lighten($tag_category_error_color, 40%) !default;
|
|
$tag_category_error_border: darken($tag_category_error_background, 8%) !default;
|
|
$tag_category_character_background: desaturate(lighten($tag_category_character_color, 44%), 10%) !default;
|
|
$tag_category_character_border: lighten($tag_category_character_color, 22%) !default;
|
|
$tag_category_content_official_background: lighten($tag_category_content_official_color, 41%) !default;
|
|
$tag_category_content_official_border: lighten($tag_category_content_official_color, 18%) !default;
|
|
$tag_category_content_fanmade_background: lighten($tag_category_content_fanmade_color, 36%) !default;
|
|
$tag_category_content_fanmade_border: lighten($tag_category_content_fanmade_color, 18%) !default;
|
|
$tag_category_species_background: lighten($tag_category_species_color, 44%) !default;
|
|
$tag_category_species_border: lighten($tag_category_species_color, 25%) !default;
|
|
|
|
$commission_category_background: saturate(lighten($commission_category_color, 40%), 12%) !default;
|
|
$commission_category_border: lighten($commission_category_color, 20%) !default;
|
|
|
|
$site_notice_color: darken($base_color, 32%) !default;
|
|
$site_notice_link_color: $block_header_light_color !default;
|
|
$site_notice_link_hover_color: $block_header_hover_color !default;
|
|
|
|
// /////////////////////////////////////////
|
|
// ///// SECTION 3 - SHARED PROPERTIES /////
|
|
// /////////////////////////////////////////
|
|
|
|
$border: 1px solid $border_color !default;
|
|
|
|
$font_family_base: verdana, arial, helvetica, sans-serif !default;
|
|
$font_family_monospace: "Droid Sans Mono", monospace !default;
|
|
|
|
$max_px_width_for_limited_desktop_layout: 1150px !default;
|
|
$min_px_width_for_desktop_layout: 800px !default;
|
|
$min_px_width_for_desktop_thumb: 700px !default;
|
|
|
|
$limited_layout_width: 980px;
|
|
$medium_layout_width: 1330px;
|
|
$centered_layout_side_margin: 24px;
|
|
$layout_side_margin: 12px;
|
|
|
|
$header_height: 36px;
|
|
$header_field_height: 28px;
|
|
$header_sub_height: 32px;
|
|
$header_font_size: 16px;
|
|
$header_spacing: 12px;
|
|
$header_field_spacing: 8px;
|
|
$header_field_vertical_spacing: ($header_height - $header_field_height) / 2;
|
|
$block_header_height: 32px;
|
|
$block_header_sub_height: 26px;
|
|
$block_spacing: 6px;
|
|
$media_box_header_height: 22px;
|
|
|
|
$button_text_color: $foreground_color !default;
|
|
$button_background_color: rgba($meta_color, 0.2) !default;
|
|
$button_hover_background_color: $input_color_active !default;
|
|
$button_hover_border_color: $input_border_active !default;
|
|
$button_border_color: $meta_border_color !default;
|
|
|
|
$button_primary_background_color: $primary_light_color !default;
|
|
$button_success_background_color: $success_light_color !default;
|
|
$button_warning_background_color: $warning_light_color !default;
|
|
$button_danger_background_color: $danger_light_color !default;
|
|
|
|
$button_primary_border_color: darken($primary_color, 8%) !default;
|
|
$button_success_border_color: darken($success_color, 10%) !default;
|
|
$button_warning_border_color: darken($warning_color, 11%) !default;
|
|
$button_danger_border_color: darken($danger_color, 8%) !default;
|
|
|
|
$button_primary_hover_background: darken($button_primary_background_color, 5%);
|
|
$button_primary_hover_border: darken($button_primary_border_color, 5%);
|
|
$button_success_hover_background: darken($button_success_background_color, 5%);
|
|
$button_success_hover_border: darken($button_success_border_color, 5%);
|
|
$button_warning_hover_background: darken($button_warning_background_color, 6%);
|
|
$button_warning_hover_border: darken($button_warning_border_color, 6%);
|
|
$button_danger_hover_background: darken($button_danger_background_color, 5%);
|
|
$button_danger_hover_border: darken($button_danger_border_color, 5%);
|
|
|
|
$downvote_disabled_color: mix($vote_down_color, $block_header_light_color, 30%);
|
|
$dnp_warning_hover_color: lighten($vote_down_color, 10%);
|
|
$poll_form_label_background: lighten($border_color, 8);
|
|
$tag_dropdown_hover_background: darken($meta_color, 4%);
|
|
|
|
|
|
// //////////////////////////////
|
|
// ///// SECTION 4 - MIXINS /////
|
|
// //////////////////////////////
|
|
|
|
@mixin even-odd {
|
|
&:nth-child(odd) {
|
|
background: $background_odd_color;
|
|
}
|
|
&:nth-child(even) {
|
|
background: $background_even_color;
|
|
}
|
|
|
|
/* Used in tag changes, among other things. See the definition of
|
|
* _odd_color and _even_color for more information on cross-theme customization */
|
|
|
|
//success bgs
|
|
&:nth-child(odd).success,
|
|
&:nth-child(odd) .success {
|
|
background: $success_odd_color;
|
|
}
|
|
&:nth-child(even).success,
|
|
&:nth-child(even) .success {
|
|
background: $success_even_color;
|
|
}
|
|
&:nth-child(even) &:nth-child(odd).success,
|
|
&:nth-child(even) &:nth-child(odd) .success {
|
|
background: $success_odd_color;
|
|
}
|
|
|
|
//warning bgs
|
|
&:nth-child(odd).warning,
|
|
&:nth-child(odd) .warning {
|
|
background: $warning_odd_color;
|
|
}
|
|
&:nth-child(even).warning,
|
|
&:nth-child(even) .warning {
|
|
background: $warning_even_color;
|
|
}
|
|
&:nth-child(even) &:nth-child(odd).warning,
|
|
&:nth-child(even) &:nth-child(odd) .warning {
|
|
background: $warning_odd_color;
|
|
}
|
|
|
|
//danger bg
|
|
&:nth-child(odd).danger,
|
|
&:nth-child(odd) .danger {
|
|
background: $danger_odd_color;
|
|
}
|
|
&:nth-child(even).danger,
|
|
&:nth-child(even) .danger {
|
|
background: $danger_even_color;
|
|
}
|
|
&:nth-child(even) &:nth-child(odd).danger,
|
|
&:nth-child(even) &:nth-child(odd) .danger {
|
|
background: $danger_odd_color;
|
|
}
|
|
}
|
|
|
|
@mixin number-wrap($color) {
|
|
display: inline-flex;
|
|
padding: 0 6px;
|
|
margin-left: 6px;
|
|
line-height: inherit;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
background: $color;
|
|
}
|