|
|
@@ -1,551 +1,558 @@
|
|
|
-@use '../variables' as var;
|
|
|
-@use '../bootstrap/init' as *;
|
|
|
-@use '../atoms/mixins/buttons' as mixins-buttons;
|
|
|
-@use './mixins/count-badge';
|
|
|
-
|
|
|
-// determine optional variables
|
|
|
-$color-list: var(--color-list,var(--color-global));
|
|
|
-$bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
|
|
|
-$color-list-hover: var(--color-list-hover,var(--color-global));
|
|
|
-$color-list-active: $color-reversal !default;
|
|
|
-$bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
|
|
|
-$bgcolor-subnav: var(--bgcolor-subnav);
|
|
|
-$color-table: var(--color-table,white);
|
|
|
-$bgcolor-table: #343a40 !default;
|
|
|
-$border-color-table: lighten($bgcolor-table, 7.5%) !default;
|
|
|
-$color-table-hover: rgba(white, 0.075) !default;
|
|
|
-$bgcolor-table-hover: lighten($bgcolor-table, 7.5%) !default;
|
|
|
-$bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
|
|
|
-$color-tags: #949494 !default;
|
|
|
-$bgcolor-tags: $dark !default;
|
|
|
-$border-color-global: $gray-500 !default;
|
|
|
-$border-color-toc: $border-color-global !default;
|
|
|
-$color-dropdown: var(--color-dropdown,var(--color-global));
|
|
|
-$bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
|
|
|
-$color-dropdown-link: var(--color-dropdown-link,var(--color-global));
|
|
|
-$color-dropdown-link-hover: $light !default;
|
|
|
-$bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover);
|
|
|
-$color-dropdown-link-active: $light !default;
|
|
|
-$bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
|
|
|
-
|
|
|
-// override bootstrap variables
|
|
|
-$text-muted: $gray-550;
|
|
|
-$table-dark-color: var(--color-table);
|
|
|
-$table-dark-bg: $bgcolor-table;
|
|
|
-$table-dark-border-color: $border-color-table;
|
|
|
-$table-dark-hover-color: var(--color-table-hover);
|
|
|
-$table-dark-hover-bg: $bgcolor-table-hover;
|
|
|
-$border-color: $border-color-global;
|
|
|
-$dropdown-color: var(--color-dropdown);
|
|
|
-$dropdown-bg: var(--bgcolor-dropdown);
|
|
|
-$dropdown-link-color: var(--color-dropdown-link);
|
|
|
-$dropdown-link-hover-color: var(--color-dropdown-link-hover);
|
|
|
-$dropdown-link-hover-bg: var(--bgcolor-dropdown-link-hover);
|
|
|
-$dropdown-link-active-color: var(--color-dropdown-link-active);
|
|
|
-$dropdown-link-active-bg: bar(--bgcolor-dropdown-link-active);
|
|
|
-
|
|
|
-@import './mixins/list-group';
|
|
|
-@import './reboot-bootstrap-text';
|
|
|
-@import './reboot-bootstrap-border-colors';
|
|
|
-@import './reboot-bootstrap-tables';
|
|
|
-@import './reboot-bootstrap-dropdown';
|
|
|
-
|
|
|
-// List Group
|
|
|
-@include override-list-group-item(
|
|
|
- var(--color-list),
|
|
|
- var(--bgcolor-sidebar-list-group),
|
|
|
- var(--color-list-hover),
|
|
|
- var(--bgcolor-list-hover),
|
|
|
- var(--color-list-active),
|
|
|
- var(--bgcolor-list-active)
|
|
|
-);
|
|
|
-/*
|
|
|
- * Form
|
|
|
- */
|
|
|
-input.form-control,
|
|
|
-select.form-control,
|
|
|
-select.custom-select,
|
|
|
-textarea.form-control {
|
|
|
- color: var(--color-global);
|
|
|
- background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
|
|
|
- border-color: $border-color-global;
|
|
|
- &:focus {
|
|
|
- background-color: var(--bgcolor-global);
|
|
|
- }
|
|
|
- // FIXME: accent color
|
|
|
- // border: 1px solid darken($border, 30%);
|
|
|
-}
|
|
|
-
|
|
|
-.form-control[disabled],
|
|
|
-.form-control[readonly] {
|
|
|
- color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 10%));
|
|
|
- background-color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 5%));
|
|
|
-}
|
|
|
-
|
|
|
-.input-group > .input-group-prepend > .input-group-text {
|
|
|
- color: theme-color('light');
|
|
|
- background-color: theme-color('secondary');
|
|
|
- border: 1px solid theme-color('secondary');
|
|
|
- border-right: none;
|
|
|
- &.text-muted {
|
|
|
- color: theme-color('light') !important;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.input-group input {
|
|
|
- border-color: $border-color-global;
|
|
|
-}
|
|
|
-
|
|
|
-label.custom-control-label::before {
|
|
|
- background-color: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * Table
|
|
|
- */
|
|
|
-.table {
|
|
|
- @extend .table-dark;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * Card
|
|
|
- */
|
|
|
-.card:not([class*='bg-']):not(.well):not(.card-disabled) {
|
|
|
- @extend .bg-dark;
|
|
|
-}
|
|
|
-
|
|
|
-// [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
|
|
|
-.card.well {
|
|
|
- border-color: $secondary;
|
|
|
-}
|
|
|
-
|
|
|
-.card.card-disabled {
|
|
|
- background-color: lighten($dark, 10%);
|
|
|
- border-color: $secondary;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * Pagination
|
|
|
- */
|
|
|
-ul.pagination {
|
|
|
- li.page-item {
|
|
|
- button.page-link {
|
|
|
- @extend .btn-dark;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI Login form
|
|
|
- */
|
|
|
-.nologin {
|
|
|
- // background color
|
|
|
- $color-gradient: #3c465c;
|
|
|
- background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
|
|
|
- linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
|
|
|
- linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
|
|
|
- linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
|
|
|
-
|
|
|
- .noLogin-header {
|
|
|
- background-color: rgba(black, 0.5);
|
|
|
-
|
|
|
- .logo {
|
|
|
- background-color: rgba(white, 0);
|
|
|
- fill: rgba(white, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- h1 {
|
|
|
- color: rgba(white, 0.5);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .noLogin-dialog {
|
|
|
- background-color: rgba(black, 0.5);
|
|
|
- }
|
|
|
-
|
|
|
- .input-group {
|
|
|
- .input-group-text {
|
|
|
- color: darken(white, 30%);
|
|
|
- background-color: rgba($gray-700, 0.7);
|
|
|
- }
|
|
|
-
|
|
|
- .form-control {
|
|
|
- color: white;
|
|
|
- background-color: rgba(#505050, 0.7);
|
|
|
- box-shadow: unset;
|
|
|
-
|
|
|
- &::placeholder {
|
|
|
- color: darken(white, 30%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-fill {
|
|
|
- .btn-label {
|
|
|
- color: $gray-300;
|
|
|
- }
|
|
|
- .btn-label-text {
|
|
|
- color: $gray-400;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .grw-external-auth-form {
|
|
|
- border-color: gray !important;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-external-auth-tab {
|
|
|
- @extend .btn-dark;
|
|
|
- }
|
|
|
-
|
|
|
- // footer link text
|
|
|
- .link-growi-org {
|
|
|
- color: rgba(white, 0.4);
|
|
|
-
|
|
|
- &:hover,
|
|
|
- &.focus {
|
|
|
- color: rgba(white, 0.7);
|
|
|
-
|
|
|
- .growi {
|
|
|
- color: darken(var.$growi-green, 5%);
|
|
|
- }
|
|
|
-
|
|
|
- .org {
|
|
|
- color: darken(var.$growi-blue, 5%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI subnavigation
|
|
|
- */
|
|
|
-.grw-drawer-toggler {
|
|
|
- @extend .btn-dark;
|
|
|
- color: $gray-400;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI page list
|
|
|
- */
|
|
|
-.page-list {
|
|
|
- .page-list-ul {
|
|
|
- > li {
|
|
|
- > span.page-list-meta {
|
|
|
- color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // List group
|
|
|
- .list-group-item {
|
|
|
- &.active {
|
|
|
- background-color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
|
|
|
- }
|
|
|
- .list-group-item-action:hover {
|
|
|
- background-color: var(--bgcolor-list-hover);
|
|
|
- }
|
|
|
- .page-list-snippet {
|
|
|
- color: hsl(var(--color-global-hs),calc(var(--color-global-l) - 10%));
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI ToC
|
|
|
- */
|
|
|
-.revision-toc-content {
|
|
|
- ::marker {
|
|
|
- color: hsl(var(--color-global-hs),calc(var(--color-global-l) + 30%));
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI subnavigation
|
|
|
- */
|
|
|
-.grw-subnav {
|
|
|
- background-color: var(--bgcolor-subnav);
|
|
|
-}
|
|
|
-
|
|
|
-.grw-subnav-fixed-container .grw-subnav {
|
|
|
- background-color: var(--bgcolor-subnav); opacity:0.85;
|
|
|
-}
|
|
|
-
|
|
|
-.grw-page-editor-mode-manager {
|
|
|
- .btn-outline-primary {
|
|
|
- &:hover {
|
|
|
- color: var(--primary);
|
|
|
- background-color: $gray-700;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// Search drop down
|
|
|
-#search-typeahead-asynctypeahead {
|
|
|
- background-color: var(--bgcolor-global);
|
|
|
- .table {
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI Sidebar
|
|
|
- */
|
|
|
-.grw-sidebar {
|
|
|
- // List
|
|
|
- @include override-list-group-item(
|
|
|
- var(--color-list),
|
|
|
- var(--bgcolor-sidebar-list-group),
|
|
|
- var(--color-list-hover),
|
|
|
- var(--bgcolor-list-hover),
|
|
|
- var(--color-list-active),
|
|
|
- var(--bgcolor-list-active)
|
|
|
- );
|
|
|
- // Pagetree
|
|
|
- .grw-pagetree {
|
|
|
- --bgcolor-sidebar-context: hsl(var(--primary-hs),calc(var(--primary-l) + 77%));
|
|
|
- --bgcolor-sidebar-context-hs: var(--primary-hs);
|
|
|
- --bgcolor-sidebar-context-l: calc(var(--primary-l) + 77%);
|
|
|
- @include override-list-group-item-for-pagetree(
|
|
|
- var(--color-sidebar-context),
|
|
|
- hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 8%)),
|
|
|
- hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 15%)),
|
|
|
- hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) - 15%)),
|
|
|
- hsl(var(--color-sidebar-context-hs),calc(var(--color-sidebar-context-l) - 10%)),
|
|
|
- hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 18%)),
|
|
|
- hsl(var(--bgcolor-sidebar-context-hs),calc(var(--bgcolor-sidebar-context-l) + 24%))
|
|
|
- );
|
|
|
- .grw-pagetree-triangle-btn {
|
|
|
- @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
|
|
|
- }
|
|
|
- .btn-page-item-control {
|
|
|
- @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
|
|
|
- @include hover() {
|
|
|
- background-color: var(--bgcolor-sidebar-context-lighten20);
|
|
|
- }
|
|
|
- &:not(:disabled):not(.disabled):active,
|
|
|
- &:not(:disabled):not(.disabled).active {
|
|
|
- background-color: var(--bgcolor-sidebar-context-lighten34);
|
|
|
- }
|
|
|
- box-shadow: none !important;
|
|
|
- }
|
|
|
- }
|
|
|
- .private-legacy-pages-link {
|
|
|
- &:hover {
|
|
|
- background: var(--bgcolor-list-hover);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.btn.btn-page-item-control {
|
|
|
- @include button-outline-variant($gray-500, $gray-500, $secondary, transparent);
|
|
|
- @include hover() {
|
|
|
- background-color: $gray-700;
|
|
|
- }
|
|
|
- &:not(:disabled):not(.disabled):active,
|
|
|
- &:not(:disabled):not(.disabled).active {
|
|
|
- color: $gray-200;
|
|
|
- background-color: $gray-600;
|
|
|
- }
|
|
|
- box-shadow: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * Popover
|
|
|
- */
|
|
|
-.popover {
|
|
|
- background-color: var(--bgcolor-global);
|
|
|
- border-color: $secondary;
|
|
|
- .popover-header {
|
|
|
- color: $white;
|
|
|
- background-color: $secondary;
|
|
|
- border-color: $secondary;
|
|
|
- }
|
|
|
- .popover-body {
|
|
|
- color: inherit;
|
|
|
- }
|
|
|
-
|
|
|
- &.bs-popover-top .arrow {
|
|
|
- &::before {
|
|
|
- border-top-color: $secondary;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-top-color: var(--bgcolor-global);
|
|
|
- }
|
|
|
- }
|
|
|
- &.bs-popover-bottom .arrow {
|
|
|
- &::before {
|
|
|
- border-bottom-color: $secondary;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-bottom-color: var(--bgcolor-global);
|
|
|
- }
|
|
|
- }
|
|
|
- &.bs-popover-right .arrow {
|
|
|
- &::before {
|
|
|
- border-right-color: $secondary;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-right-color: var(--bgcolor-global);
|
|
|
- }
|
|
|
- }
|
|
|
- &.bs-popover-left .arrow {
|
|
|
- &::before {
|
|
|
- border-left-color: $secondary;
|
|
|
- }
|
|
|
-
|
|
|
- &::after {
|
|
|
- border-left-color: var(--bgcolor-global);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI Grid Edit Modal
|
|
|
- */
|
|
|
-.grw-grid-edit-preview {
|
|
|
- background: $gray-900;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * Slack
|
|
|
- */
|
|
|
-.grw-slack-notification {
|
|
|
- background-color: transparent;
|
|
|
- $color-slack: #4b144c;
|
|
|
-
|
|
|
- .form-control {
|
|
|
- background: var(--bgcolor-global);
|
|
|
- }
|
|
|
-
|
|
|
- .custom-control-label {
|
|
|
- &::before {
|
|
|
- background-color: $secondary;
|
|
|
- border-color: transparent;
|
|
|
- }
|
|
|
- &::after {
|
|
|
- background-color: darken($color-slack, 5%);
|
|
|
- // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .custom-control-input:checked ~ .custom-control-label {
|
|
|
- &::before {
|
|
|
- background-color: lighten($color-slack, 10%);
|
|
|
- }
|
|
|
- &::after {
|
|
|
- background-color: darken($color-slack, 5%);
|
|
|
- // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
|
|
|
- }
|
|
|
- }
|
|
|
- .grw-slack-logo svg {
|
|
|
- fill: #dd80de;
|
|
|
- }
|
|
|
-
|
|
|
- .grw-btn-slack {
|
|
|
- background-color: black;
|
|
|
- &:focus,
|
|
|
- &:hover {
|
|
|
- background-color: black;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .grw-btn-slack-triangle {
|
|
|
- color: $secondary;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI HandsontableModal
|
|
|
- */
|
|
|
-.grw-hot-modal-navbar {
|
|
|
- background-color: $dark;
|
|
|
-}
|
|
|
-
|
|
|
-.wiki {
|
|
|
- h1 {
|
|
|
- border-color: lighten($border-color-theme, 10%);
|
|
|
- }
|
|
|
- h2 {
|
|
|
- border-color: $border-color-theme;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI comment form
|
|
|
- */
|
|
|
-.comment-form {
|
|
|
- #slack-mark-black {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.page-comments-row {
|
|
|
- background: var(--bgcolor-subnav);
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI tags
|
|
|
- */
|
|
|
-.grw-tag-labels {
|
|
|
- .grw-tag-label {
|
|
|
- color: $color-tags;
|
|
|
- background-color: $bgcolor-tags;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * GROWI popular tags
|
|
|
- */
|
|
|
-.grw-popular-tag-labels {
|
|
|
- .grw-tag-label {
|
|
|
- color: $color-tags;
|
|
|
- background-color: $bgcolor-tags;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * admin settings
|
|
|
- */
|
|
|
-.admin-setting-header {
|
|
|
- border-color: $border-color-global;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
-* grw-side-contents
|
|
|
-*/
|
|
|
-.grw-side-contents-sticky-container {
|
|
|
- .grw-count-badge {
|
|
|
- @include count-badge.count-badge($gray-400, $gray-700);
|
|
|
- }
|
|
|
-
|
|
|
- .grw-border-vr {
|
|
|
- border-color: $border-color-toc;
|
|
|
- }
|
|
|
-
|
|
|
- .revision-toc {
|
|
|
- border-color: $border-color-toc;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * drawio
|
|
|
- */
|
|
|
-.drawio-viewer {
|
|
|
- border-color: $border-color-global;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * modal
|
|
|
- */
|
|
|
-.grw-modal-head {
|
|
|
- border-color: $border-color-global;
|
|
|
-}
|
|
|
-
|
|
|
-/*
|
|
|
- * skeleton
|
|
|
- */
|
|
|
-.grw-skeleton {
|
|
|
-}
|
|
|
+// @use '../variables' as var;
|
|
|
+// @use '../bootstrap/init' as *;
|
|
|
+// @use '../atoms/mixins/buttons' as mixins-buttons;
|
|
|
+// @use './mixins/count-badge';
|
|
|
+// @use './mixins/hsl-button';
|
|
|
+// @use './hsl-functions' as hsl;
|
|
|
+
|
|
|
+// // determine optional variables
|
|
|
+// $color-list: var(--color-list,var(--color-global));
|
|
|
+// $bgcolor-list: var(--bgcolor-list,var(--bgcolor-global));
|
|
|
+// $color-list-hover: var(--color-list-hover,var(--color-global));
|
|
|
+// $color-list-active: var(--color-list-active,var(--color-reversal));
|
|
|
+// $bgcolor-list-hover: var(--bgcolor-list-hover,var(--bgcolor-global));
|
|
|
+// $bgcolor-list-active: var(--bgcolor-list-active,var(--primary));
|
|
|
+// $bgcolor-subnav: var(--bgcolor-subnav);
|
|
|
+// $color-table: var(--color-table,white);
|
|
|
+// $bgcolor-table: var(--bgcolor-table,#343a40);
|
|
|
+// $border-color-table: var(--border-color-table,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
|
|
|
+// $color-table-hover: var(--color-table-hover,rgba(white, 0.075));
|
|
|
+// $bgcolor-table-hover: var(--bgcolor-table-hover,hsl.lighten(var(--bgcolor-table),7.5%),lighten(#343a40, 7.5%));
|
|
|
+// $bgcolor-sidebar-list-group: var(--bgcolor-sidebar-list-group,var(--bgcolor-list));
|
|
|
+// $color-tags: var(--color-tags,#949494);
|
|
|
+// $bgcolor-tags: var(--bgcolor-tags,var(--dark));
|
|
|
+// $border-color-global: var(--border-color-global,#{$gray-500});
|
|
|
+// $border-color-toc: var(--border-color-toc,$border-color-global);
|
|
|
+// $color-dropdown: var(--color-dropdown,var(--color-global));
|
|
|
+// $bgcolor-dropdown: var(--bgcolor-dropdown,var(--bgcolor-global));
|
|
|
+// $color-dropdown-link: var(--color-dropdown-link,var(--color-global));
|
|
|
+// $color-dropdown-link-hover: var(--color-dropdown-link-hover,var(--light));
|
|
|
+// $bgcolor-dropdown-link-hover: var(--bgcolor-dropdown-link-hover,var(--primary));
|
|
|
+// $color-dropdown-link-active: var(--color-dropdown-link-active,var(--light));
|
|
|
+// $bgcolor-dropdown-link-active: var(--bgcolor-dropdown-link-active,var(--primary));
|
|
|
+
|
|
|
+// // override bootstrap variables
|
|
|
+// $text-muted: $gray-550;
|
|
|
+// $table-dark-color: $color-table;
|
|
|
+// $table-dark-bg: $bgcolor-table;
|
|
|
+// $table-dark-border-color: $border-color-table;
|
|
|
+// $table-dark-hover-color: $color-table-hover;
|
|
|
+// $table-dark-hover-bg: $bgcolor-table-hover;
|
|
|
+// $border-color: $border-color-global;
|
|
|
+// $dropdown-color: $color-dropdown;
|
|
|
+// $dropdown-bg: $bgcolor-dropdown;
|
|
|
+// $dropdown-link-color: $color-dropdown-link;
|
|
|
+// $dropdown-link-hover-color: $color-dropdown-link-hover;
|
|
|
+// $dropdown-link-hover-bg: $bgcolor-dropdown-link-hover;
|
|
|
+// $dropdown-link-active-color: $color-dropdown-link-active;
|
|
|
+// $dropdown-link-active-bg: $bgcolor-dropdown-link-active;
|
|
|
+
|
|
|
+// @import './mixins/list-group';
|
|
|
+// @import './reboot-bootstrap-text';
|
|
|
+// @import './reboot-bootstrap-border-colors';
|
|
|
+// @import './reboot-bootstrap-tables';
|
|
|
+// @import './reboot-bootstrap-dropdown';
|
|
|
+
|
|
|
+// // List Group
|
|
|
+// @include override-list-group-item(
|
|
|
+// $color-list,
|
|
|
+// $bgcolor-sidebar-list-group,
|
|
|
+// $color-list-hover,
|
|
|
+// $bgcolor-list-hover,
|
|
|
+// $color-list-active,
|
|
|
+// $bgcolor-list-active
|
|
|
+// );
|
|
|
+// /*
|
|
|
+// * Form
|
|
|
+// */
|
|
|
+// input.form-control,
|
|
|
+// select.form-control,
|
|
|
+// select.custom-select,
|
|
|
+// textarea.form-control {
|
|
|
+// color: var(--color-global);
|
|
|
+// background-color: hsl.darken(var(--bgcolor-global), 5%);
|
|
|
+// border-color: $border-color-global;
|
|
|
+// &:focus {
|
|
|
+// background-color: var(--bgcolor-global);
|
|
|
+// }
|
|
|
+// // FIXME: accent color
|
|
|
+// // border: 1px solid darken($border, 30%);
|
|
|
+// }
|
|
|
+
|
|
|
+// .form-control[disabled],
|
|
|
+// .form-control[readonly] {
|
|
|
+// color: hsl.lighten(var(--color-global),10%);
|
|
|
+// background-color: hsl.lighten(var(--color-global),5%);
|
|
|
+// }
|
|
|
+
|
|
|
+// .input-group > .input-group-prepend > .input-group-text {
|
|
|
+// color: theme-color('light');
|
|
|
+// background-color: theme-color('secondary');
|
|
|
+// border: 1px solid theme-color('secondary');
|
|
|
+// border-right: none;
|
|
|
+// &.text-muted {
|
|
|
+// color: theme-color('light') !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .input-group input {
|
|
|
+// border-color: $border-color-global;
|
|
|
+// }
|
|
|
+
|
|
|
+// label.custom-control-label::before {
|
|
|
+// background-color: hsl.darken(var(--bgcolor-global),5%);
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * Table
|
|
|
+// */
|
|
|
+// .table {
|
|
|
+// @extend .table-dark;
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * Card
|
|
|
+// */
|
|
|
+// .card:not([class*='bg-']):not(.well):not(.card-disabled) {
|
|
|
+// @include bg-variant('.bg-dark', $dark);
|
|
|
+// }
|
|
|
+
|
|
|
+// // [TODO] GW-3219 modify common color of well in dark theme, then remove below css.
|
|
|
+// .card.well {
|
|
|
+// border-color: var(--secondary);
|
|
|
+// }
|
|
|
+
|
|
|
+// .card.card-disabled {
|
|
|
+// background-color: lighten($dark, 10%);
|
|
|
+// border-color: var(--secondary);
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * Pagination
|
|
|
+// */
|
|
|
+// ul.pagination {
|
|
|
+// li.page-item {
|
|
|
+// button.page-link {
|
|
|
+// @include button-variant($dark, $dark);
|
|
|
+// @include mixins-buttons.button-svg-icon-variant($dark, $dark);
|
|
|
+// box-shadow: none !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI Login form
|
|
|
+// */
|
|
|
+// .nologin {
|
|
|
+// // background color
|
|
|
+// $color-gradient: #3c465c;
|
|
|
+// background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
|
|
|
+// linear-gradient(135deg, darken(var.$growi-green, 30%) 10%, hsla(225, 95%, 50%, 0) 70%),
|
|
|
+// linear-gradient(225deg, darken(var.$growi-blue, 20%) 10%, hsla(140, 90%, 50%, 0) 80%),
|
|
|
+// linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
|
|
|
+
|
|
|
+// .noLogin-header {
|
|
|
+// background-color: rgba(black, 0.5);
|
|
|
+
|
|
|
+// .logo {
|
|
|
+// background-color: rgba(white, 0);
|
|
|
+// fill: rgba(white, 0.5);
|
|
|
+// }
|
|
|
+
|
|
|
+// h1 {
|
|
|
+// color: rgba(white, 0.5);
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .noLogin-dialog {
|
|
|
+// background-color: rgba(black, 0.5);
|
|
|
+// }
|
|
|
+
|
|
|
+// .input-group {
|
|
|
+// .input-group-text {
|
|
|
+// color: darken(white, 30%);
|
|
|
+// background-color: rgba($gray-700, 0.7);
|
|
|
+// }
|
|
|
+
|
|
|
+// .form-control {
|
|
|
+// color: white;
|
|
|
+// background-color: rgba(#505050, 0.7);
|
|
|
+// box-shadow: unset;
|
|
|
+
|
|
|
+// &::placeholder {
|
|
|
+// color: darken(white, 30%);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .btn-fill {
|
|
|
+// .btn-label {
|
|
|
+// color: $gray-300;
|
|
|
+// }
|
|
|
+// .btn-label-text {
|
|
|
+// color: $gray-400;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .grw-external-auth-form {
|
|
|
+// border-color: gray !important;
|
|
|
+// }
|
|
|
+
|
|
|
+// .btn-external-auth-tab {
|
|
|
+// @include button-variant($dark, $dark);
|
|
|
+// @include mixins-buttons.button-svg-icon-variant($dark, $dark);
|
|
|
+// box-shadow: none !important;
|
|
|
+// }
|
|
|
+
|
|
|
+// // footer link text
|
|
|
+// .link-growi-org {
|
|
|
+// color: rgba(white, 0.4);
|
|
|
+
|
|
|
+// &:hover,
|
|
|
+// &.focus {
|
|
|
+// color: rgba(white, 0.7);
|
|
|
+
|
|
|
+// .growi {
|
|
|
+// color: darken(var.$growi-green, 5%);
|
|
|
+// }
|
|
|
+
|
|
|
+// .org {
|
|
|
+// color: darken(var.$growi-blue, 5%);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI subnavigation
|
|
|
+// */
|
|
|
+// .grw-drawer-toggler {
|
|
|
+// @include button-variant($dark, $dark);
|
|
|
+// @include mixins-buttons.button-svg-icon-variant($dark, $dark);
|
|
|
+// color: #{$gray-400};
|
|
|
+// box-shadow: none !important;
|
|
|
+
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI page list
|
|
|
+// */
|
|
|
+// .page-list {
|
|
|
+// .page-list-ul {
|
|
|
+// > li {
|
|
|
+// > span.page-list-meta {
|
|
|
+// color: hsl.darken(var(--color-global),10%);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// // List group
|
|
|
+// .list-group-item {
|
|
|
+// &.active {
|
|
|
+// background-color: hsl.darken(var(--color-global),10%);
|
|
|
+// }
|
|
|
+// .list-group-item-action:hover {
|
|
|
+// background-color: var(--bgcolor-list-hover);
|
|
|
+// }
|
|
|
+// .page-list-snippet {
|
|
|
+// color: hsl.darken(var(--color-global),10%);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI ToC
|
|
|
+// */
|
|
|
+// .revision-toc-content {
|
|
|
+// ::marker {
|
|
|
+// color: hsl.lighten(var(--color-global),30%);
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI subnavigation
|
|
|
+// */
|
|
|
+// .grw-subnav {
|
|
|
+// background-color: var(--bgcolor-subnav);
|
|
|
+// }
|
|
|
+
|
|
|
+// .grw-subnav-fixed-container .grw-subnav {
|
|
|
+// background-color: hsl.alpha(var(--bgcolor-subnav),15%);
|
|
|
+// }
|
|
|
+
|
|
|
+// .grw-page-editor-mode-manager {
|
|
|
+// .btn-outline-primary {
|
|
|
+// &:hover {
|
|
|
+// color: var(--primary);
|
|
|
+// background-color: $gray-700;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// // Search drop down
|
|
|
+// #search-typeahead-asynctypeahead {
|
|
|
+// background-color: var(--bgcolor-global);
|
|
|
+// .table {
|
|
|
+// background-color: transparent;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI Sidebar
|
|
|
+// */
|
|
|
+// .grw-sidebar {
|
|
|
+// // List
|
|
|
+// @include override-list-group-item(
|
|
|
+// $color-list,
|
|
|
+// $bgcolor-sidebar-list-group,
|
|
|
+// $color-list-hover,
|
|
|
+// $bgcolor-list-hover,
|
|
|
+// $color-list-active,
|
|
|
+// $bgcolor-list-active
|
|
|
+// );
|
|
|
+// // Pagetree
|
|
|
+// .grw-pagetree {
|
|
|
+// @include override-list-group-item-for-pagetree(
|
|
|
+// var(--color-sidebar-context),
|
|
|
+// hsl.lighten(var(--bgcolor-sidebar-context),8%),
|
|
|
+// hsl.lighten(var(--bgcolor-sidebar-context),15%),
|
|
|
+// hsl.darken(var(--color-sidebar-context),15%),
|
|
|
+// hsl.darken(var(--color-sidebar-context),10%),
|
|
|
+// hsl.lighten(var(--bgcolor-sidebar-context),18%),
|
|
|
+// hsl.lighten(var(--bgcolor-sidebar-context),24%)
|
|
|
+// );
|
|
|
+// .grw-pagetree-triangle-btn {
|
|
|
+// @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
|
|
|
+// }
|
|
|
+// .btn-page-item-control {
|
|
|
+// @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
|
|
|
+// @include hover() {
|
|
|
+// background-color: hsl.lighten(var(--bgcolor-sidebar-context),20%);
|
|
|
+// }
|
|
|
+// &:not(:disabled):not(.disabled):active,
|
|
|
+// &:not(:disabled):not(.disabled).active {
|
|
|
+// background-color: hsl.lighten(var(--bgcolor-sidebar-context),34%);
|
|
|
+// }
|
|
|
+// box-shadow: none !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// .private-legacy-pages-link {
|
|
|
+// &:hover {
|
|
|
+// background: var(--bgcolor-list-hover);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .btn.btn-page-item-control {
|
|
|
+// @include hsl-button.button-outline-variant($gray-500, $gray-500, var(--secondary), transparent);
|
|
|
+// @include hover() {
|
|
|
+// background-color: $gray-700;
|
|
|
+// }
|
|
|
+// &:not(:disabled):not(.disabled):active,
|
|
|
+// &:not(:disabled):not(.disabled).active {
|
|
|
+// color: $gray-200;
|
|
|
+// background-color: $gray-600;
|
|
|
+// }
|
|
|
+// box-shadow: none !important;
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * Popover
|
|
|
+// */
|
|
|
+// .popover {
|
|
|
+// background-color: var(--bgcolor-global);
|
|
|
+// border-color: var(--secondary);
|
|
|
+// .popover-header {
|
|
|
+// color: white;
|
|
|
+// background-color: var(--secondary);
|
|
|
+// border-color: var(--secondary);
|
|
|
+// }
|
|
|
+// .popover-body {
|
|
|
+// color: inherit;
|
|
|
+// }
|
|
|
+
|
|
|
+// &.bs-popover-top .arrow {
|
|
|
+// &::before {
|
|
|
+// border-top-color: var(--secondary);
|
|
|
+// }
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// border-top-color: var(--bgcolor-global);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// &.bs-popover-bottom .arrow {
|
|
|
+// &::before {
|
|
|
+// border-bottom-color: var(--secondary);
|
|
|
+// }
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// border-bottom-color: var(--bgcolor-global);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// &.bs-popover-right .arrow {
|
|
|
+// &::before {
|
|
|
+// border-right-color: var(--secondary);
|
|
|
+// }
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// border-right-color: var(--bgcolor-global);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// &.bs-popover-left .arrow {
|
|
|
+// &::before {
|
|
|
+// border-left-color: var(--secondary);
|
|
|
+// }
|
|
|
+
|
|
|
+// &::after {
|
|
|
+// border-left-color: var(--bgcolor-global);
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI Grid Edit Modal
|
|
|
+// */
|
|
|
+// .grw-grid-edit-preview {
|
|
|
+// background: $gray-900;
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * Slack
|
|
|
+// */
|
|
|
+// .grw-slack-notification {
|
|
|
+// background-color: transparent;
|
|
|
+// $color-slack: #4b144c;
|
|
|
+
|
|
|
+// .form-control {
|
|
|
+// background: var(--bgcolor-global);
|
|
|
+// }
|
|
|
+
|
|
|
+// .custom-control-label {
|
|
|
+// &::before {
|
|
|
+// background-color: var(--secondary);
|
|
|
+// border-color: transparent;
|
|
|
+// }
|
|
|
+// &::after {
|
|
|
+// background-color: darken($color-slack, 5%);
|
|
|
+// // background-image: url(/images/icons/slack/slack-logo-dark-off.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .custom-control-input:checked ~ .custom-control-label {
|
|
|
+// &::before {
|
|
|
+// background-color: lighten($color-slack, 10%);
|
|
|
+// }
|
|
|
+// &::after {
|
|
|
+// background-color: darken($color-slack, 5%);
|
|
|
+// // background-image: url(/images/icons/slack/slack-logo-dark-on.svg); -- should be specified in app -- 2022.12.09 Yuki Takei
|
|
|
+// }
|
|
|
+// }
|
|
|
+// .grw-slack-logo svg {
|
|
|
+// fill: #dd80de;
|
|
|
+// }
|
|
|
+
|
|
|
+// .grw-btn-slack {
|
|
|
+// background-color: black;
|
|
|
+// &:focus,
|
|
|
+// &:hover {
|
|
|
+// background-color: black;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .grw-btn-slack-triangle {
|
|
|
+// color: var(--secondary);
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI HandsontableModal
|
|
|
+// */
|
|
|
+// .grw-hot-modal-navbar {
|
|
|
+// background-color: var(--dark);
|
|
|
+// }
|
|
|
+
|
|
|
+// .wiki {
|
|
|
+// h1 {
|
|
|
+// border-color: hsl.lighten(var(--border-color-theme),10%);
|
|
|
+// }
|
|
|
+// h2 {
|
|
|
+// border-color: var(--border-color-theme);
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI comment form
|
|
|
+// */
|
|
|
+// .comment-form {
|
|
|
+// #slack-mark-black {
|
|
|
+// display: none;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .page-comments-row {
|
|
|
+// background: var(--bgcolor-subnav);
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI tags
|
|
|
+// */
|
|
|
+// .grw-tag-labels {
|
|
|
+// .grw-tag-label {
|
|
|
+// color: $color-tags;
|
|
|
+// background-color: $bgcolor-tags;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * GROWI popular tags
|
|
|
+// */
|
|
|
+// .grw-popular-tag-labels {
|
|
|
+// .grw-tag-label {
|
|
|
+// color: $color-tags;
|
|
|
+// background-color: $bgcolor-tags;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * admin settings
|
|
|
+// */
|
|
|
+// .admin-setting-header {
|
|
|
+// border-color: $border-color-global;
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * grw-side-contents
|
|
|
+// */
|
|
|
+// .grw-side-contents-sticky-container {
|
|
|
+// .grw-count-badge {
|
|
|
+// @include count-badge.count-badge($gray-400, $gray-700);
|
|
|
+// }
|
|
|
+
|
|
|
+// .grw-border-vr {
|
|
|
+// border-color: $border-color-toc;
|
|
|
+// }
|
|
|
+
|
|
|
+// .revision-toc {
|
|
|
+// border-color: $border-color-toc;
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * drawio
|
|
|
+// */
|
|
|
+// .drawio-viewer {
|
|
|
+// border-color: $border-color-global;
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * modal
|
|
|
+// */
|
|
|
+// .grw-modal-head {
|
|
|
+// border-color: $border-color-global;
|
|
|
+// }
|
|
|
+
|
|
|
+// /*
|
|
|
+// * skeleton
|
|
|
+// */
|
|
|
+// .grw-skeleton {
|
|
|
+// }
|
ayaka0417