|
|
@@ -34,7 +34,7 @@
|
|
|
$body-color: var(--color-global);
|
|
|
|
|
|
// override bootstrap variables
|
|
|
- $text-muted: $gray-550;
|
|
|
+ // $text-muted: $gray-550;
|
|
|
$table-dark-color: $color-table;
|
|
|
$table-dark-bg: $bgcolor-table;
|
|
|
$table-dark-border-color: $border-color-table;
|
|
|
@@ -50,613 +50,613 @@
|
|
|
$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-theme-colors';
|
|
|
- @import 'hsl-reboot-bootstrap-theme-colors';
|
|
|
- @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(--bgcolor-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%);
|
|
|
- }
|
|
|
-
|
|
|
- .rbt-input-multi .rbt-input-main {
|
|
|
- color: black;
|
|
|
- }
|
|
|
- /*
|
|
|
- * Table
|
|
|
- */
|
|
|
- .table {
|
|
|
- @extend .table-dark;
|
|
|
- thead th {
|
|
|
- vertical-align: bottom;
|
|
|
- border-bottom: 2px solid #d6dadf;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * 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: var(--secondary);
|
|
|
- }
|
|
|
-
|
|
|
- .card.card-disabled {
|
|
|
- background-color: lighten($dark, 10%);
|
|
|
- border-color: var(--secondary);
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * 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 {
|
|
|
- @extend .btn-dark;
|
|
|
- color: var(--primary);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * 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);
|
|
|
- .link-switch {
|
|
|
- color: #7b9bd5;
|
|
|
- @include hover() {
|
|
|
- color: lighten(#7b9bd5,10%);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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 {
|
|
|
- @include button-variant($dark, $dark);
|
|
|
- @include mixins-buttons.button-svg-icon-variant($dark, $dark);
|
|
|
- color: $gray-400;
|
|
|
- box-shadow: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- /**
|
|
|
- * GROWI PagePathHierarchicalLink
|
|
|
- */
|
|
|
- .grw-page-path-text-muted-container .grw-page-path-hierarchical-link a {
|
|
|
- color: $gray-400;
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * 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.lighten(var(--bgcolor-global),10%) !important;
|
|
|
- }
|
|
|
- &.list-group-item-action:hover {
|
|
|
- background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
|
|
|
- }
|
|
|
- .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),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 {
|
|
|
- --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
|
|
|
- --gray-500-hs: 210,13%;
|
|
|
- --gray-500-l: 61%;
|
|
|
- // 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, .grw-foldertree {
|
|
|
- @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, .grw-foldertree-triangle-btn {
|
|
|
- @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
|
|
|
- }
|
|
|
- .btn-page-item-control {
|
|
|
- @include hsl-button.button-outline-variant(var(--gray-500), var(--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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // bookmarks
|
|
|
- .grw-folder-tree-container {
|
|
|
- .grw-drop-item-area , .grw-foldertree-item-container {
|
|
|
- .grw-accept-drop-item {
|
|
|
- border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%) !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .private-legacy-pages-link {
|
|
|
- &:hover {
|
|
|
- background: var(--bgcolor-list-hover);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn.btn-page-item-control {
|
|
|
- @include hsl-button.button-outline-variant(var(--gray-500), var(--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;
|
|
|
- }
|
|
|
-
|
|
|
- // Bookmark item on user page
|
|
|
- .grw-user-page-list-m {
|
|
|
- @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
|
|
|
- .grw-foldertree {
|
|
|
- @include override-list-group-item-for-pagetree(
|
|
|
- $body-color,
|
|
|
- hsl.lighten($body-bg, 8%),
|
|
|
- hsl.lighten($body-bg, 15%),
|
|
|
- hsl.darken($body-color, 15%),
|
|
|
- hsl.darken($body-color, 10%),
|
|
|
- hsl.lighten($body-bg, 18%),
|
|
|
- hsl.lighten($body-bg, 24%)
|
|
|
- );
|
|
|
- .grw-foldertree-triangle-btn {
|
|
|
- @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
|
|
|
- }
|
|
|
- }
|
|
|
- .grw-folder-tree-container {
|
|
|
- .grw-drop-item-area , .grw-foldertree-item-container {
|
|
|
- .grw-accept-drop-item {
|
|
|
- border-color: hsl.lighten(var($body-bg), 30%) !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // Bookmark dropdown menu
|
|
|
- .grw-bookmark-folder-dropdown {
|
|
|
- .grw-bookmark-folder-menu {
|
|
|
- .form-control{
|
|
|
- &:focus {
|
|
|
- color: $body-color
|
|
|
- }
|
|
|
- }
|
|
|
- .grw-bookmark-folder-menu-item {
|
|
|
- @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
|
|
|
- .grw-bookmark-folder-menu-item-title {
|
|
|
- color: $body-color
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * 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);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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);
|
|
|
- }
|
|
|
- }
|
|
|
- .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
|
|
|
- */
|
|
|
-
|
|
|
- .handsontable td {
|
|
|
- color: black;
|
|
|
- }
|
|
|
-
|
|
|
- .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-comment-form .comment-form-main {
|
|
|
- &:before {
|
|
|
- border-right-color: var(--bgcolor-global);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * GROWI tags
|
|
|
- */
|
|
|
- .grw-tag-labels {
|
|
|
- .grw-tag-label {
|
|
|
- color: $color-tags;
|
|
|
- background-color: $bgcolor-tags;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- mark.rbt-highlight-text {
|
|
|
- color: var(--color-global);
|
|
|
- }
|
|
|
-
|
|
|
- /*
|
|
|
- * 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 {
|
|
|
- background-color: hsl.lighten(var(--bgcolor-subnav),10%);
|
|
|
- }
|
|
|
+ // @import './reboot-bootstrap-text';
|
|
|
+ // @import './reboot-bootstrap-border-colors';
|
|
|
+ // @import './reboot-bootstrap-tables';
|
|
|
+ // @import './reboot-bootstrap-theme-colors';
|
|
|
+ // @import 'hsl-reboot-bootstrap-theme-colors';
|
|
|
+ // @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(--bgcolor-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%);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .rbt-input-multi .rbt-input-main {
|
|
|
+ // color: black;
|
|
|
+ // }
|
|
|
+ // /*
|
|
|
+ // * Table
|
|
|
+ // */
|
|
|
+ // .table {
|
|
|
+ // @extend .table-dark !optional;
|
|
|
+ // thead th {
|
|
|
+ // vertical-align: bottom;
|
|
|
+ // border-bottom: 2px solid #d6dadf;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /*
|
|
|
+ // * 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: var(--secondary);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .card.card-disabled {
|
|
|
+ // background-color: lighten($dark, 10%);
|
|
|
+ // border-color: var(--secondary);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /*
|
|
|
+ // * 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 {
|
|
|
+ // @extend .btn-dark;
|
|
|
+ // color: var(--primary);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /*
|
|
|
+ // * 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);
|
|
|
+ // .link-switch {
|
|
|
+ // color: #7b9bd5;
|
|
|
+ // &:hover {
|
|
|
+ // color: lighten(#7b9bd5,10%);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .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 {
|
|
|
+ // @include button-variant($dark, $dark);
|
|
|
+ // @include mixins-buttons.button-svg-icon-variant($dark, $dark);
|
|
|
+ // color: $gray-400;
|
|
|
+ // box-shadow: none !important;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /**
|
|
|
+ // * GROWI PagePathHierarchicalLink
|
|
|
+ // */
|
|
|
+ // .grw-page-path-text-muted-container .grw-page-path-hierarchical-link a {
|
|
|
+ // color: $gray-400;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /*
|
|
|
+ // * 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.lighten(var(--bgcolor-global),10%) !important;
|
|
|
+ // }
|
|
|
+ // &.list-group-item-action:hover {
|
|
|
+ // background-color: hsl.lighten(var(--bgcolor-global),10%) !important;
|
|
|
+ // }
|
|
|
+ // .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),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 {
|
|
|
+ // --gray-500: hsl(var(--gray-500-hs),var(--gray-500-l));
|
|
|
+ // --gray-500-hs: 210,13%;
|
|
|
+ // --gray-500-l: 61%;
|
|
|
+ // // 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, .grw-foldertree {
|
|
|
+ // @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, .grw-foldertree-triangle-btn {
|
|
|
+ // @include mixins-buttons.button-outline-svg-icon-variant(var(--secondary), $gray-200);
|
|
|
+ // }
|
|
|
+ // .btn-page-item-control {
|
|
|
+ // @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
|
|
|
+ // &: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;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // bookmarks
|
|
|
+ // .grw-folder-tree-container {
|
|
|
+ // .grw-drop-item-area , .grw-foldertree-item-container {
|
|
|
+ // .grw-accept-drop-item {
|
|
|
+ // border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%) !important;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .private-legacy-pages-link {
|
|
|
+ // &:hover {
|
|
|
+ // background: var(--bgcolor-list-hover);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .btn.btn-page-item-control {
|
|
|
+ // @include hsl-button.button-outline-variant(var(--gray-500), var(--gray-500), var(--secondary), transparent);
|
|
|
+ // &: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;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // Bookmark item on user page
|
|
|
+ // .grw-user-page-list-m {
|
|
|
+ // @include override-list-group-item($color-list, $bgcolor-sidebar-list-group, $color-list-hover, $bgcolor-list-hover, $color-list-active, $bgcolor-list-active);
|
|
|
+ // .grw-foldertree {
|
|
|
+ // @include override-list-group-item-for-pagetree(
|
|
|
+ // $body-color,
|
|
|
+ // hsl.lighten($body-bg, 8%),
|
|
|
+ // hsl.lighten($body-bg, 15%),
|
|
|
+ // hsl.darken($body-color, 15%),
|
|
|
+ // hsl.darken($body-color, 10%),
|
|
|
+ // hsl.lighten($body-bg, 18%),
|
|
|
+ // hsl.lighten($body-bg, 24%)
|
|
|
+ // );
|
|
|
+ // .grw-foldertree-triangle-btn {
|
|
|
+ // @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .grw-folder-tree-container {
|
|
|
+ // .grw-drop-item-area , .grw-foldertree-item-container {
|
|
|
+ // .grw-accept-drop-item {
|
|
|
+ // border-color: hsl.lighten(var($body-bg), 30%) !important;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // Bookmark dropdown menu
|
|
|
+ // .grw-bookmark-folder-dropdown {
|
|
|
+ // .grw-bookmark-folder-menu {
|
|
|
+ // .form-control{
|
|
|
+ // &:focus {
|
|
|
+ // color: $body-color
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .grw-bookmark-folder-menu-item {
|
|
|
+ // @include mixins-buttons.button-outline-svg-icon-variant($secondary, $gray-200);
|
|
|
+ // .grw-bookmark-folder-menu-item-title {
|
|
|
+ // color: $body-color
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /*
|
|
|
+ // * 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);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .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);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .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
|
|
|
+ // */
|
|
|
+
|
|
|
+ // .handsontable td {
|
|
|
+ // color: black;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // .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-comment-form .comment-form-main {
|
|
|
+ // &:before {
|
|
|
+ // border-right-color: var(--bgcolor-global);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /*
|
|
|
+ // * GROWI tags
|
|
|
+ // */
|
|
|
+ // .grw-tag-labels {
|
|
|
+ // .grw-tag-label {
|
|
|
+ // color: $color-tags;
|
|
|
+ // background-color: $bgcolor-tags;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // mark.rbt-highlight-text {
|
|
|
+ // color: var(--color-global);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // /*
|
|
|
+ // * 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 {
|
|
|
+ // background-color: hsl.lighten(var(--bgcolor-subnav),10%);
|
|
|
+ // }
|
|
|
}
|
Yuki Takei