Warning, /firebird/firebird-ng/src/styles.scss is written in an unsupported language. File is not indexed.
0001 /* You can add global styles to this file, and also import other style files */
0002 //@import 'phoenix-ui-components/theming';
0003
0004 @use '@angular/material' as mat;
0005 @include mat.core();
0006
0007 /* Определяем светлую и тёмную темы */
0008 $primary: mat.define-palette(mat.$teal-palette);
0009 $accent: mat.define-palette(mat.$cyan-palette);
0010 $warn: mat.define-palette(mat.$yellow-palette);
0011
0012 $colors: (
0013 color: (
0014 primary: $primary,
0015 accent: $accent,
0016 warn: $warn,
0017 ),
0018 );
0019
0020 $dark-theme: mat.define-dark-theme($colors);
0021 $light-theme: mat.define-light-theme($colors);
0022
0023 @include mat.core-theme($light-theme);
0024 @include mat.button-theme($light-theme);
0025 @include mat.all-component-themes($light-theme);
0026
0027 :root {
0028 --primary-color: #33899f;
0029 --secondary-color: #f1e833;
0030 --background-color: #ffffff;
0031 --secondary-background-color: #f5f5f5;
0032 --tertiary-background-color: #e6e6e6;
0033 --text-color: #333333;
0034 --secondary-text-color: #777777;
0035 --hover-text-color: #c5c5c5;
0036 --box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
0037 --scroll-color: #acacac;
0038 --icon-bg: rgba(0, 0, 0, 0.08);
0039 --icon-color: #000000;
0040 --icon-shadow: 0px 3px 6px rgba(0, 0, 0, 0.11);
0041 --accent-color: #00bcd4;
0042 --border-color: #c5c5c5;
0043 --active-icon-color: #1976d2;
0044
0045 --dat-primary-background: #f9f9f9;
0046 --dat-secondary-background: #efefef;
0047 --dat-tertiary-background: #e9e9e9;
0048 --dat-quaternary-background: #ffffff;
0049 --dat-border-color: #f0f0f0;
0050 }
0051
0052 /* Dark theme */
0053 [data-theme='dark'] {
0054 --background-color: #2e2e2e;
0055 --secondary-background-color: #292929;
0056 --tertiary-background-color: #3f3f3f;
0057 --text-color: white;
0058 --secondary-text-color: #dbdbdb;
0059 --hover-text-color: #c5c5c5;
0060 --box-shadow: 0px 0px 8px rgb(26, 26, 26);
0061 --scroll-color: #707070;
0062 --icon-bg: rgba(255, 255, 255, 0.18);
0063 --icon-color: #c3c3c3;
0064 --icon-shadow: 0px 4px 8px rgba(0, 0, 0, 0.22);
0065 --accent-color: #00bcd4;
0066 --border-color: #5c5c5c;
0067
0068 --dat-primary-background: #1a1a1a;
0069 --dat-secondary-background: #292929;
0070 --dat-tertiary-background: #363636;
0071 --dat-quaternary-background: #4d4d4d;
0072 --dat-border-color: #343434;
0073 transition: 1s;
0074
0075 @include mat.core-color($dark-theme);
0076 @include mat.button-color($dark-theme);
0077 @include mat.all-component-colors($dark-theme);
0078
0079 .mat-dialog-container {
0080 background: var(--secondary-background-color);
0081 }
0082 }
0083 .theme-text {
0084 color: var(--text-color) !important; /* Добавляем !important, чтобы перекрыть наследуемые стили */
0085 }
0086
0087 html,
0088 body {
0089 background-color: var(--background-color);
0090 }
0091
0092 /* Scroll bar styles */
0093 ::-webkit-scrollbar {
0094 width: 0.3em;
0095 height: 0.3em;
0096 }
0097
0098 ::-webkit-scrollbar-track {
0099 opacity: 0;
0100 }
0101
0102 ::-webkit-scrollbar-thumb {
0103 border-radius: 10px;
0104 background: var(--scroll-color);
0105 box-shadow: 0 0 6px rgba(0, 0, 0, 0.048);
0106 }
0107
0108 ::-webkit-scrollbar-corner {
0109 display: none;
0110 opacity: 0;
0111 }
0112
0113 .btn.btn-primary {
0114 border: none;
0115 background-color: var(--primary-color);
0116 }
0117
0118 [data-theme='dark'] .btn.btn-primary:hover,
0119 [data-theme='dark'] .btn.btn-primary:not(:disabled):not(.disabled):active {
0120 background-color: #0f5f74;
0121 }
0122
0123 [data-theme='light'] .btn.btn-primary:hover,
0124 [data-theme='light'] .btn.btn-primary:not(:disabled):not(.disabled):active {
0125 background-color: #145d7b;
0126 }
0127
0128 .theme-button {
0129 background-color: var(--button-background) !important;
0130 color: var(--button-text-color) !important;
0131 transition: background-color 0.3s, color 0.3s;
0132 }
0133
0134 [data-theme='dark'] .theme-button:hover {
0135 background-color: #0f5f74;
0136 }
0137
0138 [data-theme='light'] .theme-button:hover {
0139 background-color: #145d7b;
0140 }
0141
0142 select {
0143 border-radius: 30px;
0144 padding: 0.125rem 0.25rem;
0145 background-color: var(--tertiary-background-color);
0146 color: var(--secondary-text-color);
0147 border: none;
0148 }
0149
0150 label {
0151 margin: 0;
0152 }
0153
0154 #eventDisplay {
0155 height: 100vh;
0156 overflow: hidden;
0157 }
0158
0159 .form-control,
0160 .form-control:focus {
0161 color: var(--text-color);
0162 background-color: var(--tertiary-background-color);
0163 border: 1px solid var(--border-color);
0164 }
0165
0166
0167
