|
|
@@ -0,0 +1,710 @@
|
|
|
+@use '@growi/core/scss/bootstrap/init' as *;
|
|
|
+
|
|
|
+@use '../variables' as var;
|
|
|
+@use '../mixins';
|
|
|
+@use '../atoms/mixins/code';
|
|
|
+@use './mixins/hsl-button';
|
|
|
+@use './hsl-functions' as hsl;
|
|
|
+
|
|
|
+@import 'apply-colors-dark';
|
|
|
+@import 'apply-colors-light';
|
|
|
+
|
|
|
+//
|
|
|
+//== Apply to Bootstrap
|
|
|
+//
|
|
|
+
|
|
|
+// determine optional variables
|
|
|
+$bgcolor-search-top-dropdown: var(--bgcolor-search-top-dropdown,var(--secondary));
|
|
|
+$bgcolor-sidebar-nav-item-active: var(--bgcolor-sidebar-nav-item-active,#{hsl.darken(var(--primary),10%)});
|
|
|
+$text-shadow-sidebar-nav-item-active: var(--text-shadow-sidebar-nav-item-active,1px 1px 2px var(--primary));
|
|
|
+$bgcolor-inline-code: var(--bgcolor-inline-code, #{$gray-100});
|
|
|
+$color-inline-code: var(--color-inline-code, #{darken($red, 15%)});
|
|
|
+$bordercolor-inline-code: var(--bordercolor-inline-code, #{$gray-400});
|
|
|
+$bordercolor-nav-tabs: var(--bordercolor-nav-tabs, #{$gray-300});
|
|
|
+$bordercolor-nav-tabs-hover: var(--bordercolor-nav-tabs-hover,#{$gray-200} #{$gray-200} #{$bordercolor-nav-tabs});
|
|
|
+$border-nav-tabs-link-active: var(--border-nav-tabs-link-active, #{$gray-600});
|
|
|
+$bordercolor-nav-tabs-active: var(--bordercolor-nav-tabs-active,$bordercolor-nav-tabs $bordercolor-nav-tabs var(--bgcolor-global));
|
|
|
+$color-btn-reload-in-sidebar: var(--color-btn-reload-in-sidebar,#{$gray-500});
|
|
|
+$bgcolor-keyword-highlighted: var(--bgcolor-keyword-highlighted,#{var.$grw-marker-yellow});
|
|
|
+$color-page-list-group-item-meta: var(--color-page-list-group-item-meta,#{$gray-500});
|
|
|
+$color-search-page-list-title: var(--color-search-page-list-title,var(--color-global));
|
|
|
+
|
|
|
+// override bootstrap variables
|
|
|
+$body-bg: var(--bgcolor-global);
|
|
|
+$body-color: var(--color-global);
|
|
|
+$link-color: var(--color-link);
|
|
|
+$link-hover-color: var(--color-link-hover);
|
|
|
+$input-focus-color: var(--color-global);
|
|
|
+$nav-tabs-border-color: $bordercolor-nav-tabs;
|
|
|
+$nav-tabs-link-hover-border-color: $bordercolor-nav-tabs-hover;
|
|
|
+$nav-tabs-link-active-color: var(--color-nav-tabs-link-active);
|
|
|
+$nav-tabs-link-active-bg: var(--bgcolor-global);
|
|
|
+$nav-tabs-link-active-border-color: $bordercolor-nav-tabs-active;
|
|
|
+$theme-colors: map-merge($theme-colors, ( primary: $primary ));
|
|
|
+
|
|
|
+// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
|
|
|
+// @import 'reboot-bootstrap-buttons';
|
|
|
+// @import 'reboot-bootstrap-colors';
|
|
|
+// @import 'reboot-bootstrap-theme-colors';
|
|
|
+// @import 'hsl-reboot-bootstrap-theme-colors';
|
|
|
+// @import 'reboot-bootstrap-nav';
|
|
|
+// @import 'reboot-toastr-colors';
|
|
|
+
|
|
|
+// determine variables with bootstrap function (These variables can be used after importing bootstrap above)
|
|
|
+$color-modal-header: var(--color-modal-header,#{hsl.contrast(var(--primary))});
|
|
|
+
|
|
|
+code:not([class^='language-']) {
|
|
|
+ @include code.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
|
|
|
+}
|
|
|
+
|
|
|
+.code-highlighted {
|
|
|
+ border-color: $bordercolor-inline-code;
|
|
|
+}
|
|
|
+
|
|
|
+//
|
|
|
+//== Apply to Bootstrap Elements
|
|
|
+//
|
|
|
+
|
|
|
+// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
|
|
|
+// theme-color-level() dropped in bootstrap v5
|
|
|
+// Alert link
|
|
|
+// @each $color, $value in $theme-colors {
|
|
|
+// .alert.alert-#{$color} {
|
|
|
+// a,
|
|
|
+// a:hover {
|
|
|
+// color: theme-color-level($color, $alert-color-level - 2);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// Dropdown
|
|
|
+.grw-apperance-mode-dropdown {
|
|
|
+ .grw-sidebar-mode-icon svg {
|
|
|
+ fill: var(--secondary);
|
|
|
+ }
|
|
|
+ .grw-color-mode-icon svg {
|
|
|
+ fill: var(--color-global);
|
|
|
+ }
|
|
|
+ .grw-color-mode-icon-muted svg {
|
|
|
+ fill: var(--secondary);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// TODO: activate (https://redmine.weseek.co.jp/issues/128307)
|
|
|
+// form-control-focus() dropped in bootstrap v5
|
|
|
+// Form
|
|
|
+// .form-control {
|
|
|
+// @include form-control-focus();
|
|
|
+// }
|
|
|
+
|
|
|
+// Tabs
|
|
|
+.nav.nav-tabs .nav-link.active {
|
|
|
+ color: var(--color-link);
|
|
|
+ background: transparent;
|
|
|
+
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ color: var(--color-link-hover);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// Pagination
|
|
|
+ul.pagination {
|
|
|
+ li.page-item.disabled {
|
|
|
+ button.page-link {
|
|
|
+ color: $gray-400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li.page-item.active {
|
|
|
+ button.page-link {
|
|
|
+ color: hsl.contrast(var(--primary));
|
|
|
+ background-color: var(--primary);
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ color: hsl.contrast(var(--primary));
|
|
|
+ background-color: var(--primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ li.page-item {
|
|
|
+ button.page-link {
|
|
|
+ color: var(--primary);
|
|
|
+ border-color: var(--secondary) !important;
|
|
|
+ &:hover,
|
|
|
+ &:active,
|
|
|
+ &:focus {
|
|
|
+ color: var(--primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//
|
|
|
+//== Apply to Handsontable
|
|
|
+//
|
|
|
+.handsontable {
|
|
|
+ color: initial;
|
|
|
+}
|
|
|
+
|
|
|
+//
|
|
|
+//== Apply to GROWI Elements
|
|
|
+//
|
|
|
+
|
|
|
+.grw-logo {
|
|
|
+ // set transition for fill
|
|
|
+ svg, svg * {
|
|
|
+ transition: fill 0.8s ease-out;
|
|
|
+ }
|
|
|
+
|
|
|
+ svg {
|
|
|
+ fill: var(--fillcolor-logo-mark);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ svg {
|
|
|
+ .group1 {
|
|
|
+ fill: var.$growi-green;
|
|
|
+ }
|
|
|
+
|
|
|
+ .group2 {
|
|
|
+ fill: var.$growi-blue;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.grw-navbar {
|
|
|
+ background: var(--bgcolor-navbar);
|
|
|
+ .nav-item .nav-link {
|
|
|
+ color: var(--color-link-nabvar);
|
|
|
+ }
|
|
|
+
|
|
|
+ border-image: var(--border-image-navbar) !important;
|
|
|
+ border-image-slice: 1 !important;
|
|
|
+
|
|
|
+ .grw-app-title {
|
|
|
+ color: var(--fillcolor-logo-mark);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.grw-global-search {
|
|
|
+ .btn-secondary.dropdown-toggle {
|
|
|
+ @include hsl-button.button-variant(var(--bgcolor-search-top-dropdown), var(--bgcolor-search-top-dropdown));
|
|
|
+ }
|
|
|
+
|
|
|
+ // for https://youtrack.weseek.co.jp/issue/GW-2603
|
|
|
+ .search-typeahead {
|
|
|
+ background-color: hsl.alpha(var(--bgcolor-global),10%);
|
|
|
+ }
|
|
|
+ input.form-control {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.grw-sidebar {
|
|
|
+ $color-resize-button: var(--color-resize-button,var(--color-global));
|
|
|
+ $bgcolor-resize-button: var(--bgcolor-resize-button,white);
|
|
|
+ $color-resize-button-hover: var(--color-resize-button-hover,var(--color-reversal));
|
|
|
+ $bgcolor-resize-button-hover: var(--bgcolor-resize-button-hover,#{hsl.lighten(var(--bgcolor-resize-button), 5%)});
|
|
|
+ // .grw-navigation-resize-button {
|
|
|
+ // .hexagon-container svg {
|
|
|
+ // .background {
|
|
|
+ // fill: var(--bgcolor-resize-button);
|
|
|
+ // }
|
|
|
+ // .icon {
|
|
|
+ // fill: var(--color-resize-button);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // &:hover .hexagon-container svg {
|
|
|
+ // .background {
|
|
|
+ // fill: var(--bgcolor-resize-button-hover);
|
|
|
+ // }
|
|
|
+ // .icon {
|
|
|
+ // fill: var(--color-resize-button-hover);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ div.grw-contextual-navigation {
|
|
|
+ > div {
|
|
|
+ color: var(--color-sidebar-context);
|
|
|
+ background-color: var(--bgcolor-sidebar-context);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-sidebar-nav {
|
|
|
+ .btn {
|
|
|
+ @include hsl-button.button-variant(
|
|
|
+ var(--bgcolor-sidebar),
|
|
|
+ var(--bgcolor-sidebar),
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .grw-sidebar-nav-primary-container {
|
|
|
+ .btn.active {
|
|
|
+ i {
|
|
|
+ text-shadow: $text-shadow-sidebar-nav-item-active;
|
|
|
+ }
|
|
|
+ // fukidashi
|
|
|
+ &:after {
|
|
|
+ border-right-color: var(--bgcolor-sidebar-context) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-sidebar-content-header {
|
|
|
+ .grw-btn-reload {
|
|
|
+ color: $color-btn-reload-in-sidebar;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-recent-changes-resize-button {
|
|
|
+ .form-check-label::before {
|
|
|
+ background-color: var(--primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-check-label::after {
|
|
|
+ background-color: var(--bgcolor-global);
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-check-input:not(:checked) + .form-check-label::before {
|
|
|
+ color: var(--bgcolor-global);
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-check-input:checked + .form-check-label::before {
|
|
|
+ color: var(--bgcolor-global);
|
|
|
+ background-color: var(--primary);
|
|
|
+ border-color: var(--primary);
|
|
|
+ }
|
|
|
+ .form-check-input:checked + .form-check-label::after {
|
|
|
+ color: var(--bgcolor-global);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-pagetree, .grw-foldertree {
|
|
|
+ .list-group-item {
|
|
|
+ .grw-pagetree-title-anchor, .grw-foldertree-title-anchor {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-pagetree-footer {
|
|
|
+ .h5.grw-private-legacy-pages-anchor {
|
|
|
+ color: inherit;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-recent-changes {
|
|
|
+ .list-group {
|
|
|
+ .list-group-item {
|
|
|
+ background-color: transparent !important;
|
|
|
+
|
|
|
+ .icon-lock {
|
|
|
+ color: var(--color-link);
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-recent-changes-item-lower {
|
|
|
+ color: $gray-500;
|
|
|
+
|
|
|
+ svg {
|
|
|
+ fill: $gray-500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * Icon
|
|
|
+ */
|
|
|
+.editor-container .navbar-editor svg {
|
|
|
+ fill: var(--color-editor-icons);
|
|
|
+}
|
|
|
+
|
|
|
+// page preview button in link form
|
|
|
+.btn-page-preview svg {
|
|
|
+ fill: white;
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * Modal
|
|
|
+ */
|
|
|
+.modal {
|
|
|
+ .modal-header {
|
|
|
+ border-bottom-color: var(--border-color-theme);
|
|
|
+ .modal-title {
|
|
|
+ color: $color-modal-header;
|
|
|
+ }
|
|
|
+ .btn-close {
|
|
|
+ color: $color-modal-header;
|
|
|
+ opacity: 0.5;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-content {
|
|
|
+ background-color: var(--bgcolor-global);
|
|
|
+ }
|
|
|
+
|
|
|
+ .modal-footer {
|
|
|
+ border-top-color: var(--border-color-theme);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.grw-page-accessories-modal,.grw-descendants-page-list-modal {
|
|
|
+ .modal-header {
|
|
|
+ .btn-close {
|
|
|
+ color: #{hsl.contrast(var(--bgcolor-global))};
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.grw-custom-nav-tab {
|
|
|
+ .nav-item {
|
|
|
+ &:hover,
|
|
|
+ &:focus {
|
|
|
+ background-color: hsl.alpha(var(--color-link),10%);
|
|
|
+ }
|
|
|
+ .nav-link {
|
|
|
+ -webkit-appearance: none;
|
|
|
+ color: var(--color-link);
|
|
|
+ svg {
|
|
|
+ fill: var(--color-link);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Disabled state lightens text
|
|
|
+ &.disabled {
|
|
|
+ color: $nav-link-disabled-color;
|
|
|
+ svg {
|
|
|
+ fill: $nav-link-disabled-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grw-nav-slide-hr {
|
|
|
+ border-color: var(--color-link) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * cards
|
|
|
+ */
|
|
|
+.card.custom-card {
|
|
|
+ color: var(--color-global);
|
|
|
+ background-color: var(--bgcolor-card);
|
|
|
+ border-color: var(--light);
|
|
|
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * Form Slider
|
|
|
+ */
|
|
|
+.admin-page {
|
|
|
+ span.slider {
|
|
|
+ background-color: $gray-300;
|
|
|
+
|
|
|
+ &:before {
|
|
|
+ background-color: white;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ input:checked + .slider {
|
|
|
+ background-color: #007bff;
|
|
|
+ }
|
|
|
+
|
|
|
+ input:focus + .slider {
|
|
|
+ box-shadow: 0 0 1px #007bff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI wiki
|
|
|
+ */
|
|
|
+.wiki {
|
|
|
+ h1,
|
|
|
+ h2,
|
|
|
+ h3,
|
|
|
+ h4,
|
|
|
+ h5,
|
|
|
+ h6,
|
|
|
+ h7 {
|
|
|
+ &.blink {
|
|
|
+ @include mixins.blink-bgcolor(var(--bgcolor-blinked-section));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlighted-keyword {
|
|
|
+ background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: var(--color-link-wiki);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: var(--color-link-wiki-hover);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // table with handsontable modal button
|
|
|
+ .editable-with-handsontable {
|
|
|
+ button {
|
|
|
+ color: var(--color-link-wiki);
|
|
|
+ }
|
|
|
+
|
|
|
+ button:hover {
|
|
|
+ color: var(--color-link-wiki-hover);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI page-list
|
|
|
+ */
|
|
|
+.page-list {
|
|
|
+ // List group
|
|
|
+ .list-group {
|
|
|
+ .list-group-item {
|
|
|
+ background-color: var(--bgcolor-global) !important;
|
|
|
+ a {
|
|
|
+ svg {
|
|
|
+ fill: var(--color-global);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ svg {
|
|
|
+ fill: var(--color-global);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-list-meta {
|
|
|
+ color: $color-page-list-group-item-meta;
|
|
|
+ svg {
|
|
|
+ fill: $color-page-list-group-item-meta;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.list-group-item-action {
|
|
|
+ background-color: var(--bgcolor-list);
|
|
|
+ &.active {
|
|
|
+ border-left-color: var(--primary);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI Editor
|
|
|
+ */
|
|
|
+.layout-root.editing {
|
|
|
+ background-color: hsl.darken(var(--bgcolor-global),2%);
|
|
|
+
|
|
|
+ &.builtin-editor {
|
|
|
+ .page-editor-editor-container {
|
|
|
+ border-right-color: var(--border-color-theme);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-editor {
|
|
|
+ background-color: var(--bgcolor-global); // same color with active tab
|
|
|
+ border-bottom-color: var(--border-color-theme);
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-editor-preview-container {
|
|
|
+ background-color: var(--bgcolor-global);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/*
|
|
|
+ * Preview for editing /Sidebar
|
|
|
+ */
|
|
|
+.page-editor-preview-body.preview-sidebar {
|
|
|
+ color: var(--color-sidebar-context);
|
|
|
+ background-color: var(--bgcolor-sidebar-context);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI Grid Edit Modal
|
|
|
+ */
|
|
|
+.grw-grid-edit-preview {
|
|
|
+ .desktop-preview,
|
|
|
+ .tablet-preview,
|
|
|
+ .mobile-preview {
|
|
|
+ background: var(--bgcolor-global);
|
|
|
+ }
|
|
|
+ .grid-edit-border-for-each-cols {
|
|
|
+ border: 2px solid var(--bgcolor-global);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.grid-preview-col-0 {
|
|
|
+ background: var.$growi-blue;
|
|
|
+}
|
|
|
+
|
|
|
+.grid-preview-col-1 {
|
|
|
+ background: var(--info);
|
|
|
+}
|
|
|
+
|
|
|
+.grid-preview-col-2 {
|
|
|
+ background: var(--success);
|
|
|
+}
|
|
|
+
|
|
|
+.grid-preview-col-3 {
|
|
|
+ background: var.$growi-green;
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI comment form
|
|
|
+ */
|
|
|
+.page-comments-row {
|
|
|
+ background: var(--bgcolor-subnav);
|
|
|
+ .page-comment .page-comment-main,
|
|
|
+ .page-comment-form .comment-form-main {
|
|
|
+ background-color: var(--bgcolor-global);
|
|
|
+
|
|
|
+ .nav.nav-tabs {
|
|
|
+ > li > a.active {
|
|
|
+ background: transparent;
|
|
|
+ border-bottom: solid 1px hsl.darken(var(--bgcolor-global),4%);
|
|
|
+ border-bottom-color: hsl.darken(var(--bgcolor-global),4%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI search result
|
|
|
+ */
|
|
|
+.search-result-base {
|
|
|
+ .grw-search-page-nav {
|
|
|
+ background-color: var(--bgcolor-subnav);
|
|
|
+ }
|
|
|
+ .search-control {
|
|
|
+ background-color: var(--bgcolor-global);
|
|
|
+ }
|
|
|
+ .page-list {
|
|
|
+ .highlighted-keyword {
|
|
|
+ background: linear-gradient(transparent 60%, $bgcolor-keyword-highlighted 60%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * react bootstrap typeahead
|
|
|
+ */
|
|
|
+mark.rbt-highlight-text {
|
|
|
+ // Temporarily the highlight color is black
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI page content footer
|
|
|
+ */
|
|
|
+.page-content-footer {
|
|
|
+ background-color: hsl.darken(var(--bgcolor-global),2%);
|
|
|
+ border-top-color: var(--border-color-theme);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * GROWI admin page #layoutOptions #themeOptions
|
|
|
+ */
|
|
|
+.admin-page {
|
|
|
+ #layoutOptions {
|
|
|
+ .customize-layout-card {
|
|
|
+ &.border-active {
|
|
|
+ border-color: var(--color-theme-color-box);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ #themeOptions {
|
|
|
+ .theme-option-container.active {
|
|
|
+ .theme-option-name {
|
|
|
+ color: var(--color-global);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ background-color: var(--color-theme-color-box);
|
|
|
+ border-color: var(--color-theme-color-box);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * HackMd
|
|
|
+ */
|
|
|
+.bg-box {
|
|
|
+ background-color: var(--bgcolor-global);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ Slack Integration
|
|
|
+*/
|
|
|
+.selecting-bot-type {
|
|
|
+ .bot-type-disc {
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ In App Notification
|
|
|
+*/
|
|
|
+.grw-unopend-notification {
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ background-color: var(--primary);
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+Emoji picker modal
|
|
|
+*/
|
|
|
+.emoji-picker-modal {
|
|
|
+ background-color: transparent !important;
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+Expand / compress button bookmark list on users page
|
|
|
+*/
|
|
|
+.grw-user-page-list-m {
|
|
|
+ .grw-expand-compress-btn {
|
|
|
+ color: $body-color;
|
|
|
+ background-color: $body-bg;
|
|
|
+ &.active {
|
|
|
+ background-color: hsl.darken($body-bg, 12%),
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * Questionnaire modal
|
|
|
+ */
|
|
|
+.grw-questionnaire-btn-group {
|
|
|
+ .btn-outline-primary {
|
|
|
+ @include hsl-button.button-outline-variant(
|
|
|
+ #{hsl.lighten(var(--primary), 30%)} !important,
|
|
|
+ #{hsl.contrast(var(--primary))} !important,
|
|
|
+ var(--primary) !important,
|
|
|
+ #{hsl.lighten(var(--primary), 30%)} !important,
|
|
|
+ );
|
|
|
+ &:not(:disabled):not(.disabled):active,
|
|
|
+ &:not(:disabled):not(.disabled).active {
|
|
|
+ color: #{hsl.contrast(var(--primary))} !important;
|
|
|
+ background-color: var(--primary) !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/*
|
|
|
+ * revision-history-diff
|
|
|
+ */
|
|
|
+.revision-history-diff {
|
|
|
+ background-color: white;
|
|
|
+}
|
Yuki Takei