koel/resources/assets/sass/partials/_shared.scss

425 lines
7.2 KiB
SCSS
Raw Normal View History

*,
*::before,
*::after {
2022-04-15 14:24:30 +00:00
box-sizing: border-box;
outline: none;
}
2024-01-24 22:39:47 +00:00
h1, h2, h3, h4, h5, h6, blockquote {
text-wrap: balance;
}
2022-04-15 14:24:30 +00:00
*::marker {
display: none !important;
}
2023-04-28 14:08:54 +00:00
:root {
color-scheme: dark;
}
::placeholder {
2023-08-20 15:25:32 +00:00
color: rgba(0, 0, 0, .5);
2023-04-28 14:08:54 +00:00
}
body,
html {
2022-04-15 14:24:30 +00:00
@include themed-background();
color: var(--color-text-primary);
font-family: var(--font-family);
font-size: 13px;
line-height: 1.5rem;
font-weight: var(--font-weight-light);
overflow: hidden;
}
2024-02-25 19:32:53 +00:00
input {
height: 32px;
}
input,
select,
button,
textarea,
.btn {
2022-07-15 07:23:55 +00:00
appearance: none;
2022-04-15 14:24:30 +00:00
border: 0;
outline: 0;
font-family: var(--font-family);
font-size: 1rem;
font-weight: var(--font-weight-light);
padding: .5rem .6rem;
2024-02-25 19:32:53 +00:00
border-radius: var(--border-radius-input);
2022-04-15 14:24:30 +00:00
margin: 0;
2023-08-20 12:05:13 +00:00
background: var(--color-bg-input);
color: var(--color-input);
2022-04-15 14:24:30 +00:00
&:required,
&:invalid {
2022-04-15 14:24:30 +00:00
box-shadow: none;
}
&[type="search"] {
border-radius: 12px;
height: 24px;
padding: 0 .5rem;
}
&[type="text"] {
display: block;
}
2023-08-20 22:35:58 +00:00
&[disabled] {
opacity: .5;
cursor: not-allowed;
}
2022-07-04 15:57:08 +00:00
&:focus {
outline: none !important;
}
&::-moz-focus-inner {
border: 0 !important;
}
2022-04-15 14:24:30 +00:00
}
button,
[role=button] {
2022-04-15 14:24:30 +00:00
cursor: pointer;
background: transparent;
padding: 0;
border: 0;
2022-10-13 15:18:47 +00:00
color: currentColor;
2022-04-15 14:24:30 +00:00
}
select {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAA4UlEQVRYhe3WMQ6CMABA0Y9xcHDVlBM5OXsC4xXcvImzg/EQTNykHZx0JcHFxkKQtpQGhv5OtCG8pElLVlMzdYupAZAQvxJClxC6WSCW5kMu8jNwAVYRvlUBV6nkqb2QmSdmLvI3sI4AMNtIJZ/mRHs77pEBRRvQhTgCj0iAEth3LTQQUskKOESAlMBOKvmyIiJBegGdiJEhVsBfxEgQJ0AvIhDiDLAiBkK8AE4IT4g3wBnhCBkE8EJYIIMB3ogW5PadKkIAANQBQwixDXlfj8YtOlWz+KlJCF1C6BJCNwvEB8RnttABpb3tAAAAAElFTkSuQmCC);
background-size: 12px;
background-position: calc(100% - 8px) 50%;
padding-right: 26px;
background-repeat: no-repeat;
}
.hidden {
2022-07-15 07:23:55 +00:00
display: none !important;
2022-04-15 14:24:30 +00:00
}
input[type="checkbox"] {
2022-07-15 07:23:55 +00:00
border-radius: 2px;
2022-04-15 14:24:30 +00:00
cursor: pointer;
2022-07-15 07:23:55 +00:00
height: 15px;
2022-04-15 14:24:30 +00:00
margin: -4px 4px 0 0;
2022-07-04 15:57:08 +00:00
padding: 0 !important;
2022-04-15 14:24:30 +00:00
vertical-align: middle;
2022-07-15 07:23:55 +00:00
width: 15px;
2022-04-15 14:24:30 +00:00
background: var(--color-text-primary);
}
a {
text-decoration: none;
cursor: pointer;
&:link,
&:visited {
2022-04-15 14:24:30 +00:00
color: var(--color-text-secondary);
}
&:hover,
&:focus {
color: var(--color-accent);
2022-04-15 14:24:30 +00:00
}
}
.ir {
color: transparent;
font: 0/0 serif;
}
.control {
cursor: pointer;
color: var(--color-text-secondary);
&:hover {
color: var(--color-text-primary);
}
}
p {
line-height: 1.5rem;
}
em {
font-style: italic;
}
.help {
opacity: .7;
font-size: .9rem;
line-height: 1.3rem;
}
label {
font-size: 1.1rem;
display: block;
cursor: pointer;
2022-04-15 14:24:30 +00:00
&.small {
font-size: 1rem;
}
}
2024-02-24 15:37:01 +00:00
.pointer-events-none {
pointer-events: none;
}
2022-04-15 14:24:30 +00:00
.tabs {
display: flex;
flex-direction: column;
min-height: 100%;
position: relative;
2022-04-15 14:24:30 +00:00
[role=tablist] {
border-bottom: 2px solid rgba(255, 255, 255, .1);
display: flex;
[role=tab] {
padding: .7rem 1.3rem;
margin-right: 0.2rem;
border-radius: 0;
opacity: .5;
background: rgba(255, 255, 255, .05);
text-transform: uppercase;
color: var(--color-text-secondary);
&:hover {
transition: .3s;
background: rgba(255, 255, 255, .1);
}
&:first-child {
margin-left: 1.25rem;
}
&[aria-selected=true] {
color: var(--color-text-primary);
background: rgba(255, 255, 255, .1);
opacity: 1;
}
}
}
.panes {
padding: 1.25rem;
flex: 1;
}
}
2022-12-30 09:35:15 +00:00
.form-row + .form-row {
2022-04-15 14:24:30 +00:00
margin-top: 1.125rem;
position: relative;
}
.form-row.cols {
display: flex;
place-content: space-between;
gap: 1rem;
2022-12-30 09:35:15 +00:00
> * {
flex: 1;
}
}
.form-row input:not([type="checkbox"]),
.form-row select {
2022-07-22 16:15:30 +00:00
margin-top: .7rem;
display: block;
height: 32px;
}
2022-04-15 14:24:30 +00:00
.font-size- {
&0 {
font-size: 0;
}
2024-02-25 19:32:53 +00:00
&1 {
font-size: 1rem;
}
&1\.5 {
font-size: 1.5rem;
}
&2 {
font-size: 2rem;
}
2022-04-15 14:24:30 +00:00
}
.text- {
2022-07-15 07:23:55 +00:00
&primary {
2022-04-15 14:24:30 +00:00
color: var(--color-text-primary) !important;
}
&secondary {
color: var(--color-text-secondary) !important;
}
2022-07-15 07:23:55 +00:00
&highlight {
2022-04-15 14:24:30 +00:00
color: var(--color-highlight) !important;
}
&maroon {
color: var(--color-maroon) !important;
}
&red {
color: var(--color-red) !important;
}
&blue {
color: var(--color-blue) !important;
}
2022-07-15 07:23:55 +00:00
&green {
color: var(--color-green) !important;
}
2022-04-15 14:24:30 +00:00
&uppercase {
text-transform: uppercase !important;
}
2022-07-16 15:44:45 +00:00
&thin {
font-weight: var(--font-weight-thin) !important;
}
2022-10-21 20:06:43 +00:00
&normal {
font-weight: var(--font-weight-normal) !important;
}
&light {
font-weight: var(--font-weight-light) !important;
}
2022-10-21 20:06:43 +00:00
&bold {
font-weight: var(--font-weight-bold) !important;
}
2022-04-15 14:24:30 +00:00
}
.bg- {
&primary {
background-color: var(--color-bg-primary) !important;
}
&secondary {
background-color: var(--color-bg-secondary) !important;
}
}
2022-04-15 14:24:30 +00:00
.d- {
&block {
display: block;
}
&inline {
display: block;
}
&inline-block {
display: inline-block;
}
&flex {
display: flex;
}
&inline-flex {
display: inline-block;
}
&grid {
display: grid;
}
&inline-grid {
display: inline-grid;
}
}
2022-04-15 17:00:08 +00:00
.context-menu,
.submenu,
menu {
2022-04-15 17:00:08 +00:00
@include context-menu();
position: fixed;
2022-12-30 09:35:15 +00:00
@keyframes subMenuHoverHelp {
0% {
height: 500%;
}
99% {
height: 500%;
}
100% {
height: 0;
}
}
2022-04-15 17:00:08 +00:00
li {
list-style: none;
2022-04-15 17:00:08 +00:00
position: relative;
padding: 4px 12px;
cursor: default;
white-space: nowrap;
&:hover {
background: var(--color-highlight);
color: var(--color-text-primary);
}
&.separator {
pointer-events: none;
padding: 0;
2022-04-15 17:00:08 +00:00
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
&.has-sub {
2022-12-30 09:35:15 +00:00
padding-right: 30px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 30 30' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cpolygon points='-2.303673 -19.980561 12.696327 5.999439 -17.303673 5.999439 -2.303673 -19.980561' transform='matrix(0 1-1 0 5.999439 17.303673)' fill='%23fff' stroke-width='0'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 10px;
2022-04-15 17:00:08 +00:00
}
}
.submenu {
position: absolute;
display: none;
left: 100%;
top: 0;
}
}
:root {
--fade-size: 3rem;
}
.fade-top {
-webkit-mask-image: linear-gradient(to bottom, transparent, black var(--fade-size));
mask-image: linear-gradient(to bottom, transparent, black var(--fade-size));
}
.fade-bottom {
-webkit-mask-image: linear-gradient(to top, transparent, black var(--fade-size));
mask-image: linear-gradient(to top, transparent, black var(--fade-size));
}
.fade-top.fade-bottom {
-webkit-mask: linear-gradient(to bottom, transparent, black var(--fade-size)) top,
2022-12-30 09:35:15 +00:00
linear-gradient(to top, transparent, black var(--fade-size)) bottom;
-webkit-mask-size: 100% 51%;
-webkit-mask-repeat: no-repeat;
mask: linear-gradient(to bottom, transparent, black var(--fade-size)) top,
2022-12-30 09:35:15 +00:00
linear-gradient(to top, transparent, black var(--fade-size)) bottom;
mask-size: 100% 51%;
mask-repeat: no-repeat;
}