new tabel style
AccessControlTabelView v2.0 by insanecake
Details
Authorinsanecake
LicenseNo License
Categorymis
Created
Updated
Size11 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
*может содержать следы арахиса и сельдерея
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name AccessControlTabelView v2.0
@namespace github.com/openstyles/stylus
@version 1.2.0
@description A new userstyle
@author insanecake@yandex.ru
==/UserStyle== */
@-moz-document regexp(".*ControlTabelView.*") {
:root {
--card-color: #0005;
--text-color: #ddd;
--text-color-inverted: #131313;
--zebra-color: #ffffff0a;
--tr-gradient: linear-gradient(90deg, hsla(205, 46%, 10%, 1) 0%, hsla(191, 28%, 23%, 1) 50%, hsla(207, 41%, 27%, 1) 100%);
--vacation-day: linear-gradient(90deg, #f9b16eb5 0%, #f68080b5 100%);
--selected-vacation-day: linear-gradient(90deg, #f9b16e 0%, #f68080 100%);
--current-day: linear-gradient(135deg, #667eea7d 0%, #764ba27d 100%);
--selected-day: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--button-gradient: linear-gradient(90deg, hsla(164, 38%, 18%, 1) 0%, hsl(158, 26%, 34%) 50%, hsla(164, 38%, 18%, 1) 100%);
}
html {
color: var(--text-color);
height: 100vh;
width: 100vw;
/* background-image: url(https://w.wallhaven.cc/full/kx/wallhaven-kx79w6.png); */
background-image: url(https://w.wallhaven.cc/full/m9/wallhaven-m9o92k.jpg);
background-position-x: center;
background-position-y: bottom;
background-size: cover;
overflow: hidden
}
body {
height: 100%;
background: none;
/* width: 1280px; */
margin: auto !important;
overflow-x: hidden;
overflow-y: auto;
display: flex;
justify-content: center;
}
body::-webkit-scrollbar-track
{
border-radius: 5px;
}
body::-webkit-scrollbar
{
width: 8px;
backdrop-filter: blur(15px);
background-color: var(--card-color);
}
body::-webkit-scrollbar-thumb
{
border-radius: 5px;
background-color: #ffffffdb;
}
#form1 {
display: flex;
}
table {
border-spacing: 0px;
}
table.tableForm {
/* height: 100% !important; */
width: 1280px !important;
background: none;
border: none;
display: flex;
}
table.tableForm tr {
height: 100%;
}
td {
padding: 0;
text-align: left;
border: none !important;
background: none;
}
.tableHeader1 {
background-color: transparent;
}
.textHeader1 {
visibility: hidden;
font-weight: 100
}
.toolbar {
border: none !important;
background: none !important;
padding: 0px !important;
}
#Menu2,
#Menu3 {
position: absolute;
display: flex;
height: 35px;
padding: 5px 0;
}
#Menu2 {
bottom: 25px;
left: 0px;
}
#Menu3 {
bottom: 60px;
left: 0px;
}
a.toolbarButtonDefaultStyleWithBorder {
font-size: 9pt !important;
border: none;
backdrop-filter: blur(15px);
display: flex;
align-items: center;
text-transform: uppercase;
color: #fff;
padding-left: 30px;
width: 170px;
background: var(--card-color);
}
a.toolbarButtonDefaultStyleWithBorder:hover {
background-position: right center;
}
#LogonUserInfoPanel {
position: absolute;
bottom: 10px;
left: 0px;
}
#LogonUserLabel {
font-size: 9pt !important;
border: none;
background: var(--card-color);
backdrop-filter: blur(15px);
display: flex;
align-items: center;
text-transform: uppercase;
color: #fff;
padding: 0px 20px;
height: 35px;
}
span.toolbarButtonDefaultStyleWithBorder {
display: flex;
border: none;
background: none;
padding: 0;
}
#CoworkersListPanel {
overflow: auto !important;
border: none;
background: none;
height: auto !important;
width: 220px !important;
/* padding-left: 5px; */
}
#viewListRegion {
border: none !important;
background: none !important;
/* padding-top: 5px; */
}
#DataList1 {
border: none;
}
#DataList1 td {
border: none !important;
background: none !important;
display: flex;
}
#DataList1 a {
text-decoration: none;
border-radius: 5px;
padding: 5px;
background: white;
background-image: var(--button-gradient);
transition: .5s;
background-size: 200% auto;
color: #fff;
width: 100%;
margin-bottom: 5px;
}
#DataList1 a:hover {
background-position: right center;
}
#CoworkerCardPanel {
width: 1040px;
border-radius: 5px;
padding: 10px;
margin-bottom: 5px;
background: var(--card-color);
backdrop-filter: blur(15px);
background-size: 200% auto;
}
#CoworkersFormView {
color: var(--text-color) !important;
width: 100% !important;
}
#dateFilterPanel {
width: 680px;
border-radius: 5px;
padding: 10px;
margin-bottom: 5px;
background: var(--card-color);
backdrop-filter: blur(15px);
background-size: 200% auto;
font-size: 10pt;
}
#dateFilterPanel span {
font-size: 10pt !important;
}
#dateFilterPanel select {
background: var(--button-gradient);
background-size: 200% auto;
transition: .5s;
border: none;
border-radius: 5px;
height: 30px;
color: var(--text-color);
cursor: pointer;
padding: 0 20px;
margin-left: 10px;
}
#dateFilterPanel select:hover {
background-position: right center;
}
#dateFilterPanel option {
color: var(--text-color-inverted)
}
#dateFilterPanel input[type="submit"] {
visibility: hidden;
background: var(--button-gradient);
background-size: 200% auto;
transition: .5s;
border: none;
border-radius: 5px;
height: 30px;
color: var(--text-color);
cursor: pointer;
padding: 0 20px;
margin-left: 10px;
}
#dateFilterPanel input[type="submit"]:hover {
background-position: right center;
}
#tabelPanel {
height: auto !important;
max-height: 620px;
overflow: auto !important;
background: var(--card-color);
border-radius: 5px
}
#tabelDataGrid {
border: none !important;
width: auto !important;
backdrop-filter: blur(15px);
}
#tabelDataGrid td {
border: none !important;
text-align: center;
}
#tabelDataGrid tr {
/* background: var(--tr-gradient) !important; */
background: none !important;
transition: .5s;
background-size: 200% auto !important;
}
#tabelDataGrid tr:nth-child(even) {
color: var(--text-color) !important;
background-color: var(--zebra-color) !important;
}
#tabelDataGrid tr[style="color:Coral;background-color:#CCFFCC;"] {
color: var(--text-color-inverted) !important;
background-image: var(--selected-vacation-day) !important;
}
#tabelDataGrid tr[style="color:Coral;background-color:White;"] {
color: var(--text-color-inverted) !important;
background-image: var(--vacation-day) !important;
}
#tabelDataGrid tr[style="color:Blue;background-color:#CCFFCC;"]{
color: var(--text-color) !important;
background-image: var(--selected-day) !important;
}
#tabelDataGrid tr[style="color:Blue;background-color:White;"] {
color: var(--text-color) !important;
background-image: var(--current-day) !important;
}
#tabelDataGrid tr[style="background-color:#CCFFCC;"] {
color: var(--text-color) !important;
background-image: var(--selected-day) !important;
}
#tabelDataGrid td[style="background-color:#ECE9D8;width:20px;"] {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><title>calendar-range-outline</title><path fill='white' d='M7 11H9V13H7V11M21 5V19C21 20.11 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H6V1H8V3H16V1H18V3H19C20.11 3 21 3.9 21 5M5 7H19V5H5V7M19 19V9H5V19H19M15 13H17V11H15V13M11 13H13V11H11V13Z' /></svg>") !important;
background-repeat: no-repeat !important;
background-size: contain !important;
opacity: 0.2;
transition: .5s;
}
#tabelDataGrid td[style="background-color:#ECE9D8;width:20px;"]:hover {
opacity: 1
}
#tabelDataGrid input {
opacity: 0;
}
#eventsPanel {
background: var(--card-color);
backdrop-filter: blur(15px);
width: auto !important;
height: 100% !important;
overflow: auto !important;
border: none;
border-radius: 5px;
margin-top: 5px;
padding: 10px 0;
}
#tableEventsHeaderLabel {
padding: 5px;
}
#EventsGridView {
border: none !important;
background: none !important;
width: 100% !important;
}
#EventsGridView tr {
border: none !important;
}
#EventsGridView tr:nth-child(even) {
background-color: var(--zebra-color) !important;
}
#EventsGridView th {
padding: 5px !important;
}
#EventsGridView td {
padding: 5px !important;
background: none !important;
}
#SupposedWorktimePanel {
position: relative;
top: -55px;
background: var(--card-color)...