diff --git a/anita_theme_base/.gitignore b/anita_theme_base/.gitignore new file mode 100644 index 000000000..acb779112 --- /dev/null +++ b/anita_theme_base/.gitignore @@ -0,0 +1,50 @@ +# sphinx build directories +_build/ + +# dotfiles +.* +!.gitignore +!.github +!.mailmap +# compiled python files +*.py[co] +__pycache__/ +# setup.py egg_info +*.egg-info +# emacs backup files +*~ +# hg stuff +*.orig +status +# odoo filestore +odoo/filestore +# maintenance migration scripts +odoo/addons/base/maintenance + +# generated for windows installer? +install/win32/*.bat +install/win32/meta.py + +# needed only when building for win32 +setup/win32/static/less/ +setup/win32/static/wkhtmltopdf/ +setup/win32/static/postgresql*.exe + +# js tooling +node_modules +package-lock.json +package.json +.husky + +# various virtualenv +/bin/ +/build/ +/dist/ +/include/ +/lib/ +/man/ +/share/ +/src/ + +# avoid adding it after generation from tsconfig command +tsconfig.json diff --git a/anita_theme_base/__init__.py b/anita_theme_base/__init__.py new file mode 100644 index 000000000..cde864bae --- /dev/null +++ b/anita_theme_base/__init__.py @@ -0,0 +1,3 @@ +# -*- coding: utf-8 -*- + +from . import models diff --git a/anita_theme_base/__manifest__.py b/anita_theme_base/__manifest__.py new file mode 100644 index 000000000..7e6d1b28d --- /dev/null +++ b/anita_theme_base/__manifest__.py @@ -0,0 +1,64 @@ +# -*- coding: utf-8 -*- +{ + 'name': "anita_theme_base", + + 'summary': """ + Base for themes, it support free login for odoo + """, + + 'description': """ + Odoo Login, + Odoo login page, + Odoo login theme + Login, + Anita Theme Base, + Anita Theme, + Awesome Theme, + Multi tab theme, + Pop form theme + """, + + 'author': "openErpNext", + + 'website': "https://base.openerpnext.com", + 'live_test_url': 'https://base.openerpnext.com', + + 'license': 'OPL-1', + 'images': ['static/description/screen_shot.png', 'static/description/banner.png'], + 'support': 'codercrax@gmail.com', + 'maintainer': 'openErpNext', + 'category': 'Theme/Backend', + 'version': '17.0.0.2', + + 'installable': True, + 'application': True, + 'auto_install': False, + + 'depends': ['base', 'web'], + + 'data': [], + + 'assets': { + 'web.assets_backend': [ + 'anita_theme_base/static/css/anita_variables.scss', + + 'anita_theme_base/static/css/mixins/_flex.scss', + 'anita_theme_base/static/css/mixins/_box_shadow.scss', + 'anita_theme_base/static/css/mixins/_clearfix.scss', + 'anita_theme_base/static/css/mixins/_float.scss', + 'anita_theme_base/static/css/mixins/_hover.scss', + 'anita_theme_base/static/css/mixins/_gradients.scss', + # 'anita_theme_base/static/css/mixins/_buttons.scss', + + 'anita_theme_base/static/css/anita_functions.scss', + + 'anita_theme_base/static/css/anita_form_controls.scss', + # 'anita_theme_base/static/css/anita_buttons.scss', + + # 'anita_theme_base/static/css/anita_form_view.scss', + # 'anita_theme_base/static/css/anita_list_view.scss', + 'anita_theme_base/static/css/anita_scroll.scss', + 'anita_theme_base/static/css/anita_misc.scss', + ] + } +} diff --git a/anita_theme_base/models/__init__.py b/anita_theme_base/models/__init__.py new file mode 100644 index 000000000..9dab4ca04 --- /dev/null +++ b/anita_theme_base/models/__init__.py @@ -0,0 +1,3 @@ +# -*- coding: utf-8 -*- + +from . import anita_view_extend diff --git a/anita_theme_base/models/anita_view_extend.py b/anita_theme_base/models/anita_view_extend.py new file mode 100644 index 000000000..27bfa70e0 --- /dev/null +++ b/anita_theme_base/models/anita_view_extend.py @@ -0,0 +1,32 @@ +# -*- coding: utf-8 -*- + +import inspect + +from odoo import models, _ +from odoo.exceptions import AccessError +from odoo.models import check_method_name + + +class AnitaViewExtend(models.Model): + ''' + anita view extend current_theme_mode + ''' + _inherit = 'ir.ui.view' + + def _render_template(self, template, values=None): + """ + rewrite to change the title + :param template: + :param values: + :param engine: + :return: + """ + + if template in ['web.login', 'web.webclient_bootstrap']: + if not values: + values = {} + values["title"] = self.env['ir.config_parameter'].sudo().get_param( + "anita_theme_base.window_default_title", "openErpNext") + + return super(AnitaViewExtend, self)._render_template( + template, values=values) diff --git a/anita_theme_base/readme.md b/anita_theme_base/readme.md new file mode 100644 index 000000000..420d4e88d --- /dev/null +++ b/anita_theme_base/readme.md @@ -0,0 +1 @@ +this is base for anita themes \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_button_group.scss b/anita_theme_base/static/css/anita_button_group.scss new file mode 100644 index 000000000..9c0f3b461 --- /dev/null +++ b/anita_theme_base/static/css/anita_button_group.scss @@ -0,0 +1,89 @@ + +// Make the div behave like a button +.btn-group { + // Prevent double borders when buttons are next to each other + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -$btn-border-width; + } + } + + .btn-group { + // Reset rounded corners + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-right-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-left-radius(0); + } + } + + // Sizing + // + // Remix the default button sizing classes into new ones for easier manipulation. + + .btn-group-sm > .btn { @extend .btn-sm; } + .btn-group-lg > .btn { @extend .btn-lg; } + + + // + // Split button dropdowns + // + + .dropdown-toggle-split { + padding-right: $btn-padding-x * .75; + padding-left: $btn-padding-x * .75; + } + + .btn-sm + .dropdown-toggle-split { + padding-right: $btn-padding-x-sm * .75; + padding-left: $btn-padding-x-sm * .75; + } + + .btn-lg + .dropdown-toggle-split { + padding-right: $btn-padding-x-lg * .75; + padding-left: $btn-padding-x-lg * .75; + } + + + // The clickable button for toggling the menu + // Set the same inset shadow as the :active state + .btn-group.show .dropdown-toggle { + @include box-shadow($btn-active-box-shadow); + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + @include box-shadow(none); + } + } + + + // + // Vertical button groups + // + + .btn-group-vertical { + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { + margin-top: -$btn-border-width; + } + + // Reset rounded corners + > .btn:not(:last-child):not(.dropdown-toggle), + > .btn-group:not(:last-child) > .btn { + @include border-bottom-radius(0); + } + + > .btn:not(:first-child), + > .btn-group:not(:first-child) > .btn { + @include border-top-radius(0); + } + } + \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_buttons.scss b/anita_theme_base/static/css/anita_buttons.scss new file mode 100644 index 000000000..87a952182 --- /dev/null +++ b/anita_theme_base/static/css/anita_buttons.scss @@ -0,0 +1,140 @@ +.btn { + font-weight: $btn-font-weight; + // font-family: $btn-font-family; + border: $input-btn-border-width solid transparent; + + @include button-size( + $btn-padding-y, + $btn-padding-x, + $btn-font-size, + $input-btn-line-height, + $btn-border-radius + ); + + @include transition($btn-transition); + + &:hover, + &.hover { + cursor: pointer; + } + + &:focus, + &.focus { + @include box-shadow(none); + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + background-image: none; + @include box-shadow(none); + } + + &.btn-squared { + border-radius: 0; + } + + &.btn-pill { + // border-radius: $btn-pill-border-radius; + } + } + + // + // Alternate buttons + // + + @each $color, $value in $theme-colors { + .btn-#{$color} { + @include button-variant($value); + } + } + + // White buttons + .btn-white { + @include button-variant($white); + } + + // Black buttons + .btn-black { + @include button-variant($black); + } + + // Outlined default buttons + @each $color, $value in $theme-colors { + .btn-outline-#{$color} { + @include button-outline-variant($value); + } + } + + // White outline buttons + .btn-outline-white { + @include button-outline-variant($white); + color: $white; + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active { + color: $black; + } + } + + // Black outline buttons + .btn-outline-black { + @include button-outline-variant($black); + color: $black; + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active { + color: $white; + } + } + + // Make a button look and behave like a link + .btn-link { + font-weight: $font-weight-normal; + color: $link-color; + + @include hover { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus, + &.focus { + text-decoration: $link-hover-decoration; + } + + &:disabled { + color: $btn-link-disabled-color; + } + } + + + // + // Button Sizes + // + + .btn-lg { + @include button-size( + $btn-padding-y-lg, + $btn-padding-x-lg, + $btn-font-size-lg, + $btn-line-height-lg, + $btn-border-radius-lg + ); + } + + .btn-sm { + @include button-size( + $btn-padding-y-sm, + $btn-padding-x-sm, + $btn-font-size-sm, + $btn-line-height-sm, + $btn-border-radius-sm + ); + } + + // Vertically space out multiple block buttons + .btn-block + .btn-block { + margin-top: $btn-block-spacing-y; + } + + \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_form_controls.scss b/anita_theme_base/static/css/anita_form_controls.scss new file mode 100644 index 000000000..eb5ce9503 --- /dev/null +++ b/anita_theme_base/static/css/anita_form_controls.scss @@ -0,0 +1,382 @@ +// Checkboxes and radios + +.custom-control { + min-height: (1 * $line-height-base); + padding-left: $custom-control-gutter; + + &:hover { + cursor: pointer; + } + + .custom-control-label:before { + pointer-events: all; + } +} + +.custom-control-inline { + margin-right: $custom-control-spacer-x; +} + +.custom-control-input { + &:checked~.custom-control-label::before { + color: $custom-control-indicator-checked-color; + border-color: transparent; + // @include gradient-bg($custom-control-indicator-checked-bg); + box-shadow: $custom-control-indicator-checked-box-shadow; + } + + &:focus~.custom-control-label::before { + // the mixin is not used here to make sure there is feedback + // box-shadow: $custom-control-indicator-focus-box-shadow; + } + + &:active~.custom-control-label::before { + color: $custom-control-indicator-active-color; + background-color: $custom-control-indicator-active-bg; + box-shadow: $custom-control-indicator-active-box-shadow; + } + + &:disabled { + ~.custom-control-label { + color: $custom-control-description-disabled-color; // $custom-control-label-disabled-color + + &:hover { + cursor: not-allowed; + } + + &::before { + background-color: $custom-control-indicator-disabled-bg; + } + } + } +} + +// Custom control indicators +// Build the custom controls out of psuedo-elements. + +.custom-control-label { + position: static; + + &:hover { + cursor: pointer; + } + + // Background-color and (when enabled) gradient + &::before { + top: ($line-height-base - $custom-control-indicator-size) / 2.0; + left: 0 !important; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; + background-color: $custom-control-indicator-bg; + border: $custom-control-indicator-border; + transition: all 250ms cubic-bezier(.27, .01, .38, 1.06); + box-shadow: $custom-control-indicator-box-shadow; + } + + // Foreground (icon) + &::after { + top: ($line-height-base - $custom-control-indicator-size) / 2.0; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; + background-size: $custom-control-indicator-bg-size; + } +} + +// Custom Switches (core) +// Adjustments for the default Bootstrap custom switches. + +.custom-switch { + padding-left: $custom-switch-padding-left; + + .custom-control-label { + position: relative; + + ::before { + left: -2.25rem !important; + width: 1.75rem !important; + } + } +} + +// Checkboxes +.custom-checkbox { + .custom-control-label::before { + @include border-radius($custom-checkbox-indicator-border-radius); + } + + .custom-control-label::after { + content: ''; + position: absolute; + top: ($custom-control-indicator-size - 0.9166rem) / 2.0; + left: ($custom-control-indicator-size - 0.4166rem) / 2.0; + width: 5px; + height: 11px; + opacity: 0; + transform: rotate(45deg) scale(0); + border-right: 2px solid $white; + border-bottom: 2px solid $white; + transition: $custom-checkbox-indicator-transition; + transition-delay: 100ms; + } + + .custom-control-input:checked~.custom-control-label { + // &::before { + // background-image: none; + // } + + &::after { + opacity: 1; + transform: rotate(45deg) scale(1); + background-image: $custom-checkbox-indicator-icon-checked; + } + } + + .custom-control-input:indeterminate~.custom-control-label { + &::before { + border: none; + // @include gradient-bg($custom-checkbox-indicator-indeterminate-bg); + box-shadow: $custom-checkbox-indicator-indeterminate-box-shadow; + } + + &::after { + content: ''; + position: absolute; + transform: scale(1); + background-image: $custom-checkbox-indicator-icon-indeterminate; + background-color: $white; + border: none; + width: 10px; + height: 2px; + top: 11px; + left: 4px; + opacity: 1; + transition: none; + } + } + + .custom-control-input:disabled:checked~.custom-control-label { + &::before { + background: $custom-control-indicator-disabled-bg; + border-color: $border-color; + } + + &::after { + border-color: $border-color; + } + } +} + +// Radios +.custom-radio { + .custom-control-label::before { + border-radius: $custom-radio-indicator-border-radius; + } + + .custom-control-label::after { + content: ''; + border-radius: 50%; + transform: scale(0); + background-image: none !important; + position: absolute; + background: #fff; + width: 8px; + height: 8px; + top: (($line-height-base - 8 / 12.0) / 2.0); + left: (($custom-control-indicator-size - 8 / 12.0) / 2.0); + transition: all 250ms cubic-bezier(.27, .01, .38, 1.06); + transition-delay: .1s; + opacity: 0; + transform: scale(0); + } + + .custom-control-input:checked~.custom-control-label { + &::before { + //@include gradient-bg($custom-control-indicator-checked-bg); + } + + &::after { + opacity: 1; + transform: scale(1); + } + } + + .custom-control-input:disabled { + &:checked~.custom-control-label::before { + background-color: lighten($blueish-grey, 30%); + } + } + + .custom-control-input:disabled:checked~.custom-control-label { + &::before { + background: $custom-control-indicator-disabled-bg; + border-color: $border-color; + } + + &::after { + background: $border-color; + } + } +} + +// Custom toggle +.custom-toggle { + position: relative; + padding-left: ($custom-toggle-width + 0.625rem); + + .custom-control-label { + + // Background + &::before { + position: absolute; + top: 0; + left: 0; + display: block; + width: $custom-toggle-width; + height: $custom-toggle-height; + background: $custom-toggle-background-color; + border-radius: $custom-toggle-border-radius; + border: $custom-toggle-border; + } + + // Knob + &::after { + content: ''; + position: absolute; + top: 0.25rem; + left: 0.25rem; + width: $custom-toggle-knob-width; + height: $custom-toggle-knob-height; + background: $input-border-color; + border-radius: $custom-toggle-knob-border-radius; + transition: 350ms; + } + } + + // Checked state + .custom-control-input:checked~.custom-control-label { + + // Background + &::before { + background: $custom-toggle-checked-background; + border-color: $custom-toggle-checked-border-color; + } + + // Knob + &::after { + left: $custom-toggle-width - $custom-toggle-border-width - 0.1875rem; + transform: translateX(-100%); + background: $custom-toggle-checked-knob-background; + } + } + + // Disabled and checked state + .custom-control-input:checked:disabled~.custom-control-label { + &::before { + background: $custom-control-indicator-disabled-bg; + border-color: $border-color; + } + + &::after { + background: $border-color; + } + } + + // Active state + .custom-control-input:active:not(:disabled)~.custom-control-label { + + // Knob + &::after { + width: $custom-toggle-knob-active-width; + } + } + + // Active, but not checked. + .custom-control-input:active:not(:checked)~.custom-control-label { + &::before { + background-color: $custom-toggle-background-color; + } + } + + // Disabled and active. + .custom-control-input:disabled:active~.custom-control-label { + &::before { + background-color: $custom-control-indicator-disabled-bg; + } + } + + // Focus state + .custom-control-input:focus { + &~.custom-control-label { + &::before { + // box-shadow: $custom-toggle-focus-box-shadow; + } + } + + &:not(:checked)~.custom-control-label { + &::before { + // box-shadow: $input-focus-box-shadow; + } + } + } + + &.custom-toggle-sm { + padding-left: 2.625rem; + + .custom-control-label { + + // Background + &::before { + top: .1875rem; + position: absolute; + display: block; + width: $custom-toggle-width-sm; + height: $custom-toggle-height-sm; + background: $custom-toggle-background-color; + border-radius: $custom-toggle-border-radius; + border: $custom-toggle-border; + } + + // Knob + &::after { + content: ''; + position: absolute; + top: .375rem; + left: 0.1875rem; + width: $custom-toggle-knob-width-sm; + height: $custom-toggle-knob-height-sm; + } + } + + // Checked state + .custom-control-input:checked~.custom-control-label { + + // Knob + &::after { + left: $custom-toggle-width-sm - $custom-toggle-border-width - 0.1875rem; + } + } + + // Active state + .custom-control-input:active:not(:disabled)~.custom-control-label { + + // Knob + &::after { + width: $custom-toggle-knob-active-width-sm; + } + } + } +} + +.o_boolean_toggle { + .custom-control.custom-checkbox>label.custom-control-label { + + &::before { + width: 2.6375rem; + max-height: 20px; + } + + i.fa-check-circle { + right: 3px; + } + } +} \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_form_view.scss b/anita_theme_base/static/css/anita_form_view.scss new file mode 100644 index 000000000..3487b3ed8 --- /dev/null +++ b/anita_theme_base/static/css/anita_form_view.scss @@ -0,0 +1,838 @@ +// form +$o-form-lightsecondary: lighten($o-brand-secondary, 25%) !default; +$o-chatter-min-width: 530px !default; +$o-form-sheet-min-width: 990px !default; +$o-font-size-base-touch: 12px; + +.o_input, +.single-line, +.js_import_options input { + -webkit-appearance: none; + background-color: #fff; + background-image: none; + border-radius: 4px; + border: 1px solid #dcdfe6; + box-sizing: border-box; + color: #606266; + font-size: inherit; + height: 34px; + line-height: 34px; + outline: none; + padding: 0 10px; + width: 100%; + + &:focus { + border-color: #66afe9; + outline: 0; + } + + &:hover { + border-color: #c0c4cc; + } + + input { + &.o_input { + height: 30px; + } + } +} + +.o_form_view { + background-color: transparent; + + .o_form_sheet_bg { + border-bottom: 1px solid #ddd; + background: transparent + } + + .o_group { + .o_td_label { + border-right: none + } + } + + .o_form_sheet_bg { + border: none; + background: transparent; + + >.o_form_sheet { + min-width: inherit; + } + } + + .o_form_statusbar { + + @include media-breakpoint-down(sm) { + padding-left: 0px; + } + + >.o_statusbar_status { + >.o_arrow_button.btn-primary.disabled:after { + border-left-color: #007bff; + } + } + + .o_statusbar_buttons_dropdown.dropdown-toggle { + width: 80px; + padding-left: 0px; + border: none; + border-right: 1px solid; + border-radius: 0px; + } + + .dropdown-menu { + padding: 5px; + + button { + margin-bottom: 5px; + width: 150px; + text-overflow: ellipsis; + } + } + } + + .oe_button_box { + + +.oe_title, + +.oe_avatar+.oe_title { + width: auto; + } + } + + .o_cp_pager { + margin-right: 5px; + display: flex; + align-items: center; + + .o_pager_counter { + margin: 5px; + padding: 5px; + } + + button { + max-height: 30px; + } + } + + .table-responsive { + border-top: 1px solid #dee2e6; + } + + .o_list_table { + border-top: 1px solid #dee2e6; + margin-top: 5px; + } +} + + +.o_form_view { + + @include media-breakpoint-up(md) { + display: flex; + flex-flow: column nowrap; + min-height: 100%; + } + + // Sheet + .o_form_sheet_bg { + flex: 1 0 auto; + border-bottom: 1px solid gray('300'); + + >.o_form_sheet { + @include make-container(); + @include make-container-max-widths(); + + border: 1px solid gray('300'); + box-shadow: 0 5px 20px -15px black; + margin: $o-sheet-vpadding * 0.2 auto; + + @include media-breakpoint-up(md) { + margin: $o-sheet-vpadding*0.5 auto; + } + + padding: $o-sheet-vpadding; + + @include o-form-sheet-inner-right-padding; + @include o-form-sheet-inner-left-padding; + + // Selection + >.o_selection { + float: right; + } + } + } + + // Title & avatar + .oe_title { + color: $headings-color; + + @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) { + padding-right: $o-innergroup-rpadding; + } + } + + .oe_avatar+.oe_title { + padding-right: $o-avatar-size + 10; + } + + // Groups + .o_group { + + // all groups take width 100% in mobile + @mixin o-generate-groups($n) { + @for $i from 1 through $n { + .o_group_col_#{$i} { + @include media-breakpoint-down(md) { + width: 100%; + } + } + } + } + + @include o-generate-groups($o-form-group-cols); + + &.o_inner_group { + >tbody>tr>td { + padding: 0 $o-innergroup-rpadding 0 0; + } + } + + @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) { + .o_field_widget { + &.o_text_overflow { + width: 1px !important; + // hack to make the table layout believe it is a small element (so that the table does not grow too much) ... + min-width: 100%; + // ... but in fact it takes the whole table space + } + } + + .o_form_label { + margin-bottom: $o-form-spacing-unit; + } + } + + @include media-breakpoint-down(md) { + &.o_label_nowrap .o_form_label { + white-space: normal; + } + } + } + + // Labels + .o_form_label { + margin: auto; + text-align: right; + + &.o_form_label_empty, + &.o_form_label_false { + opacity: 0.5; + font-weight: normal; + } + + @include media-breakpoint-down(sm) { + font-size: $o-font-size-base-touch; + } + } + + // Chatter + >.oe_chatter, + .o_FormRenderer_chatterContainer { + flex: 1000 0 auto; + @include make-container(); + // @include make-container-max-widths(); + padding: $grid-gutter-width*0.25 0; + } + + @include media-breakpoint-up(xl) { + + >.oe_chatter, + .o_FormRenderer_chatterContainer { + max-width: 530px; + } + } + + // Notebooks + .o_notebook { + >.o_notebook_headers { + // @include o-form-sheet-negative-margin; + + >.nav.nav-tabs { + @include o-form-sheet-inner-left-padding; + //border-bottom: $nav-tabs-border-width solid gray('400'); + + >.nav-item { + white-space: nowrap; + + >.nav-link { + color: $body-color; + //border-color: gray('400'); + //background-color: white; + + &:hover, + &:focus, + &:active { + outline: none; + color: $link-color; + } + + &.active { + //border-bottom-color: white; + + &, + &:hover, + &:focus, + &:active { + color: $headings-color; + //border-top-color: $o-brand-odoo; + } + } + + &.disabled { + color: $text-muted; + } + } + } + } + } + + >.tab-content { + border-bottom: 1px solid gray('400'); + + >.tab-pane { + + > :first-child { + // Reset margin to 0 and use tab-pane's padding + // to define the distance between panel and content + margin-top: 0; + + // These elements will appear attached to the tabs + &.oe_form_field_html { + @include o-form-sheet-negative-margin; + margin-top: -$o-horizontal-padding; + border: none; + + .note-editor.panel { + border: none; + } + + .note-toolbar.panel-heading { + @include o-form-sheet-inner-left-padding; + @include o-form-sheet-inner-right-padding; + border-top: none; + padding-top: $o-horizontal-padding*0.3; + // background: white; + + .btn-secondary { + @include o-hover-text-color($body-color, $link-color); + } + } + + .note-editing-area, + .o_readonly { + padding: $card-spacer-y $card-spacer-x; + @include o-form-sheet-inner-left-padding; + @include o-form-sheet-inner-right-padding; + } + + // If immediatly followed by an .oe_clear element, the note-editor it's the 'only' + // tab's element. Reset margins to push the bar at the bottom. + +.oe_clear:last-child { + margin-bottom: -$o-horizontal-padding - $o-sheet-vpadding - $o-form-spacing-unit; + } + } + + &.o_field_x2many.o_field_x2many_list { + display: block; + width: auto; + @include o-form-sheet-negative-margin; + margin-top: -$o-horizontal-padding; + + .o_pager { + button { + min-width: 34px; + } + } + + .table-responsive { + border-top: 1px solid #dee2e6 + } + + // use original padding-left for handle cell in editable list + tr> :first-child.o_handle_cell { + padding-left: $o-horizontal-padding; + } + + tr> :first-child { + @include o-form-sheet-inner-left-padding; + } + + tr> :last-child { + @include o-form-sheet-inner-right-padding; + } + } + } + } + } + + &:last-child>.tab-content { + border-bottom: none; + } + } + + // Notebooks for small screen + @include media-breakpoint-down(sm) { + + .o_notebook .o_notebook_headers { + overflow-x: auto; + + &::-webkit-scrollbar { + display: none; + } + + .nav.nav-tabs { + flex-flow: row nowrap; + } + } + + .o_cp_buttons { + width: 100%; + + div, + .o-kanban-button-new { + width: 100%; + } + } + + .o_cp_action_menus { + padding: 5px; + } + } + + // One2Many List views + .o_field_widget { + .o_list_table { + &.table-striped { + >tbody { + >tr:not(.o_data_row)>td { + border-top: none; + } + } + + // Show "border" if tfoot has content only + >tfoot>tr { + + // box-shadow: inset 0 1px 0 gray('300'); + >td { + border: none; + + &:empty { + padding: 0; + } + } + } + } + } + } + + // Translate icon + .o_field_translate { + padding-right: 0; + } + + // Specific style classes + .o_group.o_inner_group.oe_subtotal_footer { + border-top: 1px solid gray('300'); + + .oe_subtotal_footer_separator { + border-top: 1px solid gray('300'); + } + } + + // Status Bar + .o_form_statusbar { + position: sticky; + top: 0; + z-index: 1; + + >.o_statusbar_status { + .dropdown-menu { + .o_arrow_button { + font-weight: 500; + padding: 0.75rem; + + &.btn-primary.disabled { + font-weight: bold; + } + + // Last element at the right should respect overall padding + &:first-of-type { + padding-right: $o-horizontal-padding; + } + } + } + } + } + + @include media-breakpoint-up(xxl, $o-extra-grid-breakpoints) { + // flex-flow: row nowrap; + height: 100%; + + >.o_form_sheet_bg { + flex: 1 1 auto; // Side chatter is disabled if this has to shrink but this was added for safety + // width: $o-form-sheet-min-width + 2 * $o-horizontal-padding; + // max-width: map-get($container-max-widths, xl) + 2 * $o-horizontal-padding; // would be logical but breaks no-chatter form views + padding: 0 $o-horizontal-padding; + overflow: auto; + border-bottom: none; + + > :not(.o_form_sheet) { + margin-left: -$o-horizontal-padding; + margin-right: -$o-horizontal-padding; + } + + >.o_form_sheet { + width: 100%; + max-width: map-get($container-max-widths, xl); + } + } + + >.oe_chatter, + .o_FormRenderer_chatterContainer { + // flex: 1 1 auto; // Side chatter is disabled if this has to shrink but this was added for safety + width: $o-chatter-min-width; + max-width: 530px; + padding: 0; + overflow: auto; + border-left: 1px solid gray('300'); + background-color: white; + + .o_chatter_topbar { + height: $o-statusbar-height + $nav-tabs-border-width; + + .btn, + .btn.o_active { + border-top: 0; + } + + } + + &.o_chatter_composer_active { + .o_chatter_topbar { + + .btn, + .btn.o_active { + border-top: 0; + + &:first-child { + border-left: 0; + } + } + } + } + + .o_thread_composer { + border-width: 1px 0; + margin-top: 0; + + // have mention drowdown below composer + .o_composer_mention_dropdown { + position: absolute; + top: 100%; + + >.dropdown-menu { + top: 100%; + bottom: auto; + } + } + } + } + } + + .o_field_widget { + &.o_field_many2one { + .o_external_button { + background: transparent; + min-width: 34px; + + &:hover { + background: transparent; + } + + &:focus { + outline: none; + background: transparent; + } + + &:active { + background: transparent; + } + } + } + + .o_input_dropdown>input { + height: 34px; + line-height: 34px; + padding-right: 15px; + cursor: pointer; + } + + .o_field_color { + width: 24px; + height: 24px; + border-radius: 5px; + } + + .o_input_dropdown { + .o_dropdown_arrow { + position: absolute; + line-height: 34px; + top: 0px; + bottom: 0px; + left: auto; + bottom: auto; + right: 8px; + color: #c0c4cc; + font-size: 14px; + cursor: pointer; + pointer-events: none; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + + &.anita_reverse { + -webkit-transform: rotateZ(0); + transform: rotateZ(0) + } + + &.dropdown_reverse { + -webkit-transform: rotateZ(0); + transform: rotateZ(0) + } + } + } + + &.o_field_many2manytags { + overflow: hidden; + align-items: center; + + .o_input_dropdown { + .o_dropdown_arrow { + right: 3px; + } + } + } + + &.o_form_uri { + line-height: 36px; + } + } +} + +// Overriden style when form view in modal +.modal .modal-dialog { + .o_form_view { + @include media-breakpoint-down(md) { + .o_group.o_inner_group>tbody>tr>td.o_td_label { + min-width: 100px; + } + } + } + + &.modal-sm .o_form_view { + .o_group { + @include form-break-table; + } + } +} + +// XXS form view specific rules +.o_form_view.o_xxs_form_view { + .o_group { + + // Target XXS form view on mobile devices in portrait mode + @include media-breakpoint-down(sm) { + &.o_inner_group>tbody>tr>td { + .o_field_widget { + margin-bottom: $o-form-spacing-unit * 4; + } + } + } + + .o_td_label .o_form_label { + font-weight: normal; + } + } + + .o_form_label { + margin-top: 3px; + font-size: $o-label-font-size-factor * $o-font-size-base-touch; + font-weight: normal; + color: #6c757d; + + &.o_form_label_empty { + display: none; + } + } +} + +.form-control:focus { + color: #495057; + background-color: #FFFFFF; + border-color: #007bff; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(233, 236, 239, 0.25); +} + +.ui-autocomplete { + margin-top: 3px; +} + +.o_setting_right_pane { + .o_web_settings_invite { + margin: 8px; + } +} + +.o_external_button { + background: none; + border: none; + + &:hover { + background: none; + border: none; + box-shadow: none; + } +} + +.note-editor { + border: 1px solid #dcdfe6 !important; + + .panel-heading { + &.note-toolbar { + border-bottom: 1px solid #dcdfe6; + background-color: #ffffff; + color: #212529; + + .btn { + border-left: none; + border-right: none; + background: transparent; + } + + .dropdown-item { + background-color: #595964; + color: #C6C6C6; + } + + .btn-group.show>.btn { + background: #dee2e6; + color: rgba(76, 76, 76, 0.82); + } + + .dropdown-item:not(.d-none)~.dropdown-item { + border-top: none; + } + } + } +} + +.o_input_dropdown { + .o_dropdown_arrow { + position: absolute; + line-height: 34px; + top: 0px; + bottom: 0px; + left: auto; + bottom: auto; + right: 8px; + color: #c0c4cc; + font-size: 14px; + cursor: pointer; + pointer-events: none; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + -webkit-transform: rotateZ(180deg); + transform: rotateZ(180deg); + } +} + +.o_field_binary_file { + + .btn, + button { + margin-left: 5px; + } +} + +.nav-tabs { + + .nav-link.active, + .nav-item.show .nav-link { + color: #495057; + background-color: #FFFFFF; + border-color: #dee2e6 #dee2e6 #FFFFFF; + } +} + +.o_field_binary_file>.btn { + padding: 0px 10px; + height: 34px; + line-height: 34px; +} + +.o_required_modifier.o_input, +.o_required_modifier .o_input { + background-color: #f8f8ff !important; +} + +.oe_title { + h1 { + padding: 10px 0px; + } +} + +.o_form_view .o_form_statusbar>.o_statusbar_status>.o_arrow_button.btn-primary.disabled { + background-color: #006fe6; +} + +.note-popover .popover .popover-body .dropdown-menu, +.panel-heading.note-toolbar .dropdown-menu { + border: none; + background-color: inherit; + border-color: inherit; + box-shadow: inherit; +} + +.o_field_x2many_list { + border: 1px solid #dcdfe6; + + .o_list_table { + border-top: none; + margin-top: 0px; + } +} + +.o_form_view { + .o_notebook { + .tab-content { + padding: 10px + } + } +} + +.o_boolean_toggle { + &.custom-control.custom-checkbox>label.custom-control-label::after { + content: none !important; + } + + &.custom-control.custom-checkbox>label.custom-control-label::before, + &.custom-control.custom-checkbox>label.custom-control-label::after { + left: 1px !important; + } +} \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_functions.scss b/anita_theme_base/static/css/anita_functions.scss new file mode 100644 index 000000000..ed8a41137 --- /dev/null +++ b/anita_theme_base/static/css/anita_functions.scss @@ -0,0 +1,91 @@ +// Bootstrap functions +// +// Utility mixins and functions for evalutating source code across our variables, maps, and mixins. + +// Ascending +// Used to evaluate Sass maps like our grid breakpoints. +@mixin _assert-ascending($map, $map-name) { + $prev-key: null; + $prev-num: null; + @each $key, $num in $map { + @if $prev-num == null { + // Do nothing + } @else if not comparable($prev-num, $num) { + @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } @else if $prev-num >= $num { + @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"; + } + $prev-key: $key; + $prev-num: $num; + } + } + + // Starts at zero + // Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0. + @mixin _assert-starts-at-zero($map) { + $values: map-values($map); + $first-value: nth($values, 1); + @if $first-value != 0 { + @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}."; + } + } + + // Replace `$search` with `$replace` in `$string` + // Used on our SVG icon backgrounds for custom forms. + // + // @author Hugo Giraudel + // @param {String} $string - Initial string + // @param {String} $search - Substring to replace + // @param {String} $replace ('') - New value + // @return {String} - Updated string + @function str-replace($string, $search, $replace: "") { + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; + } + + // Color contrast + @mixin color-yiq($color) { + $r: red($color); + $g: green($color); + $b: blue($color); + + $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000; + + @if ($yiq >= 150) { + color: darken($color, 65); + } @else { + color: #fff; + } + } + + // Retreive color Sass maps + @function color($key: "blue") { + @return map-get($colors, $key); + } + + @function theme-color($key: "primary") { + @return map-get($theme-colors, $key); + } + + @function grayscale($key: "100") { + @return map-get($grays, $key); + } + + // Request a theme color level + @function theme-color-level($color-name: "primary", $level: 0) { + $color: theme-color($color-name); + $color-base: if($level > 0, #000, #fff); + + @if $level < 0 { + // Lighter values need a quick double negative for the Sass math to work + @return mix($color-base, $color, $level * -1 * $theme-color-interval); + } @else { + @return mix($color-base, $color, $level * $theme-color-interval); + } + } + \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_list_view.scss b/anita_theme_base/static/css/anita_list_view.scss new file mode 100644 index 000000000..ff6a9867f --- /dev/null +++ b/anita_theme_base/static/css/anita_list_view.scss @@ -0,0 +1,229 @@ + +html .o_web_client > .o_action_manager > .o_action .o_content { + display: flex; + flex-direction: column; + + &.o_component_with_search_panel { + flex-direction: row !important; + } +} + +.o_list_view { + overflow: auto; + flex: 1 1 auto; + + .custom-checkbox { + .custom-control-label::before { + border-radius: 2px; + } + } + + thead>tr>th:nth-of-type(1) { + border-left: none; + } + + .o_list_table { + tbody>tr>td:not(.o_list_record_selector):not(.o_handle_cell) { + vertical-align: middle !important; + } + + .o_list_record_selector { + vertical-align: middle !important; + } + } + + .table-responsive { + + .o_list_table { + + thead { + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.1); + + >tr { + min-height: 36px; + height: 36px; + } + } + + thead, + thead tr th { + position: sticky !important; + top: 0; + z-index: 1; + background: white; + } + + .o_list_record_selector { + width: 40px; + padding-left: 16px; + } + + tfoot, + tfoot>tr>td { + position: sticky; + bottom: 0; + background: white; + background-color: $o-list-footer-bg-color; + } + + .o_list_record_selector { + vertical-align: middle; + } + + .o_column_sortable:not(.o_handle_cell) { + position: relative; + user-select: none; + } + + tfoot { + background-color: none !important; + } + + .o_data_row { + + border-bottom-width: 1px; + border-bottom-color: #dcdfe6; + + &.o_selected_row>.o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier) { + background-color: transparent; + + &:not(.o_remaining_days_cell) .o_input { + border: 1px solid #dcdfe6 !important; + height: 32px; + line-height: 32px; + } + } + } + + thead { + >tr { + >th { + padding: 5px 4px !important; + border-top: none; + border-bottom: none; + + &:not(.o_list_record_selector) { + border-left: none; + vertical-align: middle; + } + + &:nth-of-type(1) { + border-left: none; + padding: 0px 10px !important; + } + } + } + } + + // add the shaddow + tbody { + >tr { + >td { + + // padding: 0px 10px !important; + &:not(.o_list_record_selector) { + &.o_list_button>button { + padding: 0.4rem 1.2rem; + } + + &:not(.o_handle_cell) { + vertical-align: middle; + } + } + } + + &:nth-of-type(odd) { + background-color: rgba(0, 0, 0, 0.01); + } + } + } + + .o_list_record_remove { + padding-right: 0px !important; + line-height: 40px; + } + } + + .o_field_cell, + .o_data_cell, + .o_column_sortable { + height: 30px; + line-height: 30px; + padding: 0 10px; + position: relative; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + box-sizing: border-box; + } + } + + .o_optional_columns_dropdown_toggle, + .o_optional_columns { + top: 5px; + right: 5px; + } + + .o_field_badge { + margin-top: 8px; + margin-left: 5px; + } + + .o_optional_columns_dropdown_toggle, + .o_optional_columns { + top: 5px; + right: 5px; + } +} + +.o_list_view { + .o_list_table { + tfoot { + background-color: none !important; + border-bottom: 1px solid #dcdfe6; + } + + .o_data_row.o_selected_row>.o_data_cell:not(.o_readonly_modifier):not(.o_invisible_modifier) { + background-color: transparent; + } + + thead>tr>th:not(.o_list_record_selector) { + border-left: none; + vertical-align: middle; + } + + &.table-bordered { + border-collapse: collapse; + + .tfoot { + border-top: none; + } + } + } + + .o_field_x2many_list_row_add { + list-style: 30px; + height: 30px; + } +} + +.o_list_buttons { + button { + margin-right: 5px; + } +} + +.o_form_sheet { + .o_list_view { + .o_list_table { + thead { + box-shadow: none !important; + border-bottom: 1px solid #dcdfe6; + } + } + } +} + +.table > :not(caption) > * > * { + border-bottom-color: #dcdfe6; +} \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_misc.scss b/anita_theme_base/static/css/anita_misc.scss new file mode 100644 index 000000000..6a76b9fe5 --- /dev/null +++ b/anita_theme_base/static/css/anita_misc.scss @@ -0,0 +1,23 @@ + +.o_filter_condition { + select:not(:first-child) { + margin-top: 5px; + } +} + +.row { + .o_field_widget.o_readonly_modifier { + padding-top: calc(0.375rem + 1px); + padding-bottom: calc(0.375rem + 1px - 5px); + } +} + +.o_input input { + border: none !important; +} + +.o_form_status_indicator_buttons { + button { + margin-right: 0.5rem; + } +} diff --git a/anita_theme_base/static/css/anita_scroll.scss b/anita_theme_base/static/css/anita_scroll.scss new file mode 100644 index 000000000..21e871fa6 --- /dev/null +++ b/anita_theme_base/static/css/anita_scroll.scss @@ -0,0 +1,24 @@ + +// scroll bar +::-webkit-scrollbar { + width: 6px; + height: 6px; +} + +::-webkit-scrollbar-track { + background: #FFFFFF; +} + +::-webkit-scrollbar-thumb { + background: #888; + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:increment, +::-webkit-scrollbar-thumb:decrement { + background: #000; +} + +::-webkit-scrollbar-thumb:hover { + background: #555; +} \ No newline at end of file diff --git a/anita_theme_base/static/css/anita_variables.scss b/anita_theme_base/static/css/anita_variables.scss new file mode 100644 index 000000000..fd85e90bd --- /dev/null +++ b/anita_theme_base/static/css/anita_variables.scss @@ -0,0 +1,327 @@ +$white: #fff !default; +$gray-100: #f8f9fa !default; +$gray-200: #e9ecef !default; +$gray-300: #dee2e6 !default; +$gray-400: #ced4da !default; +$gray-500: #adb5bd !default; +$gray-600: #868e96 !default; +$gray-700: #495057 !default; +$gray-800: #343a40 !default; +$gray-900: #212529 !default; +$black: #000 !default; + +$grays: () !default; +$grays: map-merge(( + "100": $gray-100, + "200": $gray-200, + "300": $gray-300, + "400": $gray-400, + "500": $gray-500, + "600": $gray-600, + "700": $gray-700, + "800": $gray-800, + "900": $gray-900 +), $grays); + +$blue: #007bff !default; +$indigo: #674eec !default; +$purple: #8445f7 !default; +$pink: #ff4169 !default; +$red: #c4183c !default; +$orange: #fb7906 !default; +$yellow: #ffb400 !default; +$green: #17c671 !default; +$teal: #1adba2 !default; +$cyan: #00b8d8 !default; + +$colors: () !default; +$colors: map-merge(( + "blue": $blue, + "indigo": $indigo, + "purple": $purple, + "pink": $pink, + "red": $red, + "orange": $orange, + "yellow": $yellow, + "green": $green, + "teal": $teal, + "cyan": $cyan, + "white": $white, + "gray": $gray-600, + "gray-dark": $gray-800 +), $colors); + +$primary: $blue !default; +$secondary: $blueish-grey !default; +$success: $green !default; +$info: $cyan !default; +$warning: $yellow !default; +$danger: $red !default; +$light: $gray-200 !default; +$dark: $gray-900 !default; + +// Options +$enable-rounded: true !default; +$enable-shadows: true !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-hover-media-query: false !default; +$enable-fonts-import: true !default; + +$theme-colors: () !default; +$theme-colors: map-merge(( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark +), $theme-colors); + +$blueish-grey: #5A6169 !default; + +// Easings +$ease-in-out-circ: cubic-bezier(.27,.01,.38,1.06); + +// Transitions +$transition-duration: 250ms; +$transition-base: all $transition-duration $ease-in-out-circ !default; +$transition-fade: opacity 200ms ease-in-out !default; +$transition-collapse: height 350ms ease-in-out !default; + +// Fonts +$google-fonts-import: 'https://fonts.googleapis.com/css?family=Poppins:300,400,500,600|Roboto+Mono' !default; // Includes: Poppins: Light, Regular, Medium, Semi-bold; Roboto Mono: Regular + +$font-family-poppins-first: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-system-first: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; +$font-family-roboto-mono-first: "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; + +$font-family-sans-serif: $font-family-system-first !default; +$font-family-monospace: $font-family-roboto-mono-first !default; +$font-family-base: $font-family-sans-serif !default; + +$font-size-base: 1rem !default; +$font-size-lg: 1.25rem !default; +$font-size-sm: .875rem !default; + +$font-weight-normal: 300 !default; +$font-weight-bold: 500 !default; + +$font-weight-base: $font-weight-normal !default; +$line-height-base: 1.5 !default; + +// Buttons +// For each of Bootstrap's buttons, define text, background and border color. +$btn-padding-y-lg: .75rem !default; +$btn-padding-x-lg: 1.75rem !default; + +$btn-line-height-sm: $line-height-sm !default; +$btn-line-height-lg: $line-height-lg !default; + +$btn-padding-y-sm: .35rem !default; +$btn-padding-x-sm: 1rem !default; + +$input-btn-padding-y: .5rem !default; +$input-btn-padding-x: 1rem !default; +$input-btn-line-height: 1.125 !default; + +$input-btn-padding-y-sm: .35rem !default; +$input-btn-padding-x-sm: .75rem !default; + +$input-btn-padding-y-lg: .75rem !default; +$input-btn-padding-x-lg: 1rem !default; + +$btn-pill-border-radius: 50px !default; + +$btn-padding-y: .75rem !default; +$btn-padding-x: 1.25rem !default; + +$btn-font-weight: $font-weight-normal !default; +$btn-font-size: .875rem !default; +$btn-font-size-sm: 0.75rem !default; +$btn-font-size-lg: 1.125rem !default; +$btn-font-family: $font-family-poppins-first !default; +$btn-box-shadow: none !default; + +$input-btn-focus-width: .2rem !default; + +$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; + +$btn-link-disabled-color: $gray-600 !default; +$btn-block-spacing-y: .5rem !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: $border-radius !default; +$btn-border-radius-lg: $border-radius-lg !default; +$btn-border-radius-sm: $border-radius-sm !default; + +$btn-border-width: 1px !default; + +$btn-transition: $transition-base !default; + +// Forms +$input-padding-y: $input-btn-padding-y !default; +$input-padding-x: $input-btn-padding-x !default; +$input-line-height: 1.5 !default; + +$input-padding-y-sm: $input-btn-padding-y-sm !default; +$input-padding-x-sm: $input-btn-padding-x-sm !default; +$input-line-height-sm: 1.5 !default; + +$input-padding-y-lg: $input-btn-padding-y-lg !default; +$input-padding-x-lg: $input-btn-padding-x-lg !default; +$input-line-height-lg: 1.5 !default; + +$input-bg: $white !default; +$input-disabled-bg: #f5f6f7 !default; + +$input-font-size: .95rem !default; + +$input-color: $gray-700 !default; +$input-border-color: $border-color !default; +$input-btn-border-width: $border-width !default; +$input-box-shadow: none !default; + +$input-border-width: $border-width !default; +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; + +$input-focus-bg: $input-bg !default; +$input-focus-border-color: theme-color("primary") !default; +$input-focus-box-shadow: 0 .313rem .719rem rgba(theme-color("primary"),.1), 0 .156rem .125rem rgba($black, .06) !default; +$input-focus-color: $input-color !default; + +$input-hover-border-color: darken($input-border-color, 15) !default; + +$input-placeholder-color: $gray-600 !default; + +$input-height-border: $input-border-width * 2 !default; + +$input-height-inner: ($input-font-size * $input-line-height) + ($input-padding-y * 2) !default; +$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default; + +$input-height-inner-sm: ($font-size-sm * $input-line-height-sm) + ($input-padding-y-sm * 2) !default; +$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default; + +$input-height-inner-lg: ($font-size-lg * $input-line-height-lg) + ($input-padding-y-lg * 2) !default; +$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default; + +$input-transition: box-shadow $transition-duration $ease-in-out-circ, + border $transition-duration $ease-in-out-circ !default; + +$form-text-margin-top: .25rem !default; + +$form-check-input-gutter: 1.25rem !default; +$form-check-input-margin-y: .313rem !default; +$form-check-input-margin-x: .313rem !default; + +$form-check-inline-margin-x: .75rem !default; +$form-check-inline-input-margin-x: .3125rem !default; + +$form-group-margin-bottom: 1rem !default; + +$input-group-padding-y: 12px !default; +$input-group-padding-x: 14px !default; +$input-group-addon-bg: lighten($input-border-color, 19%) !default; +$input-group-addon-border-color: $input-border-color !default; +$input-group-addon-color: $input-frozen-color !default; + + +$custom-control-gutter: 1.688rem !default; +$custom-control-spacer-x: 1rem !default; + +$custom-control-indicator-size: 1.125rem !default; +$custom-control-indicator-bg: $white !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: none !default; +$custom-control-indicator-border: 1px solid $border-color !default; +$custom-checkbox-indicator-transition: transform $transition-duration $ease-in-out-circ, + border $transition-duration $ease-in-out-circ !default; + +$custom-control-indicator-disabled-bg: $gray-200 !default; +$custom-control-description-disabled-color: $gray-600 !default; + +$custom-control-indicator-checked-color: $white !default; +$custom-control-indicator-checked-bg: theme-color("primary") !default; +$custom-control-indicator-checked-box-shadow: none !default; + +$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default; + +$custom-control-indicator-active-color: $white !default; +$theme-color-primary: theme-color("primary") !default; +$custom-control-indicator-active-bg: lighten(#007bff, 35%) !default; +$custom-control-indicator-active-box-shadow: none !default; + +// Custom checkbox +$custom-checkbox-indicator-border-radius: 2px !default; +$custom-checkbox-indicator-icon-checked: none !default; +$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default; +$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; +$custom-checkbox-indicator-icon-indeterminate: none !default; +$custom-checkbox-indicator-indeterminate-box-shadow: none !default; + +// Custom radio +$custom-radio-indicator-border-radius: 50% !default; + +// Custom switches (core) +$custom-switch-padding-left: 2.25rem !default; + +// Custom toggle +$custom-toggle-width: 3.125rem !default; +$custom-toggle-height: 1.75rem !default; +$custom-toggle-border-width: 0.0625rem !default; +$custom-toggle-border: $custom-toggle-border-width solid $input-border-color !default; +$custom-toggle-background-color: $white !default; +$custom-toggle-border-radius: 100px !default; + +$custom-toggle-focus-box-shadow: 0 .313rem .719rem rgba($green,.1), 0 .156rem .125rem rgba($black, .06) !default; + +$custom-toggle-checked-background: theme-color("success") !default; +$custom-toggle-checked-border-color: $custom-toggle-checked-background !default; +$custom-toggle-checked-knob-background: $white !default; + +$custom-toggle-knob-width: 1.25rem !default; +$custom-toggle-knob-height: 1.25rem !default; +$custom-toggle-knob-border-radius: 6.25rem !default; +$custom-toggle-knob-active-width: 1.625rem !default; + +$custom-toggle-invalid-knob-background-color: #eb8c95 !default; +$custom-toggle-invalid-background-color: $white !default; + +$custom-toggle-width-sm : 2.1875rem !default; +$custom-toggle-height-sm : 1.125rem !default; + +$custom-toggle-knob-width-sm: .75rem !default; +$custom-toggle-knob-active-width-sm: 1rem !default; +$custom-toggle-knob-height-sm: .75rem !default; + +$body-bg: $white !default; +$body-color: $blueish-grey !default; + +// awesome +$sidebar_toggle_one_width: 70px; +$sidebar_toggle_two_width: 240px; +$o-font-size-base-touch: 12px; +$custom-file-height: 30px; +$custom-file-width: 200px; + +// form +$o-form-lightsecondary: lighten($o-brand-secondary, 25%) !default; + +$o-tooltip-background-color: $o-view-background-color !default; +$o-tooltip-color: $o-main-text-color !default; +$o-tooltip-arrow-color: $o-main-text-color !default; + +// Needed for having no spacing between sheet and mail body in mass_mailing: +// Different required cancel paddings between web and web_enterprise +$o-sheet-cancel-tpadding: $o-horizontal-padding !default; +$o-sheet-cancel-bpadding: $o-horizontal-padding + $o-sheet-vpadding !default; + +// Side chatter +$o-chatter-min-width: 530px !default; +// Safest for the next value would be map-get($container-max-widths, lg) as it +// is the minimal width of the default form view design for md/lg sizes +$o-form-sheet-min-width: 990px !default; diff --git a/anita_theme_base/static/css/login/fonts.css b/anita_theme_base/static/css/login/fonts.css new file mode 100644 index 000000000..290b88f68 --- /dev/null +++ b/anita_theme_base/static/css/login/fonts.css @@ -0,0 +1,135 @@ +/* devanagari */ +@font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2') format('woff2'); + unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; + } + /* latin-ext */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 300; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + /* devanagari */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJbecmNE.woff2') format('woff2'); + unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; + } + /* latin-ext */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJnecmNE.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJfecg.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + /* devanagari */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2') format('woff2'); + unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; + } + /* latin-ext */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + /* devanagari */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2') format('woff2'); + unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; + } + /* latin-ext */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 600; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + /* devanagari */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2') format('woff2'); + unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB; + } + /* latin-ext */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2') format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-family: 'Poppins'; + font-style: normal; + font-weight: 700; + font-display: swap; + src: url('/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2') format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } \ No newline at end of file diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2 new file mode 100644 index 000000000..b97a3314f Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2 new file mode 100644 index 000000000..d65ff9338 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2 new file mode 100644 index 000000000..52cbd3adc Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2 new file mode 100644 index 000000000..5fbd3aa00 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2 new file mode 100644 index 000000000..1d33e1431 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2 new file mode 100644 index 000000000..025dca374 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2 new file mode 100644 index 000000000..92eb63a85 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2 new file mode 100644 index 000000000..b35b9f734 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2 new file mode 100644 index 000000000..53e8d4dd9 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2 new file mode 100644 index 000000000..f8ab8734a Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2 new file mode 100644 index 000000000..4130d6dcd Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2 b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2 new file mode 100644 index 000000000..bb0923bff Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJbecmNE.woff2 b/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJbecmNE.woff2 new file mode 100644 index 000000000..bb8c300ca Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJbecmNE.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJfecg.woff2 b/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJfecg.woff2 new file mode 100644 index 000000000..36195bdd0 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJfecg.woff2 differ diff --git a/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJnecmNE.woff2 b/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJnecmNE.woff2 new file mode 100644 index 000000000..25e6e4e36 Binary files /dev/null and b/anita_theme_base/static/css/login/fonts/pxiEyp8kv8JHgFVrJJnecmNE.woff2 differ diff --git a/anita_theme_base/static/css/login/style1/login.css b/anita_theme_base/static/css/login/style1/login.css new file mode 100644 index 000000000..d763ea0e6 --- /dev/null +++ b/anita_theme_base/static/css/login/style1/login.css @@ -0,0 +1,390 @@ +html, +body { + height: 100%; +} + +body { + overflow: auto; + margin: 0; + padding: 0; + background-color: #182139; + background-size: cover; +} + +.form-control { + height: auto; + border: 1px solid #bfc9d4; + color: #3b3f5c; + font-size: 15px; + padding: 8px 10px; + letter-spacing: 1px; + height: calc(1.4em + 1.4rem + 2px); + padding: .75rem 1.25rem; + border-radius: 6px; +} + +.form-control:focus { + box-shadow: 0 0 5px 2px rgba(194, 213, 255, 0.6196078431372549); + border-color: #1b55e2; + color: #3b3f5c; +} + +.form-form { + width: 50%; + display: flex; + flex-direction: column; + min-height: 100%; + margin: 0 auto; +} + +.form-form .form-form-wrap { + max-width: 480px; + margin: 0 auto; + min-width: 311px; + min-height: 100%; + align-self: center; + width: 100%; + height: 100vh; + justify-content: center; +} + +.form-form .form-container { + align-items: center; + display: flex; + flex-grow: 1; + width: 100%; + min-height: 100%; +} + +.form-form .form-container .form-content { + display: block; + width: 100%; + padding: 25px; + background: #fff; + text-align: center; + border-radius: 15px; + border: 1px solid #e0e6ed; + -webkit-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.09019607843137255), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); + -moz-box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.09019607843137255), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); + box-shadow: 0 4px 6px 0 rgba(85, 85, 85, 0.09019607843137255), 0 1px 20px 0 rgba(0, 0, 0, 0.08), 0px 1px 11px 0px rgba(0, 0, 0, 0.06); +} + +.form-form .form-container .form-content h1 { + font-size: 32px; + color: #3b3f5c; +} + +.form-form .form-container .form-content>p { + font-size: 13px; + color: #888ea8; + font-weight: 600; + margin-bottom: 35px; +} + +.form-form .form-form-wrap .user-meta { + margin-bottom: 35px; +} + +.form-form .form-form-wrap .user-meta img { + width: 52px; + height: 52px; + border-radius: 50%; + margin-right: 15px; + border: 4px solid #e0e6ed; +} + +.form-form .form-form-wrap .user-meta div { + align-self: center; +} + +.form-form .form-form-wrap .user-meta p { + font-size: 31px; + color: #3b3f5c; + margin-bottom: 0; +} + +.form-form .form-form-wrap h1 .brand-name { + color: #3b3f5c; + font-weight: 600; +} + +.form-form .form-form-wrap p.signup-link { + font-size: 14px; + color: #3b3f5c; + font-weight: 700; + margin-bottom: 15px; + text-align: center; + margin-top: 50px; +} + +.form-form .form-form-wrap p.signup-link.register { + font-size: 13px; + color: #888ea8; + font-weight: 600; + margin-bottom: 25px; + margin-top: 0; +} + +.form-form .form-form-wrap p.signup-link.recovery { + margin-top: 0; +} + +.form-form .form-form-wrap p.signup-link a { + color: #1b55e2; + border-bottom: 1px solid; +} + +.form-form .form-form-wrap form .field-wrapper.input { + padding: 11px 0px 16px 0; + border-bottom: none; + position: relative; +} + +.form-form .form-form-wrap form .field-wrapper.input:focus { + border: 1px solid #000; +} + +.form-form .form-form-wrap form .field-wrapper.toggle-pass p { + font-weight: 600; + color: #3b3f5c; + margin-bottom: 0; +} + +.form-form .form-form-wrap form .field-wrapper .logged-in-user-name { + font-size: 37px; + color: #3b3f5c; +} + +.form-form .form-form-wrap form .field-wrapper label { + font-size: 10px; + font-weight: 700; + color: #3b3f5c; + margin-bottom: 8px; +} + +.form-form .form-form-wrap form .field-wrapper.terms_condition { + margin-bottom: 20px; +} + +.form-form .form-form-wrap form .field-wrapper.terms_condition label { + font-size: 14px; + color: #888ea8; + padding-left: 31px; + font-weight: 100; +} + +.form-form .form-form-wrap form .field-wrapper.terms_condition a { + color: #1b55e2; +} + +.form-form .form-form-wrap form .field-wrapper svg.feather-user { + top: 53px; +} + +.form-form .form-form-wrap form .field-wrapper svg.feather-lock { + top: 48px; +} + +.form-form .form-form-wrap form .field-wrapper svg.feather-at-sign { + top: 47px; +} + +.form-form .form-form-wrap form .field-wrapper svg.feather-at-sign.register { + top: 53px; +} + +.form-form .form-form-wrap form .field-wrapper svg:not(.feather-eye) { + position: absolute; + left: 12px; + color: #888ea8; + fill: rgba(0, 23, 55, 0.08); + width: 20px; + height: 20px; +} + +.form-form .form-form-wrap form .field-wrapper svg.feather-eye { + position: absolute; + top: 46px; + right: 13px; + color: #888ea8; + fill: rgba(0, 23, 55, 0.08); + width: 17px; + cursor: pointer; +} + +.form-form .form-form-wrap form .field-wrapper input { + display: inline-block; + vertical-align: middle; + border-radius: 6px; + min-width: 50px; + max-width: 635px; + width: 100%; + -ms-transition: all 0.2s ease-in-out 0s; + transition: all 0.2s ease-in-out 0s; + color: #3b3f5c; + font-weight: 600; + font-size: 16px; + padding: 13px 35px 13px 46px; +} + +.form-form .form-form-wrap form .field-wrapper input::-webkit-input-placeholder { + color: #d3d3d3; + font-size: 14px; +} + +.form-form .form-form-wrap form .field-wrapper input::-ms-input-placeholder { + color: #d3d3d3; + font-size: 14px; +} + +.form-form .form-form-wrap form .field-wrapper input::-moz-placeholder { + color: #d3d3d3; + font-size: 14px; +} + +.form-form .form-form-wrap form .field-wrapper { + width: 100% +} + +.form-form .form-form-wrap form .field-wrapper button.btn { + align-self: center; + width: 100%; + padding: 11px 14px; + font-size: 16px; + letter-spacing: 2px; +} + +.form-form .form-form-wrap form .field-wrapper a.forgot-pass-link { + font-weight: 600; + color: #888ea8; + display: block; + letter-spacing: 1px; + font-size: 12px; + margin-bottom: 8px; +} + +.form-form .form-form-wrap form .field-wrapper .n-chk .new-control-indicator { + top: 2px; + border: 1px solid #bfc9d4; + background-color: #f1f2f3; +} + +.form-form .form-form-wrap form .field-wrapper .n-chk .new-control-indicator:after { + top: 54%; +} + +.new-control.new-checkbox.checkbox-primary>input:checked~span.new-control-indicator { + border: none; +} + +.form-form .form-form-wrap form .division { + text-align: center; + font-size: 13px; + margin: 35px 0 38px 0; +} + +.form-form .form-form-wrap form .social { + text-align: center; +} + +.form-form .form-form-wrap form .social a { + background: transparent; + box-shadow: none; + border: 1px solid #e0e6ed; + padding: 12px 10px; + width: 181px; +} + +.form-form .form-form-wrap form .social a.social-fb { + margin-right: 15px; +} + +.form-form .form-form-wrap form .social a.social-fb svg { + color: #1b55e2; +} + +.form-form .form-form-wrap form .social a.social-fb .brand-name { + color: #1b55e2; +} + +@media (max-width: 991px) { + .form-form { + width: 100%; + } + .form-form .form-form-wrap { + min-width: auto; + margin: 0 auto; + } + .form-form .form-container .form-content { + border-radius: 15px; + } +} + +@media (max-width: 575px) { + .form-form .form-form-wrap form .field-wrapper.toggle-pass { + margin-bottom: 28px; + } + .form-form .form-form-wrap form .social a.social-fb { + margin-right: auto; + margin-left: auto; + margin-bottom: 10px; + display: block; + } + .form-form .form-form-wrap form .social a.social-github { + margin-right: auto; + margin-left: auto; + margin-bottom: 10px; + display: block; + } + + .form-form .form-container .form-content { + border: none; + border-radius: 0px; + } +} + +@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { + .form-form .form-form-wrap { + width: 100%; + } + .form-form .form-container { + height: 100%; + } +} + +@supports (-ms-ime-align: auto) { + .form-form .form-form-wrap { + height: 100%; + } +} + +.btn { + transition: all 0.3s ease-out; + -webkit-transition: all 0.3s ease-out; +} + +.main-container { + color: #fff; +} + +.main-container .background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + display: block; +} + +.main-container .background path { + opacity: .1; + fill: #e5edff; + border-color: #e2e8f0; +} + +.bg-100 { + background-image: url('../../../images/bk1.jpg'); + background-repeat: no-repeat; + background-size: cover; +} \ No newline at end of file diff --git a/anita_theme_base/static/css/login/style2/login.css b/anita_theme_base/static/css/login/style2/login.css new file mode 100644 index 000000000..70754c3fd --- /dev/null +++ b/anita_theme_base/static/css/login/style2/login.css @@ -0,0 +1,282 @@ +*, ::after, ::before { + box-sizing: border-box; +} +.wrapper { + width: 100%; + height:100% +} + +body { + font-size: 14px; + color: #525f7f; + background-color: #f8f9fe; + letter-spacing: 0.5px; + overflow-x: hidden; + font-family: "Roboto",sans-serif; +} + +.authentication-header { + position: absolute; + background: #165078; + top: 0px; + left: 0px; + right: 0px; + height: 50%; +} +.d-flex { + display: flex !important; +} +.justify-content-center { + justify-content: center !important; +} +.align-items-center { + align-items: center !important; +} + +.section-authentication-sign-in { + height: 100vh; +} + +.btn { + display: inline-block; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: center; + text-decoration: none; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: .375rem .75rem; + font-size: 1rem; + border-radius: .25rem; + transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} +.btn-primary { + color: #fff; + background-color: #0d6efd; + border-color: #0d6efd; +} +.my-4 { + margin-top: 1.5rem !important; + margin-bottom: 1.5rem !important; +} +.btn { + letter-spacing: 0.5px; +} +.btn-primary { + color: #fff; + background-color: #8833ff; + border-color: #8833ff; +} +[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { + cursor: pointer; +} +.bx { + font-family: "boxicons" !important; + font-weight: normal; + font-style: normal; + font-variant: normal; + line-height: inherit; + display: inline-block; + text-transform: none; + speak: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.btn i { + vertical-align: middle; + font-size: 1.3rem; + margin-top: -1em; + margin-bottom: -1em; + margin-right: 5px; +} +.form-check { + display: block; + min-height: 1.5rem; + padding-left: 1.5em; + margin-bottom: 0.12rem; +} +.form-switch { + padding-left: 2.5em; +} +.form-check-input { + width: 1em; + height: 1em; + margin-top: 0.25em; + vertical-align: top; + background-color: #fff; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + border: 1px solid rgba(0,0,0,.25); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + -webkit-print-color-adjust: exact; + color-adjust: exact; +} +.form-check .form-check-input { + float: left; + margin-left: -1.5em; +} +[type=checkbox].form-check-input { + border-radius: .25em; +} +:checked.form-check-input { + background-color: #0d6efd; + border-color: #0d6efd; +} +.form-switch .form-check-input { + width: 2em; + margin-left: -2.5em; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e"); + background-position: left center; + border-radius: 2em; + transition: background-position .15s ease-in-out; +} +:checked.form-check-input { + background-color: #8833ff; + border-color: #8833ff; +} +:checked[type=checkbox].form-check-input { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); +} +.form-switch :checked.form-check-input { + background-position: right center; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); +} +label { + display: inline-block; + font-weight: 400 !important; +} +.form-label { + margin-bottom: 0.5rem; +} +.input-group { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: stretch; + width: 100%; +} +.form-control { + display: block; + width: 100%; + padding: .375rem .75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: .25rem; + transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; +} +.border-end-0 { + border-right: 0 !important; +} +.input-group > .form-control, .input-group > .form-select { + position: relative; + flex: 1 1 auto; + width: 1%; + min-width: 0px; +} +:not(.has-validation).input-group > :nth-last-child(n+3).dropdown-toggle, :not(.has-validation).input-group > :not(:last-child):not(.dropdown-menu):not(.dropdown-toggle) { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +.input-group-text { + display: flex; + align-items: center; + padding: .375rem .75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: center; + white-space: nowrap; + background-color: #e9ecef; + border: 1px solid #ced4da; + border-radius: .25rem; +} +.bg-transparent { + background-color: transparent !important; +} +.input-group > :not(:first-child):not(.invalid-feedback):not(.invalid-tooltip):not(.valid-feedback):not(.valid-tooltip):not(.dropdown-menu) { + margin-left: -1px; + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.login-separater span { + position: relative; + top: 26px; + margin-top: -10px; + background: #ffffff; + padding: 5px; + font-size: 12px; + color: #cbcbcb; + z-index: 1; +} +hr { + margin: 1rem 0; + color: inherit; + background-color: currentColor; + border: 0; + opacity: 0.25; +} +hr:not([size]) { + height: 1px; +} +.shadow-sm { + box-shadow: 0px 0.12rem 0.25rem rgba(0,0,0,0.075) !important; +} +.btn-white { + background-color: #fff; + border-color: #e7eaf3; +} + +img, svg { + vertical-align: middle; +} + +.me-2 { + margin-right: 0.5rem !important; +} + +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + margin-top: 0px; + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} + +.h3, h3 { + font-size: calc(1.3rem + 0.6vw); +} + +/* @media all and (min-width:1200px) */ +.h3, h3 { + font-size: 1.75rem; +} + +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + color: #32393f; +} + +p { + margin-top: 0px; + margin-bottom: 1rem; +} + +.card-body { + box-shadow: 1px -1px 20px 1px #403c4329; +} \ No newline at end of file diff --git a/anita_theme_base/static/css/login/style3/images/aside_bk.png b/anita_theme_base/static/css/login/style3/images/aside_bk.png new file mode 100644 index 000000000..c4234fd31 Binary files /dev/null and b/anita_theme_base/static/css/login/style3/images/aside_bk.png differ diff --git a/anita_theme_base/static/css/login/style3/images/balloon.jpg b/anita_theme_base/static/css/login/style3/images/balloon.jpg new file mode 100644 index 000000000..5a05ea083 Binary files /dev/null and b/anita_theme_base/static/css/login/style3/images/balloon.jpg differ diff --git a/anita_theme_base/static/css/login/style3/images/bk.jpg b/anita_theme_base/static/css/login/style3/images/bk.jpg new file mode 100644 index 000000000..12f5b8f20 Binary files /dev/null and b/anita_theme_base/static/css/login/style3/images/bk.jpg differ diff --git a/anita_theme_base/static/css/login/style3/login.css b/anita_theme_base/static/css/login/style3/login.css new file mode 100644 index 000000000..0193b3103 --- /dev/null +++ b/anita_theme_base/static/css/login/style3/login.css @@ -0,0 +1,441 @@ + +body { + margin: 0; + font-family: -apple-system,BlinkMacSystemFont,"Poppins",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: left; + background-color: #fff; +} +body { + font-family: Nunito,sans-serif; + font-size: 0.8rem; + font-weight: 400; + color: #3a3a3a; + background: #f8f8f8; +} +body { + min-height: calc(-150px + 100%); + position: relative; + padding-bottom: 90px; +} + +body { + overflow-x: hidden !important; +} + +.rounded { + border-radius: .25rem !important; +} + +.rounded { + border-radius: 50px !important; +} + +body.no-footer { + padding-bottom: initial; +} + +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +html { + width: 100%; + height: 100%; + background: #f8f8f8; +} +html { + width: 100%; +} + +article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; +} + +.bootstrap-tagsinput.focus, .form-control:focus { + border-color: rgba(237,113,23,.6); +} + +.has-float-label label::after, .has-float-label>span::after { + background: #fff; +} + +.has-float-label label::after, .has-float-label > span::after { + content: " "; + display: block; + position: absolute; + height: 5px; + top: 3px; + left: -0.2em; + right: -0.2em; + z-index: -1; +} + +.bootstrap-tagsinput, .form-control { + border-radius: .1rem; + outline: initial!important; + box-shadow: initial!important; + font-size: .8rem; + padding: .5rem .75rem; + line-height: 1; + border: 1px solid #d7d7d7; + background: #fff; + color: #3a3a3a; + border-color: #d7d7d7; + height: calc(2em + .8rem); +} + +.fixed-background { + background: url(./images/bk.jpg) no-repeat center center fixed; + background-size: cover; + width: 100%; + height: 100%; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +main.default-transition { + transition: margin-left .3s; +} + + main { + margin: 0 !important; + height: 100%; +} + + main .container { + height: 100%; +} + +.background .mx-auto { + margin-left: auto !important; + margin-right: auto !important; +} + +.card { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-width: 0px; + word-wrap: break-word; + background-color: #fff; + background-clip: border-box; + border: 1px solid rgba(0,0,0,0.125); + border-radius: .25rem; +} + +.card { + border: initial; + background: #fff; + border-radius: .1rem; + box-shadow: 0px 1px 15px rgba(0,0,0,0.04), 0px 1px 6px rgba(0,0,0,0.04); +} + +.auth-card { + display: flex; + flex-direction: row; + box-shadow: 0px 1px 15px rgba(0,0,0,0.04), 0px 1px 6px rgba(0,0,0,0.04); +} + +.rounded .card { + border-radius: .75rem; +} + +.rounded .card.auth-card { + border-top-left-radius: 1.25rem; + border-bottom-left-radius: 1.25rem; +} + +.position-relative { + position: relative !important; +} + +.auth-card .image-side { + position: absolute; + width: 40%; + background: url(./images/aside_bk.png) no-repeat center top; + background-size: cover; + padding: 80px 40px; +} + +.image-side::before { + content: ''; + height: 100%; + width: 100%; + background: rgba(77, 76, 178, 0.9); + position: absolute; + left: 0; + z-index: 0; + top:0px +} + +.text-layer { + position: absolute; + left: 0px; + right: 0px; + bottom: 0px; + top: 0px; + background-size: cover; + display: flex; + align-items: center; + flex-direction: column; + padding: 80px 40px +} + +.rounded .auth-card .image-side { + border-top-left-radius: 0.75rem; + border-bottom-left-radius: 0.75rem; +} +.auth-card .form-side { + width: 60%; + padding: 80px; +} + +a { + color: #007bff; + text-decoration: none; + background-color: transparent; +} + +a { + color: #3a3a3a; + transition: color .2s; + outline: initial !important; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0px; + margin-bottom: 0.5rem; +} +p { + margin-top: 0px; + margin-bottom: 1rem; +} +p { + font-size: 0.85rem; + line-height: 1.3rem; + font-family: Nunito,sans-serif; +} +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: 0.5rem; + font-weight: 500; + line-height: 1.2; +} +h6, .h6 { + font-size: 1rem; +} +.text-white { + color: #fff !important; +} +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + line-height: 1.3; +} +h6 { + font-size: 1rem; +} +label { + display: inline-block; + margin-bottom: 0.5rem; +} +.form-group { + margin-bottom: 1rem; +} +.mb-4, .my-4 { + margin-bottom: 1.5rem !important; +} +.has-float-label { + display: block; + position: relative; +} +.d-flex { + display: -webkit-box !important; + display: -ms-flexbox !important; + display: flex !important; +} +.justify-content-between { + -webkit-box-pack: justify !important; + -ms-flex-pack: justify !important; + justify-content: space-between !important; +} +.align-items-center { + -webkit-box-align: center !important; + -ms-flex-align: center !important; + align-items: center !important; +} +button { + border-radius: 0; +} +input, button, select, optgroup, textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; +} +button, input { + overflow: visible; +} +button, select { + text-transform: none; +} +button { + color: #3a3a3a; + outline: initial !important; +} +button, [type='button'], [type='reset'], [type='submit'] { + -webkit-appearance: button; +} +button { + color: #3a3a3a; + outline: initial !important; +} +.btn { + display: inline-block; + font-weight: 400; + color: #212529; + text-align: center; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: .375rem .75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: .25rem; + -webkit-transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; + transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out,border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out; +} +.btn-primary { + color: #fff; + background-color: #007bff; + border-color: #007bff; +} +.btn-lg, .btn-group-lg > .btn { + padding: .5rem 1rem; + font-size: 1.25rem; + line-height: 1.5; + border-radius: .3rem; +} +.btn { + border-radius: 50px; + outline: initial !important; + box-shadow: none !important; + box-shadow: initial !important; + font-size: 0.8rem; + padding: .5rem 1.25rem .5rem 1.25rem; + transition: background-color box-shadow .1s linear; +} +.btn-shadow { + box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.15), 0px 1px 3px 1px rgba(0,0,0,0.15) !important; + transition: background-color box-shadow .1s linear; +} +.btn-group-lg > .btn, .btn-group-sm > .btn, .btn-lg { + border-radius: 50px; +} +.btn-primary { + background-color: #00365a; + border-color: #00365a; + color: #fff; +} +.btn-group-lg > .btn, .btn-lg { + line-height: 1.5; + font-weight: 700; + letter-spacing: 0.05rem; + padding: .75rem 2.6rem .6rem 2.6rem; +} +button:not(:disabled), [type='button']:not(:disabled), [type='reset']:not(:disabled), [type='submit']:not(:disabled) { + cursor: pointer; +} +.form-control { + display: block; + width: 100%; + height: calc(1.5em + 2px + 0.75rem); + padding: .375rem .75rem; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #495057; + background-color: #fff; + background-clip: padding-box; + border: 1px solid #ced4da; + border-radius: .25rem; + -webkit-transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out; + transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out; +} +.bootstrap-tagsinput, .form-control { + border-radius: .1rem; + outline: initial !important; + box-shadow: initial !important; + font-size: 0.8rem; + padding: .5rem .75rem; + line-height: 1; + border: 1px solid #d7d7d7; + background: #fff; + color: #3a3a3a; + border-color: #d7d7d7; + height: calc(2em + 0.8rem); +} +.has-float-label label, .has-float-label > span, .has-top-label label, .has-top-label > span { + color: rgba(58, 58, 58, 0.7); +} +.has-float-label label, .has-float-label > span:last-of-type { + position: absolute; + cursor: text; + font-size: 90%; + opacity: 1; + top: -0.4em; + left: 0.75rem; + z-index: 3; + line-height: 1; + padding: 0 1px; +} +.logo-single { + width: 110px; + height: 35px; + background: url(../logos/black.svg) no-repeat; + background-position: center center; + display: inline-block; + margin-bottom: 60px; +} +h2, .h2 { + font-size: 2rem; +} +.text-white { + color: #fff !important; +} +.mb-0, .my-0 { + margin-bottom: 0px !important; +} +.white { + color: #fff !important; +} + +@media all and (max-width:768px) { + .auth-card .form-side { + width: 100%; + padding: 40px; + } + + .auth-card .image-side { + display: none; + } +} diff --git a/anita_theme_base/static/css/login/style4/login.css b/anita_theme_base/static/css/login/style4/login.css new file mode 100644 index 000000000..b659d2350 --- /dev/null +++ b/anita_theme_base/static/css/login/style4/login.css @@ -0,0 +1,1329 @@ +/* +Theme Name: Betler +Theme URI: http://www.ansonika.com/betler/ +Author: Ansonika +Author URI: http://themeforest.net/user/Ansonika/ + +[Table of contents] + +1. SITE STRUCTURE and TYPOGRAPHY +- 1.1 Typography +- 1.2 Buttons +- 1.3 Structure + +2. CONTENT +- 2.1 Content styles + +3. COMMON +- 3.1 Forms +- 3.2 Show/hide password + Password Strenght +- 3.3 Misc +- 3.4 CSS for working forms demos +- 3.5 Success submit +- 3.6 Spacing + +/*============================================================================================*/ +/* 1. SITE STRUCTURE and TYPOGRAPHY */ +/*============================================================================================*/ +/*-------- 1.1 Typography --------*/ +/* rem reference +10px = 0.625rem +12px = 0.75rem +14px = 0.875rem +16px = 1rem (base) +18px = 1.125rem +20px = 1.25rem +24px = 1.5rem +30px = 1.875rem +32px = 2rem +*/ +html, +body { + height: 100%; +} + +html * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + background: #fff; + font-size: 0.875rem; + line-height: 1.4; + font-family: "Poppins", Helvetica, sans-serif; + color: #555; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + color: #222; +} + +p { + margin-bottom: 25px; +} + +strong { + font-weight: 500; +} + +label { + font-weight: 400; + margin-bottom: 3px; + color: #222; +} + +hr { + margin: 30px 0 30px 0; + border-color: #ddd; +} + +ul, ol { + list-style: none; + margin: 0 0 25px 0; + padding: 0; +} + +/*General links color*/ +a { + color: #434bdf; + text-decoration: none; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + outline: none; +} +a:hover, a:focus { + color: #111; + text-decoration: none; + outline: none; +} + +a.animated_link { + position: relative; + text-decoration: none; +} + +a.animated_link { + position: relative; + text-decoration: none; +} +a.animated_link:before { + content: ""; + position: absolute; + width: 100%; + height: 1px; + bottom: 0; + opacity: 1; + left: 0; + background-color: #434bdf; + visibility: hidden; + -webkit-transform: scaleX(0); + transform: scaleX(0); + -moz-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + -webkit-transition: all 0.3s ease; + -ms-transition: all 0.3s ease; + transition: all 0.3s ease; +} +a.animated_link:hover:before { + visibility: visible; + -webkit-transform: scaleX(1); + transform: scaleX(1); +} + +a.animated_link.active { + position: relative; + text-decoration: none; + color: #434bdf; +} +a.animated_link.active:before { + content: ""; + position: absolute; + width: 100%; + height: 1px; + bottom: 0; + opacity: 1; + left: 0; + background-color: #434bdf; + visibility: visible; + -webkit-transform: scaleX(1); + transform: scaleX(1); +} + +/*-------- 1.2 Buttons --------*/ +a.btn_1, +.btn_1 { + border: none; + color: #fff; + background: #434bdf; + outline: none; + cursor: pointer; + display: inline-block; + text-decoration: none; + padding: 12px 25px; + color: #fff; + font-weight: 600; + text-align: center; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + font-size: 14px; + font-size: 0.875rem; +} +a.btn_1:hover, +.btn_1:hover { + -webkit-filter: brightness(125%); + filter: brightness(125%); +} +a.btn_1.full-width, +.btn_1.full-width { + display: block; + width: 100%; + text-align: center; + margin-bottom: 5px; +} +a.btn_1.small, +.btn_1.small { + padding: 7px 10px; + font-size: 13px; + font-size: 0.8125rem; +} +a.btn_1.medium, +.btn_1.medium { + font-size: 16px; + font-size: 1rem; + padding: 18px 30px; +} +a.btn_1.rounded, +.btn_1.rounded { + -webkit-border-radius: 25px !important; + -moz-border-radius: 25px !important; + -ms-border-radius: 25px !important; + border-radius: 25px !important; + -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); +} +a.btn_1.black, +.btn_1.black { + background: #222; +} +a.btn_1.plus_icon, +.btn_1.plus_icon { + padding-right: 10px; + padding-bottom: 5px; +} +a.btn_1.plus_icon i, +.btn_1.plus_icon i { + font-size: 26px; + font-size: 1.625rem; + float: right; + position: relative; + top: -3px; + line-height: 1; +} +a.btn_1.plus_icon.medium, +.btn_1.plus_icon.medium { + padding-bottom: 10px; + padding-right: 20px; +} + +.pulse_bt { + box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); + animation: pulseanime 3s infinite; + -webkit-animation: pulseanime 3s infinite; +} + +@-webkit-keyframes pulseanime { + 0% { + -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); + } + 70% { + -webkit-box-shadow: 0 0 0 10px transparent; + } + 100% { + -webkit-box-shadow: 0 0 0 0 transparent; + } +} +@keyframes pulseanime { + 0% { + -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); + } + 70% { + -moz-box-shadow: 0 0 0 10px transparent; + box-shadow: 0 0 0 10px transparent; + } + 100% { + -moz-box-shadow: 0 0 0 0 transparent; + box-shadow: 0 0 0 0 transparent; + } +} +a.social_bt { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + text-align: center; + color: #fff; + min-width: 200px; + margin-bottom: 15px; + display: block; + padding: 12px; + line-height: 1; + position: relative; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + cursor: pointer; +} +a.social_bt:hover { + -webkit-filter: brightness(110%); + filter: brightness(110%); +} + +a.social_bt.facebook { + background: #3B5998 url(../img/Facebook__logo.svg) 10px center no-repeat; +} + +a.social_bt.google { + background: #444 url(../img/Google__G__Logo.svg) 10px center no-repeat; +} + +.divider { + text-align: center; + height: 1px; + margin: 20px 0 20px 0; + background-color: #ededed; +} +.divider span { + position: relative; + top: -20px; + background-color: #fff; + display: inline-block; + padding: 10px; + font-style: italic; +} + +/*-------- 1.3 Structure --------*/ +/* Preloader */ +#preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + bottom: 0; + background-color: #fff; + z-index: 999999; +} + +[data-loader="circle-side"] { + position: absolute; + width: 50px; + height: 50px; + top: 50%; + left: 50%; + margin-left: -25px; + margin-top: -25px; + -webkit-animation: circle infinite .95s linear; + -moz-animation: circle infinite .95s linear; + -o-animation: circle infinite .95s linear; + animation: circle infinite .95s linear; + border: 2px solid #333; + border-top-color: rgba(0, 0, 0, 0.2); + border-right-color: rgba(0, 0, 0, 0.2); + border-bottom-color: rgba(0, 0, 0, 0.2); + border-radius: 100%; +} + +#loader_form { + position: fixed; + top: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + bottom: 0; + background-color: #fff; + background-color: rgba(255, 255, 255, 0.6); + z-index: 999999; + display: none; +} + +[data-loader="circle-side-2"] { + position: absolute; + width: 50px; + height: 50px; + top: 50%; + left: 50%; + margin-left: -25px; + margin-top: -25px; + -webkit-animation: circle infinite .95s linear; + -moz-animation: circle infinite .95s linear; + -o-animation: circle infinite .95s linear; + animation: circle infinite .95s linear; + border: 2px solid #333; + border-top-color: rgba(0, 0, 0, 0.2); + border-right-color: rgba(0, 0, 0, 0.2); + border-bottom-color: rgba(0, 0, 0, 0.2); + border-radius: 100%; +} + +@-webkit-keyframes circle { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-moz-keyframes circle { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-o-keyframes circle { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@keyframes circle { + 0% { + -webkit-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + -o-transform: rotate(360deg); + transform: rotate(360deg); + } +} +.row-height { + min-height: 100vh !important; + height: 100vh; +} +@media (max-width: 991px) { + .row-height { + height: auto; + } +} + +.content-left-bg-color { + background-color: #434bdf; +} + +.content-left-wrapper { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + height: 100%; + min-height: 100%; + padding: 0 90px; + color: #fff; + text-align: center; + position: relative; +} +.content-left-wrapper.with_gradient { + background: transparent; + background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.5)); + background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5)); +} +@media (max-width: 991px) { + .content-left-wrapper { + height: auto; + padding: 95px 30px 60px 30px; + } +} +@media (max-width: 767px) { + .content-left-wrapper { + padding: 95px 15px 60px 15px; + } +} +.content-left-wrapper small { + text-transform: uppercase; + margin-bottom: 8px; + display: inline-block; + font-size: 14px; + font-size: 0.875rem; + opacity: 0.8; + font-weight: 500; +} +.content-left-wrapper h1 { + color: #fff; + margin-top: 0; + font-size: 36px; + font-size: 2.25rem; +} +@media (max-width: 767px) { + .content-left-wrapper h1 { + font-size: 26px; + font-size: 1.625rem; + } +} +.content-left-wrapper p { + font-size: 16px; + font-size: 1rem; + opacity: 0.8; +} +@media (max-width: 767px) { + .content-left-wrapper p { + font-size: 14px; + font-size: 0.875rem; + } +} + +.content-right { + overflow-y: auto; +} + +.copy { + text-align: center; +} +.copy.white { + color: #fff; +} +.copy.white a.animated_link { + color: #fff; +} +.copy.white a.animated_link:before { + background-color: #fff; +} +.copy.white a.animated_link.active { + color: #fff; +} +.copy.white a.animated_link.active:before { + background-color: #fff; +} + +a#logo { + position: absolute; + left: 20px; + top: 15px; + display: block; + height: 35px; +} +@media (max-width: 991px) { + a#logo { + left: 15px; + top: 10px; + } +} + +#social { + position: absolute; + top: 20px; + right: 30px; + z-index: 999; +} +#social ul { + margin: 0; + padding: 0; + text-align: center; +} +#social ul li { + float: left; + margin: 0 0 0 20px; + list-style: none; +} +#social ul li a { + color: #fff; + text-align: center; + line-height: 35px; + display: block; + font-size: 16px; + font-size: 1rem; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + text-decoration: none; +} +#social ul li a:hover { + transform: translateY(-4px); +} + +/*============================================================================================*/ +/* 2. CONTENT */ +/*============================================================================================*/ +/*-------- 2.1 Content styles --------*/ +#forgot_pw { + background-color: #fff; + position: absolute; + left: 0; + top: 0; + width: 100%; + z-index: 99; + min-height: 100%; + display: none; + padding: 25px; +} +@media (max-width: 767px) { + #forgot_pw { + padding: 0 15px; + } +} +#forgot_pw label { + font-weight: 500; +} + +.panel { + -webkit-box-shadow: 3px 0 30px rgba(0, 0, 0, 0.2); + -moz-box-shadow: 3px 0 30px rgba(0, 0, 0, 0.2); + box-shadow: 3px 0 30px rgba(0, 0, 0, 0.2); + width: 430px; + padding: 30px 45px; + position: absolute; + left: 0; + top: 0; + overflow-y: auto; + background-color: #fff; + min-height: 100vh; + z-index: 99; +} +.panel figure { + margin: 0 0 15px 0; + text-align: center; + border-bottom: 1px solid #ededed; + padding: 0 60px 30px 60px; +} +@media (max-width: 767px) { + .panel figure { + margin: -30px -30px 20px -30px; + padding: 20px 30px; + } +} +.panel .copy { + padding-top: 30px; + left: 0; + bottom: 15px; + position: absolute; + text-align: center; + width: 100%; +} +@media (max-width: 767px) { + .panel { + width: 100%; + } +} +.panel #forgot_pw { + top: 101px; + display: none; + padding: 25px 45px; +} +.panel .input_style_2 .divider { + margin-bottom: 30px; +} +.panel.right { + left: auto; + right: 0; +} +.panel.center { + position: relative; + width: 100%; + min-height: inherit; +} +.panel.header_2 figure { + background-color: #f8f8f8; + margin: -30px -45px 45px -45px; + padding: 25px 15px; +} + +.video { + position: fixed; + top: 50%; + left: 50%; + z-index: 1; + min-width: 100%; + min-height: 100%; + z-index: 9; + width: auto; + height: auto; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +@media (max-width: 767px) { + .video { + display: none; + } +} + +.review_block_numbers ul { + padding: 0; + margin: 0 -3px; + list-style-type: none; + display: flex; + justify-content: center; +} +.review_block_numbers ul li { + display: list-item; + margin: 0 3px; + width: 100%; +} + +.container_numbers { + margin-bottom: 5px; + position: relative; +} +.container_numbers input[type="radio"] { + display: none; +} +.container_numbers label { + cursor: pointer; +} +.container_numbers .radio { + position: relative; + border: 1px solid #dae0e5; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + padding: 15px; + display: block; + text-align: center; + font-size: 18px; + font-size: 1.125rem; + font-weight: 500; + transition: all 450ms; +} +@media (max-width: 575px) { + .container_numbers .radio { + padding: 10px; + } +} +.container_numbers .radio:hover { + border-color: transparent; +} +.container_numbers .radio.very_bad:hover { + background-color: #ff0033; +} +.container_numbers .radio.bad:hover { + background-color: #ff5f7f; +} +.container_numbers .radio.average:hover { + background-color: #94b49b; +} +.container_numbers .radio.good:hover { + background-color: #68cd7f; +} +.container_numbers .radio.very_good:hover { + background-color: #68cd7f; +} + +.container_numbers input[type="radio"]:checked ~ .radio, .container_numbers input[type="radio"]:checked:hover { + transition: all 450ms; + color: #fff; + border: 1px solid transparent; +} +.container_numbers input[type="radio"]:checked ~ .radio.very_bad, .container_numbers input[type="radio"]:checked:hover.very_bad { + background-color: #ff0033; +} +.container_numbers input[type="radio"]:checked ~ .radio.bad, .container_numbers input[type="radio"]:checked:hover.bad { + background-color: #ff5f7f; +} +.container_numbers input[type="radio"]:checked ~ .radio.average, .container_numbers input[type="radio"]:checked:hover.average { + background-color: #94b49b; +} +.container_numbers input[type="radio"]:checked ~ .radio.good, .container_numbers input[type="radio"]:checked:hover.good { + background-color: #68cd7f; +} +.container_numbers input[type="radio"]:checked ~ .radio.very_good, .container_numbers input[type="radio"]:checked:hover.very_good { + background-color: #68cd7f; +} + +/*============================================================================================*/ +/* 3. COMMON */ +/*============================================================================================*/ +/*-------- 3.1 Forms --------*/ +.form-control { + border: 1px solid #dae0e5 !important; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + font-size: 0.875rem; + height: calc(2.55rem + 2px); +} +.form-control:focus { + box-shadow: none; + border-color: #434bdf; +} + +.form-control::-webkit-input-placeholder, .form-control::-moz-placeholder, .form-control:-ms-input-placeholder, .form-control::-ms-input-placeholder { + color: #999; + opacity: 1; +} + +.input_style_2 .form-control { + border: none !important; + border-bottom: 1px solid #dae0e5 !important; + padding-left: 0; + padding-right: 0; + height: calc(2.1rem); + -webkit-border-radius: 0 !important; + -moz-border-radius: 0 !important; + -ms-border-radius: 0 !important; + border-radius: 0 !important; +} +.input_style_2 .form-control:focus { + box-shadow: none; + border-color: #434bdf !important; +} +.input_style_2 .form-group { + margin-bottom: 30px; +} +.input_style_2 .my-toggle { + margin-right: 0; + padding: 0; +} +.input_style_2 .my-toggle:hover, .input_style_2 .my-toggle:focus { + background-color: transparent; + color: #434bdf; +} + +/* Checkbox style */ +.container_check { + display: block; + position: relative; + font-size: 14px; + font-size: 0.875rem; + padding-left: 30px; + margin-bottom: 10px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + color: #555; +} +.container_check input { + position: absolute; + opacity: 0; + cursor: pointer; +} +.container_check input:checked ~ .checkmark { + background-color: #434bdf; + border: 1px solid transparent; +} +.container_check .checkmark { + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + border: 1px solid #dae0e5; + background-color: #fff; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.container_check .checkmark:after { + content: ""; + position: absolute; + display: none; + left: 7px; + top: 3px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 2px 2px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} +.container_check:hover .checkmark { + border: 1px solid #434bdf; +} +.container_check.version_2 { + padding: 6px 0 0 45px; + min-height: 30px; +} +.container_check.version_2 .checkmark { + height: 30px; + width: 30px; +} +.container_check.version_2 .checkmark:after { + left: 12px; + top: 8px; + width: 5px; + height: 10px; +} + +.container_check input:checked ~ .checkmark:after { + display: block; +} + +/* Radio buttons */ +.container_radio { + display: block; + position: relative; + font-size: 14px; + font-size: 0.875rem; + padding-left: 30px; + margin-bottom: 10px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.container_radio input { + position: absolute; + opacity: 0; +} +.container_radio input:checked ~ .checkmark:after { + opacity: 1; +} +.container_radio .checkmark { + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; + background-color: #fff; + border: 1px solid #ccc; + border-radius: 50%; +} +.container_radio .checkmark:after { + display: block; + content: ""; + position: absolute; + opacity: 0; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + top: 3px; + left: 3px; + width: 12px; + height: 12px; + border-radius: 50%; + background: #434bdf; + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} + +/* Fileupload */ +.fileupload { + position: relative; + width: 100%; + margin-top: 5px; +} + +input[type=file] { + background-color: #fff; + border: 1px solid #dae0e5; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + padding: 5px; + height: auto; + width: 100%; + color: #999; +} +input[type=file]:focus { + box-shadow: none; + outline: none; +} + +input[type=file]::-webkit-file-upload-button, input[type=file].invalid::-webkit-file-upload-button, input[type=file].valid::-webkit-file-upload-button { + color: #fff; + font-size: 13px; + border: 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + padding: 8px 10px 8px 38px; + background: #434bdf url(../img/upload_icon.svg) 8px center no-repeat; + outline: none; +} +input[type=file]::-webkit-file-upload-button:focus, input[type=file].invalid::-webkit-file-upload-button:focus, input[type=file].valid::-webkit-file-upload-button:focus { + box-shadow: none; + outline: none; +} + +/*-------- 3.2 Show/hide password + Password Strenght --------*/ +.my-toggle { + background: transparent; + border: 0; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; + color: #888; + cursor: pointer; + font-size: 10px; + font-size: 10px; + font-size: 0.625rem; + font-weight: bold; + margin-right: 5px; + height: 30px; + line-height: 30px; + padding: 0 10px; + text-transform: uppercase; + -moz-appearance: none; + -webkit-appearance: none; +} +.my-toggle:hover, .my-toggle:focus { + background-color: #eee; + color: #555; + outline: transparent; +} + +.hideShowPassword-wrapper { + width: 100% !important; +} + +/*Password strength */ +#pass-info { + width: 100%; + color: #555; + text-align: center; + font-size: 12px; + font-size: 0.75rem; + padding: 5px 3px 3px 3px; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + -ms-border-radius: 3px; + border-radius: 3px; +} +#pass-info.weakpass, #pass-info.stillweakpass, #pass-info.goodpass, #pass-info.strongpass, #pass-info.vrystrongpass { + margin-bottom: 12px; +} +#pass-info.weakpass { + border: 1px solid #FF9191; + background: #FFC7C7; + color: #94546E; +} +#pass-info.stillweakpass { + border: 1px solid #FBB; + background: #FDD; + color: #945870; +} +#pass-info.goodpass { + border: 1px solid #C4EEC8; + background: #E4FFE4; + color: #51926E; +} +#pass-info.strongpass { + border: 1px solid #6ED66E; + background: #79F079; + color: #348F34; +} +#pass-info.vrystrongpass { + border: 1px solid #379137; + background: #48B448; + color: #CDFFCD; +} + +/*-------- 3.3 Misc --------*/ +.background-image { + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + background-color: #ededed; +} + +.opacity-mask { + width: 100%; + height: 100%; + position: relative; + left: 0; + top: 0; + z-index: 2; +} + +.modal-content { + border: 1px solid transparent; +} +.modal-content .close { + font-weight: 300; + font-size: 32px; + font-size: 2rem; + outline: none; +} + +.tooltip .tooltip-inner { + font-size: 13px; + font-size: 0.8125rem; + line-height: 1.3; + padding: 10px; +} + +.tooltip.show { + opacity: 0.9; +} + +.info { + display: block; +} +.info h6 { + font-size: 14px; + font-size: 0.875rem; +} +.info a { + font-size: 16px; + font-size: 1rem; + display: inline-block; + float: right; + color: #999; + padding-top: 3px; +} +.info a:hover { + color: #434bdf; +} + +/*-------- 3.4 CSS for working forms demos --------*/ +input#website { + display: none; +} + +span.error { + -moz-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; + -webkit-transition: all 0.3s ease-in-out; + -ms-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; + font-size: 12px; + position: absolute; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + top: -20px; + right: -15px; + z-index: 2; + height: 25px; + line-height: 1; + background-color: #e34f4f; + color: #fff; + font-weight: normal; + display: inline-block; + padding: 6px 8px; +} +span.error:after { + content: ''; + position: absolute; + border-style: solid; + border-width: 0 6px 6px 0; + border-color: transparent #e34f4f; + display: block; + width: 0; + z-index: 1; + bottom: -6px; + left: 20%; +} + +.terms span.error { + top: -30px; + left: -15px; + right: inherit; +} + +/*-------- 3.5 Success submit --------*/ +#success { + position: absolute; + top: 50%; + left: 50%; + width: 300px; + height: 190px; + margin-top: -85px; + margin-left: -150px; + text-align: center; +} +#success h4 { + font-weight: 400; + margin: 20px 0 0 0; + font-size: 18px; + font-size: 1.125rem; +} +#success h4 span { + display: block; + margin-bottom: 0; + font-weight: 500; + font-size: 21px; + font-size: 1.3125rem; +} + +@-webkit-keyframes checkmark { + 0% { + stroke-dashoffset: 50px; + } + 100% { + stroke-dashoffset: 0; + } +} +@-ms-keyframes checkmark { + 0% { + stroke-dashoffset: 50px; + } + 100% { + stroke-dashoffset: 0; + } +} +@keyframes checkmark { + 0% { + stroke-dashoffset: 50px; + } + 100% { + stroke-dashoffset: 0; + } +} +@-webkit-keyframes checkmark-circle { + 0% { + stroke-dashoffset: 240px; + } + 100% { + stroke-dashoffset: 480px; + } +} +@-ms-keyframes checkmark-circle { + 0% { + stroke-dashoffset: 240px; + } + 100% { + stroke-dashoffset: 480px; + } +} +@keyframes checkmark-circle { + 0% { + stroke-dashoffset: 240px; + } + 100% { + stroke-dashoffset: 480px; + } +} +.inlinesvg .svg svg { + display: inline; +} + +.icon--order-success svg path { + -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards; + animation: checkmark 0.25s ease-in-out 0.7s backwards; +} + +.icon--order-success svg circle { + -webkit-animation: checkmark-circle 0.6s ease-in-out backwards; + animation: checkmark-circle 0.6s ease-in-out backwards; +} + +/*-------- 3.6 Spacing --------*/ +.add_bottom_10 { + margin-bottom: 10px !important; +} + +.add_bottom_15 { + margin-bottom: 15px !important; +} + +.add_bottom_30 { + margin-bottom: 30px !important; +} + +.add_bottom_45 { + margin-bottom: 45px !important; +} + +.add_bottom_60 { + margin-bottom: 60px; +} + +.add_bottom_75 { + margin-bottom: 75px; +} + +.add_top_10 { + margin-top: 10px; +} + +.add_top_15 { + margin-top: 15px; +} + +.add_top_20 { + margin-top: 20px; +} + +.add_top_30 { + margin-top: 30px; +} + +.add_top_60 { + margin-top: 60px; +} + +.margin_30 { + padding-top: 30px; + padding-bottom: 30px; +} + +.margin_60 { + padding-top: 60px; + padding-bottom: 60px; +} + +.margin_60_35 { + padding-top: 60px; + padding-bottom: 35px; +} diff --git a/anita_theme_base/static/css/login/user.svg b/anita_theme_base/static/css/login/user.svg new file mode 100644 index 000000000..58c0bc152 --- /dev/null +++ b/anita_theme_base/static/css/login/user.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/anita_theme_base/static/css/mixins/_box_shadow.scss b/anita_theme_base/static/css/mixins/_box_shadow.scss new file mode 100644 index 000000000..9e7828b47 --- /dev/null +++ b/anita_theme_base/static/css/mixins/_box_shadow.scss @@ -0,0 +1,4 @@ +@mixin box-shadow($shadow...) { + box-shadow: $shadow; + } + \ No newline at end of file diff --git a/anita_theme_base/static/css/mixins/_buttons.scss b/anita_theme_base/static/css/mixins/_buttons.scss new file mode 100644 index 000000000..143b9242e --- /dev/null +++ b/anita_theme_base/static/css/mixins/_buttons.scss @@ -0,0 +1,92 @@ + +@mixin button-variant( $background, $border: $background, $hover-background: darken($background, 5%), $hover-border: $hover-background, $hover-box-shadow: 0 4px 10px rgba($background, .25), $active-background: darken($background, 5%), $active-border: darken($border, 10%), $active-box-shadow: inset 0 3px 5px rgba($black, .125)) { + color: color-yiq($background); + border-color: $border; + + // @include gradient-bg($background); + @include box-shadow($btn-box-shadow); + + @include hover { + color: color-yiq($hover-background); + //@include gradient-bg($hover-background); + border-color: $hover-border; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), $hover-box-shadow; + } + + &:focus, + &.focus { + box-shadow: 0 0 0 3px rgba($background, .15), 0 3px 15px rgba($background, 0.2), 0 2px 5px rgba($black, .1); + } + + // Disabled comes first so active can properly restyle + &.disabled, + &:disabled { + background-color: $background; + border-color: $border; + box-shadow: none; + cursor: not-allowed; + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show>&.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + border-color: $active-border; + background-image: none; + //box-shadow: $active-box-shadow !important; + } + } + + @mixin button-outline-variant( $color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) { + $button-text-color: $color; // Fix light or white outlined buttons + + @if ($color==theme-color("light") or $color==$white) { + $button-text-color: color-yiq($color); + } + + background-color: transparent; + background-image: none; + border-color: $color; + color: $button-text-color; + + &:hover { + color: color-yiq($color); + background-color: $active-background; + border-color: $active-border; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05), 0 4px 10px rgba($color, .25); + } + + &:focus, + &.focus { + box-shadow: 0 0 0 3px rgba($color, .15), 0 3px 15px rgba($color, 0.2), 0 2px 5px rgba($black, .1) !important; + } + + &.disabled, + &:disabled { + color: $color; + background-color: transparent; + box-shadow: none; + } + + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + .show>&.dropdown-toggle { + color: color-yiq($active-background); + background-color: $active-background; + border-color: $active-border; + // &:focus { + // // Avoid using mixin so we can pass custom focus shadow properly + // // box-shadow: inset 0 3px 5px rgba($black, .125) !important; + // } + } + } + + // Button sizes + @mixin button-size( $padding-y, $padding-x, $font-size, $line-height, $border-radius) { + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; + border-radius: $border-radius; + } + \ No newline at end of file diff --git a/anita_theme_base/static/css/mixins/_clearfix.scss b/anita_theme_base/static/css/mixins/_clearfix.scss new file mode 100644 index 000000000..b4594c0ab --- /dev/null +++ b/anita_theme_base/static/css/mixins/_clearfix.scss @@ -0,0 +1,7 @@ +@mixin clearfix() { + &::after { + display: block; + clear: both; + content: ""; + } + } \ No newline at end of file diff --git a/anita_theme_base/static/css/mixins/_flex.scss b/anita_theme_base/static/css/mixins/_flex.scss new file mode 100644 index 000000000..d3b119474 --- /dev/null +++ b/anita_theme_base/static/css/mixins/_flex.scss @@ -0,0 +1,74 @@ + +@mixin awesome-flex { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + } + + @mixin awesome-align-items-center { + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + @mixin awesome-justify-content-center { + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + + @mixin awesome-justify-content-between { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -moz-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + + @mixin awesome-flex-row { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -moz-box-orient: horizontal; + -moz-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + } + + @mixin awesome-flex-column { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -moz-box-orient: vertical; + -moz-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + + @mixin gradient-bg($color) { + background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; + } + + @mixin box-shadow($shadow...) { + box-shadow: $shadow; + } + + @mixin border-radius($radius: $border-radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; + } + + // @mixin awesome-trainsition-all ($seconds) { + // -webkit-transition: all $seconds; + // -moz-transition: all $seconds; + // -ms-transition: all $seconds; + // -o-transition: all $seconds; + // transition: all $seconds; + // } diff --git a/anita_theme_base/static/css/mixins/_float.scss b/anita_theme_base/static/css/mixins/_float.scss new file mode 100644 index 000000000..62db5809c --- /dev/null +++ b/anita_theme_base/static/css/mixins/_float.scss @@ -0,0 +1,10 @@ +@mixin float-left { + float: left !important; + } + @mixin float-right { + float: right !important; + } + @mixin float-none { + float: none !important; + } + \ No newline at end of file diff --git a/anita_theme_base/static/css/mixins/_gradients.scss b/anita_theme_base/static/css/mixins/_gradients.scss new file mode 100644 index 000000000..98da0c119 --- /dev/null +++ b/anita_theme_base/static/css/mixins/_gradients.scss @@ -0,0 +1,41 @@ +// Gradients + +@mixin gradient-bg($color) { + background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x; + } + + // Horizontal gradient, from left to right + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + @mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { + background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); + background-repeat: repeat-x; + } + + // Vertical gradient, from top to bottom + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + @mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) { + background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); + background-repeat: repeat-x; + } + + @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) { + background-image: linear-gradient($deg, $start-color, $end-color); + background-repeat: repeat-x; + } + @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { + background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); + background-repeat: no-repeat; + } + @mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) { + background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); + background-repeat: no-repeat; + } + @mixin gradient-radial($inner-color: #555, $outer-color: #333) { + background-image: radial-gradient(circle, $inner-color, $outer-color); + background-repeat: no-repeat; + } + @mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) { + background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); + } \ No newline at end of file diff --git a/anita_theme_base/static/css/mixins/_hover.scss b/anita_theme_base/static/css/mixins/_hover.scss new file mode 100644 index 000000000..8a6f943fd --- /dev/null +++ b/anita_theme_base/static/css/mixins/_hover.scss @@ -0,0 +1,26 @@ +@mixin hover { + &:hover { @content; } + } + + @mixin hover-focus { + &:hover, + &:focus { + @content; + } + } + + @mixin plain-hover-focus { + &, + &:hover, + &:focus { + @content; + } + } + + @mixin hover-focus-active { + &:hover, + &:focus, + &:active { + @content; + } + } \ No newline at end of file diff --git a/anita_theme_base/static/description/admin_theme.gif b/anita_theme_base/static/description/admin_theme.gif new file mode 100644 index 000000000..42ceeba34 Binary files /dev/null and b/anita_theme_base/static/description/admin_theme.gif differ diff --git a/anita_theme_base/static/description/anita_list.gif b/anita_theme_base/static/description/anita_list.gif new file mode 100644 index 000000000..f63e756a3 Binary files /dev/null and b/anita_theme_base/static/description/anita_list.gif differ diff --git a/anita_theme_base/static/description/anita_modeler.png b/anita_theme_base/static/description/anita_modeler.png new file mode 100644 index 000000000..a56f812f4 Binary files /dev/null and b/anita_theme_base/static/description/anita_modeler.png differ diff --git a/anita_theme_base/static/description/awesome_theme.gif b/anita_theme_base/static/description/awesome_theme.gif new file mode 100644 index 000000000..c45dd1fdd Binary files /dev/null and b/anita_theme_base/static/description/awesome_theme.gif differ diff --git a/anita_theme_base/static/description/banner.png b/anita_theme_base/static/description/banner.png new file mode 100644 index 000000000..007b66171 Binary files /dev/null and b/anita_theme_base/static/description/banner.png differ diff --git a/anita_theme_base/static/description/icon.png b/anita_theme_base/static/description/icon.png new file mode 100644 index 000000000..e4f0c41a8 Binary files /dev/null and b/anita_theme_base/static/description/icon.png differ diff --git a/anita_theme_base/static/description/index.html b/anita_theme_base/static/description/index.html new file mode 100644 index 000000000..e55818827 --- /dev/null +++ b/anita_theme_base/static/description/index.html @@ -0,0 +1,81 @@ +
+ +
+
+
+ +
+

+ This module is base of our themes, it contains all the common features of our themes. +

+
+
+
+ +

(Current Realse V16.0.0.2 -- 2023.1.5)

+ +
+ +
+ +

+ Our Other Products +

+ +
+
+

+ Awesome theme Pro +

+
+ + + +
+
+ +
+
+

+ Anita Modeler +

+
+ + + +
+
+ +
+
+

+ Anita List +

+
+ + + +
+
+ +
+
+

+ Admin Theme +

+
+ + + +
+
+ + +
+
\ No newline at end of file diff --git a/anita_theme_base/static/description/screen_shot.png b/anita_theme_base/static/description/screen_shot.png new file mode 100644 index 000000000..63b873457 Binary files /dev/null and b/anita_theme_base/static/description/screen_shot.png differ diff --git a/anita_theme_base/static/images/bk1.jpg b/anita_theme_base/static/images/bk1.jpg new file mode 100644 index 000000000..f3b2a6785 Binary files /dev/null and b/anita_theme_base/static/images/bk1.jpg differ diff --git a/anita_theme_base/static/images/bk4.jpg b/anita_theme_base/static/images/bk4.jpg new file mode 100644 index 000000000..12f5b8f20 Binary files /dev/null and b/anita_theme_base/static/images/bk4.jpg differ diff --git a/anita_theme_base/static/src/components/customizer/theme_customizer.js b/anita_theme_base/static/src/components/customizer/theme_customizer.js new file mode 100644 index 000000000..25c7eb905 --- /dev/null +++ b/anita_theme_base/static/src/components/customizer/theme_customizer.js @@ -0,0 +1,36 @@ +/** @odoo-module **/ + +import { Component, useState, useExternalListener} from "@odoo/owl"; + +import { registry } from "@web/core/registry"; +import { Dropdown } from "@web/core/dropdown/dropdown"; +import { DropdownItem } from "@web/core/dropdown/dropdown_item"; +import { useService } from "@web/core/utils/hooks"; + +export class ThemeCustomizer extends Component { + setup() { + super.setup(); + this.actionService = useService("action"); + } + + _on_toggle_click() { + // url action + this.actionService.doAction({ + type: "ir.actions.act_url", + url: "https://apps.odoo.com/apps/themes/15.0/anita_theme_setting/", + target: "current", + }); + } +} + +ThemeCustomizer.template = "anita_theme_base.customizer"; + +ThemeCustomizer.components = { + Dropdown: Dropdown, + DropdownItem: DropdownItem, +}; + +export const systrayItem = { + Component: ThemeCustomizer, +}; +registry.category("systray").add("anita_theme_base.customizer", systrayItem, { sequence: 1 }); diff --git a/anita_theme_base/static/src/components/customizer/theme_customizer.scss b/anita_theme_base/static/src/components/customizer/theme_customizer.scss new file mode 100644 index 000000000..549afd45b --- /dev/null +++ b/anita_theme_base/static/src/components/customizer/theme_customizer.scss @@ -0,0 +1,372 @@ +.customizer { + + width: 395px; + right: -500px; + + padding: 0; + background-color: #FFF; + z-index: 1001; + position: fixed; + top: 0; + bottom: 0; + height: 100vh; + -webkit-transition: right .4s cubic-bezier(.05, .74, .2, .99); + transition: right .4s cubic-bezier(.05, .74, .2, .99); + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-left: 1px solid rgba(0, 0, 0, .05); + box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08); + color: #212529; + + a, label, span, i { + color: #212529; + } + + i { + &:hover { + color: #71639e !important; + } + } + + @include media-breakpoint-down(sm) { + right: -550px; + width: 100%; + } + + &.show { + right: 0 + } + + .dropdown { + height: 100% !important; + .dropdown-toggle { + height: 100% !important; + } + } + + svg { + &:hover { + path { + fill: #71639e; + } + } + } + + .customizer-content { + position: relative; + + ul.navbar-nav { + li.nav-item { + &:focus { + outline: none; + } + a.nav-link { + padding: 5px; + } + } + } + + .theme_mode_tool_bar { + height: 30px; + line-height: 30px; + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; + background-color: #eee; + text-align: center; + margin-top: -1px; + + .create_new_theme_mode { + font-size: 1.1rem; + } + } + + .add_new_style_icon { + fill: #dee2e6; + } + + .operation-toolbar { + height: 30px; + background-color: #f2f2f2; + border-bottom: 1px solid #dee2e6; + .tool-bar-icon { + margin: 0px 5px; + } + } + + .mode_tools { + position: absolute; + right: 1rem; + } + + .style-preview-box { + position: relative; + width: 100px; + height: 60px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); + overflow: hidden; + background-size: cover; + + &:hover { + transform: translate3d(0px, 0px, -2px); + } + + .preview-sidebar-box { + width: 30px; + border-right: 1px solid #dee2e6; + } + + .preview-main-box { + .admin_header-box { + height: 30px + } + .footer-box { + height: 30px; + } + } + + .preview-header { + border-bottom: 1px solid #ebebeb; + } + + .preview-footer { + border-top: 1px solid #ebebeb; + } + + .nav-pills { + .nav-link.active, .nav-pills .show { + > .nav-link { + background-color: transparent !important; + border: 1px solid #e3e3e3 !important + } + } + } + } + + .theme-style-contianer { + + .theme_style_tab { + padding: 5px; + + box-sizing: border-box; + background: transparent; + border: 1px solid; + border-color: transparent; + margin: 1px; + + &:hover { + border-color: #5A8DEE !important; + .operation-toolbar { + top: 0px; + } + } + + &.active { + background: transparent; + border: 1px solid darken($color: #5A8DEE, $amount: 10) !important; + } + } + + .theme_style_tool_bar { + .theme_style_tab { + .tool_bar_item { + font-size: 16px; + &:hover { + color: black; + border-color: #5A8DEE !important; + } + } + } + } + } + + .style_tool_bar { + background-color: #eee; + height: 30px; + } + + .style_item_container { + .style_item_group { + .style_items { + .style_item { + margin-left: 10px; + width: 220px; + .title { + height: 30px; + line-height: 30px; + display: flex; + } + .color-container { + + .style_color_item { + margin-left: 5px; + } + + .pickr { + margin: 5px; + .pcr-button:before { + background: transparent !important; + } + } + .color_value { + display: flex; + align-items: center; + justify-items: left; + } + } + + .colorpicker-input-addon { + border: 1px solid #dee2e6; + } + } + } + + .style_item_group_name { + height: 30px; + line-height: 30px; + border-top: 1px solid #dee2e6; + border-bottom: 1px solid #dee2e6; + background-color: #eee; + text-align: center; + margin-top: -1px; + + .style_group_dropdown { + &.dropdown-toggle { + font-size: 0.75rem; + &::after { + display: none !important; + } + } + } + } + + .style_sub_group_name { + color: #182139; + background: rgba(238,238,238,0.51); + height: 30px; + line-height: 30px; + padding-left: 10px; + border-bottom: 1px solid #dee2e6; + .sub_group_toggler i { + font-size: 0.75rem; + } + } + + .sub-group-body { + .style_group_dropdown { + &.dropdown-toggle { + font-size: 0.75rem; + &::after { + display: none !important; + } + } + } + .sub_group_panel { + background: #f6f6f6; + } + } + + .add_style_item { + float: right; + } + + .add_item_group_container { + margin-bottom: -1.5rem; + border-bottom: none; + } + } + + .add_new_group { + height: 30px; + line-height: 30px; + border-top: none; + border-bottom: 1px solid #dee2e6; + background-color: #eee; + text-align: center; + } + } + } + + .customizer-close { + position: absolute; + right: 10px; + top: 10px; + padding: 7px; + width: auto; + z-index: 10; + color: #727E8C; + + i { + font-size: 1.3rem + } + + .customizer-toggle { + background: #5A8DEE; + color: #FFF; + display: block; + box-shadow: -3px 0 8px rgba(0, 0, 0, .1); + border-top-left-radius: 6px; + border-bottom-left-radius: 6px; + position: absolute; + top: 50%; + width: 38px; + height: 38px; + left: -39px; + text-align: center; + line-height: 44px; + cursor: pointer + } + + .color-box { + height: 30px; + width: 30px; + margin: .5rem; + border-radius: .3rem; + cursor: pointer; + + &.selected { + box-shadow: 0 0 0 3px rgba(52, 144, 220, .5) + } + } + + ul.list-inline li { + display: inline-block; + } + + h5 { + margin-bottom: .5rem; + font-family: Rubik, Helvetica, Arial, serif; + font-weight: 400; + line-height: 1.2; + color: #475F7B; + } + + .custom-control-label { + padding-top: 2px; + } + } + + .top_title { + height: 60px; + flex-shrink: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-bottom: 1px solid #ebebeb; + box-shadow: -1px 2px 25px 0 rgba(0, 0, 0, 0.1); + } + + .customizer-footer { + align-self: flex-end; + flex-shrink: 0; + border-top: 1px solid rgb(235, 235, 235); + background-color: rgba(255, 255, 255, 0.733); + box-shadow: 0 -4px 25px 0 rgba(0,0,0,.1); + height: 50px; + width: 100%; + + button { + margin-left: 0.5rem; + } + } +} diff --git a/anita_theme_base/static/src/components/customizer/theme_customizer.xml b/anita_theme_base/static/src/components/customizer/theme_customizer.xml new file mode 100644 index 000000000..5f624de0e --- /dev/null +++ b/anita_theme_base/static/src/components/customizer/theme_customizer.xml @@ -0,0 +1,11 @@ + + + + +